la-watch/source/scripts/assets/cx-ui.js

export class cx_ui {
    static #generator(type, manipulator = null) {
        return (name, click = null, manipulate = null) => {
            const item = document.createElement(type);
           
            item.id = `${type}-${name}`;
            item.classList.add(type);
            item.classList.add(name);
            item.classList.add(`${type}-${name}`);

            if (manipulator !== null) {
                manipulator(item);
            }
            
            if (click !== null) {
                item.addEventListener("click", click);
            }

            if (manipulate !== null) {
                manipulate(item);
            }

            return item;
        };
    }

    static get div() {
        return this.#generator("div");
    }

    static get canvas() {
        return this.#generator("canvas");
    }

    static push(name, text, click = null, manipulate = null) {
        const generator = this.#generator("input", (item) => {
            item.value = text;
            item.type = "button";
            item.classList.add("push");
        });

        return generator(name, click, manipulate);
    }

    static p(name, text, click = null, manipulate = null) {
        const generator = this.#generator("p", (p) => { p.innerText = text; });
        const result = generator(name, click, manipulate);

        return result;
    }

    static get input() {
        return this.#generator("input");
    }

    static image(name, url, click = null, manipulate = null) {
        const generator = this.#generator("img", (img) => { img.src = url; });
        const result = generator(name, click, manipulate);
     
        return result;
    }
}