From b60b89cbeab8532a7e76b209b53d9d3b4917ec85 Mon Sep 17 00:00:00 2001 From: chris Date: Thu, 20 Feb 2025 00:02:41 +0100 Subject: [PATCH] FEAT,MODIFY,FIX: ExtStore functionallity and parent-dependent-sizing since some browser don't support the css value "calc" as in "calc(100% - 16px);" Therefore a "useFlag" was introduced and implemented in the handling. Furhter the "collected" distribution of a (higher) component was implemented. And the passing of the _paddingValues property of the modifier on modifer.join() was implemented. --- src/component.js | 102 ++++++++++++++++++++++++++++++++++++++++------- src/context.js | 8 ++++ src/modifier.js | 3 ++ 3 files changed, 99 insertions(+), 14 deletions(-) diff --git a/src/component.js b/src/component.js index 6f63876..3d35f89 100644 --- a/src/component.js +++ b/src/component.js @@ -330,15 +330,38 @@ class Component extends StyleAndScriptStoringComponent { * for error tracking. */ if (extStore._type === 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")) + .reduce((a, c) => a.add( + c, + this._modifier + ._modifications[c] + .split('(')[1] + .split(' - ')[0] + ), new ObjectAccessObject()); + fillAttrsInContainerByCb( this._modifier._modifications, this._element, (key, val, el) => { el.style[key] = val; } ); + + let hasElSizing = sizings.keys.some(k => Object.keys(this._element.style).includes(k)); + if (sizings.keys.length > 0 && !hasElSizing) { + console.log("Fixing sizing - because not supported 'calc'", sizings); + + fillAttrsInContainerByCb( + sizings, + this._element, + (key, val, el) => { el.style[key] = val; } + ); + } + } else { /* ADDS ELEMENT MODIFIER TO this._styles list for styles processing */ let modifierSSD = new SStoreDefinition(); - modifierSSD._identifier = this._compName; + modifierSSD._identifier = "." + this._compName; modifierSSD._definition = this._modifier._modifications; modifierSSD._extStore = extStore; this._styles.unshift(modifierSSD); @@ -372,16 +395,8 @@ class Component extends StyleAndScriptStoringComponent { break; case ExtStoreType.INDIVIDUALLY_DOC_HEAD: - - let container = document.createElement("style"); + let container = generateAndFillStyleTag([ssd]); container.setAttribute("data-compel-individually-nr", counter++); - - let styleRules = Object.keys(ssd._definition); - - for (let j = 0; j < styleRules.length; j++) { - let rule = styleRules[j]; - container.innerText += `${rule} {${ssd._definition[rule]} } `; - } Page.addElementToPage(container, refESType); break; @@ -476,6 +491,7 @@ class Component extends StyleAndScriptStoringComponent { this._wenity = new WebTrinity(); /* DEAL WITH COMPONENT MODIFICATION FIRST */ + this._modifier._modifications["box-sizing"] = "border-box"; this._modifier._modifications["justify-content"] = this._arrangement; this._modifier._modifications["align-content"] = this._alignment; this._modifier._modifications["align-items"] = this._alignment; @@ -494,7 +510,9 @@ class Component extends StyleAndScriptStoringComponent { child = child.toComponent(); } - child._modifier._updateDimensionsBy(this._modifier._paddingValues); + if (Page._useCssCalc) { + child._modifier._updateDimensionsBy(this._modifier._paddingValues); + } child = child.generate(); let wenity = this._appendChildComponent(child); @@ -513,10 +531,66 @@ class Component extends StyleAndScriptStoringComponent { */ const funcCollections = this._processFunctions(functionStore); + /** + * + * @param {Map>} source + * @param {Map>} target + * @param {ExtStoreType} extStoreType + * @returns + */ + function transferCollectedFunctions(source, target, extStoreType) { + if (source) { + if (source.has(extStoreType)) { + if (funcCollections.has(extStoreType)) { + target.get(extStoreType) + .push(source.get(extStoreType)) + } else { + target.set( + extStoreType, + source.get(extStoreType) + ); + } + } + } + + return target; + } + + function executeOnExtStoreTypeCollectedTriple(func) { + return new Map([ + { [ExtStoreType.COLLECTED_SEGMENT_BEGIN]: func(ExtStoreType.COLLECTED_SEGMENT_BEGIN) }, + { [ExtStoreType.COLLECTED_DOC_HEAD]: func(ExtStoreType.COLLECTED_DOC_HEAD) }, + { [ExtStoreType.COLLECTED_DOC_FOOTER]: func(ExtStoreType.COLLECTED_DOC_FOOTER) } + ]); + } + + for (let i = 0; i < collectedWenities.length; i++) { + const child = collectedWenities[i]; + if (child.js) { + executeOnExtStoreTypeCollectedTriple( + (extstoretype) => transferCollectedFunctions(child.js, funcCollections, extstoretype) + ); + } + } if (this.#isCompel) { - funcCollections.get(ExtStoreType.COLLECTED_DOC_FOOTER) - funcCollections.get(ExtStoreType.COLLECTED_DOC_HEAD) - funcCollections.get(ExtStoreType.COLLECTED_SEGMENT_BEGIN) + function dealCollected(map, extStoreType) { + if (map.has(extStoreType)) { + let collectionScriptTag = generateAndFillScriptTag(map.get(extStoreType)); + if (extStoreType === ExtStoreType.COLLECTED_SEGMENT_BEGIN) { + this._element.insertAdjacentElement( + "afterbegin", + generateAndFillScriptTag(segment) + ); + } else { + Page.addElementToPage( + collectionScriptTag, + extStoreType + ); + } + } + } + executeOnExtStoreTypeCollectedTriple((est) => dealCollected(funcCollections, est)); + } else { this._wenity.js = funcCollections; this._wenity.css = styleCollection; diff --git a/src/context.js b/src/context.js index 583514c..773c0b6 100644 --- a/src/context.js +++ b/src/context.js @@ -12,11 +12,19 @@ class PageBuilder extends ScriptAndStyleContext { #autoRegisteredComponents; #registeredComponents; + /** + * @type {boolean} + */ + _useCssCalc; constructor() { super(); this.#autoRegisteredComponents = []; this.#registeredComponents = []; + + useCssCalc() { + this._useCssCalc = true; + } } autoRegisterComponent() { diff --git a/src/modifier.js b/src/modifier.js index fa60d53..73bdd9e 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -204,6 +204,9 @@ class Modifier { delete this._modifications[removeMods[i]]; } } + if (modifier._paddingValues) { + this._paddingValues = modifier._paddingValues; + } return this; }