dequoter/frontend/src/controllers/commands_controller.js

import { Controller } from "@hotwired/stimulus"

import { textProcessor } from "../services.js";

export class CommandsController extends Controller {
    static targets = [
        "commandInput",
        "commandSelect",
    ];

    connect() {
        this._options = Array.from(this.commandSelectTarget.options);
    }

    showCommands(ev) {
        ev.preventDefault();
        this.element.showModal();

        this.commandInputTarget.setSelectionRange(0, this.commandInputTarget.value.length, "forward");
        this.commandInputTarget.focus();
    }

    handleKeyup(ev) {
        this._filterOptions(this.commandInputTarget.value);
    }

    dismissDialog(ev) {
        ev.preventDefault();
        this.element.close();
    }

    runCommand(ev) {
        ev.preventDefault();

        textProcessor.runTextCommand(this.commandSelectTarget.value);
        this.element.close();
    }

    _filterOptions(filterText) {
        let inputText = filterText.toLowerCase();

        let visibleOptions = [];
        for (let opt of this._options) {
            if ((inputText === "") || (opt.innerText.toLowerCase().includes(inputText))) {
                visibleOptions.push(opt);
            }
        }

        this.commandSelectTarget.replaceChildren(...visibleOptions);
        if (visibleOptions.length > 0) {
            this.commandSelectTarget.selectedIndex = 0;
        }
    }
}