diff --git a/src/baseComponents.js b/src/baseComponents.js index 72b1340..da45091 100644 --- a/src/baseComponents.js +++ b/src/baseComponents.js @@ -68,6 +68,10 @@ class FlexContainerComponent extends Component { * @type {boolean} */ _distributeEvenglyAfterGenerate; + /** + * @type {string} + */ + _flexDirection; /** * * @param {Attr} attr @@ -75,6 +79,7 @@ class FlexContainerComponent extends Component { */ constructor(attr = {}, modifier = null, baseElement = "div") { super(document.createElement(baseElement), attr); + this._flexDirection = ""; this._distributeEvenglyAfterGenerate = false; this.addStyleClass("flex-container-component"); if (modifier) { @@ -130,6 +135,37 @@ class FlexContainerComponent extends Component { this._distributeEvenglyAfterGenerate = true; return this; } + + + /** + * @override + * @inheritdoc + * @extends Component.generate() + */ + generate(modifier = null, styleStore = null, functionStore = null) { + if (this._children && this._children.length > 0) { + + if (this._distributeEvenglyAfterGenerate) { + let childDistributionFraction = Math.floor( + ((100 - this._children.length) / this._children.length) * 100 + ) / 100; + + let direction = (this._flexDirection === 'column' ? 'height' : "width"); + + for (const icomp of this._children) { + /* sets the width for all elements, + to avoid overlapping or line break because of lacking width, + a percent is subtracted for every child element */ + /* To enable "override" a new Modifier is generated and joined + with the modifier of the component */ + icomp._modifier._modifications[direction] = childDistributionFraction + "%"; + icomp._modifier._modifications["max-"+direction] = childDistributionFraction + "%"; + } + } + } + + return super.generate(modifier, styleStore, functionStore); + } } /** @@ -146,25 +182,10 @@ class Column extends FlexContainerComponent { constructor(attr = {}, modifier = null) { super(attr, modifier); this.addStyleClass("column-component"); + this._flexDirection = "column"; this.setFlexDirection(); } - /** - * @override - * @inheritdoc - * @extends Component.generate() - */ - generate() { - if (this._distributeEvenglyAfterGenerate) { - for (const child of this._children) { - child.modifier( - new Modifier() - .fillMaxHeight(((100 - this._children.length) / this._children.length) / 100) - ); - } - } - return super.generate(); - } } /** @@ -182,6 +203,7 @@ class Row extends FlexContainerComponent { constructor(attr = {}, modifier = null) { super(attr, modifier); this.addStyleClass("row-component") + this._flexDirection = "row"; //this.modifier(new Modifier().fillMaxWidth()); this.setFlexDirection(false); } @@ -192,38 +214,23 @@ class Row extends FlexContainerComponent { * @returns {Row} */ childContext(innerComponent) { - if (innerComponent instanceof Array) { - innerComponent - .map(cl => (cl instanceof Component ? cl : cl.ensureModifier().toComponent())) - .forEach((icomp, i) => { - /* sets the width for all elements, - to avoid overlapping or line break because of lacking width, - a percent is subtracted for every child element */ - /* To enable "override" a new Modifier is generated and joined - with the modifier of the component */ - icomp._modifier = new Modifier() - .setStyleRule("float", (i === 0 ? "left" : "right")) - .join(icomp._modifier) - }) + function setFloat(comp, side = "right") { + comp._modifier = new Modifier() + .setStyleRule("float", side) + .join(comp._modifier); } - return super.childContext(innerComponent) - } - /** - * @override - * @inheritdoc - * @extends Component.generate() - */ - generate() { - if (this._distributeEvenglyAfterGenerate) { - for (const child of this._children) { - child.modifier( - new Modifier() - .fillMaxWidth(((100 - this._children.length) / this._children.length) / 100) - ); - } + super.childContext(innerComponent); + + for (const child of this._children) { + onSingleOrArray( + child, + (e, i) => setFloat(e, (i === 0 ? "left" : "right")) + ); } - return super.generate(); + + return this; } + } diff --git a/src/component.js b/src/component.js index 9c8e019..a9ec18f 100644 --- a/src/component.js +++ b/src/component.js @@ -146,7 +146,7 @@ class Component extends StyleAndScriptStoringComponent { * * @returns {string} */ - getHigherCompelSelector(){ + getHigherCompelSelector() { return this._element .closest('[data-compel-isHCompel="true"].compel-higher') .getAttribute("data-autocompel"); @@ -410,11 +410,18 @@ class Component extends StyleAndScriptStoringComponent { * Returns the constructed HTMLElement of this Component. * * - * + * @param {Modifier | undefined} [modifier=null] + * @param {ExtStorage | undefined} [styleStore=null] + * @param {ExtStorage | undefined} [functionStore=null] * @param {ExtStorage} * @returns {WebTrinity} the constructed HTMLElement of this Component. */ - generate(styleStore = null, functionStore = null) { + generate(modifier = null, styleStore = null, functionStore = null) { + if (modifier) { + this._modifier = modifier + .join(this._modifier); + } + this._wenity = new WebTrinity(); if (!styleStore) { @@ -446,7 +453,7 @@ class Component extends StyleAndScriptStoringComponent { if (Page._useCssCalc) { child._modifier._updateDimensionsBy(this._modifier._paddingValues); } - child = child.generate(); + child = child.generate(modifier, styleStore, functionStore); let wenity = this._appendChildComponent(child); @@ -529,7 +536,7 @@ class Component extends StyleAndScriptStoringComponent { } } } - + executeOnExtStoreTypeCollectedTriple((est) => dealCollected(funcCollections, est)); } else {