DOM-helpers: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM en APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Uitgevoerd met jComponent 20

ATTRD(element or event, [name]) leest data-name (standaard data-id) van een element, een jQuery-object of het element van een gebeurtenis; bij een gewoon object leest het de eigenschap.
HIDDEN(element) is true wanneer het element niet getoond wordt (het zelf of een ouder heeft display: none; een element dat een direct kind van de body is, wordt altijd als niet verborgen gemeld, de controle begint bij zijn ouder); VISIBLE(element, [threshold], [mode]) is true wanneer het binnen het zichtbare deel van het venster ligt (mode 'above' of 'below' vraagt waar het is wanneer het dat niet is). NOTFOCUSED() is true wanneer het browsertabblad op de achtergrond staat en inDOM(element) is waar zolang het element in het document zit.
WIDTH([element]) geeft de grootteklasse van de breedte van het element (standaard: het venster): 'xs', 'sm', 'md' of 'lg' (de grenzen staan in DEF.devices). WW en WH zijn de grootte van het venster; $W is het jQuery-object van het venster; SCROLLBARWIDTH() is de breedte die een scrollbalk inneemt.
SCROLLBAR(element, [options]) omhult een element met een eigen scrollbalk en geeft het terug; scrollbar.resize() herberekent hem nadat de inhoud is gewijzigd.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE en isIE zijn booleans over de browser, ingesteld wanneer de pagina start.
STYLE(css, [id], [selector]) voegt een style toe aan de head. Met een id wordt de stijl vervangen als je hem opnieuw aanroept met dezelfde id; met een selector wordt elke regel erdoor omhuld ('.a { }' wordt '#p .a{ }').
NODEINDEXOF(element) is de positie van het element onder zijn broers en zussen, NODEINSERT(element, reference, [before]) verplaatst een element na (of vóór) een ander en NODEMOVE(element, [up]) verplaatst het één plaats omlaag (of omhoog).
DIFFDOM(parent, selector, html, [attribute]) maakt de kinderen van parent die overeenkomen met selector gelijk aan die in html, zonder opnieuw te tekenen wat er al is: een element is hetzelfde wanneer zijn attribute dezelfde waarde heeft (zonder attribute, wanneer zijn hele HTML gelijk is). Het verwijdert wat niet in de nieuwe lijst staat, voegt de nieuwe toe, zet ze in de volgorde van html en geeft { add, upd, rem } terug. De inhoud van een element dat blijft, wordt niet vervangen.
APPEARANCE({ color, dark, large, <name>: value }) stelt het uiterlijk van de pagina in: dark en large schakelen de klassen ui-dark en ui-large van de body om, color en elke andere sleutel worden CSS-variabelen van :root (--color, en --rgb wordt berekend uit de kleur) in één <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) stelt de naam in die de sleutels in localStorage voorafgaat, de versie en de taal (DEF.localstorage, DEF.version, DEF.language) en, met env, meerdere ENV()-waarden.

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld