From 0ba13cca946b551345d27e730758388f91daf48c Mon Sep 17 00:00:00 2001 From: chris Date: Fri, 28 Feb 2025 23:54:32 +0100 Subject: [PATCH] REFA,FEAT: Reintroduced and reintroduced ExtStorage and corresponding enums, functions and so on --- src/component.js | 2 +- src/componentAncestry/addStyleAndFunctions.js | 19 +- src/context/extStore.js | 231 ++++++++++++++---- 3 files changed, 198 insertions(+), 54 deletions(-) diff --git a/src/component.js b/src/component.js index 96b2184..6ed2ab3 100644 --- a/src/component.js +++ b/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")) diff --git a/src/componentAncestry/addStyleAndFunctions.js b/src/componentAncestry/addStyleAndFunctions.js index 0410147..a1b09d4 100644 --- a/src/componentAncestry/addStyleAndFunctions.js +++ b/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 = []; } diff --git a/src/context/extStore.js b/src/context/extStore.js index 04259c9..b3dec54 100644 --- a/src/context/extStore.js +++ b/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<>} + */ + 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;