@schukai/monster 1.12.0 → 1.15.0

package/source/dom/events.js

@@ -3,16 +3,17 @@
 /**
  * @author schukai GmbH
  */
-
-import {Monster, validateInstance, validateString} from "../types/validate.js";
+import {Monster, assignToNamespace} from '../namespace.js';
+import {validateInstance, validateString} from "../types/validate.js";
+import {findClosestByAttribute} from "./attributes.js";
 import {getDocument} from "./util.js";
 
 /**
- * You can call the method via the monster namespace `new Monster.DOM.fireEvent()`.
+ * You can call the function via the monster namespace `new Monster.DOM.fireEvent()`.
  *
  * ```
  * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/events.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/events.js';
  * console.log(new Monster.DOM.fireEvent())
  * </script>
  * ```
@@ -21,7 +22,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/events.js';
+ * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/events.js';
  * console.log(fireEvent())
  * </script>
  * ```
@@ -49,7 +50,7 @@ function fireEvent(element, type) {
             bubbles: true,
             cancelable: true,
         });
-        
+
         element.dispatchEvent(event);
 
     } else if (element instanceof HTMLCollection || element instanceof NodeList) {
@@ -62,6 +63,55 @@ 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 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.15.0/dist/modules/dom/events.js';
+ * console.log(new Monster.DOM.findTargetElementFromEvent())
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/events.js';
+ * console.log(findTargetElementFromEvent())
+ * </script>
+ * ```
+ * 
+ * @since 1.14.0
+ * @param {Event} event
+ * @param {string} attributeName
+ * @param {string|null} attributeValue
+ * @throws {Error} unsupported event
+ * @memberOf Monster/DOM
+ * @throws {TypeError} value is not a string
+ * @throws {TypeError} value is not an instance of HTMLElement
+ */
+function findTargetElementFromEvent(event, attributeName, attributeValue) {
+    validateInstance(event, Event);
+
+    if (typeof event.composedPath !== 'function') {
+        throw new Error('unsupported event');
+    }
+
+    const path = event.composedPath();
+    const element = path?.[0];
+
+    if (element instanceof HTMLElement) {
+        return findClosestByAttribute(element, attributeName, attributeValue);
+    }
+
+    return undefined;
+
+}
+
 
-Monster.assignToNamespace('Monster.DOM', fireEvent);
-export {Monster, fireEvent}
+assignToNamespace('Monster.DOM', findTargetElementFromEvent, fireEvent);
+export {Monster, findTargetElementFromEvent, fireEvent}

package/source/dom/locale.js

@@ -0,0 +1,59 @@
+'use strict';
+
+/**
+ * @author schukai GmbH
+ */
+import {Monster, assignToNamespace} from '../namespace.js';
+import { parseLocale} from "../i18n/locale.js";
+import {getDocument} from "./util.js";
+
+/**
+ * @type {string}
+ */
+const DEFAULT_LANGUAGE = 'en';
+
+/**
+ * With this function you can read the language version set by the document.
+ * For this the attibute `lang` in the html tag is read. If no attribute is set, `en` is used as default.
+ *
+ * You can call the function via the monster namespace `new Monster.DOM.getLocaleOfDocument()`.
+ *
+ * ```
+ * <script type="module">
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/locale.js';
+ * console.log(new Monster.DOM.getLocaleOfDocument())
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/locale.js';
+ * console.log(new getLocaleOfDocument())
+ * </script>
+ * ```
+ *
+ * @since 1.13.0
+ * @copyright schukai GmbH
+ * @memberOf Monster/DOM
+ * @throws {TypeError} value is not a string
+ * @throws {Error} unsupported locale
+ */
+function getLocaleOfDocument() {
+
+    const document = getDocument();
+
+    let html = document.querySelector('html')
+    if (html instanceof HTMLElement && html.hasAttribute('lang')) {
+        let locale = html.getAttribute('lang');
+        if (locale) {
+            return new parseLocale(locale)
+        }
+    }
+
+    return parseLocale(DEFAULT_LANGUAGE);
+}
+
+assignToNamespace('Monster.DOM', getLocaleOfDocument);
+export {Monster, getLocaleOfDocument}

package/source/dom/namespace.js

@@ -1,6 +1,8 @@
 'use strict';
 
 /**
+ * In this namespace you will find classes and methods for handling the DOM.
+ * 
  * @namespace Monster/DOM
  * @author schukai GmbH
  */

package/source/dom/template.js

@@ -3,8 +3,8 @@
 /**
  * @author schukai GmbH
  */
-
-import {Monster, Base} from '../types/base.js';
+import {Monster, assignToNamespace} from '../namespace.js';
+import { Base} from '../types/base.js';
 import {validateString} from "../types/validate.js";
 import {getGlobalFunction, getGlobalObject} from '../types/global.js';
 import {validateInstance} from "../types/validate.js";
@@ -15,7 +15,7 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/template.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/template.js';
  * console.log(new Monster.DOM.Template())
  * </script>
  * ```
@@ -24,7 +24,7 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/template.js';
+ * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/template.js';
  * console.log(new Template())
  * </script>
  * ```
@@ -74,7 +74,7 @@ class Template extends Base {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/template.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/template.js';
  * console.log(Monster.DOM.findDocumentTemplate())
  * </script>
  * ```
@@ -83,7 +83,7 @@ class Template extends Base {
  *
  * ```
  * <script type="module">
- * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/template.js';
+ * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/template.js';
  * console.log(findDocumentTemplate())
  * </script>
  * ```
@@ -127,7 +127,7 @@ function findDocumentTemplate(id, root) {
 }
 
 
-Monster.assignToNamespace('Monster.DOM', Template, findDocumentTemplate);
+assignToNamespace('Monster.DOM', Template, findDocumentTemplate);
 export {Monster, Template, findDocumentTemplate}
 
 

package/source/dom/theme.js

@@ -3,8 +3,8 @@
 /**
  * @author schukai GmbH
  */
-
-import {Monster, Base} from '../types/base.js';
+import {Monster, assignToNamespace} from '../namespace.js';
+import { Base} from '../types/base.js';
 import {validateString} from "../types/validate.js";
 import {getGlobalObject} from '../types/global.js';
 import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
@@ -16,7 +16,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/theme.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/theme.js';
  * console.log(new Monster.DOM.Theme())
  * </script>
  * ```
@@ -25,14 +25,14 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/theme.js';
+ * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/theme.js';
  * console.log(new Theme())
  * </script>
  * ```
  * 
  * @example
  *
- * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/theme.js';
+ * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/theme.js';
  *
  * const theme = getDocumentTheme();
  * console.log(theme.getName());
@@ -96,5 +96,5 @@ function getDocumentTheme() {
 
 }
 
-Monster.assignToNamespace('Monster.DOM', Theme, getDocumentTheme);
+assignToNamespace('Monster.DOM', Theme, getDocumentTheme);
 export {Monster, Theme, getDocumentTheme}

package/source/dom/updater.js

@@ -1,9 +1,13 @@
 'use strict';
 
+/**
+ * @author schukai GmbH
+ */
+import {Monster, assignToNamespace} from '../namespace.js';
 import {Pathfinder} from "../data/pathfinder.js";
 import {Pipe} from "../data/pipe.js";
-import {Base, Monster} from "../types/base.js";
-import {isInstance, isArray} from "../types/is.js";
+import {Base} from "../types/base.js";
+import {isInstance, isArray, isIterable} from "../types/is.js";
 import {Observer} from "../types/observer.js";
 import {ProxyObserver} from "../types/proxyobserver.js";
 import {validateInstance, validateArray} from "../types/validate.js";
@@ -20,10 +24,6 @@ import {
 import {findDocumentTemplate} from "./template.js";
 import {getDocument} from "./util.js";
 
-/**
- * @author schukai GmbH
- */
-
 
 /**
  * The updater class connects an object with the dom. in this way, structures and contents in the DOM can be programmatically adapted via attributes.
@@ -34,7 +34,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/updater.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/updater.js';
  * console.log(new Monster.DOM.Updater())
  * </script>
  * ```
@@ -43,14 +43,14 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/updater.js';
  * console.log(new Updater())
  * </script>
  * ```
  *
  * @example
  *
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/updater.js';
  *
  * // First we prepare the html document.
  * // This is done here via script, but can also be inserted into the document as pure html.
@@ -102,6 +102,7 @@ class Updater extends Base {
         this.element = validateInstance(element, HTMLElement);
 
         if (subject === undefined) subject = {}
+        let a = subject;
         if (!isInstance(subject, ProxyObserver)) {
             subject = new ProxyObserver(subject);
         }
@@ -114,7 +115,9 @@ class Updater extends Base {
          * @type {object}
          */
         this.subject = subject.attachObserver(new Observer(() => {
+
             const s = this.subject.getRealSubject();
+
             const diff = Diff(this.last, s)
             this.last = clone(s);
 
@@ -174,6 +177,26 @@ class Updater extends Base {
 
     }
 
+    // /**
+    //  * 
+    //  * @param {string} path
+    //  * @param {*} value
+    //  * @param {boolean} notifyAnyway
+    //  * @return {Updater}
+    //  * @since 1.15.0
+    //  */
+    // setVia(path, value, notifyAnyway) {
+    //     if(isBoolean(notifyAnyway)&&notifyAnyway===true) {
+    //         // the key __init__has no further meaning and is only 
+    //         // used to create the diff for empty objects.
+    //         new Pathfinder(this.last).setVia(path, {'__init__': true});
+    //        
+    //     }
+    //
+    //     new Pathfinder(this.subject.getSubject()).setVia(path, value);
+    //     return this;
+    // }
+
     /**
      * Let the magic begin
      *
@@ -284,6 +307,7 @@ function getControlEventHandler() {
         path = path.substr(5);
 
         let value;
+
         if (element instanceof HTMLInputElement) {
             switch (element.type) {
 
@@ -316,6 +340,9 @@ function getControlEventHandler() {
             }
 
 
+            // values from customelements 
+        } else if ((element?.constructor?.prototype && !!Object.getOwnPropertyDescriptor(element.constructor.prototype, 'value')?.['get']) || element.hasOwnProperty('value')) {
+            value = element?.['value'];
         } else {
             throw new Error("unsupported object");
         }
@@ -411,7 +438,7 @@ function insertElement(change) {
                     insertPoint = containerElement.lastChild;
                 }
 
-                if (!isArray(value)) {
+                if (!isIterable(value)) {
                     throw new Error('the value is not iterable');
                 }
 
@@ -723,5 +750,5 @@ function handleInputControlAttributeUpdate(element, name, value) {
 
 }
 
-Monster.assignToNamespace('Monster.DOM', Updater);
+assignToNamespace('Monster.DOM', Updater);
 export {Monster, Updater}

package/source/dom/util.js

@@ -3,8 +3,8 @@
 /**
  * @author schukai GmbH
  */
-
-import {Monster, getGlobal} from "../types/global.js";
+import {Monster, assignToNamespace} from '../namespace.js';
+import { getGlobal} from "../types/global.js";
 import {validateString} from "../types/validate.js";
 
 
@@ -13,7 +13,7 @@ import {validateString} from "../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/util.js';
  * console.log(Monster.DOM.getDocument())
  * </script>
  * ```
@@ -22,7 +22,7 @@ import {validateString} from "../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/util.js';
+ * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/util.js';
  * console.log(getDocument())
  * </script>
  * ```
@@ -62,7 +62,7 @@ import {validateString} from "../types/validate.js";
  */
 function getDocument() {
     let document = getGlobal()?.['document'];
-    if (typeof document !== 'object') {
+    if (typeof document !== 'object') { 
         throw new Error("not supported environment")
     }
 
@@ -74,7 +74,7 @@ function getDocument() {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/util.js';
  * console.log(Monster.DOM.getWindow())
  * </script>
  * ```
@@ -83,7 +83,7 @@ function getDocument() {
  *
  * ```
  * <script type="module">
- * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/util.js';
+ * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/util.js';
  * console.log(getWindow(null))
  * </script>
  * ```
@@ -140,7 +140,7 @@ function getWindow() {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/util.js';
  * console.log(Monster.DOM.getDocumentFragmentFromString())
  * </script>
  * ```
@@ -149,7 +149,7 @@ function getWindow() {
  *
  * ```
  * <script type="module">
- * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.12.0/dist/modules/dom/util.js';
+ * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/util.js';
  * console.log(getDocumentFragmentFromString('<div></div>'))
  * </script>
  * ```
@@ -199,5 +199,5 @@ function getDocumentFragmentFromString(html) {
 }
 
 
-Monster.assignToNamespace('Monster.DOM', getWindow, getDocument, getDocumentFragmentFromString);
+assignToNamespace('Monster.DOM', getWindow, getDocument, getDocumentFragmentFromString);
 export {Monster, getWindow, getDocument, getDocumentFragmentFromString}