cx-live-documentary/assets/items_list.js

import { element } from "./element.js";
import { submission } from "./submission.js";
import { project } from "./project.js";

class items_list {
    #container;
    #click;

    constructor(container, click) {
        if (!(container instanceof HTMLElement)) {
            throw "Container must be HTML element.";
        }

        if (typeof(click) !== "function") {
            throw "Click must be an function.";
        }

        this.#click = click;
        this.#container = container;
        this.#container.classList.add("elements-list");
    }

    get container() {
        return this.#container;
    }

    #clean() {
        while (this.container.firstChild) {
            this.container.firstChild.remove();
        }
    }

    #add(content) {
        const container = document.createElement("div");
        const text = document.createElement("p");
        const icon = document.createElement("span");
        const name = document.createElement("span");

        name.innerText = content.name;
        container.className = "single-element";
        icon.classList.add("icon");
        icon.classList.add("material-symbols-outlined");

        container.addEventListener("click", () => {
            this.#click(content);
        });

        if (content instanceof project) {
            icon.innerText = "tactic";
        } else if (content instanceof element) {
            icon.innerText = "stroke_partial";
        } else if (content instanceof submission) {
            icon.innerText = "book_3";
        }

        text.appendChild(icon);
        text.appendChild(name);
        container.appendChild(text);
        this.container.appendChild(container);
    }

    update(list) {
        if (!(list instanceof Array)) {
            throw "List elements to update must be an array.";
        }

        this.#clean();

        list.forEach(count => {
            this.#add(count); 
        });
    }
}

export { items_list };