# Pomocniki DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM i APPEARANCE

> Czytaj atrybuty data, pytaj, czy element jest pokazany lub na ekranie, dodawaj style, które można zastąpić, przesuwaj elementy w rodzicu, aktualizuj listę bez ponownego rysowania i ustawiaj kolory oraz tryb ciemny strony.

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

- `ATTRD(element or event, [name])` czyta `data-<name>` (domyślnie `data-id`) elementu, obiektu jQuery lub elementu zdarzenia; dla zwykłego obiektu czyta właściwość.
- `HIDDEN(element)` to `true`, gdy element nie jest pokazany (on lub rodzic ma `display: none`; **element będący bezpośrednim dzieckiem body jest zawsze zgłaszany jako nieukryty**, sprawdzanie zaczyna się od jego rodzica); `VISIBLE(element, [threshold], [mode])` to `true`, gdy jest w widocznej części okna (`mode` `'above'` lub `'below'` pyta, gdzie jest, gdy nie jest). `NOTFOCUSED()` to `true`, gdy karta przeglądarki jest w tle, a `inDOM(element)` jest prawdą, dopóki element jest w dokumencie.
- `WIDTH([element])` zwraca klasę rozmiaru szerokości elementu (domyślnie okna): `'xs'`, `'sm'`, `'md'` lub `'lg'` (granice są w `DEF.devices`). `WW` i `WH` to rozmiar okna; `$W` to obiekt jQuery okna; `SCROLLBARWIDTH()` to szerokość, jaką zajmuje pasek przewijania.
- `SCROLLBAR(element, [options])` opakowuje element własnym paskiem przewijania i go zwraca; `scrollbar.resize()` przelicza go po zmianie zawartości.
- `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` i `isIE` to wartości logiczne o przeglądarce, ustawiane przy starcie strony.
- `STYLE(css, [id], [selector])` dodaje `<style>` do head. Z `id` styl jest zastępowany, gdy wywołasz go ponownie z tym samym id; z `selector` każda reguła jest nim opakowana (`'.a { }'` staje się `'#p .a{ }'`).
- `NODEINDEXOF(element)` to pozycja elementu wśród rodzeństwa, `NODEINSERT(element, reference, [before])` przenosi element za (lub przed) inny, a `NODEMOVE(element, [up])` przesuwa go o jedno miejsce w dół (lub w górę).
- `DIFFDOM(parent, selector, html, [attribute])` sprawia, że dzieci `parent` pasujące do `selector` są takie same jak te w `html`, **bez ponownego rysowania** tych, które już są: element jest tym samym, gdy jego `attribute` ma tę samą wartość (bez `attribute`, gdy cały jego HTML jest taki sam). Usuwa te, których nie ma na nowej liście, dodaje nowe i ustawia je w kolejności `html`, i zwraca `{ add, upd, rem }`. Zawartość zachowanego elementu **nie** jest zastępowana.
- `APPEARANCE({ color, dark, large, <name>: value })` ustawia wygląd strony: `dark` i `large` przełączają klasy `ui-dark` i `ui-large` body, `color` i każdy inny klucz stają się zmiennymi CSS `:root` (`--color`, a `--rgb` jest liczone z koloru) w jednym `<style id="cssappearance">`.
- `ENVIRONMENT(name, version, language, [env])` ustawia nazwę będącą prefiksem kluczy w `localStorage`, wersję i język (`DEF.localstorage`, `DEF.version`, `DEF.language`) i, z `env`, kilka wartości `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>
```
