REFA,MINOR,FEAT: refactored Sides inheritance, introduced MarginChain

src/modifier.js

@@ -147,6 +147,9 @@ class Modifier {
      * Sets the margin on all sides according to the given siding object. 
      * Currently the margin will always be set 
      * to the most recent margin/siding. 
+     * @ATTENTION since it just increases complexity to constantly use padding and margin
+     *            it is recommended to use padding and to stick to that as often as possible. 
+     *            Padding values take affect inside/within the element.
      * @param {Sides} siding 
      * @returns {Modifier} this modifier object
      */
@@ -320,6 +323,22 @@ class Modifier {
         }
     }
 
+    /**
+     * 
+     * @ATTENTION since it just increases complexity to constantly use padding and margin
+     *            it is recommended to use padding and to stick to that as often as possible. 
+     *            Padding values take affect inside/within the element.
+     * @param {number} amount the padding for all four sides
+     * @returns {PaddingChain} 
+     */
+    linkMargin(amount = -1) {
+        if (amount === -1) {
+            return new MarginChain(this);
+        } else {
+            return new MarginChain(this).all(amount);
+        }
+    }
+
     /**
      * 
      * @param {number} cornerRadius will create a rounded rectangle with the given cornerRadius

src/sizeSide/siding.js

@@ -171,6 +171,7 @@ class Sides extends DirectionUnitDependentAttribute {
      */
     constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
         super(defaultValue, defaultUnit);
+        this._stylesKey = "";
     }
 
 
@@ -244,12 +245,19 @@ class Sides extends DirectionUnitDependentAttribute {
         }
     }
 
+    /**
+     * Returns the style-modifications of the class.
+     * The style-modification is set as <_stylesKey>-<directional value>.
+     * 
+     * @returns {Map<string,string>}
+     */
     toModifications() {
+        let preKey = this._stylesKey + (this._stylesKey !== '' ? '-' : '');
         return [
-            { key: "left", value: this._fFirst + this._unit },
-            { key: "top", value: this._fSecond + this._unit },
-            { key: "right", value: this._fThird + this._unit },
-            { key: "bottom", value: this._fForth + this._unit }
+            { key: preKey + "left", value: this._fFirst + this._unit },
+            { key: preKey + "top", value: this._fSecond + this._unit },
+            { key: preKey + "right", value: this._fThird + this._unit },
+            { key: preKey + "bottom", value: this._fForth + this._unit }
         ]
     }
 }
@@ -270,6 +278,7 @@ class PaddingChain extends Sides {
     constructor(modifier) {
         super();
         this._modifier = modifier;
+        this._stylesKey = "padding";
     }
 
     /**
@@ -290,19 +299,6 @@ class PaddingChain extends Sides {
         return this.toModifier()
     }
 
-    /**
-     * Returns the style-modifications of the class.
-     * @returns {Map<string,string>}
-     */
-    toModifications() {
-        return [
-            { key: "padding-left", value: this._fFirst + this._unit },
-            { key: "padding-top", value: this._fSecond + this._unit },
-            { key: "padding-right", value: this._fThird + this._unit },
-            { key: "padding-bottom", value: this._fForth + this._unit }
-        ]
-    }
-
     /**
      * 
      * @returns {Component} the Component that was (supposed to be) modified by this obj.
@@ -326,6 +322,45 @@ class PaddingChain extends Sides {
     }
 }
 
+/**
+ * @ATTENTION since it just increases complexity to constantly use padding and margin
+ *            it is recommended to use padding and to stick to that as often as possible. 
+ *            Padding values take affect inside/within the element.
+ * @inheritdoc
+ * @extends PaddingChain
+ */
+class MarginChain extends PaddingChain {
+    /**
+     * @inheritdoc
+     * @param {Modifier} modifier 
+     */
+    constructor(modifier) {
+        super(modifier);
+        this._stylesKey = "margin";
+    }
+
+    /**
+     * @inheritdoc
+     * @returns {Component}
+     */
+    toComponent() {
+        return this._modifier
+            .margin(this)
+            .toComponent();
+    }
+
+    /**
+     * @inheritdoc
+     * @returns {Component}
+     */
+    childContext(innerComponent) {
+        return this._modifier
+            .margin(this)
+            .toComponent()
+            .childContext(innerComponent);
+    }
+}
+
 /**
  * Class containing two numbers. 
  * Usually they represent coordinates,