jpc-like-websites/src/baseComponents.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 
 */

/**
 * Represents a Component (of an HTMLElement) that is capable of receiving input.
 * 
 * @inheritdoc
 */
class InputComponent extends Component {
    /**
     * 
     * @param {string} element 
     * @param {Attr} attr 
     * @param {Modifier} modifier 
     */
    constructor(element, attr = {}, modifier = null) {
        super(element, attr);
        this.addStyleClass("el-input-comp");
        if (modifier) {
            this.modifier(modifier);
        }
    }

    /**
     * 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 {
    /**
     * 
     * @param {Attr} attr 
     * @param {Modifier} modifier 
     */
    constructor(attr = {}, modifier = null) {
        super(document.createElement("div"), attr);
        this.addStyleClass("flex-container-component");
        if (modifier) {
            this.modifier(modifier);
        }
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent 
     * @returns {FlexContainerComponent} this component object
     */
    childContext(innerComponent) {
        if (innerComponent instanceof Array) {
            innerComponent
                .map(cl => {
                    if (cl instanceof Component) {
                        return cl
                    } else {
                        return cl.ensureModifier().toComponent()
                    }
                })
                .forEach(icomp => {
                    icomp._modifier = new Modifier()
                        .setStyleRule("flex", "none")
                        .join(icomp._modifier)

                })
        }
        return super.childContext(innerComponent);
    }
}

/**
 * A FlexContainerComponent, which organizes the children in a column like manner.
 * 
 * @inheritdoc
 */
class Column extends FlexContainerComponent {
    /**
     * 
     * @param {Attr} attr 
     * @param {Modifier} modifier 
     */
    constructor(attr = {}, modifier = null) {
        super(attr, modifier);
        this.addStyleClass("column-component");
        this.modifier(
            new Modifier()
                .setStyleRule("flex-direction", "column")
        );
    }
}

/**
 * A FlexContainerComponent, which organizes the children in a row like manner.
 * 
 * @inheritdoc
 */
class Row extends FlexContainerComponent {
    /**
     * 
     * @param {Attr} attr 
     * @param {Modifier} modifier 
     */
    constructor(attr = {}, modifier = null) {
        super(attr);
        this.addStyleClass("row-component")
        if (modifier) {
            this.modifier(modifier);
        }
        this.modifier(
            new Modifier()
                .fillMaxWidth()
                .setStyleRule("flex-direction", "row")
        )
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent 
     * @returns {Row}
     */
    childContext(innerComponent) {
        if (innerComponent instanceof Array) {
            innerComponent
                .map(cl => (cl instanceof Component ? cl : cl.ensureModifier().toComponent()))
                .forEach((icomp, i) => {
                    /* sets the width for all elements, 
                        to avoid overlapping or line break because of lacking width,
                        a percent is subtracted for every child element  */
                    /* To enable "override" a new Modifier is generated and joined 
                    with the modifier of the component */
                    icomp._modifier = new Modifier()
                        .setStyleRule("float", (i === 0 ? "left" : "right"))
                        .join(icomp._modifier)
                })
        }
        return super.childContext(innerComponent)
    }

    /**
     * @todo - adapt to extStore logic 
     * @override
     * @returns {Row}
     */
    distibuteSpacingEvenly() {
        this._element.children.forEach(child => {
            child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
        })
        return this;
    }
}