1 line
4.3 KiB
JavaScript
1 line
4.3 KiB
JavaScript
((global) => { global.Y2K = { TYPE_INFO: "info", TYPE_WARNING: "warning", TYPE_ERROR: "error", TYPE_SUCCESS: "success" }; })(window); ((global) => { function createElement(tagName, attributes, text) { var element = document.createElement(tagName); var attrs = attributes || {}; var keys = Object.keys(attrs); for (var i = 0; i < keys.length; i += 1) { element.setAttribute(keys[i], attrs[keys[i]]); } if (text !== undefined && text !== null) { element.textContent = text; } return element; } function appendChildren(parent, children) { for (var i = 0; i < children.length; i += 1) { parent.appendChild(children[i]); } } global.Y2KDom = { createElement: createElement, appendChildren: appendChildren }; })(window); ((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); ((global) => { global.Y2KAlerts = { y2kAlert: global.y2kAlert, Y2K: global.Y2K, quick: function (title, type, message, options) { return global.y2kAlert.quick(title, type, message, options); } }; })(window); |