# Pomocníci DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM a APPEARANCE

> Čtěte atributy data, zjišťujte, zda je element zobrazen nebo na obrazovce, přidávejte styly, které lze nahradit, přesouvejte elementy v rodiči, aktualizujte seznam bez překreslení a nastavte barvy a tmavý režim stránky.

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

- `ATTRD(element or event, [name])` čte `data-<name>` (výchozí `data-id`) elementu, objektu jQuery nebo elementu události; u jednoduchého objektu čte vlastnost.
- `HIDDEN(element)` je `true`, když element není zobrazen (on nebo rodič má `display: none`; **element, který je přímým potomkem body, se vždy hlásí jako neskrytý**, kontrola začíná od jeho rodiče); `VISIBLE(element, [threshold], [mode])` je `true`, když je ve viditelné části okna (`mode` `'above'` nebo `'below'` se ptá, kde je, když není). `NOTFOCUSED()` je `true`, když je karta prohlížeče na pozadí, a `inDOM(element)` je pravda, dokud je element v dokumentu.
- `WIDTH([element])` vrátí třídu velikosti šířky elementu (výchozí okna): `'xs'`, `'sm'`, `'md'` nebo `'lg'` (hranice jsou v `DEF.devices`). `WW` a `WH` jsou velikost okna; `$W` je objekt jQuery okna; `SCROLLBARWIDTH()` je šířka, kterou zabírá posuvník.
- `SCROLLBAR(element, [options])` obalí element vlastním posuvníkem a vrátí jej; `scrollbar.resize()` jej přepočítá po změně obsahu.
- `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` a `isIE` jsou booleany o prohlížeči, nastavené při startu stránky.
- `STYLE(css, [id], [selector])` přidá `<style>` do head. S `id` se styl nahradí, když jej zavoláte znovu se stejným id; se `selector` je každé pravidlo jím obaleno (`'.a { }'` se stane `'#p .a{ }'`).
- `NODEINDEXOF(element)` je pozice elementu mezi sourozenci, `NODEINSERT(element, reference, [before])` přesune element za (nebo před) jiný a `NODEMOVE(element, [up])` jej přesune o jedno místo dolů (nebo nahoru).
- `DIFFDOM(parent, selector, html, [attribute])` udělá potomky `parent`, kteří odpovídají `selector`, stejnými jako ty v `html`, **bez překreslení** těch, které tam už jsou: element je tentýž, když jeho `attribute` má stejnou hodnotu (bez `attribute`, když je celé jeho HTML stejné). Odstraní ty, které nejsou v novém seznamu, přidá nové a seřadí je podle `html` a vrátí `{ add, upd, rem }`. Obsah ponechaného elementu se **nenahrazuje**.
- `APPEARANCE({ color, dark, large, <name>: value })` nastaví vzhled stránky: `dark` a `large` přepínají třídy `ui-dark` a `ui-large` na body, `color` a každý další klíč se stanou CSS proměnnými `:root` (`--color`, a `--rgb` se vypočítá z barvy) v jednom `<style id="cssappearance">`.
- `ENVIRONMENT(name, version, language, [env])` nastaví název, který předsazuje klíče v `localStorage`, verzi a jazyk (`DEF.localstorage`, `DEF.version`, `DEF.language`) a s `env` několik hodnot `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>
```
