presentation/components/shell.component.ts

presentation/components/shell.component.ts is a file in Bane's Lab Site. 55 lines of code and 13 definitions.

import {
    COMMAND_MARK,
    SHELL_ROWS,
    SURFACE_LINE_CLASS,
    SURFACE_PANE_CLASS,
    SURFACE_RESUMED_CLASS,
    SURFACE_SHELL_CLASS,
    SURFACE_SHELL_ROWS_PROPERTY,
    SURFACE_TYPING_CLASS,
} from "#configuration/constants/surface.constants";
import { COMMAND_PANE_LABEL } from "#configuration/strings/surface.strings";
import { createElement } from "#core/factories/element.factory";
import { declareStyle } from "#core/registries/style.registry";

export class ShellPane {
    public readonly element: HTMLElement;
    private readonly body: HTMLElement;
    private typing: HTMLElement | null = null;

    public constructor() {
        this.body = createElement("code");
        this.element = createElement("section", {
            attributes: { "aria-label": COMMAND_PANE_LABEL },
            children: [createElement("pre", { children: [this.body] })],
            className: `${SURFACE_PANE_CLASS} ${SURFACE_SHELL_CLASS}`,
        });
        declareStyle(this.element, SURFACE_SHELL_ROWS_PROPERTY, String(SHELL_ROWS));
    }

    public clear(): void {
        this.typing = null;
        this.body.replaceChildren();
    }

    public prompt(): void {
        this.typing = this.line(COMMAND_MARK, SURFACE_TYPING_CLASS);
    }

    public type(command: string): void {
        if (this.typing !== null) {
            this.typing.textContent = COMMAND_MARK + command;
        }
    }

    public typed(): void {
        this.typing?.classList.remove(SURFACE_TYPING_CLASS);
        this.typing = null;
    }

    public resume(command: string): void {
        this.line(COMMAND_MARK + command, SURFACE_RESUMED_CLASS);
    }

    public append(text: string): void {
        this.line(text, null);
    }

    private line(text: string, modifier: string | null): HTMLElement {
        const className = modifier === null ? SURFACE_LINE_CLASS : `${SURFACE_LINE_CLASS} ${modifier}`;
        const element = createElement("span", { className, text });
        this.body.append(element);
        return element;
    }
}