DRAFT,FIX: module is uninstallable

Apparently there are cases where "postinstall script"
might break the installation of a module
when installed via git.

Further circular script call for prepare was removed,
keeping a cleaner source for potential failures.

generate_single_file.js → build.js

@@ -98,6 +98,7 @@ async function appendContent(srcFile, targetFile, contentModifications = [], lin
         console.log(`           Append/Write: successfully!`);
     } catch (error) {
         console.error(`Error reading/writing files: ${error.message}`);
+        console.error(srcFile);
     }
 }
 
@@ -146,7 +147,6 @@ async function bundleWithSpecifiedMode(targetFile, fileList, modulize = true) {
                 ), Promise.resolve()
             )
     }
-
 }
 
 

join_js_files.sh

@@ -8,4 +8,4 @@ SRC="src"
 # and thoose that use component.
 
 echo "" > $TARGET
-node generate_single_file.js
+node build.js true

jpclw-bundle.json

@@ -48,9 +48,6 @@
             "Row.js",
             "InputComponent.js"
         ],
-        "extensions": [
-            "extension.js"
-        ],
         "context": [
             "scriptAndStyleContext.js",
             "framework-controls.js",
@@ -84,7 +81,6 @@
         "padding.js",
         "shapes.js",
         "siding.js",
-        "extension.js",
         "simplePagingAndNavigation.js",
         "defaultGenerators.js",
         "generator.js",
@@ -504,14 +500,6 @@
                 "Sides"
             ]
         },
-        "extension.js": {
-            "folder": "src/extensions",
-            "name": "extension.js"
-        },
-        "simplePagingAndNavigation.js": {
-            "folder": "src/extensions",
-            "name": "simplePagingAndNavigation.js"
-        },
         "defaultGenerators.js": {
             "folder": "src/generators",
             "name": "defaultGenerators.js",

package.json

@@ -11,8 +11,8 @@
     "/src"
   ],
   "scripts": {
-    "prepare": "npm run build",
-    "generate": "node generate_single_file.js true",
+    "prepare": "node build.js true",
+    "generate": "node build.js true",
     "build": "npm run generate",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

src/builder.js

@@ -272,7 +272,21 @@ const builder = {
       * @param {Modifier} modifier 
       * @returns {Component}
       */
-     select: function (attr = {}, modifier = null) { return builder.genTag("select", attr, modifier); },
+     select: function (attr = {}, modifier = null) { 
+          let comp = new InputComponent(
+               document.createElement("select"),
+               attr,
+               modifier
+          )
+               .addStyleClass(`el-input`);
+
+          if (this.components.previous) {
+               comp._parentComponent = this.components.previous;
+               this.components.previous = null;
+          }
+
+          return comp;
+     },
 
      /**
       * 

src/component/ChildbearerComponent.js

@@ -61,11 +61,7 @@ class ElementWrapper {
      * @returns {Component} this component object
      */
     text(text) {
-        if (this._element instanceof HTMLInputElement && this._element.type === "text") {
-            this._element.value = text;
-        } else {
-            this._element.innerText = text;
-        }
+        this._element.innerText = text;
         return this;
     }
 

src/component/Component.js

@@ -82,7 +82,7 @@ class Component extends StyleAndScriptStoringComponent {
      * @param {boolean} horizontal Defines if the Component should overflow horizontally (default: false)
      * @returns {Component}
      */
-    overflow(vertical = true, horizontal = false ) {
+    overflow(vertical = true, horizontal = false) {
         if (vertical || horizontal) {
             this._modifier.join(
                 new Modifier()
@@ -124,6 +124,23 @@ class Component extends StyleAndScriptStoringComponent {
         return this;
     }
 
+    /**
+     * Since the "hidden" method call was quite often called as being conditional, 
+     * and to resolve that it needed to be wrapped into an apply (and if condition within that) call.
+     * This method is purely convinience as it reduces unnecessary code line. 
+     * @experimental
+     * @convenience
+     * @param {boolean} [condition=false] 
+     * @param {boolean} [untilFound=false]
+     * @returns {Component}
+     */
+    hiddenByCondition(condition = false, untilFound = false) {
+        if (condition) {
+            return this.hidden(untilFound);
+        }
+        return this;
+    }
+
     /**
      * Subscribes element under higher_compel group
      * sets corr. variable true

src/component/FlexContainerComponent.js

@@ -9,6 +9,15 @@ class FlexContainerComponent extends Component {
      * @type {boolean}
      */
     _distributeEvenglyAfterGenerate;
+    /**
+     * @type {number} the amount that should be left out of the total space before the children
+     *                space is set. 
+     */
+    #distributionRecess;
+    /**
+     * @type {number} the additional gap that should be left for children before their space is set
+     */
+    #distributionGapPerChild;
     /**
      * @type {string}
      */
@@ -68,14 +77,86 @@ class FlexContainerComponent extends Component {
     }
 
     /**
-     *
+     * 
+     * @param {number} [recessFraction=0.0] recessFraction a fraction/percentage (<1.0) of the recess 
+     *                 that should be left out before distributing the remaining space.
+     * @param {number} [gapPerChild=1] gapPerChild the gap per child, therefore the recess between children 
+     */
+    _distributingSpacing(recessFraction = 0.0, gapPerChild = 1) {
+        if (this._children && this._children.length > 1) {
+
+            let distributableSpace = 100 - 100 * recessFraction - (this._children.length - 1) * gapPerChild;
+
+            let childDistributionFraction = Math.floor(
+                (distributableSpace / 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 + "%";
+            }
+        }
+    }
+
+    /**
+     * Distributes the spacing of the childrens evengly, 
+     * according to the flexdirection of this component.
+     * By default this will be executed imediately when called.
+     * The spacing is distributed by: 
+     *      100 - 100 * recessFraction - (children) * gapPerChild
+     * 
+     * @param {boolean} [rightNow=true] if set to false it will set properties accordingly
+     *                  so that the distribution will be executed on generate
+     * @param {number} [recessFraction=0.0] recessFraction a fraction/percentage (<1.0) of the recess 
+     *                 that should be left out before distributing the remaining space.
+     * @param {number} [gapPerChild=1] gapPerChild the gap per child, therefore the recess between children
      * @returns {FlexContainerComponent}
      */
-    distibuteSpacingEvenly() {
-        this._distributeEvenglyAfterGenerate = true;
+    distibuteSpacingEvenly(rightNow = true, recessFraction = 0.0, gapPerChild = 1) {
+        if (rightNow) {
+            this._distributingSpacing(recessFraction, gapPerChild);
+        } else {
+            this.#distributionRecess = recessFraction;
+            this.#distributionGapPerChild = gapPerChild;
+            this._distributeEvenglyAfterGenerate = true;
+        }
         return this;
     }
 
+    /**
+     * Adds, sets, updates or overwrites the Modification of/for the children of this component.
+     * Just calls .modifier(modifier) on each child. 
+     * 
+     * @param {Modifier} modifier 
+     * @param {boolean|ExtStorage|ExtStoreType|OverwriteBehaviour} [extStore=null] 
+     * @returns {FlexContainerComponent} this component object
+    */
+    modifyChildren(modifier, underTheName = "", extStore = false) {
+        if (underTheName === "") {
+            underTheName = `.${this._compName}-style-children`;
+        }
+        if (!extStore) {
+            for (const child of this._children) {
+                child.modifier(modifier)
+            }
+        } else {
+            this.addStyleClass(underTheName);
+            this._styles.push(
+                new SStoreDefinition(
+                    underTheName,
+                    modifier.ensureModifier()
+                )
+            );
+        }
+        return this;
+    }
 
     /**
      * @override
@@ -83,25 +164,8 @@ class FlexContainerComponent extends Component {
      * @extends Component.generate()
      */
     generate(generator = singlepage, styleStore = null, functionStore = null) {
-        if (this._children && this._children.length > 1) {
-
-            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 + "%";
-                }
-            }
+        if (this._distributeEvenglyAfterGenerate) {
+            this._distributingSpacing(this.#distributionRecess, this.#distributionGapPerChild);
         }
 
         return super.generate(generator, styleStore, functionStore);

src/component/InputComponent.js

@@ -18,6 +18,24 @@ class InputComponent extends Component {
         }
     }
 
+    /**
+     * This overrides the text() method in such a way,
+     * that it sets the value attribute for input elements instead.
+     * 
+     * @override
+     * @inheritdoc
+     * @param {string} text 
+     * @returns {InputComponent}
+     */
+    text(text){
+        if (this._element instanceof HTMLInputElement) {
+            this._element.value = text;
+        } else {
+            super.text(text);
+        }
+        return this;
+    }
+
     /**
      * The parameter makes it optional to trigger the state by a variable
      * @param {boolean} readonly

src/modifier/Modifier.js

@@ -343,7 +343,6 @@ class Modifier {
             modify.toModifications()
                 .forEach(e => this._modifications[e.key] = e.value);
 
-            return this;
         } else {
             let modSub = new BorderChain(this);
             if (Number.isInteger(modify) && modify > 0) {
@@ -351,6 +350,7 @@ class Modifier {
             }
             return modSub;
         }
+        return this;
     }
 
     /**