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,3 +1,4 @@
 node_modules/
 samples/*/
 jpc-like-websites.js
+extensions/

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)

src/context.js

@@ -27,17 +27,21 @@ class PageBuilder extends ScriptAndStyleContext {
     /**
      * @type {boolean}
      */
-    _useCssCalc;
+    #showFrameworkConsole;
+    /**
+     * @type {Array<CompelExtension>}
+     */
+    _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;
+    }
 
 }
 

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")
+                ])
+        ]);
+}

src/extensions/extension.js

@@ -0,0 +1,44 @@
+class CompelExtension {
+    /**
+     * @type {string}
+     */
+    name;
+    /**
+     * @type {string}
+     */
+    diplayTitle;
+    /**
+     * @type {Array<SStoreDefinition>}
+     */
+    stylings;
+    /**
+     * @type {Array<SStoreDefinition>}
+     */
+    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]);
+        }
+    }
+}