REFA,FEAT: Reintroduced and reintroduced ExtStorage and corresponding enums, functions and so on

src/component.js

@@ -363,7 +363,7 @@ class Component extends StyleAndScriptStoringComponent {
          * @todo very likely code dupplication - but kept for the time being
          *          for error tracking. 
          */
-        if (extStore._type === ExtStoreType.INTERNALIZED_WITHIN) {
+        if (extStore === ExtStoreType.INTERNALIZED_WITHIN) {
             let sizings = Object.keys(this._modifier._modifications)
                 .filter(e => e.includes("width") || e.includes("height"))
                 .filter(e => this._modifier._modifications[e].includes("calc"))

src/componentAncestry/addStyleAndFunctions.js

@@ -33,22 +33,17 @@ class StyleAndScriptStoringComponent extends ModifiableComponent {
     constructor(element, attr = {}) {
         super(element, attr);
 
-        this._styleClassesExtStore = new ExtStorage(
-            ExtStoreType.CENTRALIZED_DOC_HEAD,
-            OverwriteBehaviour.REPLACE
-        );
+        this._styleClassesExtStore = ExtStoreType.CENTRALIZED_DOC_HEAD
+            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);
 
-        this._stylesExtStore = new ExtStorage(
-            ExtStoreType.INTERNALIZED_WITHIN,
-            OverwriteBehaviour.REPLACE
-        );
+
+        this._stylesExtStore = ExtStoreType.INTERNALIZED_WITHIN
+            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);
 
         this._styles = [];
 
-        this._functionsExtStore = new ExtStorage(
-            ExtStoreType.CENTRALIZED_DOC_HEAD,
-            OverwriteBehaviour.REPLACE
-        );
+        this._functionsExtStore = ExtStoreType.CENTRALIZED_DOC_HEAD
+            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);
 
         this._functions = [];
     }

src/context/extStore.js

@@ -5,32 +5,13 @@
  */
 
 /**
- * ExtStorage := Extensions storage (type)
- * Extensions in this context are stylings and scripts (currently only javascript). 
- * internalized: the extensions are part of the element code/attributes - works obviously only with styling
- * individually: an individual tag is created/used
- * collected:    the extension can/will be collected with others in a higher position of the element hierarchy 
- *               (but not document - root)
- * centralized:  the extensions are send to the Page to be joined in a centralized tag/position of the document 
- *               (either head or footer tag)
+ * ESAggregation := Extensions Storage Aggregation (method)
  */
-const ExtStoreType = Object.freeze({
-    INTERNALIZED_WITHIN: 0,
-
-    INDIVIDUALLY_WITHIN: 1,
-    INDIVIDUALLY_BEFORE: 2,
-    INDIVIDUALLY_SEGMENT_BEGIN: 3,
-    INDIVIDUALLY_DOC_HEAD: 4,
-    INDIVIDUALLY_DOC_FOOTER: 5,
-
-    COLLECTED_BEFORE: 6,
-    COLLECTED_SEGMENT_BEGIN: 7,
-    COLLECTED_DOC_HEAD: 8,
-    COLLECTED_DOC_FOOTER: 9,
-
-    CENTRALIZED_DOC_HEAD: 10,
-    CENTRALIZED_SEGMENT_BEGIN: 11,
-    CENTRALIZED_DOC_FOOTER: 12,
+const ESAggregation = Object.freeze({
+    INTERNALIZED: 0,
+    INDIVIDUALLY: 1,
+    COLLECTED: 2,
+    CENTRALIZED: 3
 });
 
 /**
@@ -145,32 +126,48 @@ class FunctionStoreBuffer {
  * internal and external store.
  */
 class ExtStorage {
-    constructor(type = null, behaviour = null) {
+    constructor(
+        aggregation = ESAggregation.INTERNALIZED,
+        position = ExtStorePosition.WITHIN,
+        behaviour = OverwriteBehaviour.DROP_NEW
+    ) {
+        /**
+         * @type {ESAggregation}
+         */
+        this._aggregation = aggregation;
         /**
-         * @type {ExtStorageType}
+         * @type {ESAggregation}
          */
-        this._type = (type === null ? ExtStoreType.CENTRALIZED_DOC_HEAD : type);
+        this._position = position;
         /**
          * @type {OverwriteBehaviour}
          */
-        this._overwriteBehaviour = (behaviour === null ? OverwriteBehaviour.REPLACE : behaviour);
+        this._overwriteBehaviour = behaviour;
     }
 
     /**
      * 
-     * @param {OverwriteBehaviour} behave 
-     * @returns {EXPosConfer}
+     * @param {ESAggregation} position 
      */
-    overwriteBehaviour(behave) {
-        this._overwriteBehaviour = behave;
+    setExtStoreAggregation(aggregation) {
+        this._aggregation = aggregation;
+        return this;
+    }
+    /**
+     * 
+     * @param {ExtStoreType} position 
+    */
+    setExtStorePosition(position) {
+        this._position = position;
         return this;
     }
     /**
      * 
-     * @param {ExtStoreType} type 
+     * @param {OverwriteBehaviour} behave 
+     * @returns {EXPosConfer}
      */
-    setExtStoreType(type) {
-        this._type = type;
+    setOverwriteBehaviour(behave) {
+        this._overwriteBehaviour = behave;
         return this;
     }
 
@@ -265,8 +262,8 @@ class ExtStorage {
      * 
      * @returns {ExtStorage}
      */
-        switch (this._type) {
     setupForGeneralStyling() {
+        switch (this) {
 
             case ExtStoreType.INTERNALIZED_WITHIN:
                 break;
@@ -275,7 +272,9 @@ class ExtStorage {
             case ExtStoreType.INDIVIDUALLY_BEFORE:
             case ExtStoreType.INDIVIDUALLY_SEGMENT_BEGIN:
             case ExtStoreType.INDIVIDUALLY_DOC_FOOTER:
-                this._type = ExtStoreType.INDIVIDUALLY_DOC_HEAD;
+                this._position = ExtStorePosition.DOC_HEAD;
+                this._aggregation = ESAggregation.INDIVIDUALLY;
+                break;
 
             case ExtStoreType.INDIVIDUALLY_DOC_HEAD:
                 break;
@@ -283,7 +282,8 @@ class ExtStorage {
             case ExtStoreType.COLLECTED_BEFORE:
             case ExtStoreType.COLLECTED_SEGMENT_BEGIN:
             case ExtStoreType.COLLECTED_DOC_FOOTER:
-                this._type = ExtStoreType.COLLECTED_DOC_HEAD;
+                this._position = ExtStorePosition.DOC_HEAD;
+                this._aggregation = ESAggregation.COLLECTED;
 
             case ExtStoreType.COLLECTED_DOC_HEAD:
                 break;
@@ -293,8 +293,8 @@ class ExtStorage {
             case ExtStoreType.CENTRALIZED_SEGMENT_BEGIN:
             case ExtStoreType.CENTRALIZED_DOC_FOOTER:
             default:
-                this._type = ExtStoreType.CENTRALIZED_DOC_HEAD;
-
+                this._position = ExtStorePosition.DOC_HEAD;
+                this._aggregation = ESAggregation.CENTRALIZED;
                 break
         }
 
@@ -321,8 +321,157 @@ class ExtStorage {
 
         return this.setupForGeneralStyling();
     }
+
+    /**
+     * 
+     * @returns {InsertPosition}
+     */
+    getRelativePositioning() {
+        switch (this._position) {
+            case ExtStorePosition.BEFORE:
+                return "beforebegin"
+            case ExtStorePosition.SEGMENT_BEGIN:
+                return "afterbegin";
+            case ExtStorePosition.DOC_HEAD:
+            case ExtStorePosition.DOC_FOOTER:
+                return "beforeend"
+            case ExtStorePosition.WITHIN:
+            default:
+                return "afterbegin";
+        }
+    }
+
+    /**
+     * 
+     * @param {HTMLLIElement|Component} element 
+     * @returns {HTMLElement}
+     */
+    getRefElement(element = null) {
+        let ensuredElement = element;
+        if (!element) {
+            return document.querySelector('head');
+        } else if (element instanceof Component) {
+            ensuredElement = element.generate().html;
+        }
+
+        switch (this._position) {
+            case ExtStorePosition.BEFORE:
+            case ExtStorePosition.SEGMENT_BEGIN:
+                return ensuredElement.closest('[data-compel-isHCompel="true"]');
+            case ExtStorePosition.DOC_HEAD:
+                return document.querySelector('head');
+            case ExtStorePosition.DOC_FOOTER:
+                return document.querySelector('footer');
+            case ExtStorePosition.WITHIN:
+            default:
+                return ensuredElement;
+        }
+    }
+
+    insertElementAccordingly(element) {
+        this.getRefElement(element)
+            .insertAdjacentElement(
+                this.getRelativePositioning(),
+                this.getRefElement(element)
+            )
+    }
+
+    getStylingDistribution() {
+        switch (ExtStorePosition) {
+            case ESAggregation.INDIVIDUALLY:
+                return function (ssd, orgElement) {
+                    let container = generateAndFillStyleTag([ssd]);
+                    container.setAttribute("data-compel-individually-nr", counter++);
+                    Page.addElementToPage(container, this);
+                }
+            case ESAggregation.COLLECTED:
+                return function (ssd, orgElement) {
+                    return ssd;
+                }
+            case ESAggregation.CENTRALIZED:
+                return function (ssd, orgElement) {
+                    Page.registerStyling(ssd._identifier, ssd._definition);
+                }
+
+            case ESAggregation.INTERNALIZED:
+            default:
+                return function (ssd, orgElement) {
+                    fillAttrsInContainerByCb(
+                        ssd._definition,
+                        this._element,
+                        (key, val, el) => { el.style[key] = val; }
+                    )
+                }
+        }
+    }
+
+    /**
+     * 
+     * @returns {Function<<SStoreDefinition, Map<*, Array<>>}
+     */
+    getFunctionDistribution() {
+        switch (this._aggregation) {
+            case ESAggregation.INDIVIDUALLY:
+                return function (ssd, bubbelingCollectionMap) {
+                    let container = document.createElement("script");
+                    container.setAttribute("data-compel-individually-nr", counter++);
+                    container.innerText += getScriptTagInjectionText(
+                        clearFunctionDeclarationText(ssd._definition),
+                        ssd._identifier
+                    );
+                    Page.addElementToPage(container, refESType, this._element);
+
+                }
+            case ESAggregation.COLLECTED:
+                return function (ssd, bubbelingCollectionMap) {
+                    if (!bubbelingCollectionMap) {
+
+                        bubbelingCollectionMap = new Map();
+                    } else if (bubbelingCollectionMap.has(this)) {
+                        bubbelingCollectionMap.set(this, []);
+                    }
+
+                    bubbelingCollectionMap.get(this).push(ssd);
+
+                    return bubbelingCollectionMap;
+                }
+
+            case ESAggregation.CENTRALIZED:
+            default:
+                return function (ssd, bubbelingCollectionMap) {
+                    Page.registerPageFunction(ssd._identifier, ssd._definition);
+                }
+        }
+    }
 }
 
+
+/**
+ * ExtStorage := Extensions storage (type)
+ * Extensions in this context are stylings and scripts (currently only javascript). 
+ * internalized: the extensions are part of the element code/attributes - works obviously only with styling
+ * individually: an individual tag is created/used
+ * collected:    the extension can/will be collected with others in a higher position of the element hierarchy 
+ *               (but not document - root)
+ * centralized:  the extensions are send to the Page to be joined in a centralized tag/position of the document 
+ *               (either head or footer tag)
+ */
+const ExtStoreType = Object.freeze({
+    INTERNALIZED_WITHIN: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.WITHIN),
+    INDIVIDUALLY_WITHIN: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.WITHIN),
+    INDIVIDUALLY_BEFORE: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.BEFORE),
+    INDIVIDUALLY_SEGMENT_BEGIN: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.SEGMENT_BEGIN),
+    INDIVIDUALLY_DOC_HEAD: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.DOC_HEAD),
+    INDIVIDUALLY_DOC_FOOTER: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.DOC_FOOTER),
+    COLLECTED_BEFORE: new ExtStorage(ESAggregation.COLLECTED, ExtStorePosition.BEFORE),
+    COLLECTED_SEGMENT_BEGIN: new ExtStorage(ESAggregation.COLLECTED, ExtStorePosition.SEGMENT_BEGIN),
+    COLLECTED_DOC_HEAD: new ExtStorage(ESAggregation.COLLECTED, ExtStorePosition.DOC_HEAD),
+    COLLECTED_DOC_FOOTER: new ExtStorage(ESAggregation.COLLECTED, ExtStorePosition.DOC_FOOTER),
+    CENTRALIZED_DOC_HEAD: new ExtStorage(ESAggregation.CENTRALIZED, ExtStorePosition.DOC_HEAD),
+    CENTRALIZED_SEGMENT_BEGIN: new ExtStorage(ESAggregation.CENTRALIZED, ExtStorePosition.SEGMENT_BEGIN),
+    CENTRALIZED_DOC_FOOTER: new ExtStorage(ESAggregation.CENTRALIZED, ExtStorePosition.DOC_FOOTER)
+});
+
 /**
  * Style or Script Store Definition
  * @property {string} _identifier;