Helper per il DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM e APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Eseguita con jComponent 20

ATTRD(element or event, [name]) legge data-name (predefinito data-id) di un elemento, di un oggetto jQuery o dell'elemento di un evento; per un oggetto semplice legge la proprietà.
HIDDEN(element) è true quando l'elemento non è mostrato (esso o un genitore ha display: none; un elemento figlio diretto del body è sempre segnalato come non nascosto, il controllo parte dal suo genitore); VISIBLE(element, [threshold], [mode]) è true quando è dentro la parte visibile della finestra (mode 'above' o 'below' chiede dove si trova quando non lo è). NOTFOCUSED() è true quando la scheda del browser è in background e inDOM(element) è vero finché l'elemento è nel documento.
WIDTH([element]) restituisce la classe di dimensione della larghezza dell'elemento (predefinito: la finestra): 'xs', 'sm', 'md' o 'lg' (i limiti sono in DEF.devices). WW e WH sono la dimensione della finestra; $W è l'oggetto jQuery della finestra; SCROLLBARWIDTH() è la larghezza che occupa una barra di scorrimento.
SCROLLBAR(element, [options]) avvolge un elemento con una barra di scorrimento personalizzata e lo restituisce; scrollbar.resize() la ricalcola dopo che il contenuto è cambiato.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE e isIE sono booleani sul browser, impostati all'avvio della pagina.
STYLE(css, [id], [selector]) aggiunge uno style all'head. Con un id lo stile viene sostituito quando lo richiami con lo stesso id; con un selector ogni regola ne è avvolta ('.a { }' diventa '#p .a{ }').
NODEINDEXOF(element) è la posizione dell'elemento tra i suoi fratelli, NODEINSERT(element, reference, [before]) sposta un elemento dopo (o prima di) un altro e NODEMOVE(element, [up]) lo sposta di un posto in giù (o in su).
DIFFDOM(parent, selector, html, [attribute]) rende i figli di parent che corrispondono a selector uguali a quelli in html, senza ridisegnare quelli già presenti: un elemento è lo stesso quando il suo attribute ha lo stesso valore (senza attribute, quando tutto il suo HTML è uguale). Rimuove quelli che non sono nella nuova lista, aggiunge i nuovi e li mette nell'ordine di html, e restituisce { add, upd, rem }. Il contenuto di un elemento mantenuto non viene sostituito.
APPEARANCE({ color, dark, large, <name>: value }) imposta l'aspetto della pagina: dark e large attivano le classi ui-dark e ui-large del body, color e ogni altra chiave diventano variabili CSS di :root (--color, e --rgb è calcolato dal colore) in un unico <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) imposta il nome che prefissa le chiavi in localStorage, la versione e la lingua (DEF.localstorage, DEF.version, DEF.language) e, con env, diversi valori di 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>

Provalo nel tuo browser

Modifica l'esempio ed eseguilo. Gira in un frame isolato del tuo browser; nulla viene inviato al nostro server.

Codice

Anteprima