Aides DOM : ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM et APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Exécutée avec jComponent 20

ATTRD(element or event, [name]) lit data-name (par défaut data-id) d'un élément, d'un objet jQuery ou de l'élément d'un événement ; pour un objet simple il lit la propriété.
HIDDEN(element) vaut true quand l'élément n'est pas affiché (lui ou un parent est en display: none ; un élément enfant direct du body est toujours signalé comme non caché, la vérification commence par son parent) ; VISIBLE(element, [threshold], [mode]) vaut true quand il est dans la partie visible de la fenêtre (mode 'above' ou 'below' demande où il se trouve quand il ne l'est pas). NOTFOCUSED() vaut true quand l'onglet du navigateur est en arrière-plan et inDOM(element) est vrai tant que l'élément est dans le document.
WIDTH([element]) renvoie la classe de taille de la largeur de l'élément (par défaut : la fenêtre) : 'xs', 'sm', 'md' ou 'lg' (les limites sont dans DEF.devices). WW et WH sont la taille de la fenêtre ; $W est l'objet jQuery de la fenêtre ; SCROLLBARWIDTH() est la largeur qu'occupe une barre de défilement.
SCROLLBAR(element, [options]) enveloppe un élément avec une barre de défilement personnalisée et le renvoie ; scrollbar.resize() la recalcule après un changement du contenu.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE et isIE sont des booléens sur le navigateur, définis au démarrage de la page.
STYLE(css, [id], [selector]) ajoute un style au head. Avec un id, le style est remplacé quand vous l'appelez de nouveau avec le même id ; avec un selector, chaque règle en est enveloppée ('.a { }' devient '#p .a{ }').
NODEINDEXOF(element) est la position de l'élément parmi ses frères, NODEINSERT(element, reference, [before]) déplace un élément après (ou avant) un autre et NODEMOVE(element, [up]) le déplace d'une place vers le bas (ou le haut).
DIFFDOM(parent, selector, html, [attribute]) rend les enfants de parent qui correspondent à selector identiques à ceux de html, sans redessiner ceux qui sont déjà là : un élément est le même quand son attribute a la même valeur (sans attribute, quand tout son HTML est identique). Il supprime ceux qui ne sont pas dans la nouvelle liste, ajoute les nouveaux et les met dans l'ordre de html, et renvoie { add, upd, rem }. Le contenu d'un élément conservé n'est pas remplacé.
APPEARANCE({ color, dark, large, <name>: value }) règle l'apparence de la page : dark et large basculent les classes ui-dark et ui-large du body, color et chaque autre clé deviennent des variables CSS de :root (--color, et --rgb est calculé à partir de la couleur) dans un unique <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) définit le nom qui préfixe les clés dans localStorage, la version et la langue (DEF.localstorage, DEF.version, DEF.language) et, avec env, plusieurs valeurs ENV().

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>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu