y2k-alerts/js/y2k-alert.js

((global) => {

    var Y2K = global.Y2K;
    var createElement = global.Y2KDom.createElement;
    var appendChildren = global.Y2KDom.appendChildren;

    class y2kAlert extends EventTarget {
        constructor(title, type, message, options) {
            super();
            this.title = title || "Alert";
            this.type = type || Y2K.TYPE_INFO;
            this.message = message || "";
            this.options = Object.assign({
                closeOnBackdropClick: false
            }, options || {});
            this.isVisible = false;
            this.inputElement = null;
            this.overlayElement = null;
            this.dialogElement = null;
            this.submitButton = null;
            this.closeButton = null;

            this._build();
            this._bindEvents();
        }

        _build() {
            this.overlayElement = createElement("div", {
                class: "y2k-alert-overlay"
            });

            this.dialogElement = createElement("section", {
                class: "y2k-alert y2k-alert--" + this.type,
                role: "dialog",
                "aria-modal": "true",
                "aria-label": this.title
            });

            var titleBar = createElement("header", {
                class: "y2k-alert__titlebar"
            });

            var titleElement = createElement("h2", {
                class: "y2k-alert__title"
            }, this.title);

            this.closeButton = createElement("button", {
                class: "y2k-btn y2k-btn--close",
                type: "button",
                "aria-label": "Close alert"
            }, "x");

            appendChildren(titleBar, [titleElement, this.closeButton]);

            var content = createElement("div", {
                class: "y2k-alert__content"
            });

            var textElement = createElement("p", {
                class: "y2k-alert__text"
            }, this.message);

            content.appendChild(textElement);

            if (this.options.input) {
                var inputConfig = typeof this.options.input === "object" ? this.options.input : {};
                this.inputElement = createElement("input", {
                    class: "y2k-alert__input",
                    type: inputConfig.type || "text",
                    placeholder: inputConfig.placeholder || ""
                });

                if (inputConfig.value) {
                    this.inputElement.setAttribute("value", inputConfig.value);
                }

                content.appendChild(this.inputElement);
            }

            var actions = createElement("footer", {
                class: "y2k-alert__actions"
            });

            this.submitButton = createElement("button", {
                class: "y2k-btn",
                type: "button"
            }, this.options.submitText || "OK");

            actions.appendChild(this.submitButton);
            appendChildren(content, [actions]);
            appendChildren(this.dialogElement, [titleBar, content]);
            this.overlayElement.appendChild(this.dialogElement);
        }

        _bindEvents() {
            var self = this;

            this.closeButton.addEventListener("click", function () {
                self.close("close-button");
            });

            this.submitButton.addEventListener("click", function () {
                self.submit();
            });

            this.overlayElement.addEventListener("click", function (event) {
                if (!self.options.closeOnBackdropClick) {
                    return;
                }

                if (event.target === self.overlayElement) {
                    self.close("backdrop");
                }
            });

            if (this.inputElement) {
                this.inputElement.addEventListener("keydown", function (event) {
                    if (event.key === "Enter") {
                        self.submit();
                    }
                });
            }
        }

        show(parent) {
            var mountPoint = parent || document.body;
            if (!this.isVisible) {
                mountPoint.appendChild(this.overlayElement);
                this.isVisible = true;
            }

            if (this.inputElement) {
                this.inputElement.focus();
            } else {
                this.submitButton.focus();
            }

            return this;
        }

        hide() {
            if (this.isVisible && this.overlayElement.parentNode) {
                this.overlayElement.parentNode.removeChild(this.overlayElement);
            }

            this.isVisible = false;
            return this;
        }

        close(reason) {
            this.hide();
            this.dispatchEvent(new CustomEvent("close", {
                detail: {
                    reason: reason || "close"
                }
            }));
            return this;
        }

        submit() {
            var value = this.inputElement ? this.inputElement.value : null;
            this.dispatchEvent(new CustomEvent("submit", {
                detail: {
                    value: value,
                    title: this.title,
                    message: this.message,
                    type: this.type
                }
            }));
            this.hide();
            return this;
        }

        static quick(title, type, message, options) {
            var alertInstance = new y2kAlert(title, type, message, options);
            alertInstance.show();
            return alertInstance;
        }
    }

    global.y2kAlert = y2kAlert;

})(window);