|
|
|
@ -285,113 +285,6 @@ class Component extends StyleAndScriptStoringComponent { |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* Defines how a child Component is to be appended. |
|
|
|
* @param {Component} component the child component to add it. |
|
|
|
* @returns {HTMLElement} |
|
|
|
*/ |
|
|
|
_appendChildComponent(component) { |
|
|
|
let child = new WebTrinity(); |
|
|
|
if (component instanceof Component) { |
|
|
|
child = component.generate(); |
|
|
|
} |
|
|
|
|
|
|
|
if (component instanceof WebTrinity) { |
|
|
|
child = component; |
|
|
|
} |
|
|
|
|
|
|
|
if (component instanceof HTMLElement) { |
|
|
|
console.log("No wenity set - htmlEl was given"); |
|
|
|
child.html = component; |
|
|
|
} |
|
|
|
|
|
|
|
this._element.append(child.html); |
|
|
|
|
|
|
|
return child; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* |
|
|
|
* @param {ExtStorage} extStore |
|
|
|
* @returns {Array<SStoreDefinition>} |
|
|
|
*/ |
|
|
|
_processStyles(extStore = null) { |
|
|
|
extStore = (extStore |
|
|
|
? extStore |
|
|
|
: this._stylesExtStore |
|
|
|
) |
|
|
|
.setupForGeneralStyling(); |
|
|
|
|
|
|
|
let forCollection = []; |
|
|
|
|
|
|
|
let counter = 0; |
|
|
|
for (const ssd of this._styles) { |
|
|
|
/* Make sure that the type is unified for later processing */ |
|
|
|
if (ssd._definition instanceof Modifier) { |
|
|
|
ssd._definition = ssd._definition._modifications; |
|
|
|
} |
|
|
|
|
|
|
|
/* Check/Ensure proper ExtStorageType for following comparison */ |
|
|
|
/** |
|
|
|
* @type {ExtStorage} |
|
|
|
*/ |
|
|
|
let curExtStore = extStore; |
|
|
|
|
|
|
|
if (Object.hasOwn(ssd, "_extStore") && ssd._extStore) { |
|
|
|
curExtStore = ssd._extStore.setupForGeneralStyling(); |
|
|
|
} |
|
|
|
|
|
|
|
if (curExtStore.getStylingDistribution()(ssd, this._element, counter)) { |
|
|
|
forCollection.push(ssd); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return forCollection; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* |
|
|
|
* @param {ExtStorage} extStore |
|
|
|
* @returns {Array<SStoreDefinition>} |
|
|
|
*/ |
|
|
|
_processFunctions(extStore = null) { |
|
|
|
extStore = (extStore |
|
|
|
? extStore |
|
|
|
: this._functionsExtStore |
|
|
|
) |
|
|
|
.setupForFunctions(); |
|
|
|
|
|
|
|
const forCollection = new Map(); |
|
|
|
const collectForBefore = []; |
|
|
|
|
|
|
|
let counter = 0; |
|
|
|
for (const ssd of this._functions) { |
|
|
|
/* Make sure that the type is unified for later processing */ |
|
|
|
|
|
|
|
let curExtStore = extStore; |
|
|
|
if (Object.hasOwn(ssd, "_extStore") && ssd._extStore) { |
|
|
|
curExtStore = ssd._extStore.setupForFunctions(); |
|
|
|
} |
|
|
|
|
|
|
|
if (curExtStore.getFunctionDistribution()(ssd, counter)) { |
|
|
|
if (curExtStore._position.BEFORE) { |
|
|
|
collectForBefore.push(ssd); |
|
|
|
} else { |
|
|
|
if (!forCollection.has(curExtStore)) { |
|
|
|
forCollection.set(curExtStore, []); |
|
|
|
} |
|
|
|
forCollection.get(curExtStore).push(ssd); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return forCollection; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Ends chain. |
|
|
|
* Applies all modifications on the element. |
|
|
|
@ -405,140 +298,31 @@ class Component extends StyleAndScriptStoringComponent { |
|
|
|
* @param {ExtStorage} |
|
|
|
* @returns {WebTrinity} the constructed HTMLElement of this Component. |
|
|
|
*/ |
|
|
|
generate(generator, modifier = null, styleStore = null, functionStore = null) { |
|
|
|
generate(generator = singlepage, modifier = null, styleStore = null, functionStore = null) { |
|
|
|
/** |
|
|
|
* In the case that this component is a chainChild created one. |
|
|
|
* The generation chain needs to be setup in the proper order |
|
|
|
* so that the resulting element tree equals the expected/desired result. |
|
|
|
* |
|
|
|
* Therefore if this is a chainChild, |
|
|
|
* it will be added to the parent via the regular childContext |
|
|
|
* and the generation of the parent will be returned. |
|
|
|
* |
|
|
|
* The parent will generate this component on its generate(). |
|
|
|
*/ |
|
|
|
if (this._parentComponent) { |
|
|
|
let parent = this._parentComponent; |
|
|
|
this._parentComponent = null; |
|
|
|
return parent.childContext(this) |
|
|
|
.generate(modifier, styleStore, functionStore); |
|
|
|
.generate(generator, modifier, styleStore, functionStore); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (modifier) { |
|
|
|
this._modifier = modifier |
|
|
|
.join(this._modifier); |
|
|
|
} |
|
|
|
|
|
|
|
let _wenity = new WebTrinity(); |
|
|
|
|
|
|
|
|
|
|
|
/* DEAL WITH COMPONENT MODIFICATION FIRST */ |
|
|
|
// @todo pay attention to the "overwrite" behaviour - the local modifier styles are the "closest"
|
|
|
|
// it might be appropriate to use this._styles.unshift(...) instead.
|
|
|
|
this._styles.push(new SStoreDefinition( |
|
|
|
(styleStore._aggregation !== ESAggregation.INTERNALIZED ? "." : "") + this._compName, |
|
|
|
this._modifier, |
|
|
|
this._stylesExtStore |
|
|
|
)); |
|
|
|
|
|
|
|
/* DEAL WITH CHILDREN */ |
|
|
|
let collectedWenities = []; |
|
|
|
|
|
|
|
for (let i = 0; i < this._children.length; i++) { |
|
|
|
/** |
|
|
|
* @type {Component} |
|
|
|
*/ |
|
|
|
let child = this._children[i]; |
|
|
|
|
|
|
|
if (child instanceof ChainableModifier) { |
|
|
|
child = child.toComponent(); |
|
|
|
} |
|
|
|
|
|
|
|
if (Page._useCssCalc) { |
|
|
|
child._modifier._updateDimensionsBy(this._modifier._paddingValues); |
|
|
|
} |
|
|
|
child = child.generate(modifier, styleStore, functionStore); |
|
|
|
|
|
|
|
let wenity = this._appendChildComponent(child); |
|
|
|
|
|
|
|
if (!wenity.isSSEmpty()) { |
|
|
|
collectedWenities.push(wenity); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* DEAL WITH STYLING AND PROCESSING */ |
|
|
|
/** |
|
|
|
* @type {Array<SStoreDefinition>} |
|
|
|
*/ |
|
|
|
let styleCollection = this._processStyles(styleStore); |
|
|
|
/** |
|
|
|
* @type {Map<ExtStoreType, Array<SStoreDefinition>>} |
|
|
|
*/ |
|
|
|
const funcCollections = this._processFunctions(functionStore); |
|
|
|
|
|
|
|
/** |
|
|
|
* checks if the source has the extStoreType |
|
|
|
* fills the target extStoreType-array with the corr. elements of source. |
|
|
|
* @param {Map<ExtStoreType, Array<SStoreDefinition>>} source |
|
|
|
* @param {Map<ExtStoreType, Array<SStoreDefinition>>} 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; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Iterates over the collectedWenities (children) |
|
|
|
*/ |
|
|
|
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) { |
|
|
|
/** |
|
|
|
* |
|
|
|
* @param {Map<ExtStoreType, *>} map |
|
|
|
* @param {ExtStorageType} extStoreType |
|
|
|
*/ |
|
|
|
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 { |
|
|
|
_wenity.js = funcCollections; |
|
|
|
_wenity.css = styleCollection; |
|
|
|
} |
|
|
|
|
|
|
|
_wenity.html = this._element; |
|
|
|
|
|
|
|
for (const group of this._toRegister) { |
|
|
|
Page.subscribeComponentToGroup(group, this._compName) |
|
|
|
} |
|
|
|
|
|
|
|
return _wenity; |
|
|
|
return generator.generate(this, styleStore, functionStore); |
|
|
|
} |
|
|
|
} |
|
|
|
|
chris
6 months ago