MINOR,FEAT,REFA: introduced modifier passing to generator

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)
-                })
-        }
-        return super.childContext(innerComponent)
+        function setFloat(comp, side = "right") {
+            comp._modifier = new Modifier()
+                .setStyleRule("float", side)
+                .join(comp._modifier);
         }
 
-    /**
-     * @override
-     * @inheritdoc
-     * @extends Component.generate()
-     */
-    generate() {
-        if (this._distributeEvenglyAfterGenerate) {
+        super.childContext(innerComponent);
+
         for (const child of this._children) {
-                child.modifier(
-                    new Modifier()
-                        .fillMaxWidth(((100 - this._children.length) / this._children.length) / 100)
+            onSingleOrArray(
+                child,
+                (e, i) => setFloat(e, (i === 0 ? "left" : "right"))
             );
         }
+
+        return this;
     }
-        return super.generate();
-    }
+
 }
 

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);