From a4bf3451bbfc6292f8d33d5241d693251d5a0d01 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Sun, 15 Nov 2020 23:47:23 +0100 Subject: add wip grid component use cdn for bootstrap remove bloat from toaster --- bootstrap-v5-toaster/toaster.js | 147 ---------------------------------------- 1 file changed, 147 deletions(-) delete mode 100644 bootstrap-v5-toaster/toaster.js (limited to 'bootstrap-v5-toaster/toaster.js') diff --git a/bootstrap-v5-toaster/toaster.js b/bootstrap-v5-toaster/toaster.js deleted file mode 100644 index 6ee8a7d..0000000 --- a/bootstrap-v5-toaster/toaster.js +++ /dev/null @@ -1,147 +0,0 @@ -// License: https://github.com/ivarlovlie/bootstrap-v5-toaster/blob/master/LICENSE -/** Class representing a Bootstrap 5 Toaster. */ -class Toaster { - constructor(options) { - if (!options) { - options = { - hideAfter: 3500, - position: "top-right", - }; - } - this.root = document.createElement("div"); - this.root.id = "toaster-container"; - switch (options.position) { - case "top-right": - this.root.style = - "display: flex; align-items: end; flex-direction: column; position: absolute; top: 0; right: 0; padding: 15px;"; - break; - case "top-left": - this.root.style = "position: absolute; top: 0; padding: 15px;"; - break; - case "bottom-right": - this.root.style = - "display: flex; align-items: end; flex-direction: column; position: absolute; bottom: 0; right: 0; padding: 15px;"; - break; - break; - case "bottom-left": - this.root.style = "position: absolute; bottom: 0; padding: 15px;"; - break; - default: - // top-right - this.root.style = - "display: flex; align-items: end; flex-direction: column; position: absolute; top: 0; right: 0; padding: 15px;"; - break; - } - document.body.appendChild(this.root); - this.defaultTimeout = options.hideAfter ? options.hideAfter : 3500; - this.toastTypes = { - error: "error", - success: "success", - info: "info", - }; - } - display(title, message, autohide, type) { - if (!title || typeof title !== "string" || typeof message !== "string") { - throw new Error("Toaster: title &| message is empty or not a string"); - } - let toast = document.createElement("div"); - toast.className = "toast"; - toast.role = "alert"; - toast.id = Math.random().toString(36).substring(2) + Date.now().toString(36); - let toastHeader = document.createElement("div"); - toastHeader.className = "toast-header"; - let toastTypeIndicator = document.createElement("div"); - switch (type) { - case this.toastTypes.error: - toastTypeIndicator.className = "toast-type-indicator rounded mr-2 bg-danger"; - toast.style = - "width: max-content; min-width: 300px; border-color: var(--bs-danger);"; - break; - case this.toastTypes.success: - toastTypeIndicator.className = "toast-type-indicator rounded mr-2 bg-success"; - toast.style = - "width: max-content; min-width: 300px; border-color: var(--bs-success);"; - break; - case this.toastTypes.info: - toastTypeIndicator.className = "toast-type-indicator rounded mr-2 bg-info"; - toast.style = "width: max-content; min-width: 300px; border-color: var(--bs-info);"; - break; - } - toastTypeIndicator.style = "width: 18px; height: 18px;"; - toastHeader.appendChild(toastTypeIndicator); - let toastTitle = document.createElement("strong"); - toastTitle.className = "mr-auto text-truncate"; - toastTitle.innerText = title; - toastHeader.appendChild(toastTitle); - let toastCloseButton = document.createElement("button"); - toastCloseButton.className = "ml-2 mb-1 close"; - toastCloseButton.dataset.dismiss = "toast"; - toastCloseButton.onclick = () => { - setTimeout(() => { - toast.parentNode.removeChild(toast); - }, parseInt(1000)); - }; - if (!autohide) { - let toastCloseButtonIcon = document.createElement("img"); - // icon license: https://github.com/twbs/icons/blob/master/LICENSE.md - toastCloseButtonIcon.src = - 'data:image/svg+xml,'; - toastCloseButtonIcon.alt = "x"; - toastCloseButtonIcon.dataset.ariaHidden = "true"; - toastCloseButton.appendChild(toastCloseButtonIcon); - toastHeader.appendChild(toastCloseButton); - } - toast.appendChild(toastHeader); - if (message) { - let toastBody = document.createElement("div"); - toastBody.className = "toast-body"; - toastBody.style = "word-wrap: break-word;"; - toastBody.innerText = message; - toast.appendChild(toastBody); - } - this.root.appendChild(toast); - let delay = 0; - if (typeof autohide === "number" && autohide !== 0) { - delay = autohide; - autohide = true; - } else if (autohide) { - delay = this.defaultTimeout; - } - new bootstrap.Toast(document.getElementById(toast.id), { - animation: true, - autohide, - delay, - }).show(); - if (delay) - setTimeout(() => { - toast.parentNode.removeChild(toast); - }, parseInt(delay + 1000)); - } - /** - * Display an toast indicating an error. - * @param {string} title Title of the toast - * @param {string} message Message of the toast - * @param {boolean} autohide Autohide toast - */ - error(title, message = "", autohide = true) { - this.display(title, message, autohide, this.toastTypes.error); - } - /** - * Display an toast indicating an successfull operation. - * @param {string} title Title of the toast - * @param {string} message Message of the toast - * @param {boolean} autohide Autohide toast - */ - success(title, message = "", autohide = true) { - this.display(title, message, autohide, this.toastTypes.success); - } - /** - * Display an informational toast. - * @param {string} title Title of the toast - * @param {string} message Message of the toast - * @param {boolean} autohide Autohide toast - */ - info(title, message = "", autohide = true) { - this.display(title, message, autohide, this.toastTypes.info); - } -} -- cgit v1.3