Ayudantes del DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM y APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Ejecutada con jComponent 20

ATTRD(element or event, [name]) lee data-name (por defecto data-id) de un elemento, un objeto jQuery o el elemento de un evento; en un objeto simple lee la propiedad.
HIDDEN(element) es true cuando el elemento no se muestra (él o un padre tiene display: none; un elemento que es hijo directo del body se considera siempre no oculto, la comprobación empieza por su padre); VISIBLE(element, [threshold], [mode]) es true cuando está dentro de la parte visible de la ventana (mode 'above' o 'below' pregunta dónde está cuando no lo está). NOTFOCUSED() es true cuando la pestaña del navegador está en segundo plano e inDOM(element) es verdadero mientras el elemento está en el documento.
WIDTH([element]) devuelve la clase de tamaño del ancho del elemento (por defecto: la ventana): 'xs', 'sm', 'md' o 'lg' (los límites están en DEF.devices). WW y WH son el tamaño de la ventana; $W es el objeto jQuery de la ventana; SCROLLBARWIDTH() es el ancho que ocupa una barra de desplazamiento.
SCROLLBAR(element, [options]) envuelve un elemento con una barra de desplazamiento personalizada y lo devuelve; scrollbar.resize() la recalcula después de que cambie el contenido.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE e isIE son booleanos sobre el navegador, establecidos cuando la página arranca.
STYLE(css, [id], [selector]) añade un style al head. Con un id el estilo se reemplaza cuando lo llamas de nuevo con el mismo id; con un selector cada regla queda envuelta por él ('.a { }' pasa a '#p .a{ }').
NODEINDEXOF(element) es la posición del elemento entre sus hermanos, NODEINSERT(element, reference, [before]) mueve un elemento después de (o antes de) otro y NODEMOVE(element, [up]) lo mueve un lugar hacia abajo (o hacia arriba).
DIFFDOM(parent, selector, html, [attribute]) hace que los hijos de parent que coinciden con selector sean iguales a los de html, sin redibujar los que ya están: un elemento es el mismo cuando su attribute tiene el mismo valor (sin attribute, cuando todo su HTML es igual). Elimina los que no están en la nueva lista, añade los nuevos y los pone en el orden de html, y devuelve { add, upd, rem }. El contenido de un elemento que se conserva no se reemplaza.
APPEARANCE({ color, dark, large, <name>: value }) define el aspecto de la página: dark y large activan las clases ui-dark y ui-large del body, color y cada otra clave se convierten en variables CSS de :root (--color, y --rgb se calcula a partir del color) en un único <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) define el nombre que prefija las claves de localStorage, la versión y el idioma (DEF.localstorage, DEF.version, DEF.language) y, con env, varios 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>

Pruébalo en tu navegador

Edita el ejemplo y ejecútalo. Se ejecuta en un marco aislado de tu navegador; no se envía nada a nuestro servidor.

Código

Vista previa