cx-doxy/assets/list_applet.js

import { dom_manager } from "./functions.js";

class list_applet {
    #symbol;
    #target;
    #items;

    constructor(target, symbol = null) {
        if (!dom_manager.is_element(target)) {
            throw "Target list must be an HTML element.";
        }

        this.#items = new Object();
        this.#target = target;  
        this.#symbol = null;

        if (symbol !== null) {
            this.#symbol = symbol.toString();
        }
        
        if (!this.#target.classList.contains("items-list")) {
            this.#target.classList.add("items-list");
        }

        this.clean();
    }   

    clean() {
        while(this.#target.childElementCount) {
            this.#target.lastChild.remove();
        }
    }

    exists(name) {
        return this.#items.hasOwnProperty(name);
    }

    remove(name) {
        if (!this.exists(name)) {
            throw "Can not remove item. This item not exists on list.";
        }

        this.#items[name].remove();
        delete(this.#items[name]);
    }

    #new_symbol() {
        const symbol = document.createElement("span");
        
        symbol.classList.add("material-symbols-outlined");
        symbol.innerText = this.#symbol;

        return symbol;
    }

    append(name, action) {
        if (this.exists(name)) {
            throw "Items with this name already exists on list.";
        }

        name = name.trim();

        if (name.length === 0) {
            throw "Name for new item can not be empty.";
        }

        const new_item = document.createElement("div");
        new_item.classList.add("list-item");

        if (this.#symbol !== null) {
            new_item.appendChild(this.#new_symbol());
        }

        const nametag = document.createElement("p");
        nametag.innerText = name;

        new_item.appendChild(nametag);
        this.#target.appendChild(new_item);
        this.#items[name] = new_item;
    
        new_item.addEventListener("click", () => {
            action(this, name);
        });
    }
}

export { list_applet };