@schukai/monster 1.23.0 → 1.26.1

package/source/dom/customelement.js

@@ -3,46 +3,41 @@
 /**
  * @author schukai GmbH
  */
-
-import {PROPERTY_KEY_INTERNALDATA} from "../constants.js";
+ 
+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');
 
 
 /**
@@ -97,19 +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()`.
+ * You can create the object via the function `document.createElement()`.
  *
  * ```
  * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/customelement.js';
- * </script>
- * ```
- *
- * Alternatively, you can also integrate this function individually.
- *
- * ```
- * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/customelement.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * document.createElement('monster-')
  * </script>
  * ```
  *
@@ -212,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]();
     }
@@ -224,7 +213,7 @@ class CustomElement extends HTMLElement {
      * @since 1.15.0
      */
     static get observedAttributes() {
-        return [ATTRIBUTE_OPTIONS];
+        return [ATTRIBUTE_OPTIONS, ATTRIBUTE_DISABLED];
     }
 
     /**
@@ -264,7 +253,7 @@ class CustomElement extends HTMLElement {
      */
     get defaults() {
         return {
-            disabled: false,
+            ATTRIBUTE_DISABLED: this.getAttribute(ATTRIBUTE_DISABLED),
             shadowMode: 'open',
             delegatesFocus: true,
             templates: {
@@ -319,7 +308,7 @@ class CustomElement extends HTMLElement {
      * @returns {CustomElement}
      */
     attachObserver(observer) {
-        this[internalDataSymbol].attachObserver(observer)
+        this[internalSymbol].attachObserver(observer)
         return this;
     }
 
@@ -330,7 +319,7 @@ class CustomElement extends HTMLElement {
      * @returns {CustomElement}
      */
     detachObserver(observer) {
-        this[internalDataSymbol].detachObserver(observer)
+        this[internalSymbol].detachObserver(observer)
         return this;
     }
 
@@ -339,7 +328,7 @@ class CustomElement extends HTMLElement {
      * @returns {ProxyObserver}
      */
     containsObserver(observer) {
-        return this[internalDataSymbol].containsObserver(observer)
+        return this[internalSymbol].containsObserver(observer)
     }
 
     /**
@@ -354,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) {
 
         }
@@ -372,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;
     }
 
@@ -388,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;
     }
@@ -446,16 +435,10 @@ class CustomElement extends HTMLElement {
             nodeList = elements
         }
 
-        assignUpdaterToElement.call(self, nodeList, clone(self[internalDataSymbol].getRealSubject()['options']));
-
-        if (self.hasAttribute('disabled')) {
-            self.setOption('disabled', true);
-        }
-
+        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.
@@ -465,7 +448,7 @@ class CustomElement extends HTMLElement {
      */
     connectedCallback() {
         let self = this;
-        if (!hasObjectLink(self, objectLinkSymbol)) {
+        if (!hasObjectLink(self, objectUpdaterLinkSymbol)) {
             self[assembleMethodSymbol]()
         }
     }
@@ -504,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);
         }
 
     }
@@ -520,7 +505,6 @@ class CustomElement extends HTMLElement {
     hasNode(node) {
         const self = this;
 
-
         if (containChildNode.call(self, validateInstance(node, Node))) {
             return true;
         }
@@ -536,19 +520,43 @@ class CustomElement extends HTMLElement {
 }
 
 /**
+ * @private
+ * @param {String} filter
+ * @return {*}
  * @this CustomElement
  * @since 1.23.0
- * @private
  */
-function getSlottedElements() {
+function getSlottedElements(filter) {
     const self = this;
-    const slots = self.shadowRoot.querySelectorAll('slot');
-
     const result = new Set;
 
+
+    if (!(self.shadowRoot instanceof ShadowRoot)) {
+        return result;
+    }
+
+    const slots = self.shadowRoot.querySelectorAll('slot');
+
     for (const [, slot] of Object.entries(slots)) {
-        result.append(...slot.assignedNodes())
+        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;
 }
 
@@ -593,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});
 
 }
 
@@ -807,14 +822,13 @@ function registerCustomElement(element) {
  *
  * @param element
  * @param object
- * @return {*}
+ * @return {Promise[]}
  * @since 1.23.0
+ * @memberOf Monster.DOM
  */
 function assignUpdaterToElement(elements, object) {
 
-    const updater = new Set;
-
-    addToObjectLink(this, objectLinkSymbol, updater);
+    const updaters = new Set;
 
     if (elements instanceof NodeList) {
         elements = new Set([
@@ -822,20 +836,35 @@ function assignUpdaterToElement(elements, object) {
         ])
     }
 
+    let result = []; 
+
     elements.forEach((element) => {
         if (!(element instanceof HTMLElement)) return;
         if ((element instanceof HTMLTemplateElement)) return;
+        
         const u = new Updater(element, object)
-        updater.add(u);
+        updaters.add(u);
 
-        u.run().then(() => {
-            u.enableEventProcessing();
-        });
+        result.push(u.run().then(() => {
+            return u.enableEventProcessing();
+        }));
 
     });
 
-    return updater;
+    if (updaters.size > 0) {
+        addToObjectLink(this, objectUpdaterLinkSymbol, updaters);
+    }
+
+    return result;
 }
 
 assignToNamespace('Monster.DOM', CustomElement, registerCustomElement, assignUpdaterToElement);
-export {Monster, registerCustomElement, CustomElement, initMethodSymbol, assembleMethodSymbol, 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.23.0/dist/modules/dom/events.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/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.23.0/dist/modules/dom/events.js';
+ * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/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.23.0/dist/modules/dom/events.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/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.23.0/dist/modules/dom/events.js';
+ * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/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;
             }
         }