jpc-like-websites/src/context.js

/**
 * The class provides overreaching options for building the website.
 */
class PageBuilder {
    #cssClasses;
    #functions;
    #functionNames;
    #cssElementIdentifiers;

    constructor() {
        this.#cssClasses = document.createElement("style");
        this.#functions = document.createElement("script");
        this.#functionNames = [];
        this.#cssElementIdentifiers = [];
    }

    /**
     * Registers a function to be added later in a script tag in the head of the document.
     * @param {string} name 
     * @param {func} fun 
     */
    registerFunction(name, fun) {
        if (!this.#functionNames.includes(name)) {
            this.#functions.innerText += `const ${name} = ${fun}`;
            this.#functionNames.push(name);
        }
    }

    /**
     * Adds the styling rules to the element identifiers into the style tag.
     * An elementDefinition can only be used once, repeated use will be ignored.
     * @param {string} elementDefinition The element identifier
     * @param {Map<string, string>} styleRuleMap The Styling rules/values
     */
    registerStyling(elementDefinition, styleRuleMap) {
        if (!this.#cssElementIdentifiers.includes(elementDefinition)) {
            this.#cssClasses.innerText += `${elementDefinition
                } {${Object.keys(styleRuleMap)
                    .map(e => e + ": " + styleRuleMap[e] + "; ")
                    .join(" ")
                }} `
            this.#cssElementIdentifiers.push(elementDefinition)
        }
    }

    /**
     * Adds a script tag into the head of the document. 
     */
    generate() {
        let head = document.querySelector("head");
        head.appendChild(this.#functions)
        head.appendChild(this.#cssClasses)
    }

    inDev() {
        let head = document.querySelector("head");
        let meta = document.createElement("meta");
        meta.setAttribute("http-equiv", "refresh");
        meta.setAttribute("content", "20");

        head.insertAdjacentElement("beforeend", meta);
        this.#functions.innerText = `
            let ts = new Date();
            console.log("Refreshed at: ", ts.getHours()+':'+ts.getMinutes()+':'+ts.getSeconds());
            `;
    }
}

const Page = new PageBuilder();