From 51a4da663865091a085265d74ebbb5ff4cd74341 Mon Sep 17 00:00:00 2001 From: chris Date: Fri, 4 Apr 2025 09:52:59 +0200 Subject: [PATCH] DOC,FEAT: extended "extensions" with helper functions --- src/builder.js | 21 +++++- src/context/framework-controls.js | 6 +- src/context/generalHelpers.js | 119 ++++++++++++++++-------------- src/extensions/extension.js | 25 ++++++- src/modifier.js | 2 +- 5 files changed, 112 insertions(+), 61 deletions(-) diff --git a/src/builder.js b/src/builder.js index 4afb420..f622068 100644 --- a/src/builder.js +++ b/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; + } + }, /** * diff --git a/src/context/framework-controls.js b/src/context/framework-controls.js index 4baa475..8f37e2a 100644 --- a/src/context/framework-controls.js +++ b/src/context/framework-controls.js @@ -4,7 +4,11 @@ * @copyright by its creator Christian Martin */ - +/** + * + * @param {Array} extensions + * @returns {Component} + */ function frameworkControlPanel( extensions = [] ) { diff --git a/src/context/generalHelpers.js b/src/context/generalHelpers.js index 1d5d622..562e24d 100644 --- a/src/context/generalHelpers.js +++ b/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} attrs - * @param {Object} intoContainer - * @param {Function} 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. - * On ensureHidden=true it will be hidden regardless of the current state. - * - * @param {HTMLElement} element - * @param {boolean} ensureHidden - * @returns {boolean} + * @type {Map} */ -function toggleElementVisibility(element, ensureHidden = false) { - element.classList.toggle("compel-mech-hidden"); +const helperFun = { + /** + * 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} attrs + * @param {Object} intoContainer + * @param {Function} 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")) { - element.removeAttribute("hidden"); - element.style["display"] = "flex"; - isNowHidden = false; - } else { - element.setAttribute("hidden", "hidden"); - element.style.removeProperty("display"); - isNowHidden = true; - } + console.log("De-/hiding", name, selector); - if (ensureHidden && !isNowHidden) { - return toggleSelectorElementVisibility(selector) - } else { - return isNowHidden; - } -} + return helperFun.toggleElementVisibility(el, ensureHidden); + }, -/** - * - * @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); - let name = el.getAttribute("data-autocompel"); + toggleElementVisibility: function (element, ensureHidden = false) { + element.classList.toggle("compel-mech-hidden"); - console.log("De-/hiding", name, selector); + let isNowHidden = false; - return toggleElementVisibility(el, ensureHidden); -} + if (element.hasAttribute("hidden")) { + 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.toggleSelectorElementVisibility(selector) + } else { + return isNowHidden; + } + }, + + /** + * @type {Map} + */ + extensions: {} +} \ No newline at end of file diff --git a/src/extensions/extension.js b/src/extensions/extension.js index 9532273..744fc9e 100644 --- a/src/extensions/extension.js +++ b/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)) { - Page.registerStyling(key, this.stylings[key]); + if (this.builderElements) { + 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]); + } + } + } } diff --git a/src/modifier.js b/src/modifier.js index d0a3307..70d499a 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -348,7 +348,7 @@ class Modifier { /** * - * @returns {Modifier} + * @returns {Modifier|ChainableModifier} */ ensureModifier() { return this;