From 882303a5faf1ed5cbc0ec7ba0bac4684f7241b27 Mon Sep 17 00:00:00 2001 From: chris Date: Sun, 2 Mar 2025 11:15:51 +0100 Subject: [PATCH] FEAT,REFA: extensions logic and management console An Extension logic is implemented. It will replace the earlier introduced - direct implementation of material icons - use CSS-Cals which is not supported by all browsers yet anyway The "packageWithoutFramework" (pwf) which wasn't properly implemented yet, was replaced with a "Framework Management Console" - a panel that can be shown in the (generated) page if desired. It is supposed to provide some controls as well as the "pwf" functionallity. Further there are considerations to extend the pwf further to introduce the opportunity to generate the components into a form that can be used in other frameworks. --- .gitignore | 1 + src/builder.js | 6 ++- src/context.js | 48 ++++++++++++++++++----- src/context/framework-controls.js | 63 +++++++++++++++++++++++++++++++ src/extensions/extension.js | 44 +++++++++++++++++++++ 5 files changed, 152 insertions(+), 10 deletions(-) create mode 100644 src/context/framework-controls.js create mode 100644 src/extensions/extension.js diff --git a/.gitignore b/.gitignore index 8fefd14..54c1503 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ samples/*/ jpc-like-websites.js +extensions/ diff --git a/src/builder.js b/src/builder.js index 8d88e6a..b9ca1fa 100644 --- a/src/builder.js +++ b/src/builder.js @@ -16,7 +16,10 @@ const builder = { openedChain: {} }, - extended: {}, + /** + * @type {Object} + */ + extensions: {}, /** * @@ -366,6 +369,7 @@ const builder = { main.parentElement.insertAdjacentElement( "afterbegin", builder.genTag("main") + .isHigherComponent() .alignment(Alignment.CENTER) .arrangement(Arrangement.CENTER) .childContext(innerComponents) diff --git a/src/context.js b/src/context.js index 0bb7320..d80c618 100644 --- a/src/context.js +++ b/src/context.js @@ -27,17 +27,21 @@ class PageBuilder extends ScriptAndStyleContext { /** * @type {boolean} */ - _useCssCalc; + #showFrameworkConsole; + /** + * @type {Array} + */ + _extensions; constructor() { super(); + this.#showFrameworkConsole = false; + this.#autoRegisteredComponents = []; this.#registeredComponents = []; - this._groups = new Map(); - } + this._extensions = []; - useCssCalc() { - this._useCssCalc = true; + this._groups = new Map(); } /** @@ -162,7 +166,8 @@ class PageBuilder extends ScriptAndStyleContext { * @todo This method/feature will work only, if an automatic reuse logic for elements/components is implemented within the jpc lib. * @ATTENTION DO NOT USE */ - packageWithoutFramework() { + enableFrameworkConsole() { + this.#showFrameworkConsole = true; return this; } @@ -190,14 +195,39 @@ class PageBuilder extends ScriptAndStyleContext { head.insertAdjacentElement("beforeend", meta); } - generate() { - super.generate(); - compelgroups = this._groups; + /** + * + * @param {CompelExtension} extension + */ + addExtension(extension) { + if (extension instanceof CompelExtension) { + this._extensions.push(extension); + extension.install(); + } } + setPageTitle(title) { + this._apptitle = title; + document.querySelector("title") + .innerText = title; + } + generate() { + super.generate(); + if (this.#showFrameworkConsole) { + let pageContextControlPanel = frameworkControlPanel(this._extensions); + pageContextControlPanel = pageContextControlPanel.generate(); + + document.querySelector('body') + .insertAdjacentElement( + "afterbegin", + pageContextControlPanel.html + ); + } + compelgroups = this._groups; + } } diff --git a/src/context/framework-controls.js b/src/context/framework-controls.js new file mode 100644 index 0000000..bef543d --- /dev/null +++ b/src/context/framework-controls.js @@ -0,0 +1,63 @@ +/** + * + */ + +function frameworkControlPanel( + extensions = [] +) { + return builder.row() + .alignment(Alignment.CENTER) + .arrangement(Arrangement.CENTER) + .isHigherComponent() + .setStylingsStorage(ExtStoreType.INTERNALIZED_WITHIN) + .modifier( + new Modifier() + .fillMaxWidth() + .background(MaterialFiveHundredlColors.ORANGE) + .dimensions( + new Dimensions() + .height(200) + ) + .border( + new Border(3) + .color(Colors.goldenrod_3) + ) + .linkPadding(4) + ) + .childContext([ + builder.column() + .modifier(new Modifier().fillMaxHeight()) + .childContext([ + builder.label().text("Installed Extensions:") + , + builder.column() + .overflow() + .modifier( + new Modifier() + .linkPadding(4).ensureModifier() + .linkBorder(1) + ) + .childContext( + extensions.map( + /** + * + * @param {CompelExtension} ext + * @returns {Component} + */ + ext => builder.span().text(ext.diplayTitle) + ) + ) + ]) + , + builder.div() + .alignment(Alignment.CENTER) + .arrangement(Arrangement.CENTER) + .childContext([ + builder.label() + .text("to generate and download page displayed below click on 'generate'") + , + builder.button() + .text("generate") + ]) + ]); +} diff --git a/src/extensions/extension.js b/src/extensions/extension.js new file mode 100644 index 0000000..2f3d17b --- /dev/null +++ b/src/extensions/extension.js @@ -0,0 +1,44 @@ +class CompelExtension { + /** + * @type {string} + */ + name; + /** + * @type {string} + */ + diplayTitle; + /** + * @type {Array} + */ + stylings; + /** + * @type {Array} + */ + functions; + /** + * Predefined components. Usually of a higher (constructed) kind. + * @type {Object} + */ + components; + /** + * Extensions for/to the Page or the framework in general. + * @type {Object} + */ + frameworkControls; + /** + * Additional elements for the builder (likely referencing components) + * @type {Object} + */ + builderElements; + + /** + * defines how jpc-like-websites is to be extended and executes that extension + */ + install() { + builder.extensions = Object.assign(builder.extensions, this.builderElements); + + for (const key of Object.keys(this.stylings)) { + Page.registerStyling(key, this.stylings[key]); + } + } +}