Ajudantes do DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM e APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Executada com jComponent 20

ATTRD(element or event, [name]) lê data-name (por omissão data-id) de um elemento, de um objeto jQuery ou do elemento de um evento; num objeto simples lê a propriedade.
HIDDEN(element) é true quando o elemento não é mostrado (ele ou um pai tem display: none; um elemento filho direto do body é sempre indicado como não oculto, a verificação começa no seu pai); VISIBLE(element, [threshold], [mode]) é true quando está dentro da parte visível da janela (mode 'above' ou 'below' pergunta onde está quando não está). NOTFOCUSED() é true quando o separador do navegador está em segundo plano e inDOM(element) é verdadeiro enquanto o elemento está no documento.
WIDTH([element]) devolve a classe de tamanho da largura do elemento (por omissão: a janela): 'xs', 'sm', 'md' ou 'lg' (os limites estão em DEF.devices). WW e WH são o tamanho da janela; $W é o objeto jQuery da janela; SCROLLBARWIDTH() é a largura que ocupa uma barra de deslocamento.
SCROLLBAR(element, [options]) envolve um elemento com uma barra de deslocamento personalizada e devolve-o; scrollbar.resize() recalcula-a depois de o conteúdo mudar.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE e isIE são booleanos sobre o navegador, definidos quando a página arranca.
STYLE(css, [id], [selector]) acrescenta um style ao head. Com um id o estilo é substituído quando o chama de novo com o mesmo id; com um selector cada regra fica envolvida por ele ('.a { }' passa a '#p .a{ }').
NODEINDEXOF(element) é a posição do elemento entre os seus irmãos, NODEINSERT(element, reference, [before]) move um elemento para depois de (ou antes de) outro e NODEMOVE(element, [up]) move-o um lugar para baixo (ou para cima).
DIFFDOM(parent, selector, html, [attribute]) faz com que os filhos de parent que correspondem a selector fiquem iguais aos de html, sem redesenhar os que já lá estão: um elemento é o mesmo quando o seu attribute tem o mesmo valor (sem attribute, quando todo o seu HTML é igual). Remove os que não estão na nova lista, acrescenta os novos e coloca-os na ordem de html, e devolve { add, upd, rem }. O conteúdo de um elemento que se mantém não é substituído.
APPEARANCE({ color, dark, large, <name>: value }) define o aspeto da página: dark e large ativam as classes ui-dark e ui-large do body, color e cada outra chave passam a variáveis CSS de :root (--color, e --rgb é calculado a partir da cor) num único <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) define o nome que prefixa as chaves do localStorage, a versão e o idioma (DEF.localstorage, DEF.version, DEF.language) e, com env, vários valores de ENV().

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<p id="p">A paragraph</p>
	<div id="shown" style="width:300px;height:40px">Shown</div>
	<div id="hidden" style="display:none"><span id="inside">Inside</span></div>
	<div id="far" style="margin-top:3000px">Far away</div>
	<div id="box" style="width:200px;height:50px;overflow:auto"><div style="height:300px">tall</div></div>
	<ul id="list"><li id="a" data-id="a">a</li><li id="b" data-id="b">b</li><li id="c" data-id="c">c</li></ul>
	<ul id="diff"><li data-id="1">one</li><li data-id="2">two</li></ul>
</body>
</html>

Experimente no seu navegador

Edite o exemplo e execute-o. Corre numa moldura isolada do seu navegador; nada é enviado para o nosso servidor.

Código

Pré-visualização