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

> Čítajte atribúty data, zisťujte, či je element zobrazený alebo na obrazovke, pridávajte štýly, ktoré môžete nahradiť, presúvajte elementy v rodičovi, aktualizujte zoznam bez prekreslenia a nastavte farby a tmavý režim stránky.

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

- `ATTRD(element or event, [name])` číta `data-<name>` (predvolene `data-id`) elementu, objektu jQuery alebo elementu udalosti; pri jednoduchom objekte číta vlastnosť.
- `HIDDEN(element)` je `true`, keď element nie je zobrazený (on alebo rodič má `display: none`; **element, ktorý je priamym potomkom body, sa vždy hlási ako neskrytý**, kontrola začína od jeho rodiča); `VISIBLE(element, [threshold], [mode])` je `true`, keď je vo viditeľnej časti okna (`mode` `'above'` alebo `'below'` sa pýta, kde je, keď nie je). `NOTFOCUSED()` je `true`, keď je karta prehliadača na pozadí, a `inDOM(element)` je pravda, kým je element v dokumente.
- `WIDTH([element])` vráti triedu veľkosti šírky elementu (predvolene okna): `'xs'`, `'sm'`, `'md'` alebo `'lg'` (hranice sú v `DEF.devices`). `WW` a `WH` sú veľkosť okna; `$W` je objekt jQuery okna; `SCROLLBARWIDTH()` je šírka, ktorú zaberá posuvník.
- `SCROLLBAR(element, [options])` obalí element vlastným posuvníkom a vráti ho; `scrollbar.resize()` ho prepočíta po zmene obsahu.
- `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` a `isIE` sú booleany o prehliadači, nastavené pri štarte stránky.
- `STYLE(css, [id], [selector])` pridá `<style>` do head. S `id` sa štýl nahradí, keď ho zavoláte znova s rovnakým id; so `selector` je každé pravidlo ním obalené (`'.a { }'` sa stane `'#p .a{ }'`).
- `NODEINDEXOF(element)` je pozícia elementu medzi súrodencami, `NODEINSERT(element, reference, [before])` presunie element za (alebo pred) iný a `NODEMOVE(element, [up])` ho presunie o jedno miesto nadol (alebo nahor).
- `DIFFDOM(parent, selector, html, [attribute])` urobí potomkov `parent`, ktorí zodpovedajú `selector`, rovnakými ako tie v `html`, **bez prekreslenia** tých, ktoré tam už sú: element je ten istý, keď jeho `attribute` má rovnakú hodnotu (bez `attribute`, keď je celé jeho HTML rovnaké). Odstráni tie, ktoré nie sú v novom zozname, pridá nové a zoradí ich podľa `html` a vráti `{ add, upd, rem }`. Obsah ponechaného elementu sa **nenahrádza**.
- `APPEARANCE({ color, dark, large, <name>: value })` nastaví vzhľad stránky: `dark` a `large` prepínajú triedy `ui-dark` a `ui-large` na body, `color` a každý ďalší kľúč sa stanú CSS premennými `:root` (`--color`, a `--rgb` sa vypočíta z farby) v jednom `<style id="cssappearance">`.
- `ENVIRONMENT(name, version, language, [env])` nastaví názov, ktorý predsadzuje kľúče v `localStorage`, verziu a jazyk (`DEF.localstorage`, `DEF.version`, `DEF.language`) a s `env` niekoľko hodnôt `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>
```
