@schukai/monster 3.46.0 → 3.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.46.0",
+  "version": "3.48.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/dom/constants.mjs

@@ -59,6 +59,9 @@ export {
     ATTRIBUTE_HIDDEN,
     objectUpdaterLinkSymbol,
     customElementUpdaterLinkSymbol,
+    initControlCallbackName,
+    ATTRIBUTE_SCRIPT_HOST,
+    ATTRIBUTE_OPTION_CALLBACK
 };
 
 /**
@@ -86,6 +89,16 @@ const ATTRIBUTE_PREFIX = "data-monster-";
  */
 const ATTRIBUTE_OPTIONS = `${ATTRIBUTE_PREFIX}options`;
 
+/**
+ * This is name of the attribute to pass the script host to a control
+ *
+ * @memberOf Monster.DOM
+ * @license AGPLv3
+ * @since 3.48.0
+ * @type {string}
+ */
+const ATTRIBUTE_SCRIPT_HOST = `${ATTRIBUTE_PREFIX}script-host`;
+
 /**
  * This is the name of the attribute to pass options to a control
  *
@@ -96,6 +109,26 @@ const ATTRIBUTE_OPTIONS = `${ATTRIBUTE_PREFIX}options`;
  */
 const ATTRIBUTE_OPTIONS_SELECTOR = `${ATTRIBUTE_PREFIX}options-selector`;
 
+/**
+ * This is the name of the attribute to pass the callback to a control
+ *
+ * @memberOf Monster.DOM
+ * @license AGPLv3
+ * @since 3.48.0
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_CALLBACK = `${ATTRIBUTE_PREFIX}option-callback`;
+
+/**
+ * This is the name of the callback to pass the callback to a control
+ *
+ * @memberOf Monster.DOM
+ * @license AGPLv3
+ * @since 3.48.0
+ * @type {string}
+ */
+const initControlCallbackName = `initCustomControlCallback`;
+
 /**
  * @memberOf Monster.DOM
  * @type {string}

package/source/dom/customelement.mjs

@@ -5,6 +5,7 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
+import {findElementWithIdUpwards} from "./util.mjs";
 import {internalSymbol} from "../constants.mjs";
 import {extend} from "../data/extend.mjs";
 import {Pathfinder} from "../data/pathfinder.mjs";
@@ -22,8 +23,11 @@ import {
     ATTRIBUTE_DISABLED,
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_OPTIONS,
+    ATTRIBUTE_OPTION_CALLBACK,
     ATTRIBUTE_OPTIONS_SELECTOR,
+    ATTRIBUTE_SCRIPT_HOST,
     customElementUpdaterLinkSymbol,
+    initControlCallbackName
 } from "./constants.mjs";
 import {findDocumentTemplate, Template} from "./template.mjs";
 import {addObjectWithUpdaterToElement} from "./updater.mjs";
@@ -67,6 +71,12 @@ const attributeObserverSymbol = Symbol.for("@schukai/monster/dom/@@attributeObse
  */
 const attributeMutationObserverSymbol = Symbol("@schukai/monster/dom/@@mutationObserver");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const scriptHostElementSymbol = Symbol("scriptHostElement");
+
 /**
  * HTMLElement
  * @external HTMLElement
@@ -212,6 +222,7 @@ class CustomElement extends HTMLElement {
         });
         this[initMethodSymbol]();
         initOptionObserver.call(this);
+        this[scriptHostElementSymbol] = [];
 
     }
 
@@ -520,6 +531,7 @@ class CustomElement extends HTMLElement {
             self.setOptions(ScriptOptions);
         }
 
+
         if (self.getOption("shadowMode", false) !== false) {
             try {
                 initShadowRoot.call(self);
@@ -541,6 +553,8 @@ class CustomElement extends HTMLElement {
             }
         }
 
+        initFromCallbackHost.call(this);
+
         try {
             nodeList = new Set([...elements, ...getSlottedElements.call(self)]);
         } catch (e) {
@@ -607,7 +621,7 @@ class CustomElement extends HTMLElement {
         const self = this;
 
         if (attrName.startsWith("data-monster-option-")) {
-            setOptionFromAttribute(self, attrName, this[internalSymbol].getSubject()["options"]) 
+            setOptionFromAttribute(self, attrName, this[internalSymbol].getSubject()["options"])
         }
 
         const callback = self[attributeObserverSymbol]?.[attrName];
@@ -641,6 +655,99 @@ class CustomElement extends HTMLElement {
 
         return containChildNode.call(self.shadowRoot, node);
     }
+
+    /**
+     * Calls a callback function if it exists.
+     * 
+     * @param {string} name
+     * @param {*} args
+     * @returns {*}
+     */
+    callCallback(name, args) {
+        const self = this;
+        return callControlCallback.call(self, name, ...args);
+    }
+
+
+}
+
+/**
+ * @param {string} callBackFunctionName
+ * @param {*}  args
+ * @return {any}
+ */
+function callControlCallback(callBackFunctionName, ...args) {
+    const self = this;
+
+    if (!isString(callBackFunctionName) || callBackFunctionName === "") {
+        return;
+    }
+
+    if (callBackFunctionName in self) {
+        return self[callBackFunctionName](self, ...args);
+        
+    }
+
+    if (!self.hasAttribute(ATTRIBUTE_SCRIPT_HOST)) {
+        return;
+    }
+
+    if (self[scriptHostElementSymbol].length === 0) {
+
+        const targetId = self.getAttribute(ATTRIBUTE_SCRIPT_HOST);
+        if (!targetId) {
+            return;
+        }
+
+        const list = targetId.split(",")
+        for (const id of list) {
+            const host = findElementWithIdUpwards(self, targetId);
+            if (!(host instanceof HTMLElement)) {
+                continue;
+            }
+
+            self[scriptHostElementSymbol].push(host);
+        }
+    }
+
+    for (const host of self[scriptHostElementSymbol]) {
+        if (callBackFunctionName in host) {
+            try {
+                return host[callBackFunctionName](self, ...args);
+            } catch (e) {
+                addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
+            }
+        }
+    }
+
+    addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `callback ${callBackFunctionName} not found`);
+
+}
+
+/**
+ * This Function is called when the element is attached to the DOM.
+ *
+ * It looks for the attribute `data-monster-option-callback`. Is this attribute is not set, the default callback
+ * `initCustomControlCallback` is called.
+ *
+ * The callback is searched in this element and in the host element. If the callback is found, it is called with the
+ * element as parameter.
+ *
+ * The `monster
+ *
+ * @this CustomElement
+ */
+function initFromCallbackHost() {
+    const self = this;
+
+    let callBackFunctionName = initControlCallbackName // default callback
+    if (self.hasAttribute(ATTRIBUTE_OPTION_CALLBACK)) {
+        callBackFunctionName = self.getAttribute(ATTRIBUTE_OPTION_CALLBACK);
+    }
+
+    callControlCallback.call(self, callBackFunctionName);
+
+
 }
 
 /**

package/source/types/version.mjs

@@ -142,7 +142,7 @@ function getMonsterVersion() {
     }
 
     /** don't touch, replaced by make with package.json version */
-    monsterVersion = new Version("3.46.0");
+    monsterVersion = new Version("3.48.0");
 
     return monsterVersion;
 }

package/test/cases/dom/customelement-initfromscripthost.mjs

@@ -0,0 +1,143 @@
+'use strict';
+
+import chai from "chai"
+// import {internalSymbol} from "../../../../application/source/constants.mjs";
+// import {ATTRIBUTE_OPTIONS} from "../../../../application/source/dom/constants.mjs";
+import {getDocument} from "../../../../application/source/dom/util.mjs";
+// import {ProxyObserver} from "../../../../application/source/types/proxyobserver.mjs";
+// import {addObjectWithUpdaterToElement} from "../../../../application/source/dom/updater.mjs";
+import {chaiDom} from "../../util/chai-dom.mjs";
+import {initJSDOM} from "../../util/jsdom.mjs";
+
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+// let html1 = `
+//     <div id="scripthost">
+//     </div>
+//    
+//     <div>
+//     <
+// </div>
+// `;
+
+
+// defined in constants.mjs
+// const updaterSymbolKey = "@schukai/monster/dom/custom-element@@options-updater-link"
+// const updaterSymbolSymbol = Symbol.for(updaterSymbolKey);
+
+
+
+describe('DOM', function () {
+
+    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2,assignUpdaterToElement;
+
+    describe('initFromScriptHost()', function () {
+
+        const randomTagNumber = "monster-test"+Math.floor(Math.random() * 1000000);
+        
+        before(function (done) {
+            initJSDOM().then(() => {
+
+                import("../../../../application/source/dom/customelement.mjs").then((m) => {
+
+                    try {
+                        CustomElement = m['CustomElement'];
+                        registerCustomElement = m['registerCustomElement'];
+
+                        TestComponent2 = class extends CustomElement {
+                            static getTag() {
+                                return randomTagNumber;
+                            }
+
+                            /**
+                             *
+                             * @return {Object}
+                             */
+                            get defaults() {
+
+                                return Object.assign({}, super.defaults, {
+                                    test: 0,
+                                    templates: {
+                                        main: '<h1></h1><article><p>test</p><div id="container"></div></article>'
+                                    },
+                                })
+                            }
+
+                        }
+
+                        registerCustomElement(TestComponent2)
+
+                        document = getDocument();
+                        done()
+                    } catch (e) {
+                        done(e);
+                    }
+
+
+                }).catch((e) => {
+                    done(e);
+                });
+
+            });
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        describe('call callback', function () {
+            it('should not found callback and add error attribute', function () {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;
+                
+                let control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', "call-back-host");
+                document.getElementById('container').appendChild(control);
+                expect(control.getOption('test')).is.eql(0);
+                expect(control.hasAttribute('data-monster-error')).is.true;
+
+            });
+            
+            it('should found callback initCustomControlCallback', function () {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;
+                
+                const container = document.getElementById('call-back-host');
+                container.initCustomControlCallback = function (control) {
+                    control.setOption('test', 1);
+                }
+                
+                let control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', "call-back-host");
+                document.getElementById('container').appendChild(control);
+                expect(control.getOption('test')).is.eql(1);
+                expect(control.hasAttribute('data-monster-error')).is.false;
+
+            });
+            
+            it('should found callback initCustomControlCallback from self', function () {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;
+
+                let control = document.createElement(randomTagNumber);
+                expect(control.getOption('test')).is.eql(0);
+                control.initCustomControlCallback = function (control) {
+                    control.setOption('test', 2);
+                }
+                
+                control.setAttribute('data-monster-script-host', "call-back-host");
+                document.getElementById('container').appendChild(control);
+                expect(control.getOption('test')).is.eql(2);
+                expect(control.hasAttribute('data-monster-error')).is.false;
+
+            });
+        })
+
+    });
+})

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.46.0")
+        monsterVersion = new Version("3.48.0")
 
         let m = getMonsterVersion();