jdm_javascript_dom_manipulator

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>_core.js - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading">C<a href="AnimationOption.html">AnimationOption</a></li><li class="nav-heading">C<a href="Jdm.html">Jdm</a></li><li class="nav-item">F<a href="Jdm.html#jdm_addClassList">jdm_addClassList</a></li><li class="nav-item">F<a href="Jdm.html#jdm_addEventListener">jdm_addEventListener</a></li><li class="nav-item">F<a href="Jdm.html#jdm_addId">jdm_addId</a></li><li class="nav-item">F<a href="Jdm.html#jdm_append">jdm_append</a></li><li class="nav-item">F<a href="Jdm.html#jdm_appendAfter">jdm_appendAfter</a></li><li class="nav-item">F<a href="Jdm.html#jdm_appendBefore">jdm_appendBefore</a></li><li class="nav-item">F<a href="Jdm.html#jdm_binding">jdm_binding</a></li><li class="nav-item">F<a href="Jdm.html#jdm_bounce">jdm_bounce</a></li><li class="nav-item">F<a href="Jdm.html#jdm_clearAnimations">jdm_clearAnimations</a></li><li class="nav-item">F<a href="Jdm.html#jdm_destroy">jdm_destroy</a></li><li class="nav-item">F<a href="Jdm.html#jdm_empty">jdm_empty</a></li><li class="nav-item">F<a href="Jdm.html#jdm_extendChildNode">jdm_extendChildNode</a></li><li class="nav-item">F<a href="Jdm.html#jdm_extendNode">jdm_extendNode</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeIn">jdm_fadeIn</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeInDown">jdm_fadeInDown</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeInLeft">jdm_fadeInLeft</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeInRight">jdm_fadeInRight</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeInUp">jdm_fadeInUp</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOut">jdm_fadeOut</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOutDown">jdm_fadeOutDown</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOutLeft">jdm_fadeOutLeft</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOutRight">jdm_fadeOutRight</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOutUp">jdm_fadeOutUp</a></li><li class="nav-item">F<a href="Jdm.html#jdm_findClassList">jdm_findClassList</a></li><li class="nav-item">F<a href="Jdm.html#jdm_genEvent">jdm_genEvent</a></li><li class="nav-item">F<a href="Jdm.html#jdm_getAttribute">jdm_getAttribute</a></li><li class="nav-item">F<a href="Jdm.html#jdm_getValue">jdm_getValue</a></li><li class="nav-item">F<a href="Jdm.html#jdm_innerHTML">jdm_innerHTML</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onChange">jdm_onChange</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onClick">jdm_onClick</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onDebounce">jdm_onDebounce</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onDoubleClick">jdm_onDoubleClick</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onError">jdm_onError</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onInput">jdm_onInput</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onInvalid">jdm_onInvalid</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onLoad">jdm_onLoad</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onRightClick">jdm_onRightClick</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onSelect">jdm_onSelect</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onSubmit">jdm_onSubmit</a></li><li class="nav-item">F<a href="Jdm.html#jdm_prepend">jdm_prepend</a></li><li class="nav-item">F<a href="Jdm.html#jdm_removeAttribute">jdm_removeAttribute</a></li><li class="nav-item">F<a href="Jdm.html#jdm_removeClassList">jdm_removeClassList</a></li><li class="nav-item">F<a href="Jdm.html#jdm_removeEventListener">jdm_removeEventListener</a></li><li class="nav-item">F<a href="Jdm.html#jdm_rotation">jdm_rotation</a></li><li class="nav-item">F<a href="Jdm.html#jdm_setAttribute">jdm_setAttribute</a></li><li class="nav-item">F<a href="Jdm.html#jdm_setStyle">jdm_setStyle</a></li><li class="nav-item">F<a href="Jdm.html#jdm_setValue">jdm_setValue</a></li><li class="nav-item">F<a href="Jdm.html#jdm_tada">jdm_tada</a></li><li class="nav-item">F<a href="Jdm.html#jdm_toggleClassList">jdm_toggleClassList</a></li><li class="nav-item">F<a href="Jdm.html#jdm_validate">jdm_validate</a></li><li class="nav-item">F<a href="Jdm.html#jdm_zoomIn">jdm_zoomIn</a></li><li class="nav-item">F<a href="Jdm.html#jdm_zoomOut">jdm_zoomOut</a></li><li class="nav-heading">C<a href="Proto.html">Proto</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item">F<a href="global.html#_animation.">_animation.</a></li> </nav> <div id="main"> <h1 class="page-title">_core.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>import { _common } from "./_common.js"; export class _core { /** @this {Jdm} */ static jdm_append(elementList) { if (Array.isArray(elementList)) { for (const element of elementList) { this.node.appendChild(element); } } else if (elementList) { this.node.appendChild(elementList); } return this.node; } /** @this {Jdm} */ static jdm_prepend(elementList) { const firstChild = this.node.firstElementChild; if (Array.isArray(elementList)) { for (const element of elementList) { this.node.prepend(element); } } else if (elementList) { this.node.prepend(elementList); } return this.node; } /** @this {Jdm} */ static jdm_appendBefore(elementList) { elementList = Array.isArray(elementList) ? elementList : [elementList]; const parent = this.node.parentNode; for (const element of elementList) { parent.insertBefore(element, this.node); } return this.node; } /** @this {Jdm} */ static jdm_appendAfter(elementList) { elementList = Array.isArray(elementList) ? elementList : [elementList]; const parent = this.node.parentNode; for (const element of elementList) { parent.insertAfter(element, this.node); } return this.node; } /** @this {Jdm} */ static jdm_setAttribute(attribute, value = null) { this.node.setAttribute(attribute, value); return this.node; } /** @this {Jdm} */ static jdm_getAttribute(attribute) { return this.node.getAttribute(attribute); } /** @this {Jdm} */ static jdm_removeAttribute(attribute) { this.node.removeAttribute(attribute); return this.node; } /** @this {Jdm} */ static jdm_addId(id) { this.node.setAttribute("id", id); return this.node; } /** @this {Jdm} */ static jdm_addClassList(classList) { if (Array.isArray(classList)) { for (const cls of classList) { this.node.classList.add(cls); } } else if (classList) { this.node.classList.add(classList); } return this.node; } /** @this {Jdm} */ static jdm_removeClassList(classList) { if (Array.isArray(classList)) { for (const cls of classList) { this.node.classList.remove(cls); } } else if (classList) { this.node.classList.remove(classList); } return this.node; } /** @this {Jdm} */ static jdm_toggleClassList(classList) { if (Array.isArray(classList)) { for (const cls of classList) { this.node.classList.toggle(cls); } } else if (classList) { this.node.classList.toggle(classList); } return this.node; } /** @this {Jdm} */ static jdm_findClassList(classList, some = false) { classList = Array.isArray(classList) ? classList : [classList]; return some ? classList.some(cls => this.node.classList.contains(cls)) : classList.every(cls => this.node.classList.contains(cls)); } /** @this {Jdm} */ static jdm_empty() { if (this.tag === "input" && (this.node.type === "checkbox" || this.node.type === "radio")) { this.node.checked = false; } else if (this.tag === "input" || this.tag === "textarea") { this.node.value = null; } else if (this.tag === "form") { if (this.node.elements?.length > 0) { for (const element of this.node.elements) { if (element.type === "checkbox" || element.type === "radio") { element.checked = false; } else if (element.type === "select-multiple" || element.type === "select-one") { for (const option of element.options) { element.value = null; } } else { element.value = ""; } } } } else { this.node.innerHTML = ""; } return this.node; } /** @this {Jdm} */ static jdm_destroy() { this.node.remove(); return this.node; } /** @this {Jdm} */ static jdm_validate() { const validity = this.node.checkValidity(); this.jdm_genEvent("validate", validity); return this.node; } /** @this {Jdm} */ static jdm_setStyle(style, value) { this.node.style[style] = value; return this.node; } /** @this {Jdm} */ static jdm_extendNode(name, object = null) { this.node[name] = object; return this.node; } /** @this {Jdm} */ static jdm_innerHTML(value) { this.node.innerHTML = value; return this.node; } /** @this {Jdm} */ static jdm_binding(el, event = "input", twoWayDataBinding = true) { let elementList = []; if (Array.isArray(el)) { elementList = elementList.concat(el); } else { elementList.push(el); } for (const element of elementList) { if ( element.tagName.toLowerCase() === "input" || element.tagName.toLowerCase() === "select" || element.tagName.toLowerCase() === "textarea" ) { this.node.addEventListener(event, () => { element.jdm_setValue(this.jdm_getValue()); }); } else { this.node.addEventListener(event, () => { element.jdm_innerHTML(this.jdm_getValue()); }); } if (twoWayDataBinding) { const elementListTmp = elementList.filter(elementTmp => elementTmp !== element); elementListTmp.push(this.node); for (const elementTmp of elementListTmp) { element.jdm_binding(elementListTmp, event, false); } } } return this.node; } /** @this {Jdm} */ static jdm_setValue(value, tooBoolean = true) { if (tooBoolean) { try { value = value.toBoolean(); } catch (e) { value = value; } } if (this.node.type === "checkbox" || this.node.type === "radio") { this.node.checked = value; } else if (this.tag === "form") { const setValue = (el, value) => { if (el.type === "checkbox" || el.type === "radio") { el.checked = value; } else { el.value = value; } }; const findElement = (form, name) => { return form.querySelectorAll(`[name="${name}"]`); }; const populateForm = (form, data, prefix = "") => { for (const key in data) { const value = data[key]; const name = prefix ? `${prefix}[${key}]` : key; const elementList = findElement(form, Array.isArray(value) ? `${name}[]` : name); if (elementList?.length > 0) { for (const element of elementList) { if (Array.isArray(value)) { const checkboxes = form.querySelectorAll(`[name="${name}[]"]`); checkboxes.forEach(checkbox => { setValue(checkbox, value.includes(checkbox.value)); }); } else if (typeof value === "object") { populateForm(form, value, name); } else { setValue(element, value); } } } else if (typeof value === "object") { populateForm(form, value, name); } } }; populateForm(this.node, value); } else { if (this.node.jdm_getAttribute("type") === "number" || this.node.jdm_getAttribute("type") === "range") { this.node.value = value * 1; } else { this.node.value = value; } } return this.node; } /** @this {Jdm} */ static jdm_getValue() { if (this.tag === "input" && (this.node.type === "checkbox" || this.node.type === "radio")) { return this.node.checked; } else if (this.tag === "form") { const formData = new FormData(this.node); const json = {}; for (let [key, value] of formData.entries()) { value = value === "" ? null : value; value = value === "null" ? null : value; let currentObj = json; const keys = key.split(/\[|\]\[|\]/).filter(Boolean); const lastKey = keys.pop(); for (let i = 0; i < keys.length; i++) { const currentKey = keys[i]; if (!currentObj[currentKey]) { currentObj[currentKey] = isNaN(keys[i + 1]) ? {} : []; } currentObj = currentObj[currentKey]; } if (lastKey === "") { if (!currentObj.length) { currentObj.length = 0; } currentObj[currentObj.length++] = value; } else if (Array.isArray(currentObj[lastKey])) { currentObj[lastKey].push(value); } else if (currentObj[lastKey]) { currentObj[lastKey] = [currentObj[lastKey], value]; } else { if (key.endsWith("[]")) { if (value) { currentObj[lastKey] = new Array(); currentObj[lastKey].push(value); } } else { currentObj[lastKey] = value; } } } return json; } else if (this.tag === "select") { return this.node.value; } else { return this.node.value; } } /** @this {Jdm} */ static jdm_genEvent(name, data = null, propagateToParents = true) { _common.genEvent(this.node, name, data, propagateToParents); return this.node; } /** @this {Jdm} */ static jdm_addEventListener(name, fn = () => {}) { this.node.addEventListener(name, fn); return this.node; } /** @this {Jdm} */ static jdm_removeEventListener(name, fn = () => {}) { this.node.removeEventListener(name, fn); return this.node; } /** @this {Jdm} */ static jdm_extendChildNode() { if (this.node?.jdm_childNode && Object.entries(this.node.jdm_childNode).length > 0) { for (const [key, value] of Object.entries(this.node.jdm_childNode)) { this.node.jdm_extendNode(key, value); } } return this.node; } /** @this {Jdm} */ static jdm_onInput(fn = () => {}) { this.node.addEventListener("input", fn); return this.node; } /** @this {Jdm} */ static jdm_onChange(fn = () => {}) { this.node.addEventListener("change", fn); return this.node; } /** @this {Jdm} */ static jdm_onSelect(fn = () => {}) { this.node.addEventListener("select", fn); return this.node; } /** @this {Jdm} */ static jdm_onDebounce(fn = () => {}, timeout = 300, method = "input") { this.node.addEventListener(method, _common.debounce(fn, timeout)); return this.node; } /** @this {Jdm} */ static jdm_onClick(fn = () => {}) { this.node.addEventListener("click", fn); return this.node; } /** @this {Jdm} */ static jdm_onRightClick(fn = () => {}) { this.node.addEventListener("contextmenu", fn); return this.node; } /** @this {Jdm} */ static jdm_onDoubleClick(fn = () => {}) { this.node.addEventListener("dblclick", fn); return this.node; } /** @this {Jdm} */ static jdm_onInvalid(fn = () => {}) { this.node.addEventListener("invalid", fn); return this.node; } /** @this {Jdm} */ static jdm_onLoad(fn = () => {}) { this.node.addEventListener("load", fn); return this.node; } /** @this {Jdm} */ static jdm_onError(fn = () => {}) { this.node.addEventListener("error", fn); return this.node; } /** @this {Jdm} */ static jdm_onSubmit(fn = e => {}) { this.node.addEventListener("submit", fn); return this.node; } } </code></pre> </article> </section> </div> <footer> Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.4</a> on Wed Jul 16 2025 22:22:23 GMT+0200 (Central European Summer Time) using the Minami theme. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>