IMPRO,FIX,CLEAN: Preparing for new Release

join_js_files.sh

@@ -1,6 +1,12 @@
 TARGET="jpc-like-websites.js"
 SRC="src"
 
+# The list are mirroring the correct import/usage order
+# First "SUB_LIST" are the modifier subcategories
+# Second "MODIFIER_LIST" comes the modifier and orga-/orientations
+# Third "HIGHER_LIST" come several of the commons, the context as well as component 
+# and thoose that use component.
+
 SUB_LIST="siding.js shapes.js border.js dimensions.js"
 MODIFIERS_LIST="alignment.js arrangement.js modifier.js" 
 HIGHER_LIST="commonEvents.js context.js component.js baseComponents.js  builder.js"

src/builder.js

@@ -66,7 +66,7 @@ const builder = {
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     paragraph: function (attr = {}) { return builder.genTag("paragraph", attr); },
+     paragraph: function (attr = {}) { return builder.genTag("p", attr); },
      /**
       * 
       * @param {Map<string,string>} attr 

src/color.js

@@ -7,6 +7,7 @@
 
 /**
  * A simple Color class for rgb set color values.
+ * 
  */
 class Color {
     #red;
@@ -14,6 +15,12 @@ class Color {
     #blue;
     #hex;
 
+    /**
+     * 
+     * @param {number} red Red-Value for RGB Color definition
+     * @param {number} green Green-Value for RGB
+     * @param {number} blue Blue-Value
+     */
     constructor(red, green, blue) {
         this.#red = red;
         this.#green = green;
@@ -28,6 +35,11 @@ class Color {
         return `rgb(${this.#red}, ${this.#green}, ${this.#blue})`;
     }
 
+    /**
+     * 
+     * @param {string} hexcode 
+     * @returns 
+     */
     hex(hexcode) {
         this.#hex = hexcode;
         return this;

src/component.js

@@ -100,15 +100,19 @@ class Component {
     /**
      * 
      * @param {string} styleClass 
+     * @param {Modifier} modifier 
      * @returns {Component} this component object
      */
-    addStyleClass(styleClass) {
+    addStyleClass(styleClass, modifier = null) {
+        if (modifier) {
+            Page.registerStyling(styleClass, modifier._modifications);
+        }
         this._element.classList.add(styleClass);
         return this;
     }
 
-    registerStyleClass(styleClass, styleRuleMap){
+    registerStyleClass(styleClass, styleRuleMap) {
-        Page.registerStyling('.'+styleClass, styleRuleMap);
+        Page.registerStyling('.' + styleClass, styleRuleMap);
         return this.addStyleClass(styleClass);
     }
 
@@ -207,7 +211,7 @@ class Component {
      * within the list. 
      * @param {Array} listName 
      */
-    registerOnGenerate(listName){
+    subscribeOnGenerate(listName) {
         this._toRegister.push(listName);
         return this;
     }

src/context.js

@@ -21,20 +21,53 @@ class PageBuilder {
         this.#functions = document.createElement("script");
         this.#functionNames = [];
         this.#cssElementIdentifiers = [];
-        this.#delayedFunctions = [];
-        this.#repeatingFunctions = {};
     }
 
     /**
      * Registers a function to be added later in a script tag in the head of the document.
+     * @ATTENTION Be careful with intended empty strings (e.g. in variable values), 
+     *              empty strings within the function code will be shrunk.
      * @param {string} name 
-     * @param {func} fun 
+     * @param {function} fun 
      */
     registerFunction(name, fun) {
+        /**
+         * Is supposed to shrink all empty strings to length 1
+         * @param {string} text 
+         * @returns {string}
+         */
+        function shrinkEmptyStrings(text){
+            for (let i = 1; i < 10; i++) {
+                text = text.replaceAll("          ".slice(i), ' ');
+            }
+            return text;
+        }
         if (!this.#functionNames.includes(name)) {
-            this.#functions.innerText += `const ${name} = ${fun};`;
+            let clearedFuncText = shrinkEmptyStrings(
+                fun.toString()
+                    .replaceAll('\n', ' ')
+                    .replaceAll('\r\n', ' ')
+                    .replaceAll('\n\r', ' ')
+            );
+            let isFuncWritten = clearedFuncText.startsWith('function'); 
+            let funcHasName = fun.name && fun.name.trim() !== '';
+            if(isFuncWritten){
+                let isNameInFuncText = clearedFuncText.startsWith(`function ${name}`);
+                this.#functions.innerText += (funcHasName && isNameInFuncText
+                    ? clearedFuncText
+                    : clearedFuncText.replace('function ', 'function '+name)
+                )+'; ';
+            }else{
+                this.#functions.innerText += `const ${name} = ${clearedFuncText}; `
+            }
             this.#functionNames.push(name);
         }
+        return this;
+    }
+
+
+    registerNamedFunction(namedFunction) {
+        return this.registerFunction(namedFunction.name, namedFunction)
     }
 
     /**
@@ -83,18 +116,22 @@ class PageBuilder {
         head.appendChild(this.#cssClasses)
 
         /* set repeating functions  */
-        let repeatedFun = Object.values(this.#repeatingFunctions)
+        if (this.#repeatingFunctions) {
-            .reduce((a, c, i, arr) => Object.assign(a, {
+            let repeatedFun = Object.values(this.#repeatingFunctions)
-                [c.name]: setInterval(c.fun, c.interval)
+                .reduce((a, c, i, arr) => Object.assign(a, {
-            }), {});
+                    [c.name]: setInterval(c.fun, c.interval)
+                }), {});
+        }
 
         /* set timeouts for funcitons executed after load */
-        for (let i = 0; i < this.#delayedFunctions.length; i++) {
+        if (this.#delayedFunctions) {
-            let func = this.#delayedFunctions[i];
+            for (let i = 0; i < this.#delayedFunctions.length; i++) {
-            if (func.repeat) {
+                let func = this.#delayedFunctions[i];
-                setTimeout(setInterval(func.func, func.interval), func.dl, func.args);
+                if (func.repeat) {
-            } else {
+                    setTimeout(setInterval(func.func, func.interval), func.dl, func.args);
-                setTimeout(func.func, func.dl, func.args);
+                } else {
+                    setTimeout(func.func, func.dl, func.args);
+                }
             }
         }
         console.log(this.#functionNames);
@@ -113,6 +150,9 @@ class PageBuilder {
         if (name !== '') {
             this.registerFunction(name, func);
         }
+        if (!this.#delayedFunctions) {
+            this.#delayedFunctions = [];
+        }
         this.#delayedFunctions.push({ dl: delay, func: func, args: args, repeat: repeat, interval: interval });
     }
 

src/modifier.js

@@ -12,9 +12,10 @@
  */
 class Modifier {
     /**
-     * @property {Object} _modifications
+     * @property {Map<string,string>} _modifications
      */
     _modifications;
+    _shape;
 
     constructor() {
         this._modifications = new Object();
@@ -30,7 +31,7 @@ class Modifier {
     }
 
     /**
-     * Sets the modification for width to 100%.
+     * Sets the modification for width to the given fraction of 1 (default 1 := 100%).
      * @param {number} fraction 
      * @returns {Modifier} this modifier object
     */
@@ -40,7 +41,7 @@ class Modifier {
     }
 
     /**
-     * Sets the modification for height to 100%.
+     * Sets the modification for height to the given fraction of 1 (default 1 := 100%).
      * @param {number} fraction 
      * @returns {Modifier} this modifier object
      */
@@ -91,7 +92,15 @@ class Modifier {
      * @returns {Modifier} this modifier object
      */
     margin(siding) {
-        this._modifications["margin"] = siding.getOrderedValues().join(' ');
+        let keyToAdd = "";
+        if (siding instanceof Sides) {
+            keyToAdd = "margin-"
+        }
+
+        siding.toModifications()
+            .forEach(kvpair => {
+                this._modifications[keyToAdd + kvpair.key] = kvpair.value;
+            });
         return this;
     }
 
@@ -148,13 +157,21 @@ class Modifier {
      * Sets a border line (with given linestyle) to all sides. 
      * If lineStyle is an array, the containing LineStyles, 
      * are applied in the order: [top, right, bottom, left].
+     * If the border has a shape defined, 
+     * this shape will override earlier shape definitions.
+     * Otherwise existing shape definitions will be applied.
      * @param {Border} border the style of the border line
      * @returns {Modifier} this modifier object
      */
     border(border) {
+        if (border._shape){
+            this.clip(border._shape);
+        }else if(this._shape){
+            border._shape = this._shape;
+        }
         border.toModifications()
             .forEach(e => this._modifications[e.key] = e.value);
-        return this.clip(border._shape)
+        return this;
     }
 
     /**
@@ -163,6 +180,7 @@ class Modifier {
      * @returns {Modifier} 
      */
     clip(shape) {
+        this._shape = shape;
         this._modifications["border-radius"] = shape.getOrderedValues().join(' ');
         return this;
     }

src/sizeSide/border.js

@@ -201,7 +201,7 @@ class BorderChain extends Border {
      */
     toComponent() {
         return this._modifier
-            .dimensions(this)
+            .border(this)
             .toComponent();
     }
 
@@ -212,7 +212,7 @@ class BorderChain extends Border {
      */
     childContext(innerComponent) {
         return this._modifier
-            .dimensions(this)
+            .border(this)
             .toComponent()
             .childContext(innerComponent);
     }

src/sizeSide/shapes.js

@@ -36,7 +36,7 @@ class Shape extends DirectionUnitDependentAttribute {
      * @returns {Shape}
      */
     bottomLeft(amount) {
-        this._fThird = amount;
+        this._fForth = amount;
         return this;
     }
     /**
@@ -45,7 +45,7 @@ class Shape extends DirectionUnitDependentAttribute {
      * @returns {Shape}
      */
     bottomRight(amount) {
-        this._fForth = amount;
+        this.fThird = amount;
         return this;
     }
     /**

tsconfig.json

@@ -1,16 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "AMD",
-        "target": "ES2015",
-        "declaration": true,
-        "outDir": "./lib",
-        "outFile": "jpc-like-websites.js"
-    },
-    "include": [
-        "./src/ts/*"
-    ],
-    "exclude": [
-        "node_modules",
-        "./lib/**/*"
-    ]
-}