diff --git a/src/modifier.js b/src/modifier.js index 70d499a..691a032 100644 --- a/src/modifier.js +++ b/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 diff --git a/src/sizeSide/siding.js b/src/sizeSide/siding.js index 08edc29..d47b443 100644 --- a/src/sizeSide/siding.js +++ b/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>-. + * + * @returns {Map} + */ 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} - */ - 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,