Add list applet.

assets/list_applet.js

@@ -0,0 +1,87 @@
+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() {
+        this.#target.childNodes.forEach(item => {
+            item.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 };