# Aides DOM : ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM et APPEARANCE

> Lisez des attributs data, demandez si un élément est affiché ou à l'écran, ajoutez des styles remplaçables, déplacez des éléments dans leur parent, mettez à jour une liste sans la redessiner et réglez les couleurs et le mode sombre de la page.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 13ecad70fa39c46f01850fdcc66ab0282133d735c644912e3fc3228d32f93606
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- `ATTRD(element or event, [name])` lit `data-<name>` (par défaut `data-id`) d'un élément, d'un objet jQuery ou de l'élément d'un événement ; pour un objet simple il lit la propriété.
- `HIDDEN(element)` vaut `true` quand l'élément n'est pas affiché (lui ou un parent est en `display: none` ; **un élément enfant direct du body est toujours signalé comme non caché**, la vérification commence par son parent) ; `VISIBLE(element, [threshold], [mode])` vaut `true` quand il est dans la partie visible de la fenêtre (`mode` `'above'` ou `'below'` demande où il se trouve quand il ne l'est pas). `NOTFOCUSED()` vaut `true` quand l'onglet du navigateur est en arrière-plan et `inDOM(element)` est vrai tant que l'élément est dans le document.
- `WIDTH([element])` renvoie la classe de taille de la largeur de l'élément (par défaut : la fenêtre) : `'xs'`, `'sm'`, `'md'` ou `'lg'` (les limites sont dans `DEF.devices`). `WW` et `WH` sont la taille de la fenêtre ; `$W` est l'objet jQuery de la fenêtre ; `SCROLLBARWIDTH()` est la largeur qu'occupe une barre de défilement.
- `SCROLLBAR(element, [options])` enveloppe un élément avec une barre de défilement personnalisée et le renvoie ; `scrollbar.resize()` la recalcule après un changement du contenu.
- `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` et `isIE` sont des booléens sur le navigateur, définis au démarrage de la page.
- `STYLE(css, [id], [selector])` ajoute un `<style>` au head. Avec un `id`, le style est remplacé quand vous l'appelez de nouveau avec le même id ; avec un `selector`, chaque règle en est enveloppée (`'.a { }'` devient `'#p .a{ }'`).
- `NODEINDEXOF(element)` est la position de l'élément parmi ses frères, `NODEINSERT(element, reference, [before])` déplace un élément après (ou avant) un autre et `NODEMOVE(element, [up])` le déplace d'une place vers le bas (ou le haut).
- `DIFFDOM(parent, selector, html, [attribute])` rend les enfants de `parent` qui correspondent à `selector` identiques à ceux de `html`, **sans redessiner** ceux qui sont déjà là : un élément est le même quand son `attribute` a la même valeur (sans `attribute`, quand tout son HTML est identique). Il supprime ceux qui ne sont pas dans la nouvelle liste, ajoute les nouveaux et les met dans l'ordre de `html`, et renvoie `{ add, upd, rem }`. Le contenu d'un élément conservé n'est **pas** remplacé.
- `APPEARANCE({ color, dark, large, <name>: value })` règle l'apparence de la page : `dark` et `large` basculent les classes `ui-dark` et `ui-large` du body, `color` et chaque autre clé deviennent des variables CSS de `:root` (`--color`, et `--rgb` est calculé à partir de la couleur) dans un unique `<style id="cssappearance">`.
- `ENVIRONMENT(name, version, language, [env])` définit le nom qui préfixe les clés dans `localStorage`, la version et la langue (`DEF.localstorage`, `DEF.version`, `DEF.language`) et, avec `env`, plusieurs valeurs `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>
```
