@schukai/monster 1.22.0 → 1.26.0

package/source/dom/customelement.js

@@ -1,47 +1,43 @@
 'use strict';
 
-import {PROPERTY_KEY_INTERNALDATA} from "../constants.js";
-import {extend} from "../data/extend.js";
-import {Pathfinder} from "../data/pathfinder.js";
 /**
  * @author schukai GmbH
  */
+ 
+import {internalSymbol} from "../constants.js";
+import {extend} from "../data/extend.js";
+import {Pathfinder} from "../data/pathfinder.js";
 import {assignToNamespace, Monster} from '../namespace.js';
 import {parseDataURL} from "../types/dataurl.js";
 import {getGlobalObject} from "../types/global.js";
-import {isArray, isObject, isString} from "../types/is.js";
+import {isArray, isFunction, isObject, isString} from "../types/is.js";
 import {Observer} from "../types/observer.js";
 import {ProxyObserver} from "../types/proxyobserver.js";
 import {validateFunction, validateInstance, validateObject} from "../types/validate.js";
 import {clone} from "../util/clone.js";
 import {addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.js";
-import {ATTRIBUTE_OPTIONS, OBJECTLINK_KEY_UPDATER} from "./constants.js";
+import {ATTRIBUTE_DISABLED, ATTRIBUTE_OPTIONS, objectUpdaterLinkSymbol} from "./constants.js";
 import {findDocumentTemplate, Template} from "./template.js";
 import {Updater} from "./updater.js";
 
 /**
- * @private
- * @type {symbol}
- */
-const internalDataSymbol = Symbol.for(PROPERTY_KEY_INTERNALDATA);
-
-/**
- * @private
+ * @memberOf Monster.DOM
  * @type {symbol}
  */
-const objectLinkSymbol = Symbol.for(OBJECTLINK_KEY_UPDATER);
+const initMethodSymbol = Symbol('initMethodSymbol');
 
 /**
  * @memberOf Monster.DOM
  * @type {symbol}
  */
-const initMethodSymbol = Symbol('initMethodSymbol');
+const assembleMethodSymbol = Symbol('assembleMethodSymbol');
 
 /**
+ * this symbol holds the attribute observer callbacks. The key is the attribute name.
  * @memberOf Monster.DOM
  * @type {symbol}
  */
-const assembleMethodSymbol = Symbol('assembleMethodSymbol');
+const attributeObserverSymbol = Symbol('attributeObserver');
 
 
 /**
@@ -96,21 +92,12 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
  *
  * <img src="./images/customelement-class.png">
  *
- * You can create the object via the monster namespace `new Monster.DOM.CustomElement()`.
- *
- * ```
- * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/customelement.js';
- * console.log(new Monster.DOM.CustomElement())
- * </script>
- * ```
- *
- * Alternatively, you can also integrate this function individually.
+ * You can create the object via the function `document.createElement()`.
  *
  * ```
  * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/customelement.js';
- * console.log(new CustomElement())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/monster.js';
+ * document.createElement('monster-')
  * </script>
  * ```
  *
@@ -213,7 +200,8 @@ class CustomElement extends HTMLElement {
      */
     constructor() {
         super();
-        this[internalDataSymbol] = new ProxyObserver({'options': extend({}, this.defaults, getOptionsFromAttributes.call(this))});
+        this[internalSymbol] = new ProxyObserver({'options': extend({}, this.defaults, getOptionsFromAttributes.call(this))});
+        this[attributeObserverSymbol] = {};
         initOptionObserver.call(this);
         this[initMethodSymbol]();
     }
@@ -225,7 +213,7 @@ class CustomElement extends HTMLElement {
      * @since 1.15.0
      */
     static get observedAttributes() {
-        return [ATTRIBUTE_OPTIONS];
+        return [ATTRIBUTE_OPTIONS, ATTRIBUTE_DISABLED];
     }
 
     /**
@@ -265,7 +253,7 @@ class CustomElement extends HTMLElement {
      */
     get defaults() {
         return {
-            disabled: false,
+            ATTRIBUTE_DISABLED: this.getAttribute(ATTRIBUTE_DISABLED),
             shadowMode: 'open',
             delegatesFocus: true,
             templates: {
@@ -320,7 +308,7 @@ class CustomElement extends HTMLElement {
      * @returns {CustomElement}
      */
     attachObserver(observer) {
-        this[internalDataSymbol].attachObserver(observer)
+        this[internalSymbol].attachObserver(observer)
         return this;
     }
 
@@ -331,7 +319,7 @@ class CustomElement extends HTMLElement {
      * @returns {CustomElement}
      */
     detachObserver(observer) {
-        this[internalDataSymbol].detachObserver(observer)
+        this[internalSymbol].detachObserver(observer)
         return this;
     }
 
@@ -340,7 +328,7 @@ class CustomElement extends HTMLElement {
      * @returns {ProxyObserver}
      */
     containsObserver(observer) {
-        return this[internalDataSymbol].containsObserver(observer)
+        return this[internalSymbol].containsObserver(observer)
     }
 
     /**
@@ -355,7 +343,7 @@ class CustomElement extends HTMLElement {
         let value;
 
         try {
-            value = new Pathfinder(this[internalDataSymbol].getRealSubject()['options']).getVia(path);
+            value = new Pathfinder(this[internalSymbol].getRealSubject()['options']).getVia(path);
         } catch (e) {
 
         }
@@ -373,7 +361,7 @@ class CustomElement extends HTMLElement {
      * @since 1.14.0
      */
     setOption(path, value) {
-        new Pathfinder(this[internalDataSymbol].getSubject()['options']).setVia(path, value);
+        new Pathfinder(this[internalSymbol].getSubject()['options']).setVia(path, value);
         return this;
     }
 
@@ -389,7 +377,7 @@ class CustomElement extends HTMLElement {
         }
 
         const self = this;
-        extend(self[internalDataSymbol].getSubject()['options'], self.defaults, options);
+        extend(self[internalSymbol].getSubject()['options'], self.defaults, options);
 
         return self;
     }
@@ -413,15 +401,17 @@ class CustomElement extends HTMLElement {
     [assembleMethodSymbol]() {
 
         const self = this;
-        let elements;
+        let elements, nodeList;
 
-        if (this.getOption('shadowMode', false) !== false) {
+        if (self.getOption('shadowMode', false) !== false) {
             try {
-                initShadowRoot.call(this);
-                elements = this.shadowRoot.childNodes;
+                initShadowRoot.call(self);
+                elements = self.shadowRoot.childNodes;
+
             } catch (e) {
 
             }
+
             try {
                 initCSSStylesheet.call(this);
             } catch (e) {
@@ -430,34 +420,25 @@ class CustomElement extends HTMLElement {
         }
 
         if (!(elements instanceof NodeList)) {
-            initHtmlContent.call(this);
-            elements = this.childNodes;
-        }
-
-        const updater = new Set;
-        addToObjectLink(this, objectLinkSymbol, updater);
-
-        for (const [, element] of Object.entries(elements)) {
-
-            if (!(element instanceof HTMLElement)) continue;
-            if ((element instanceof HTMLTemplateElement)) continue;
-            const u = new Updater(element, clone(self[internalDataSymbol].getRealSubject()['options']))
-            updater.add(u);
-
-            u.run().then(() => {
-                u.enableEventProcessing();
-            });
-
+            if (!(elements instanceof NodeList)) {
+                initHtmlContent.call(this);
+                elements = this.childNodes;
+            }
         }
 
-        if (this.hasAttribute('disabled')) {
-            self.setOption('disabled', true);
+        try {
+            nodeList = new Set([
+                ...elements,
+                ...getSlottedElements.call(self)
+            ])
+        } catch (e) {
+            nodeList = elements
         }
 
-        return this;
+        assignUpdaterToElement.call(self, nodeList, clone(self[internalSymbol].getRealSubject()['options']));
+        return self;
     }
 
-
     /**
      * Called every time the element is inserted into the DOM. Useful for running setup code, such as
      * fetching resources or rendering. Generally, you should try to delay work until this time.
@@ -467,7 +448,7 @@ class CustomElement extends HTMLElement {
      */
     connectedCallback() {
         let self = this;
-        if (!hasObjectLink(self, objectLinkSymbol)) {
+        if (!hasObjectLink(self, objectUpdaterLinkSymbol)) {
             self[assembleMethodSymbol]()
         }
     }
@@ -506,8 +487,10 @@ class CustomElement extends HTMLElement {
     attributeChangedCallback(attrName, oldVal, newVal) {
         const self = this;
 
-        if (attrName === ATTRIBUTE_OPTIONS) {
-            self.setOptions(newVal);
+        const callback = self[attributeObserverSymbol]?.[attrName];
+
+        if (isFunction(callback)) {
+            callback.call(self, newVal, oldVal);
         }
 
     }
@@ -522,7 +505,6 @@ class CustomElement extends HTMLElement {
     hasNode(node) {
         const self = this;
 
-
         if (containChildNode.call(self, validateInstance(node, Node))) {
             return true;
         }
@@ -538,6 +520,48 @@ class CustomElement extends HTMLElement {
 }
 
 /**
+ * @private
+ * @param {String} filter
+ * @return {*}
+ * @this CustomElement
+ * @since 1.23.0
+ */
+function getSlottedElements(filter) {
+    const self = this;
+    const result = new Set;
+
+
+    if (!(self.shadowRoot instanceof ShadowRoot)) {
+        return result;
+    }
+
+    const slots = self.shadowRoot.querySelectorAll('slot');
+
+    for (const [, slot] of Object.entries(slots)) {
+        slot.assignedElements().forEach(function (node) {
+
+            if (!(node instanceof HTMLElement)) return;
+
+            if (filter !== undefined) {
+                node.querySelectorAll(filter).forEach(function (n) {
+                    result.add(n);
+                });
+
+                if (node.matches(filter)) {
+                    result.add(node);
+                }
+
+            } else {
+                result.add(node);
+            }
+        })
+    }
+
+    return result;
+}
+
+/**
+ * @this CustomElement
  * @private
  * @param {Node} node
  * @return {boolean}
@@ -577,63 +601,70 @@ function initOptionObserver() {
             return;
         }
 
-        if (self.shadowRoot instanceof ShadowRoot) {
-            const found = self.shadowRoot.querySelectorAll('button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]');
-            for (const [, element] of Object.entries(found)) {
-                if (flag === true) {
-                    element.setAttribute('disabled', '');
-                } else {
-                    element.removeAttribute('disabled');
-                }
+        lastDisabledValue = flag;
 
-            }
+        if (!(self.shadowRoot instanceof ShadowRoot)) {
+            return;
         }
 
-        lastDisabledValue = flag;
+        const query = 'button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]';
+        const elements = self.shadowRoot.querySelectorAll(query);
+
+        let nodeList;
+        try {
+            nodeList = new Set([
+                ...elements,
+                ...getSlottedElements.call(self, query)
+            ])
+        } catch (e) {
+            nodeList = elements
+        }
+
+        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, Symbol.for(OBJECTLINK_KEY_UPDATER))) {
+        if (!hasObjectLink(self, objectUpdaterLinkSymbol)) {
             return;
         }
         // inform every element
-        const updaters = getLinkedObjects(self, Symbol.for(OBJECTLINK_KEY_UPDATER));
+        const updaters = getLinkedObjects(self, objectUpdaterLinkSymbol);
 
         for (const list of updaters) {
             for (const updater of list) {
-                let d = clone(self[internalDataSymbol].getRealSubject()['options']);
+                let d = clone(self[internalSymbol].getRealSubject()['options']);
                 Object.assign(updater.getSubject(), d);
             }
         }
 
     }));
 
-    const observer = new MutationObserver(function (mutationsList, observer) {
-
-        for (const mutation of mutationsList) {
-            if (mutation.type === 'attributes') {
-
-                switch (mutation?.attributeName) {
-                    case 'disabled':
-                        self.setOption('disabled', self.hasAttribute('disabled') ? true : undefined);
-                        break;
-                    case ATTRIBUTE_OPTIONS:
-                        const options = getOptionsFromAttributes.call(self);
-                        if (isObject(options)) {
-                            self.setOptions(options);
-                        }
-
-                        break;
-                }
+    // disabled
+    self[attributeObserverSymbol][ATTRIBUTE_DISABLED] = (newVal) => {
+        if (self.hasAttribute(ATTRIBUTE_DISABLED)) {
+            self.setOption(ATTRIBUTE_DISABLED, true);
+        } else {
+            self.setOption(ATTRIBUTE_DISABLED, undefined);
+        }
+    }
 
-            }
+    // data-monster-options
+    self[attributeObserverSymbol][ATTRIBUTE_OPTIONS] = () => {
+        const options = getOptionsFromAttributes.call(self);
+        if (isObject(options)) {
+            self.setOptions(options);
         }
-    });
+    }
 
-    observer.observe(this, {attributes: true, attributeOldValue: true, childList: false, subtree: false});
 
 }
 
@@ -786,5 +817,54 @@ function registerCustomElement(element) {
     getGlobalObject('customElements').define(element.getTag(), element);
 }
 
-assignToNamespace('Monster.DOM', CustomElement, registerCustomElement);
-export {Monster, registerCustomElement, CustomElement, initMethodSymbol, assembleMethodSymbol}
+
+/**
+ *
+ * @param element
+ * @param object
+ * @return {Promise[]}
+ * @since 1.23.0
+ * @memberOf Monster.DOM
+ */
+function assignUpdaterToElement(elements, object) {
+
+    const updaters = new Set;
+
+    if (elements instanceof NodeList) {
+        elements = new Set([
+            ...elements
+        ])
+    }
+
+    let result = []; 
+
+    elements.forEach((element) => {
+        if (!(element instanceof HTMLElement)) return;
+        if ((element instanceof HTMLTemplateElement)) return;
+        
+        const u = new Updater(element, object)
+        updaters.add(u);
+
+        result.push(u.run().then(() => {
+            return u.enableEventProcessing();
+        }));
+
+    });
+
+    if (updaters.size > 0) {
+        addToObjectLink(this, objectUpdaterLinkSymbol, updaters);
+    }
+
+    return result;
+}
+
+assignToNamespace('Monster.DOM', CustomElement, registerCustomElement, assignUpdaterToElement);
+export {
+    Monster,
+    registerCustomElement,
+    CustomElement,
+    initMethodSymbol,
+    assembleMethodSymbol,
+    assignUpdaterToElement,
+    attributeObserverSymbol
+}

package/source/dom/events.js

@@ -13,7 +13,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/events.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/monster.js';
  * console.log(new Monster.DOM.fireEvent())
  * </script>
  * ```
@@ -22,7 +22,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/events.js';
+ * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/events.js';
  * console.log(fireEvent())
  * </script>
  * ```
@@ -66,14 +66,14 @@ function fireEvent(element, type) {
 
 /**
  * This function gets the path `Event.composedPath()` from an event and tries to find the next element
- * up the tree `element.closest()` with the attribute and value. If no value, or a value that is undefined or null, 
+ * up the tree `element.closest()` with the attribute and value. If no value, or a value that is undefined or null,
  * is specified, only the attribute is searched.
  *
  * You can call the function via the monster namespace `new Monster.DOM.findTargetElementFromEvent()`.
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/events.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/monster.js';
  * console.log(new Monster.DOM.findTargetElementFromEvent())
  * </script>
  * ```
@@ -82,7 +82,7 @@ function fireEvent(element, type) {
  *
  * ```
  * <script type="module">
- * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/events.js';
+ * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/events.js';
  * console.log(findTargetElementFromEvent())
  * </script>
  * ```
@@ -114,7 +114,7 @@ function findTargetElementFromEvent(event, attributeName, attributeValue) {
 
             if (o instanceof HTMLElement &&
                 o.hasAttribute(attributeName)
-                && (attributeValue===undefined || o.getAttribute(attributeName) === attributeValue)) {
+                && (attributeValue === undefined || o.getAttribute(attributeName) === attributeValue)) {
                 return o;
             }
         }