jpc-like-websites/src/sizeSide/border.js

/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * @copyright by its creator Christian Martin 
 */

/**
 * 
 */
const LineStyles = Object.freeze({
    dotted: "dotted",
    dashed: "dashed",
    solid: "solid",
    double: "double",
    groove: "groove",
    ridge: "ridge",
    inset: "inset",
    outset: "outset",
    none: "none",
    hidden: "hidden"
})

class BorderDefinition {
    constructor(width = 0, color = Colors.black, style = LineStyles.solid) {
        this._width = width;
        this._color = color;
        this._style = style;
    }

    width(width) {
        this._width = width;
        return this;
    }
    color(color) {
        this._color = color;
        return this;
    }
    style(style) {
        this._style = style;
        return this;
    }
    join(def) {
        Object.keys(def)
            .forEach(key => this[key] = def[key]);
        return this;
    }
}

const Define = Object.freeze({
    width: new BorderDefinition().width,
    style: new BorderDefinition().style,
    color: new BorderDefinition().color
})

class Border extends Sides {
    constructor(width = 0, color = Colors.black, style = LineStyles.solid, defaultUnit = SizeUnits.PIXEL, shape = Shapes.Rectangle) {
        super(0, defaultUnit);
        this._fFirst = new BorderDefinition(width, color, style);
        this._fSecond = new BorderDefinition(width, color, style);
        this._fThird = new BorderDefinition(width, color, style);
        this._fForth = new BorderDefinition(width, color, style);
        this._shape = shape;
    }

    setByIndex(index, value) {
        if (value instanceof BorderDefinition) {
            this.getByIndex(index).join(value)
        } else {
            this.getByIndex(index)._width = value
        }
        return this;
    }

    /**
     * 
     * @param {string} key 
     * @param {*} value 
     */
    setOnDirections(key, value) {
        let orderedAttributes = this.getOrderedAttributes()
        for (let i = 0; i < this.getOrderedAttributes.length; i++) {
            orderedAttributes[i][key] = value;
        }
        return this;
    }

    /**
     * 
     * @param {number} width 
     * @returns {Border}
     */
    width(width) {
        this._fFirst._width = width;
        this._fSecond._width = width;
        this._fThird._width = width;
        this._fForth._width = width;
        return this;
    }

    /**
     * 
     * @param {*} color 
     * @returns {Border}
    */
    color(color) {
        this._fFirst._color = color;
        this._fSecond._color = color;
        this._fThird._color = color;
        this._fForth._color = color;
        return this;
    }

    shape(shape) {
        this._shape = shape;
        return this;
    }

    /**
     * Sets the border-style of all sides to the given. 
     * @param {LineStyles} lineStyle style of the border
     * @returns {Border}
     */
    setStyleAll(lineStyle) {
        this._fFirst._style = lineStyle;
        this._fSecond._style = lineStyle;
        this._fThird._style = lineStyle;
        this._fForth._style = lineStyle;
        return this;
    }

    /**
     * 
     * @param {LineStyles} lineStyle 
     * @param {*} sidingRefSide 
     * @returns {Border}
     */
    setLineStyle(lineStyle, sidingRefSide) {
        this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle)
        return this;
    }

    /**
     * 
     * @param {Map<SidingRefSides, LineStyles} refSideStyleMap 
     * @returns {Border}
     */
    setLineStyles(refSideStyleMap) {
        let rkeys = Object.keys(refSideStyleMap);
        for (let i = 0; i < array.length; i++) {
            this._sidingStyles.setBySidingRef(rkeys[i], refSideStyleMap[rkeys[i]]);
        }
        return this;
    }


    toModifications() {
        let names = ["left", "top", "right", "bottom"];
        return this.getOrderedAttributes()
            .flatMap((bdef, i) => {
                if (bdef.width == 0)
                    return []

                return [
                    { key: `border-${names[i]}-width`, value: bdef._width + this._unit },
                    { key: `border-${names[i]}-color`, value: bdef._color },
                    { key: `border-${names[i]}-style`, value: bdef._style }
                ]
            })
    }
}


class BorderChain extends Border {
    constructor(modifier){
        super();
        this._modifier = modifier;
    }

    /**
     * 
     * @returns {Modifier|ChainableModifier}
     */
    toModifier() {
        return this._modifier
            .border(this);
    }

    /**
     * 
     * @returns {Modifier|ChainableModifier}
     */
    ensureModifier() {
        return this.toModifier()
    }

    /**
     * Applies the border modification on the modifier
     * and returns (through the modifier) to the corresponding component. 
     * @returns {Component}
     */
    toComponent() {
        return this._modifier
            .border(this)
            .toComponent();
    }

    /**
     * 
     * @param {Component} innerComponent will be set to the corresponding component
     * @returns {Component} the corr. Component after the childContext was applied. 
     */
    childContext(innerComponent) {
        return this._modifier
            .border(this)
            .toComponent()
            .childContext(innerComponent);
    }
}