ignite-html-bootstrap/ok-dialog.js

import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js";
import { IgniteTemplate, div, h2, h5, button } from "../ignite-html/ignite-template.js";

class OkDialog extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            loading: false,
            title: null,
            description: null,
            okButton: "Okay",
            okButtonClass: "btn-primary",
            okCallback: null,
            spinnerClass: "text-secondary",
            modalElement: null,
            modal: null,
            autoOpen: false
        };
    }

    render() {
        return this.template.child(
            new div().class("modal").ref(this.modalElement).child(
                new div().class("modal-dialog modal-dialog-centered").child(
                    new div().class("modal-content").child(
                        new div().class("modal-body d-flex flex-column align-items-center").child(
                            //Title
                            new h2().class("text-primary text-center mb-3").child(this.title),

                            new h5().show(this.description, description => description != null && description != undefined).class("text-center mb-4").child(this.description),

                            //Ok button
                            new div().class("d-flex flex-row gap-3 w-100").child(
                                new button()
                                    .disabled(this.loading)
                                    .class("btn btn-lg flex-1 rounded-pill d-flex flex-row align-items-center justify-content-center")
                                    .class(this.okButtonClass)
                                    .child(
                                        new div().show(this.loading).class("spinner-border me-2").class(this.spinnerClass),

                                        this.okButton
                                    )
                                    .onClick(() => this.ok()),
                            )
                        )
                    )
                )
            )
        )
    }

    afterRender() {
        this.modal = new bootstrap.Modal(this.modalElement, { backdrop: "static" });
    }

    ready() {
        if (this.autoOpen) {
            this.open();
        }
    }

    async ok() {
        this.loading = true;

        if (this.okCallback) {
            await this.okCallback(this);
        }

        this.loading = false;

        this.close();
    }

    open() {
        this.modal.show();
    }

    close() {
        this.modal.hide();
    }
}

customElements.define("bt-ok-dialog", OkDialog);

class Template extends IgniteTemplate {
    constructor(...children) {
        super("bt-ok-dialog", children);
    }

    /**
     * Creates and opens a new Ok dialog with a title, description, okCallback.
     * @param {String|IgniteProperty} title 
     * @param {String|IgniteProperty} description 
     * @param {Function(okDialog)} okCallback 
     */
    static open(title, description, okCallback = null) {
        var dialog = new Template();
        dialog.property("autoOpen", true);
        dialog.property("title", title);
        dialog.property("description", description);
        dialog.property("okCallback", async (instance) => {
            if (okCallback) {
                await okCallback(instance);
            }

            dialog.deconstruct();
        });

        dialog.construct(window.document.body, null);
    }
}

export {
    Template as OkDialog
}