cx-live-documentary/assets/search.js

import { database } from "./database.js";
import { lang } from "./lang.js";
import { items_list } from "./items_list.js";

class search {
    #container;
    #hint;
    #input;
    #last_content;
    #store;
    #list;
    
    constructor(store) {
        if (!(store instanceof database)) {
            throw "Store must be instance of database";
        }

        this.#last_content = "";
        this.#store = store;

        this.#container = document.createElement("div");
        this.#container.className = "search";

        this.#hint = document.createElement("div");
        this.#hint.className = "hint";
        this.#hint.style.display = "none";

        this.#input = document.createElement("input");
        this.#input.type = "text";
        this.#input.placeholder = lang.search.type;

        const submit = document.createElement("input");
        submit.type = "submit";
        submit.value = lang.search.find;

        const form = document.createElement("form");
    
        this.#list = new items_list(this.#hint, this.click);

        form.addEventListener("submit", (action) => {
            action.preventDefault();
            this.find();
        });

        this.#input.addEventListener("keypress", () => {
            this.refresh();
        });

        this.#input.addEventListener("keyup", () => {
            this.refresh();
        });

        this.#input.addEventListener("change", () => {
            this.refresh();
        });

        form.appendChild(this.#input);
        form.appendChild(submit);
        this.#container.appendChild(form);
        this.#container.appendChild(this.#hint);
    }

    click(item) {
        console.log(item.name);
    }

    get content() {
        return this.#input.value.trim();
    }

    get changed() {
        if (this.content === this.#last_content) {
            return false;
        }

        this.#last_content = this.content;
        
        return true;
    }

    get results() {
        if (this.content.length === 0) {
            return [];
        }

        return this.#store.search(this.content);
    }

    find() {
        this.refresh();
    }

    refresh() {
        if (!this.changed) {
            return;
        }
    
        const results = this.results;

        this.#list.update(results);
    
        if (results.length === 0) {
            this.#hint.style.display = "none";
        } else {
            this.#hint.style.display = "";
        }
    }

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

export { search };