DOC,FEAT: extended "extensions" with helper functions

src/builder.js

@@ -17,9 +17,26 @@ const builder = {
      },
 
      /**
-      * @type {Object}
+      * @property {Function(Component|*): Component}
       */
-     extensions: {},
+     extensions: {
+          /**
+           * 
+           * @param {Component|*} extensionComponent 
+           * @returns {Component}
+           */
+          reComp: function (extensionComponent) {
+               return extensionComponent;
+          },
+          /**
+           * 
+           * @param {Component|FlexContainerComponent|*} extensionComponent 
+           * @returns {FlexContainerComponent}
+           */
+          reFlexComp: function (extensionComponent) {
+               return extensionComponent;
+          }
+     },
 
      /**
       * 

src/context/framework-controls.js

@@ -4,7 +4,11 @@
  * @copyright by its creator Christian Martin 
  */
 
-
+/**
+ * 
+ * @param {Array<CompelExtension>} extensions 
+ * @returns {Component}
+ */
 function frameworkControlPanel(
     extensions = []
 ) {

src/context/generalHelpers.js

@@ -4,24 +4,6 @@
  * @copyright by its creator Christian Martin 
  */
 
-/**
- * Iterates over the keys of attrs, 
- * extracts the corresponding value 
- * and applies the callback (cb) on it in the order (key, value, targetContainer)
- * @extends StyleAndScriptStoringComponent
- * @param {map<string,any>} attrs 
- * @param {Object} intoContainer 
- * @param {Function<string, any, Object>} cb 
- * @returns {Object} the filled container
- */
-function fillAttrsInContainerByCb(attrs, intoContainer, cb) {
-    let keys = Object.keys(attrs);
-    for (let i = 0; i < keys.length; i++) {
-        cb(keys[i], attrs[keys[i]], intoContainer);
-    }
-    return intoContainer;
-}
-
 /**
  * 
  */
@@ -78,49 +60,78 @@ class ObjectAccessObject {
 
 }
 
+
 /**
- * (De-) hides the given element. 
+ * @type {Map<string, Function>}
- * On ensureHidden=true it will be hidden regardless of the current state.
- * 
- * @param {HTMLElement} element 
- * @param {boolean} ensureHidden 
- * @returns {boolean}
  */
-function toggleElementVisibility(element, ensureHidden = false) {
+const helperFun = {
-    element.classList.toggle("compel-mech-hidden");
+    /**
+     * Iterates over the keys of attrs, 
+     * extracts the corresponding value 
+     * and applies the callback (cb) on it in the order (key, value, targetContainer)
+     * @extends StyleAndScriptStoringComponent
+     * @param {map<string,any>} attrs 
+     * @param {Object} intoContainer 
+     * @param {Function<string, any, Object>} cb 
+     * @returns {Object} the filled container
+     */
+    fillAttrsInContainerByCb: function (attrs, intoContainer, cb) {
+        let keys = Object.keys(attrs);
+        for (let i = 0; i < keys.length; i++) {
+            cb(keys[i], attrs[keys[i]], intoContainer);
+        }
+        return intoContainer;
+    },
 
-    let isNowHidden = false;
+    /**
+     * 
+     * @param {string} selector 
+     * @returns {boolean} [ensureHidden=false] for true element is now hidden and false it is not hidden.
+     */
+    toggleSelectorElementVisibility: function (selector, ensureHidden = false) {
+        /**
+         * @type {HTMLElement}
+         */
+        let el = document.querySelector(selector);
+        let name = el.getAttribute("data-autocompel");
 
-    if (element.hasAttribute("hidden")) {
+        console.log("De-/hiding", name, selector);
-        element.removeAttribute("hidden");
-        element.style["display"] = "flex";
-        isNowHidden = false;
-    } else {
-        element.setAttribute("hidden", "hidden");
-        element.style.removeProperty("display");
-        isNowHidden = true;
-    }
 
-    if (ensureHidden && !isNowHidden) {
+        return helperFun.toggleElementVisibility(el, ensureHidden);
-        return toggleSelectorElementVisibility(selector)
+    },
-    } else {
-        return isNowHidden;
-    }
-}
 
-/**
- * 
- * @param {string} selector 
- * @returns {boolean} for true element is now hidden and false it is not hidden.
- */
-function toggleSelectorElementVisibility(selector, ensureHidden = false) {
     /**
-     * @type {HTMLElement}
+     * (De-) hides the given element. 
+     * On ensureHidden=true it will be hidden regardless of the current state.
+     * 
+     * @param {HTMLElement} element 
+     * @param {boolean} ensureHidden 
+     * @returns {boolean}
      */
-    let el = document.querySelector(selector);
+    toggleElementVisibility: function (element, ensureHidden = false) {
-    let name = el.getAttribute("data-autocompel");
+        element.classList.toggle("compel-mech-hidden");
+
+        let isNowHidden = false;
 
-    console.log("De-/hiding", name, selector);
+        if (element.hasAttribute("hidden")) {
+            element.removeAttribute("hidden");
+            element.style["display"] = "flex";
+            isNowHidden = false;
+        } else {
+            element.setAttribute("hidden", "hidden");
+            element.style.removeProperty("display");
+            isNowHidden = true;
+        }
 
-    return toggleElementVisibility(el, ensureHidden);
+        if (ensureHidden && !isNowHidden) {
+            return helperFun.toggleSelectorElementVisibility(selector)
+        } else {
+            return isNowHidden;
+        }
+    },
+
+    /**
+     * @type {Map<string, Function>}
+     */
+    extensions: {}
 }

src/extensions/extension.js

@@ -40,14 +40,33 @@ class CompelExtension {
      */
     builderElements;
 
+    /**
+     * Additional helper functions
+     * @type {{*:Function}}
+     */
+    helperFun;
+
     /**
      * defines how jpc-like-websites is to be extended and executes that extension
      */
     install() {
-        builder.extensions = Object.assign(builder.extensions, this.builderElements);
+        if (this.helperFun) {
+            helperFun.extensions = Object.assign(helperFun.extensions, this.helperFun);
+        }
 
-        for (const key of Object.keys(this.stylings)) {
+        if (this.builderElements) {
-            Page.registerStyling(key, this.stylings[key]);
+            builder.extensions = Object.assign(builder.extensions, this.builderElements);
         }
+
+        if (this.frameworkControls) {
+            Page.extensions = Object.assign(Page.extensions, this.frameworkControls);
+        }
+
+        if (this.stylings) {
+            for (const key of Object.keys(this.stylings)) {
+                Page.registerStyling(key, this.stylings[key]);
+            }
+        }
+
     }
 }

src/modifier.js

@@ -348,7 +348,7 @@ class Modifier {
 
     /**
      * 
-     * @returns {Modifier}
+     * @returns {Modifier|ChainableModifier}
      */
     ensureModifier() {
         return this;