# DOM помощници: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM и APPEARANCE

> Четете data атрибути, питайте дали елемент е показан или на екрана, добавяйте стилове, които можете да замените, местете елементи в техния родител, обновявайте списък без прерисуване и задавайте цветовете и тъмния режим на страницата.

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

- `ATTRD(element or event, [name])` чете `data-<name>` (по подразбиране `data-id`) на елемент, jQuery обект или елемента на събитие; за обикновен обект чете свойството.
- `HIDDEN(element)` е `true`, когато елементът не е показан (той или родител има `display: none`; **елемент, който е пряко дете на body, винаги се отчита като нескрит**, проверката започва от неговия родител); `VISIBLE(element, [threshold], [mode])` е `true`, когато е във видимата част на прозореца (`mode` `'above'` или `'below'` пита къде е, когато не е). `NOTFOCUSED()` е `true`, когато разделът на браузъра е на заден план, а `inDOM(element)` е истина, докато елементът е в документа.
- `WIDTH([element])` връща класа на размера на ширината на елемента (по подразбиране: прозореца): `'xs'`, `'sm'`, `'md'` или `'lg'` (границите са в `DEF.devices`). `WW` и `WH` са размерът на прозореца; `$W` е jQuery обектът на прозореца; `SCROLLBARWIDTH()` е ширината, която заема лентата за превъртане.
- `SCROLLBAR(element, [options])` обвива елемент със собствена лента за превъртане и го връща; `scrollbar.resize()` я преизчислява, след като съдържанието се е променило.
- `isTOUCH`, `isMOBILE`, `isROBOT`, `isSTANDALONE`, `isPRIVATEMODE` и `isIE` са булеви за браузъра, задават се при стартиране на страницата.
- `STYLE(css, [id], [selector])` добавя `<style>` в head. С `id` стилът се замества, когато го извикате отново със същото id; със `selector` всяко правило се обвива от него (`'.a { }'` става `'#p .a{ }'`).
- `NODEINDEXOF(element)` е позицията на елемента сред неговите събратя, `NODEINSERT(element, reference, [before])` премества елемент след (или преди) друг, а `NODEMOVE(element, [up])` го премества с едно място надолу (или нагоре).
- `DIFFDOM(parent, selector, html, [attribute])` прави децата на `parent`, съвпадащи със `selector`, същите като тези в `html`, **без прерисуване** на вече съществуващите: елементът е същият, когато неговият `attribute` има същата стойност (без `attribute`, когато целият му HTML е еднакъв). Премахва тези, които не са в новия списък, добавя новите и ги подрежда по `html`, и връща `{ add, upd, rem }`. Съдържанието на запазен елемент **не** се заменя.
- `APPEARANCE({ color, dark, large, <name>: value })` задава външния вид на страницата: `dark` и `large` превключват класовете `ui-dark` и `ui-large` на body, `color` и всеки друг ключ стават CSS променливи на `:root` (`--color`, а `--rgb` се изчислява от цвета) в един `<style id="cssappearance">`.
- `ENVIRONMENT(name, version, language, [env])` задава името, което е префикс на ключовете в `localStorage`, версията и езика (`DEF.localstorage`, `DEF.version`, `DEF.language`) и, с `env`, няколко стойности на `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>
```
