Global Window Alert System

<div id="alert-container">
    <!-- ERROR -->
    <dialog id="alert-error" class="a-error">
        <div class="spc-btw gap-15p">
            <p>== Text Content ==</p>
            <button autofocus onclick="dismissAlert('error');">Close</button>
        </div>
    </dialog>
    <!-- WARNING -->
    <dialog id="alert-warning" class="a-warning">
        <div class="spc-btw gap-15p">
            <p>== Text Content ==</p>
            <button autofocus onclick="dismissAlert('warning');">Close</button>
        </div>
    </dialog>
    <!-- INFO -->
    <dialog id="alert-info" class="a-info">
        <div class="spc-btw gap-15p">
            <p>== Text Content ==</p>
            <button autofocus onclick="dismissAlert('info');">Close</button>
        </div>
    </dialog>
    <!-- SUCCESS -->
    <dialog id="alert-success" class="a-success">
        <div class="spc-btw gap-15p">
            <p>== Text Content ==</p>
            <button autofocus onclick="dismissAlert('success');">Close</button>
        </div>
    </dialog>
</div>
<script>
    /** @typedef {"error" | "warning" | "info" | "success"} ValidAlertTypes */
    const validAlertTypeList = ["error", "warning", "info", "success"];
    /**
     * @param alertType {ValidAlertTypes}
     * @returns {HTMLDialogElement}
     */
    const findDialog = (alertType) => {
        const diaEle = document.querySelector(`dialog#alert-${alertType}`);
        if (!diaEle) throw new Error(`[WARNING] Failed to find Dialog with id alert-${alertType}!`);
        return diaEle;
    };

    class AlertManager {
        parentDialog;
        textContainer;
        /** @param alertType {ValidAlertTypes} */
        constructor(alertType) {
            this.parentDialog = findDialog(alertType);
            this.textContainer = Object.values(
                Object.values(this.parentDialog.childNodes)
                .find((child) => child instanceof HTMLDivElement).childNodes
            ).find((child) => child instanceof HTMLParagraphElement);
        }

        get dlog() { return this.parentDialog; }
        get isOpen() { return this.dlog.hasAttribute('open'); }
        /** @param txt {string} */
        set txtDisplay(txt) { this.textContainer.textContent = txt; }

        // TODO: Calculate position of prexisting dialog boxes currently `open`
        // Apply position shift to prevent overlap, accounting for translation distance to take up `closed` boxes
        show() { this.dlog.show(); }
        close() { this.dlog.close(); }
    }

    const dialogContainer = {
        error: new AlertManager('error'),
        warning: new AlertManager('warning'),
        info: new AlertManager('info'),
        success: new AlertManager('success')
    };

    /** @param alertType {ValidAlertTypes} */
    function dismissAlert(alertType) {
        console.log(alertType);
        if (dialogContainer[alertType].isOpen) dialogContainer[alertType].close();
    }


    window.addEventListener("message", (event) => {
        /**
         * @typedef {
            {
               message: string,
               type: ValidAlertTypes
            }
         } ValidMsgPayload
         */
        if (event.origin !== "http://127.0.0.1:4450") return;
        /** @type {ValidMsgPayload} */
        const msgPayload = event.data;
        if (typeof msgPayload === 'string' || !validAlertTypeList.includes(msgPayload.type)) return;

        dialogContainer[msgPayload.type].txtDisplay = msgPayload.message;
        dialogContainer[msgPayload.type].show();

        setTimeout(() => { dialogContainer[msgPayload.type].close(); }, 4400);
    });
</script>