pragma-views2/webcomponents/pragma-dialogs/pragma-dialogs.js

import {BaseElement} from "../../baremetal/lib/base-element.js";

export class PragmaDialogs extends BaseElement {

    constructor() {
        super();
        this.classList.add("dialog");
        this.classList.add("closed");
    }

    connectedCallback() {
        super.connectedCallback();
        const instance = document.importNode(window.templates.get("pragma-dialogs-template"), true);
        this.appendChild(instance);
        this.falseButton = this.querySelector("#btnMessage_false");
        this.trueButton = this.querySelector("#btnMessage_true");

        this.registerEvent(this.falseButton, "click", this.reject.bind(this));
        this.registerEvent(this.trueButton, "click", this.accept.bind(this));

        this.showMessageHandler = this.showMessage.bind(this);
        window.eventEmitter.on("show-message", this.showMessageHandler);

        this.titleMap = new Map([
            [buttonTypes.ok, ["Ok", null]],
            [buttonTypes.ok_cancel, ["Ok", "Cancel"]],
            [buttonTypes.accept, ["Accept", null]],
            [buttonTypes.accept_reject, ["Accept", "Reject"]],
            [buttonTypes.yes_no, ["Yes", "No"]]
        ])
    }

    disconnectedCallback() {
        window.eventEmitter.remove("show-message", this.showMessageHandler);
        this.showMessageHandler = null;
        this.falseButton = null;
        this.trueButton = null;
        this.titleMap = null;
        this.buttonOptions = null;
        this.callback = null;
    }

    showMessage(options) {
        this.buttonOptions = options.buttons || buttonTypes.ok;
        this.callback = options.callback || null;

        this.updateDisplay(options.message);

        this.classList.remove("closed");
    }

    accept() {
        this.dismiss(true)
    }

    reject() {
        this.dismiss(false)
    }

    dismiss(action) {
        this.classList.add("closed");
        if (this.callback != null) {
            this.callback(action);
        }

        this.buttons = null;
        this.callback = null;
    }

    updateDisplay(message) {
        const options = this.titleMap.get(this.buttonOptions);
        const body = this.querySelector(".message-body");

        body.innerHTML = message;
        this.trueButton.innerHTML = options[0];

        if (options[1] != undefined) {
            this.falseButton.innerHTML = options[1];
            this.falseButton.setAttribute("aria-hidden", "false");
        }
        else {
            this.falseButton.setAttribute("aria-hidden", "true");
        }
    }
}

export const buttonTypes = {
    ok: 0,
    ok_cancel: 1,
    accept: 2,
    accept_reject: 3,
    yes_no: 4
};

customElements.define('pragma-dialogs', PragmaDialogs);