@schukai/monster 3.5.0 → 3.8.0

package/source/dom/customelement.mjs

@@ -5,28 +5,28 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import {internalSymbol} from "../constants.mjs";
-import {extend} from "../data/extend.mjs";
-import {Pathfinder} from "../data/pathfinder.mjs";
-
-import {parseDataURL} from "../types/dataurl.mjs";
-import {getGlobalObject} from "../types/global.mjs";
-import {isArray, isFunction, isObject, isString} from "../types/is.mjs";
-import {Observer} from "../types/observer.mjs";
-import {ProxyObserver} from "../types/proxyobserver.mjs";
-import {validateFunction, validateInstance, validateObject, validateString} from "../types/validate.mjs";
-import {clone} from "../util/clone.mjs";
-import {addAttributeToken, getLinkedObjects, hasObjectLink} from "./attributes.mjs";
+import { internalSymbol } from "../constants.mjs";
+import { extend } from "../data/extend.mjs";
+import { Pathfinder } from "../data/pathfinder.mjs";
+
+import { parseDataURL } from "../types/dataurl.mjs";
+import { getGlobalObject } from "../types/global.mjs";
+import { isArray, isFunction, isObject, isString } from "../types/is.mjs";
+import { Observer } from "../types/observer.mjs";
+import { ProxyObserver } from "../types/proxyobserver.mjs";
+import { validateFunction, validateInstance, validateObject, validateString } from "../types/validate.mjs";
+import { clone } from "../util/clone.mjs";
+import { addAttributeToken, getLinkedObjects, hasObjectLink } from "./attributes.mjs";
 import {
     ATTRIBUTE_DISABLED,
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_OPTIONS,
     ATTRIBUTE_OPTIONS_SELECTOR,
-    customElementUpdaterLinkSymbol
+    customElementUpdaterLinkSymbol,
 } from "./constants.mjs";
-import {findDocumentTemplate, Template} from "./template.mjs";
-import {addObjectWithUpdaterToElement} from "./updater.mjs";
-import {instanceSymbol} from '../constants.mjs';
+import { findDocumentTemplate, Template } from "./template.mjs";
+import { addObjectWithUpdaterToElement } from "./updater.mjs";
+import { instanceSymbol } from "../constants.mjs";
 
 export {
     CustomElement,
@@ -34,28 +34,27 @@ export {
     assembleMethodSymbol,
     attributeObserverSymbol,
     registerCustomElement,
-    getSlottedElements
-}
+    getSlottedElements,
+};
 
 /**
  * @memberOf Monster.DOM
  * @type {symbol}
  */
-const initMethodSymbol = Symbol.for('@schukai/monster/dom/@@initMethodSymbol');
+const initMethodSymbol = Symbol.for("@schukai/monster/dom/@@initMethodSymbol");
 
 /**
  * @memberOf Monster.DOM
  * @type {symbol}
  */
-const assembleMethodSymbol = Symbol.for('@schukai/monster/dom/@@assembleMethodSymbol');
+const assembleMethodSymbol = Symbol.for("@schukai/monster/dom/@@assembleMethodSymbol");
 
 /**
  * this symbol holds the attribute observer callbacks. The key is the attribute name.
  * @memberOf Monster.DOM
  * @type {symbol}
  */
-const attributeObserverSymbol = Symbol.for('@schukai/monster/dom/@@attributeObserver');
-
+const attributeObserverSymbol = Symbol.for("@schukai/monster/dom/@@attributeObserver");
 
 /**
  * HTMLElement
@@ -100,7 +99,6 @@ const attributeObserverSymbol = Symbol.for('@schukai/monster/dom/@@attributeObse
  * @enduml
  */
 
-
 /**
  * To define a new HTML element we need the power of CustomElement
  *
@@ -187,7 +185,6 @@ const attributeObserverSymbol = Symbol.for('@schukai/monster/dom/@@attributeObse
  * @summary A base class for HTML5 customcontrols
  */
 class CustomElement extends HTMLElement {
-
     /**
      * A new object is created. First the `initOptions` method is called. Here the
      * options can be defined in derived classes. Subsequently, the shadowRoot is initialized.
@@ -197,7 +194,9 @@ class CustomElement extends HTMLElement {
      */
     constructor() {
         super();
-        this[internalSymbol] = new ProxyObserver({'options': extend({}, this.defaults)});
+        this[internalSymbol] = new ProxyObserver({
+            options: extend({}, this.defaults),
+        });
         this[attributeObserverSymbol] = {};
         initOptionObserver.call(this);
         this[initMethodSymbol]();
@@ -212,7 +211,6 @@ class CustomElement extends HTMLElement {
         return Symbol.for("@schukai/monster/dom/custom-element");
     }
 
-
     /**
      * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
      *
@@ -275,11 +273,11 @@ class CustomElement extends HTMLElement {
     get defaults() {
         return {
             ATTRIBUTE_DISABLED: this.getAttribute(ATTRIBUTE_DISABLED),
-            shadowMode: 'open',
+            shadowMode: "open",
             delegatesFocus: true,
             templates: {
-                main: undefined
-            }
+                main: undefined,
+            },
         };
     }
 
@@ -329,7 +327,7 @@ class CustomElement extends HTMLElement {
      * @returns {CustomElement}
      */
     attachObserver(observer) {
-        this[internalSymbol].attachObserver(observer)
+        this[internalSymbol].attachObserver(observer);
         return this;
     }
 
@@ -340,7 +338,7 @@ class CustomElement extends HTMLElement {
      * @returns {CustomElement}
      */
     detachObserver(observer) {
-        this[internalSymbol].detachObserver(observer)
+        this[internalSymbol].detachObserver(observer);
         return this;
     }
 
@@ -349,7 +347,7 @@ class CustomElement extends HTMLElement {
      * @returns {ProxyObserver}
      */
     containsObserver(observer) {
-        return this[internalSymbol].containsObserver(observer)
+        return this[internalSymbol].containsObserver(observer);
     }
 
     /**
@@ -364,10 +362,8 @@ class CustomElement extends HTMLElement {
         let value;
 
         try {
-            value = new Pathfinder(this[internalSymbol].getRealSubject()['options']).getVia(path);
-        } catch (e) {
-
-        }
+            value = new Pathfinder(this[internalSymbol].getRealSubject()["options"]).getVia(path);
+        } catch (e) {}
 
         if (value === undefined) return defaultValue;
         return value;
@@ -382,7 +378,7 @@ class CustomElement extends HTMLElement {
      * @since 1.14.0
      */
     setOption(path, value) {
-        new Pathfinder(this[internalSymbol].getSubject()['options']).setVia(path, value);
+        new Pathfinder(this[internalSymbol].getSubject()["options"]).setVia(path, value);
         return this;
     }
 
@@ -392,13 +388,12 @@ class CustomElement extends HTMLElement {
      * @return {CustomElement}
      */
     setOptions(options) {
-
         if (isString(options)) {
-            options = parseOptionsJSON.call(this, options)
+            options = parseOptionsJSON.call(this, options);
         }
 
         const self = this;
-        extend(self[internalSymbol].getSubject()['options'], self.defaults, options);
+        extend(self[internalSymbol].getSubject()["options"], self.defaults, options);
 
         return self;
     }
@@ -420,9 +415,9 @@ class CustomElement extends HTMLElement {
      * @since 1.8.0
      */
     [assembleMethodSymbol]() {
-
         const self = this;
-        let elements, nodeList;
+        let elements;
+        let nodeList;
 
         const AttributeOptions = getOptionsFromAttributes.call(self);
         if (isObject(AttributeOptions) && Object.keys(AttributeOptions).length > 0) {
@@ -434,15 +429,11 @@ class CustomElement extends HTMLElement {
             self.setOptions(ScriptOptions);
         }
 
-
-        if (self.getOption('shadowMode', false) !== false) {
+        if (self.getOption("shadowMode", false) !== false) {
             try {
                 initShadowRoot.call(self);
                 elements = self.shadowRoot.childNodes;
-
-            } catch (e) {
-
-            }
+            } catch (e) {}
 
             try {
                 initCSSStylesheet.call(this);
@@ -459,15 +450,17 @@ class CustomElement extends HTMLElement {
         }
 
         try {
-            nodeList = new Set([
-                ...elements,
-                ...getSlottedElements.call(self)
-            ])
+            nodeList = new Set([...elements, ...getSlottedElements.call(self)]);
         } catch (e) {
-            nodeList = elements
+            nodeList = elements;
         }
 
-        addObjectWithUpdaterToElement.call(self, nodeList, customElementUpdaterLinkSymbol, clone(self[internalSymbol].getRealSubject()['options']))
+        addObjectWithUpdaterToElement.call(
+            self,
+            nodeList,
+            customElementUpdaterLinkSymbol,
+            clone(self[internalSymbol].getRealSubject()["options"]),
+        );
         return self;
     }
 
@@ -481,7 +474,7 @@ class CustomElement extends HTMLElement {
     connectedCallback() {
         let self = this;
         if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
-            self[assembleMethodSymbol]()
+            self[assembleMethodSymbol]();
         }
     }
 
@@ -491,9 +484,7 @@ class CustomElement extends HTMLElement {
      * @return {void}
      * @since 1.7.0
      */
-    disconnectedCallback() {
-
-    }
+    disconnectedCallback() {}
 
     /**
      * The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).
@@ -501,9 +492,7 @@ class CustomElement extends HTMLElement {
      * @return {void}
      * @since 1.7.0
      */
-    adoptedCallback() {
-
-    }
+    adoptedCallback() {}
 
     /**
      * Called when an observed attribute has been added, removed, updated, or replaced. Also called for initial
@@ -524,7 +513,6 @@ class CustomElement extends HTMLElement {
         if (isFunction(callback)) {
             callback.call(self, newVal, oldVal);
         }
-
     }
 
     /**
@@ -546,9 +534,7 @@ class CustomElement extends HTMLElement {
         }
 
         return containChildNode.call(self.shadowRoot, node);
-
     }
-
 }
 
 /**
@@ -563,27 +549,25 @@ class CustomElement extends HTMLElement {
  */
 function getSlottedElements(query, name) {
     const self = this;
-    const result = new Set;
+    const result = new Set();
 
     if (!(self.shadowRoot instanceof ShadowRoot)) {
         return result;
     }
 
-    let selector = 'slot';
+    let selector = "slot";
     if (name !== undefined) {
         if (name === null) {
-            selector += ':not([name])';
+            selector += ":not([name])";
         } else {
-            selector += '[name=' + validateString(name) + ']';
+            selector += `[name=${validateString(name)}]`;
         }
-
     }
 
     const slots = self.shadowRoot.querySelectorAll(selector);
 
     for (const [, slot] of Object.entries(slots)) {
         slot.assignedElements().forEach(function (node) {
-
             if (!(node instanceof HTMLElement)) return;
 
             if (isString(query)) {
@@ -594,13 +578,12 @@ function getSlottedElements(query, name) {
                 if (node.matches(query)) {
                     result.add(node);
                 }
-
             } else if (query !== undefined) {
-                throw new Error('query must be a string')
+                throw new Error("query must be a string");
             } else {
                 result.add(node);
             }
-        })
+        });
     }
 
     return result;
@@ -627,7 +610,6 @@ function containChildNode(node) {
         containChildNode.call(e, node);
     }
 
-
     return false;
 }
 
@@ -641,59 +623,58 @@ function initOptionObserver() {
     const self = this;
 
     let lastDisabledValue = undefined;
-    self.attachObserver(new Observer(function () {
-        const flag = self.getOption('disabled');
-
-        if (flag === lastDisabledValue) {
-            return;
-        }
+    self.attachObserver(
+        new Observer(function () {
+            const flag = self.getOption("disabled");
 
-        lastDisabledValue = flag;
-
-        if (!(self.shadowRoot instanceof ShadowRoot)) {
-            return;
-        }
-
-        const query = 'button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]';
-        const elements = self.shadowRoot.querySelectorAll(query);
+            if (flag === lastDisabledValue) {
+                return;
+            }
 
-        let nodeList;
-        try {
-            nodeList = new Set([
-                ...elements,
-                ...getSlottedElements.call(self, query)
-            ])
-        } catch (e) {
-            nodeList = elements
-        }
+            lastDisabledValue = flag;
 
-        for (const element of [...nodeList]) {
-            if (flag === true) {
-                element.setAttribute(ATTRIBUTE_DISABLED, '');
-            } else {
-                element.removeAttribute(ATTRIBUTE_DISABLED);
+            if (!(self.shadowRoot instanceof ShadowRoot)) {
+                return;
             }
-        }
-
-    }));
 
-    self.attachObserver(new Observer(function () {
+            const query =
+                "button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]";
+            const elements = self.shadowRoot.querySelectorAll(query);
 
-        // not initialised
-        if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
-            return;
-        }
-        // inform every element
-        const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
+            let nodeList;
+            try {
+                nodeList = new Set([...elements, ...getSlottedElements.call(self, query)]);
+            } catch (e) {
+                nodeList = elements;
+            }
 
-        for (const list of updaters) {
-            for (const updater of list) {
-                let d = clone(self[internalSymbol].getRealSubject()['options']);
-                Object.assign(updater.getSubject(), d);
+            for (const element of [...nodeList]) {
+                if (flag === true) {
+                    element.setAttribute(ATTRIBUTE_DISABLED, "");
+                } else {
+                    element.removeAttribute(ATTRIBUTE_DISABLED);
+                }
             }
-        }
+        }),
+    );
+
+    self.attachObserver(
+        new Observer(function () {
+            // not initialised
+            if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
+                return;
+            }
+            // inform every element
+            const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
 
-    }));
+            for (const list of updaters) {
+                for (const updater of list) {
+                    let d = clone(self[internalSymbol].getRealSubject()["options"]);
+                    Object.assign(updater.getSubject(), d);
+                }
+            }
+        }),
+    );
 
     // disabled
     self[attributeObserverSymbol][ATTRIBUTE_DISABLED] = () => {
@@ -702,7 +683,7 @@ function initOptionObserver() {
         } else {
             self.setOption(ATTRIBUTE_DISABLED, undefined);
         }
-    }
+    };
 
     // data-monster-options
     self[attributeObserverSymbol][ATTRIBUTE_OPTIONS] = () => {
@@ -710,7 +691,7 @@ function initOptionObserver() {
         if (isObject(options) && Object.keys(options).length > 0) {
             self.setOptions(options);
         }
-    }
+    };
 
     // data-monster-options-selector
     self[attributeObserverSymbol][ATTRIBUTE_OPTIONS_SELECTOR] = () => {
@@ -718,9 +699,7 @@ function initOptionObserver() {
         if (isObject(options) && Object.keys(options).length > 0) {
             self.setOptions(options);
         }
-    }
-
-
+    };
 }
 
 /**
@@ -737,20 +716,29 @@ function getOptionsFromScriptTag() {
 
     const node = document.querySelector(self.getAttribute(ATTRIBUTE_OPTIONS_SELECTOR));
     if (!(node instanceof HTMLScriptElement)) {
-        addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, 'the selector ' + ATTRIBUTE_OPTIONS_SELECTOR + ' for options was specified (' + self.getAttribute(ATTRIBUTE_OPTIONS_SELECTOR) + ') but not found.');
+        addAttributeToken(
+            self,
+            ATTRIBUTE_ERRORMESSAGE,
+            `the selector ${ATTRIBUTE_OPTIONS_SELECTOR} for options was specified (${self.getAttribute(
+                ATTRIBUTE_OPTIONS_SELECTOR,
+            )}) but not found.`,
+        );
         return {};
     }
 
     let obj = {};
 
     try {
-        obj = parseOptionsJSON.call(this, node.textContent.trim())
+        obj = parseOptionsJSON.call(this, node.textContent.trim());
     } catch (e) {
-        addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, 'when analyzing the configuration from the script tag there was an error. ' + e);
+        addAttributeToken(
+            self,
+            ATTRIBUTE_ERRORMESSAGE,
+            `when analyzing the configuration from the script tag there was an error. ${e}`,
+        );
     }
 
     return obj;
-
 }
 
 /**
@@ -762,9 +750,15 @@ function getOptionsFromAttributes() {
 
     if (this.hasAttribute(ATTRIBUTE_OPTIONS)) {
         try {
-            return parseOptionsJSON.call(self, this.getAttribute(ATTRIBUTE_OPTIONS))
+            return parseOptionsJSON.call(self, this.getAttribute(ATTRIBUTE_OPTIONS));
         } catch (e) {
-            addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, 'the options attribute ' + ATTRIBUTE_OPTIONS + ' does not contain a valid json definition (actual: ' + this.getAttribute(ATTRIBUTE_OPTIONS) + ').' + e);
+            addAttributeToken(
+                self,
+                ATTRIBUTE_ERRORMESSAGE,
+                `the options attribute ${ATTRIBUTE_OPTIONS} does not contain a valid json definition (actual: ${this.getAttribute(
+                    ATTRIBUTE_OPTIONS,
+                )}).${e}`,
+            );
         }
     }
 
@@ -777,8 +771,7 @@ function getOptionsFromAttributes() {
  * @return {Object}
  */
 function parseOptionsJSON(data) {
-
-    const self = this, obj = {};
+    let obj = {};
 
     if (!isString(data)) {
         return obj;
@@ -788,19 +781,15 @@ function parseOptionsJSON(data) {
     try {
         let dataUrl = parseDataURL(data);
         data = dataUrl.content;
-    } catch (e) {
-
-    }
+    } catch (e) {}
 
     try {
-        let obj = JSON.parse(data);
-        return validateObject(obj);
+        obj = JSON.parse(data);
     } catch (e) {
         throw e;
     }
 
-
-    return obj;
+    return validateObject(obj);
 }
 
 /**
@@ -808,21 +797,17 @@ function parseOptionsJSON(data) {
  * @return {initHtmlContent}
  */
 function initHtmlContent() {
-
     try {
         let template = findDocumentTemplate(this.constructor.getTag());
         this.appendChild(template.createDocumentFragment());
     } catch (e) {
-
-        let html = this.getOption('templates.main', '');
+        let html = this.getOption("templates.main", "");
         if (isString(html) && html.length > 0) {
             this.innerHTML = html;
         }
-
     }
 
     return this;
-
 }
 
 /**
@@ -850,11 +835,10 @@ function initCSSStylesheet() {
     } else if (isArray(styleSheet)) {
         const assign = [];
         for (let s of styleSheet) {
-
             if (isString(s)) {
-                let trimedStyleSheet = s.trim()
-                if (trimedStyleSheet !== '') {
-                    const style = document.createElement('style')
+                let trimedStyleSheet = s.trim();
+                if (trimedStyleSheet !== "") {
+                    const style = document.createElement("style");
                     style.innerHTML = trimedStyleSheet;
                     self.shadowRoot.prepend(style);
                 }
@@ -866,26 +850,21 @@ function initCSSStylesheet() {
             if (s.cssRules.length > 0) {
                 assign.push(s);
             }
-
         }
 
         if (assign.length > 0) {
             this.shadowRoot.adoptedStyleSheets = assign;
         }
-
     } else if (isString(styleSheet)) {
-
-        let trimedStyleSheet = styleSheet.trim()
-        if (trimedStyleSheet !== '') {
-            const style = document.createElement('style')
+        let trimedStyleSheet = styleSheet.trim();
+        if (trimedStyleSheet !== "") {
+            const style = document.createElement("style");
             style.innerHTML = styleSheet;
             self.shadowRoot.prepend(style);
         }
-
     }
 
     return self;
-
 }
 
 /**
@@ -898,23 +877,21 @@ function initCSSStylesheet() {
  * @since 1.8.0
  */
 function initShadowRoot() {
-
-    let template, html;
+    let template;
+    let html;
 
     try {
         template = findDocumentTemplate(this.constructor.getTag());
     } catch (e) {
-
-        html = this.getOption('templates.main', '');
+        html = this.getOption("templates.main", "");
         if (!isString(html) || html === undefined || html === "") {
             throw new Error("html is not set.");
         }
-
     }
 
     this.attachShadow({
-        mode: this.getOption('shadowMode', 'open'),
-        delegatesFocus: this.getOption('delegatesFocus', true)
+        mode: this.getOption("shadowMode", "open"),
+        delegatesFocus: this.getOption("delegatesFocus", true),
     });
 
     if (template instanceof Template) {
@@ -939,6 +916,5 @@ function initShadowRoot() {
  */
 function registerCustomElement(element) {
     validateFunction(element);
-    getGlobalObject('customElements').define(element.getTag(), element);
+    getGlobalObject("customElements").define(element.getTag(), element);
 }
-