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

/**
 * @inheritdoc
 * @abstract
 * @extends ModifiableComponent
 */
class StyleAndScriptStoringComponent extends ModifiableComponent {
    /**
     * @type {ExtStore}
     */
    _styleClassesExtStore
    /**
     * @type {ExtStore}
     */
    _stylesExtStore;
    /**
     * @type {Array<SStoreDefinition>}
     */
    _styles;
    /**
     * @type {ExtStore}
     */
    _functionsExtStore;
    /**
     * @type {Array<SStoreDefinition>}
     */
    _functions;

    constructor(element, attr = {}) {
        super(element, attr);

        this._styleClassesExtStore = ExtStoreType.CENTRALIZED_DOC_HEAD
            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);

        this._stylesExtStore = ExtStoreType.INTERNALIZED_WITHIN
            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);

        this._styles = [];

        this._functionsExtStore = ExtStoreType.CENTRALIZED_DOC_HEAD
            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);

        this._functions = [];
    }


    /**
     * @todo: Unify logic extract modifications into responsible construct
     * @todo: Make it work as expected, fix docu
     * @todo: Differentiate between directions (horizontal, vertiacl)
     * @override
     * @inheritdoc
     * Sets the alignment (modifications) for this element or more specific for its children. 
     * @param {Alignment} alignment 
     * @returns {Component} this component object
     */
    alignment(alignment) {
        /*
        this._modifier._modifications["display"] = "flex";
        this._modifier._modifications["align-content"] = alignment;
        this._modifier._modifications["align-items"] = alignment;
        this._modifier._modifications["text-align"] = alignment;
        */
        this._alignment = alignment;
        this._modifier._modifications["align-content"] = this._alignment;
        this._modifier._modifications["align-items"] = this._alignment;
        this._modifier._modifications["text-align"] = this._alignment; 
        return this;
    }

    /**
     * @todo: Unify logic extract modifications into responsible construct
     * @todo: Differentiate between directions (horizontal, vertical)
     * @todo: Make it work as expected, fix docu
     * @override
     * @inheritdoc
     * Sets the arrangement (modifications) for this element or more specific for its children. 
     * @param {Arrangement} arrangement 
     * @returns {Component} this component object
     */
    arrangement(arrangement) {
        /*
        this._modifier._modifications["justify-content"] = arrangement;
        */
        this._arrangement = arrangement;
        this._modifier._modifications["justify-content"] = this._arrangement;
        return this;
    }

    /**
     * Defines/Sets the general "storage-behaviour" for styling of this component.
     * Further for potential css definitions.
     * If a styling/modifier/class is passed via the corresponding methods/way, 
     * an alternative behaviour can be passed as a parameter - which will only be applied on/for that single one.
     * 
     * @param {ExtStorage|ExtStoreType|OverwriteBehaviour} extStore 
     * @returns {Component}
     */
    setStylingsStorage(extStore) {
        if (extStore) {
            if (extStore instanceof ExtStorage) {
                this._stylesExtStore = extStore;
            } else if (extStore instanceof ExtStoreType) {
                this._stylesExtStore.setExtStoreType(extStore);
            } else {
                this._stylesExtStore.OverwriteBehaviour(extStore);
            }
        } else {
            console.log("(Style)ExtStore was empty, did nothing");
        }
        return this;
    }

    /**
     * Defines/Sets the general "storage-behaviour" for functions of this component.
     * If a function is passed via "registerFunction", 
     * an alternative behaviour can be passed as a parameter - which will only be applied on/for that single one.
     * 
     * @param {ExtStorage|ExtStoreType|OverwriteBehaviour} extStore 
     * @returns {Component}
     */
    setFunctionsStorage(extStore) {
        if (extStore) {
            if (extStore instanceof ExtStorage) {
                this._stylesExtStore = extStore;
            } else if (extStore instanceof ExtStoreType) {
                this._stylesExtStore.setExtStoreType(extStore);
            } else {
                this._stylesExtStore.OverwriteBehaviour(extStore);
            }
        } else {
            console.log("(Function)ExtStore was empty, did nothing");
        }
        return this;
    }

    /**
    * 
    * @param {Function} func 
    * @param {string} underTheName 
    * @param {ExtStorage|ExtStoreType|ExtStorePosition|OverwriteBehaviour|EXPosConfer|ESOverwriteConfer} extStore 
    * if a unique definition is desired, all constants or configurator objects are allowed - they will be processed accordingly 
    * @returns 
    */
    registerFunction(func, underTheName = "", extStore = null) {

        let registrationName = [
            underTheName.trim(),
            func.name.trim(),
            `func${this._compName}${Object.keys(this._functions).length}`
        ]
            .find(e => e !== '');

        /*
        if (!extStore) {
            extStore = this._functionsExtStore;
        } else if (extStore instanceof ExtStoreConfer) {
            extStore = extStore.ensureStore();
        } else {
            extStore = new ExtStorage().setSingleValueToClone(extStore, this._functionsExtStore);
        }
            */

        let entry = new SStoreDefinition();
        entry._identifier = registrationName;
        entry._definition = func;
        entry._extStore = extStore;

        this._functions.push(entry);

        //identifyAndResolveOverwrite(this._functions, registrationName, entry, extStore._overwriteBehaviour);

        return this;
    }
}