@dodona/papyros/dist/input/InteractiveInputHandler.js

Scratchpad for multiple programming languages in the browser.

import { INPUT_TA_ID, SEND_INPUT_BTN_ID } from "../Constants";
import { InputMode } from "../InputManager";
import { addListener, getElement, t } from "../util/Util";
import { UserInputHandler } from "./UserInputHandler";
import { renderButton, renderWithOptions } from "../util/Rendering";
/**
 * Input handler that takes input from the user in an interactive fashion
 */
export class InteractiveInputHandler extends UserInputHandler {
    /**
     * Retrieve the button that users can click to send their input
     */
    get sendButton() {
        return getElement(SEND_INPUT_BTN_ID);
    }
    /**
     * Retrieve the HTMLInputElement for this InputHandler
     */
    get inputArea() {
        return getElement(INPUT_TA_ID);
    }
    getInputMode() {
        return InputMode.Interactive;
    }
    hasNext() {
        return this.waiting; // Allow sending empty lines when the user does this explicitly
    }
    next() {
        const value = this.inputArea.value;
        this.reset();
        return value;
    }
    waitWithPrompt(waiting, prompt) {
        this.waiting = waiting;
        this.sendButton.disabled = !waiting;
        this.inputArea.disabled = !waiting;
        super.waitWithPrompt(waiting, prompt);
    }
    setPlaceholder(placeholder) {
        if (this.waiting) {
            this.inputArea.setAttribute("placeholder", placeholder);
            this.inputArea.setAttribute("title", "");
        }
        else {
            this.inputArea.setAttribute("placeholder", "");
            this.inputArea.setAttribute("title", t("Papyros.input_disabled"));
        }
    }
    focus() {
        this.inputArea.focus();
    }
    toggle() {
        this.reset();
    }
    onRunStart() {
        this.reset();
    }
    onRunEnd() {
        // Intentionally empty
    }
    _render(options) {
        const buttonHTML = renderButton({
            id: SEND_INPUT_BTN_ID,
            classNames: "btn-secondary",
            buttonText: t("Papyros.enter")
        });
        renderWithOptions(options, `
<div class="_tw-flex _tw-flex-row _tw-my-1">
    <input id="${INPUT_TA_ID}" type="text"
    class="_tw-border _tw-w-full _tw-mr-0.5 _tw-px-1 _tw-rounded-lg
    dark:_tw-border-dark-mode-content dark:_tw-bg-dark-mode-bg
    placeholder:_tw-text-placeholder-grey disabled:_tw-cursor-not-allowed
    focus:_tw-outline-none focus:_tw-ring-1 focus:_tw-ring-blue-500">
    </input>
    ${buttonHTML}
</div>`);
        addListener(SEND_INPUT_BTN_ID, () => this.inputCallback(this.next()), "click");
        this.inputArea.addEventListener("keydown", (ev) => {
            if (this.waiting && ev.key && ev.key.toLowerCase() === "enter") {
                this.inputCallback(this.next());
            }
        });
    }
    reset() {
        super.reset();
        this.inputArea.value = "";
    }
}
//# sourceMappingURL=InteractiveInputHandler.js.map