Initial Commit

js/y2k-alert.js

@@ -0,0 +1,171 @@
+((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 = 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();
+            });
+
+            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);