@kitten-science/kitten-scientists/lib/ui/components/Dialog.js

Add-on for the wonderful incremental browser game: https://kittensgame.com/web/

import { coalesceArray } from "@oliversalzburg/js-utils/data/nil.js";
import { Button } from "./Button.js";
import stylesButton from "./Button.module.css";
import { Container } from "./Container.js";
import { Delimiter } from "./Delimiter.js";
import styles from "./Dialog.module.css";
import stylesExplainer from "./ExplainerLiteItem.module.css";
import { HeaderListItem } from "./HeaderListItem.js";
import { Input } from "./Input.js";
import { Paragraph } from "./Paragraph.js";
import stylesToolbarListItem from "./ToolbarListItem.module.css";
import { UiComponent } from "./UiComponent.js";
export class Dialog extends UiComponent {
    container;
    head;
    returnValue;
    /**
     * Constructs a dialog.
     *
     * @param host - A reference to the host.
     * @param options - Options for the dialog.
     */
    constructor(parent, options) {
        super(parent, { ...options });
        this.element = $("<dialog/>")
            .addClass("dialog")
            .addClass("help")
            .addClass(styles.dialog);
        if (options?.hasClose !== false) {
            this.addChild(new Button(parent, "close", null, {
                classes: [styles.close],
                onClick: () => {
                    this.close();
                    options?.onCancel?.();
                },
            }));
        }
        this.returnValue = options?.promptValue ?? "";
        this.head = new Container(parent);
        this.container = new Container(parent);
        this.addChildren(coalesceArray([
            this.head,
            options?.prompt
                ? new Input(parent, {
                    onChange: (value) => {
                        this.returnValue = value;
                    },
                    onEnter: (value) => {
                        this.returnValue = value;
                        this.close();
                        options.onConfirm?.(this.returnValue);
                    },
                    onEscape: (_value) => {
                        this.close();
                        options.onCancel?.();
                    },
                    selected: true,
                    value: options.promptValue,
                })
                : undefined,
            this.container,
            new Delimiter(parent),
            new Container(parent, {
                classes: [stylesToolbarListItem.toolbar],
            }).addChildren(coalesceArray([
                new Button(parent, "OK", null, {
                    classes: [stylesButton.large],
                    onClick: () => {
                        this.close();
                        options?.onConfirm?.(this.returnValue);
                    },
                }),
                options?.hasCancel
                    ? new Button(parent, "Cancel", null, {
                        classes: [stylesButton.large],
                        onClick: () => {
                            this.close();
                            options.onCancel?.();
                        },
                    })
                    : undefined,
            ])),
        ]));
    }
    toString() {
        return `[${Dialog.name}#${this.componentId}]`;
    }
    addChildHead(child) {
        this.head.addChild(child);
        return this;
    }
    addChildrenHead(children) {
        for (const child of children ?? []) {
            this.head.addChild(child);
        }
        return this;
    }
    addChildContent(child) {
        this.container.addChild(child);
        return this;
    }
    addChildrenContent(children) {
        for (const child of children ?? []) {
            this.container.addChild(child);
        }
        return this;
    }
    show() {
        $("#gamePageContainer").append(this.element);
        this.element[0].show();
    }
    showModal() {
        $("#gamePageContainer").append(this.element);
        this.element[0].showModal();
    }
    close() {
        this.element[0].close();
        this.element.remove();
    }
    static async prompt(parent, text, title, initialValue, explainer) {
        return new Promise(resolve => {
            new Dialog(parent, {
                hasCancel: true,
                hasClose: false,
                onCancel: () => {
                    resolve(undefined);
                },
                onConfirm: (result) => {
                    resolve(result);
                },
                prompt: true,
                promptValue: initialValue,
            })
                .addChildrenHead(coalesceArray([
                title ? new HeaderListItem(parent, title) : undefined,
                new Paragraph(parent, text),
            ]))
                .addChildrenContent(explainer
                ? [
                    new Container(parent, {
                        classes: [stylesExplainer.explainer],
                    }).addChildren([new Paragraph(parent, explainer)]),
                ]
                : [])
                .showModal();
        });
    }
}
//# sourceMappingURL=Dialog.js.map