DOM-hjälpare: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM och APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Körd med jComponent 20

ATTRD(element or event, [name]) läser data-name (standard data-id) hos ett element, ett jQuery-objekt eller en händelses element; för ett vanligt objekt läser den egenskapen.
HIDDEN(element) är true när elementet inte visas (det eller en förälder har display: none; ett element som är direkt barn till body rapporteras alltid som inte dolt, kontrollen börjar vid dess förälder); VISIBLE(element, [threshold], [mode]) är true när det är inom den synliga delen av fönstret (mode 'above' eller 'below' frågar var det är när det inte är det). NOTFOCUSED() är true när webbläsarfliken ligger i bakgrunden och inDOM(element) är sant så länge elementet finns i dokumentet.
WIDTH([element]) returnerar storleksklassen för elementets bredd (standard: fönstret): 'xs', 'sm', 'md' eller 'lg' (gränserna finns i DEF.devices). WW och WH är fönstrets storlek; $W är fönstrets jQuery-objekt; SCROLLBARWIDTH() är bredden som en rullningslist tar.
SCROLLBAR(element, [options]) omsluter ett element med en egen rullningslist och returnerar det; scrollbar.resize() räknar om den efter att innehållet ändrats.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE och isIE är booleans om webbläsaren, satta när sidan startar.
STYLE(css, [id], [selector]) lägger till en style i head. Med ett id ersätts stilen när du anropar den igen med samma id; med en selector omsluts varje regel av den ('.a { }' blir '#p .a{ }').
NODEINDEXOF(element) är elementets position bland sina syskon, NODEINSERT(element, reference, [before]) flyttar ett element efter (eller före) ett annat och NODEMOVE(element, [up]) flyttar det ett steg ner (eller upp).
DIFFDOM(parent, selector, html, [attribute]) gör barnen till parent som matchar selector lika med dem i html, utan att rita om dem som redan finns: ett element är detsamma när dess attribute har samma värde (utan attribute, när hela dess HTML är densamma). Den tar bort dem som inte finns i den nya listan, lägger till de nya och sätter dem i ordningen från html, och returnerar { add, upd, rem }. Innehållet i ett element som behålls ersätts inte.
APPEARANCE({ color, dark, large, <name>: value }) ställer in sidans utseende: dark och large växlar klasserna ui-dark och ui-large på body, color och varje annan nyckel blir CSS-variabler för :root (--color, och --rgb beräknas från färgen) i en enda <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) sätter namnet som prefixar nycklarna i localStorage, versionen och språket (DEF.localstorage, DEF.version, DEF.language) och, med env, flera ENV()-värden.

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>

Prova det i din webbläsare

Redigera exemplet och kör det. Det körs i en isolerad ram i din webbläsare; ingenting skickas till vår server.

Kod

Förhandsvisning