cx-live-documentary/assets/search.js

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

class search {
    #container;
    #hint;
    #input;
    #last_content;
    
    constructor() {
        this.#last_content = "";

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

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

        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");
        
        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);
    }

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

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

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

    find() {
        if (!this.changed) {
            return;
        }

        console.log("UwU");
    }

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

        console.log("OwO");
    }

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

export { search };