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

> Leggi attributi data, chiedi se un elemento è mostrato o sullo schermo, aggiungi stili sostituibili, sposta elementi nel loro genitore, aggiorna una lista senza ridisegnarla e imposta i colori e la modalità scura della pagina.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 0937d0f9953c4a2110cee684b7484fb5a4eb918105b607a9478f4f6c3ed8724f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- `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()`.

```html 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>
```
