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

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Executed with jComponent 20

ATTRD(element or event, [name]) reads data-name (default data-id) of an element, a jQuery object or the element of an event; for a plain object it reads the property.
HIDDEN(element) is true when the element is not shown (it or a parent is display: none; an element that is a direct child of the body is always reported as not hidden, the check starts from its parent); VISIBLE(element, [threshold], [mode]) is true when it is inside the visible part of the window (mode 'above' or 'below' asks where it is when it is not). NOTFOCUSED() is true when the browser tab is in the background and inDOM(element) is true while the element is in the document.
WIDTH([element]) returns the size class of the width of the element (default: the window): 'xs', 'sm', 'md' or 'lg' (the limits are in DEF.devices). WW and WH are the size of the window; $W is the jQuery object of the window; SCROLLBARWIDTH() is the width that a scrollbar takes.
SCROLLBAR(element, [options]) wraps an element with a custom scrollbar and returns it; scrollbar.resize() recalculates it after the content changed.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE and isIE are booleans about the browser, set when the page starts.
STYLE(css, [id], [selector]) adds a style to the head. With an id the style is replaced when you call it again with the same id; with a selector every rule is wrapped by it ('.a { }' becomes '#p .a{ }').
NODEINDEXOF(element) is the position of the element among its siblings, NODEINSERT(element, reference, [before]) moves an element after (or before) another and NODEMOVE(element, [up]) moves it one place down (or up).
DIFFDOM(parent, selector, html, [attribute]) makes the children of parent that match selector the same as the ones in html, without redrawing those that are already there: an element is the same when its attribute has the same value (without attribute, when its whole HTML is the same). It removes the ones that are not in the new list, adds the new ones and puts them in the order of html, and returns { add, upd, rem }. The content of an element that is kept is not replaced.
APPEARANCE({ color, dark, large, <name>: value }) sets the look of the page: dark and large switch the classes ui-dark and ui-large of the body, color and every other key become CSS variables of :root (--color, and --rgb is calculated from the color) in one <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) sets the name that prefixes the keys in localStorage, the version and the language (DEF.localstorage, DEF.version, DEF.language) and, with env, several ENV() values.

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>

Try it in your browser

Edit the example and run it. It runs in an isolated frame in your browser; nothing is sent to our server.

Code

Preview