REFA,STEP,FEAT: added style remove functionallity and refactored inputTag-organisation in builder

src/baseComponents.js

@@ -4,9 +4,36 @@
  * @copyright by its creator Christian Martin 
  */
 
+/**
+ * Represents a Component (of an HTMLElement) that is capable of receiving input.
+ * 
+ * @inheritdoc
+ */
+class InputComponent extends Component {
+    constructor(element, attr = {}) {
+        super(element, attr)
+            .addStyleClass("el-input-comp");
+    }
+
+    /**
+     * The parameter makes it optional to trigger the state by a variable
+     * @param {boolean} readonly 
+     * @returns {Component}
+     */
+    readonly(readonly = true) {
+        if (readonly) {
+            this._element.setAttribute("readonly", readonly);
+        }
+        return this;
+    }
+}
+
+
 /**
  * Represents container Components.
  * Some predefined modifications are applied on the child components.
+ * 
+ * @inheritdoc
  */
 class FlexContainerComponent extends Component {
     constructor(attr = {}) {
@@ -42,6 +69,8 @@ class FlexContainerComponent extends Component {
 
 /**
  * A FlexContainerComponent, which organizes the children in a column like manner.
+ * 
+ * @inheritdoc
  */
 class Column extends FlexContainerComponent {
     constructor(attr = {}) {
@@ -56,7 +85,9 @@ class Column extends FlexContainerComponent {
 
 /**
  * A FlexContainerComponent, which organizes the children in a row like manner.
-*/
+ * 
+ * @inheritdoc
+ */
 class Row extends FlexContainerComponent {
     constructor(attr = {}) {
         super(attr)
@@ -97,7 +128,7 @@ class Row extends FlexContainerComponent {
      */
     distibuteSpacingEvenly() {
         this._element.children.forEach(child => {
-            child.style["width"] = (100 / innerComponent.length);
+            child.style["width"] = ((100-this._element.childElementCount) / innerComponent.length);
         })
         return this;
     }

src/builder.js

@@ -16,6 +16,11 @@ const builder = {
           openedChain: {}
      },
 
+     componentFromHTML: function (htmlText) {
+          let compel = new Component(new DOMParser().parseFromString(htmlText, "text/html"));
+          return compel;
+     },
+
      /**
       * 
       * @param {string} tag 
@@ -47,82 +52,101 @@ const builder = {
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     input: function (attr = {}) { return builder.genTag("input", attr); },
+     input: function (type, attr = {}) {
-     inputTags: function (attr = {}) {
+          return new InputComponent(
-          return {
+               document.createElement("input"),
-               button() { return builder.genTag("input", Object.assign(attr, { "type": "button" })) },
+               Object.assign({ "type": type }, attr)
-               checkbox() { return builder.genTag("input", Object.assign(attr, { "type": "checkbox" })) },
+          )
-               color() { return builder.genTag("input", Object.assign(attr, { "type": "color" })) },
+               .addStyleClass(`el-input`);
-               date() { return builder.genTag("input", Object.assign(attr, { "type": "date" })) },
-               datetime() { return builder.genTag("input", Object.assign(attr, { "type": "datetime" })) },
-               datetime_local() { return builder.genTag("input", Object.assign(attr, { "type": "datetime-local" })) },
-               email() { return builder.genTag("input", Object.assign(attr, { "type": "email" })) },
-               file() { return builder.genTag("input", Object.assign(attr, { "type": "file" })) },
-               image() { return builder.genTag("input", Object.assign(attr, { "type": "image" })) },
-               month() { return builder.genTag("input", Object.assign(attr, { "type": "month" })) },
-               number() { return builder.genTag("input", Object.assign(attr, { "type": "number" })) },
-               password() { return builder.genTag("input", Object.assign(attr, { "type": "password" })) },
-               radio() { return builder.genTag("input", Object.assign(attr, { "type": "radio" })) },
-               range() { return builder.genTag("input", Object.assign(attr, { "type": "range" })) },
-               reset() { return builder.genTag("input", Object.assign(attr, { "type": "reset" })) },
-               search() { return builder.genTag("input", Object.assign(attr, { "type": "search" })) },
-               submit() { return builder.genTag("input", Object.assign(attr, { "type": "submit" })) },
-               tel() { return builder.genTag("input", Object.assign(attr, { "type": "tel" })) },
-               text() { return builder.genTag("input", Object.assign(attr, { "type": "text" })) },
-               time() { return builder.genTag("input", Object.assign(attr, { "type": "time" })) },
-               url() { return builder.genTag("input", Object.assign(attr, { "type": "url" })) },
-               week() { return builder.genTag("input", Object.assign(attr, { "type": "week" })) }
-          }
      },
 
+
+     /**
+      * 
+      * @param {Map<string,string>} attr 
+      * @returns {Function<Component>}
+      */
+     inputTags: Object.freeze({
+          button: function (attr = {}) { return builder.input("button", attr) },
+          checkbox: function (attr = {}) { return builder.input("checkbox", attr) },
+          color: function (attr = {}) { return builder.input("color", attr) },
+          date: function (attr = {}) { return builder.input("date", attr) },
+          datetime: function (attr = {}) { return builder.input("datetime", attr) },
+          datetime_local: function (attr = {}) { return builder.input("datetime-local", attr) },
+          email: function (attr = {}) { return builder.input("email", attr) },
+          file: function (attr = {}) { return builder.input("file", attr) },
+          image: function (attr = {}) { return builder.input("image", attr) },
+          month: function (attr = {}) { return builder.input("month", attr) },
+          number: function (attr = {}) { return builder.input("number", attr) },
+          password: function (attr = {}) { return builder.input("password", attr) },
+          radio: function (attr = {}) { return builder.input("radio", attr) },
+          range: function (attr = {}) { return builder.input("range", attr) },
+          reset: function (attr = {}) { return builder.input("reset", attr) },
+          search: function (attr = {}) { return builder.input("search", attr) },
+          submit: function (attr = {}) { return builder.input("submit", attr) },
+          tel: function (attr = {}) { return builder.input("tel", attr) },
+          text: function (attr = {}) { return builder.input("text", attr) },
+          time: function (attr = {}) { return builder.input("time", attr) },
+          url: function (attr = {}) { return builder.input("url", attr) },
+          week: function (attr = {}) { return builder.input("week", attr) }
+     }),
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
      div: function (attr = {}) { return builder.genTag("div", attr); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
      span: function (attr = {}) { return builder.genTag("span", attr); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
      paragraph: function (attr = {}) { return builder.genTag("p", attr); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
      header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
      checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) },
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
      select: function (attr = {}) { return builder.genTag("select", attr); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
      option: function (attr = {}) { return builder.genTag("option", attr); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
      radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
@@ -141,62 +165,90 @@ const builder = {
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     textarea: function (attr = {}) { return builder.genTag("textarea", attr); },
+     textarea: function (attr = {}) {
+          return new InputComponentComponent(
+               document.createElement("textarea"),
+               attr
+          )
+               .addStyleClass(`el-textarea`);
+     },
 
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     table: function (attr = {}) { return builder.genTag("table", attr) },
+     table: function (attr = {}) {
+          return builder.genTag("table", attr)
+               .chainModifier()
+               .removeStyleRule("display")
+               .toComponent();
+     },
 
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     tableRow: function (attr = {}) { return builder.genTag("tr", attr) },
+     tableRow: function (attr = {}) { return builder.genTag("tr", attr); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     tableCell: function (attr = {}) { return builder.genTag("td", attr) },
+     tableCell: function (attr = {}) { return builder.genTag("td", attr); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     tableCaption: function (attr = {}) { return builder.genTag("caption", attr) },
+     tableCaption: function (attr = {}) { return builder.genTag("caption", attr); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) },
+     tableHeadCell: function (attr = {}) { return builder.genTag("th", attr); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     tableBody: function (attr = {}) { return builder.genTag("tbody", attr) },
+     tableBody: function (attr = {}) {
+          return builder.genTag("tbody", attr)
+               .chainModifier()
+               .removeStyleRule("display")
+               .toComponent();
+     },
 
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     tableHead: function (attr = {}) { return builder.genTag("thead", attr) },
+     tableHead: function (attr = {}) {
+          return builder.genTag("thead", attr)
+               .chainModifier()
+               .removeStyleRule("display")
+               .toComponent();
+     },
+
      /**
       * 
       * @param {Map<string,string>} attr 
       * @returns {Component}
       */
-     tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) },
+     tableFooter: function (attr = {}) {
+          return builder.genTag("tfoot", attr)
+               .chainModifier()
+               .removeStyleRule("display")
+               .toComponent();
+     },
+
      /**
       * 
       * @param {Map<string,string>} attr 

src/modifier.js

@@ -14,6 +14,7 @@ class Modifier {
      * @property {Map<string,string>} _modifications
      */
     _modifications;
+    _removeMods;
     _shape;
     /**
      * @property {Sides} paddingValues
@@ -22,6 +23,7 @@ class Modifier {
 
     constructor() {
         this._modifications = new Object();
+        this._removeMods = [];
     }
 
     /**
@@ -130,7 +132,7 @@ class Modifier {
         this._paddingValues = siding;
         let keyToAdd = "";
         if (siding instanceof PaddingChain) {
-
+            /* TODO what is this supposed to do */
         } else if (siding instanceof Sides) {
             keyToAdd = "padding-"
         }
@@ -196,6 +198,12 @@ class Modifier {
             /* if (!this._modifications.hasOwnProperty(keys[i])) */
             this._modifications[keys[i]] = modifier.ensureModifier()._modifications[keys[i]];
         }
+        let removeMods = modifier.ensureModifier()._removeMods;
+        if (removeMods.length > 0) {
+            for (let i = 0; i < removeMods.length; i++) {
+                delete this._modifications[removeMods[i]];
+            }
+        }
         return this;
     }
 
@@ -210,6 +218,19 @@ class Modifier {
         return this;
     }
 
+    /**
+     * 
+     * @param {string} key 
+     * @returns {Modifier} this modifier object 
+     */
+    removeStyleRule(key) {
+        this._removeMods.push(key);
+        if (Object.keys(this._modifications).includes(key)) {
+            delete this._modifications[key];
+        }
+        return this;
+    }
+
     /**
      * Sets a border line (with given linestyle) to all sides. 
      * If lineStyle is an array, the containing LineStyles, 
@@ -241,7 +262,7 @@ class Modifier {
         this._modifications["border-radius"] = shape.getOrderedValues().join(' ');
         return this;
     }
-   
+
     /**
      * 
      * @param {number} size of width and height in pixels