(function () { // =============================== // Utility: Close toast function // =============================== function closeToastMagicItem(toast) { toast.classList.remove("show"); setTimeout(() => { toast.remove(); }, 500); } // =============================== // Utility: Icon generator // =============================== function getToasterIcon(key = null) { if (key?.toString() === 'success') { return ` `; } else if (key?.toString() === 'error') { return ``; } else if (key?.toString() === 'info') { return ` `; } else if (key?.toString() === 'warning') { return ``; } else if (key?.toString() === 'close') { return ``; } else { return ``; } } // =============================== // ToastMagic Class Definition // =============================== if (typeof window.ToastMagic === "undefined") { window.ToastMagic = class ToastMagic { constructor() { const config = window.toastMagicConfig || {}; this.toastMagicPosition = config.positionClass || "toast-top-end"; this.toastMagicCloseButton = config.closeButton || false; this.toastMagicTheme = config.theme || 'default'; this.toastContainer = document.querySelector(".toast-container"); if (!this.toastContainer) { this.toastContainer = document.createElement("div"); this.toastContainer.classList.add("toast-container"); document.body.appendChild(this.toastContainer); } this.toastContainer.className = "toast-container " + this.toastMagicPosition + " theme-" + this.toastMagicTheme; } show({ type, heading, description = "", showCloseBtn = this.toastMagicCloseButton, customBtnText = "", customBtnLink = "" }) { let toastClass, toastClassBasic; switch (type) { case "success": toastClass = "toast-success"; toastClassBasic = "success"; break; case "error": toastClass = "toast-danger"; toastClassBasic = "danger"; break; case "warning": toastClass = "toast-warning"; toastClassBasic = "warning"; break; case "info": default: toastClass = "toast-info"; toastClassBasic = "info"; } const toast = document.createElement("div"); toast.classList.add("toast-item", toastClass); toast.setAttribute("role", "alert"); toast.setAttribute("aria-live", "assertive"); toast.setAttribute("aria-atomic", "true"); toast.innerHTML = `
${getToasterIcon(type)}
${heading ? `

${heading}

` : ''} ${description ? `

${description}

` : ''}
${showCloseBtn ? `` : ""} ${customBtnText && customBtnLink ? `${customBtnText}` : ""}
`; const cfg = window.toastMagicConfig || {}; const toastMagicPosition = cfg.positionClass || "toast-top-end"; const toastMagicShowDuration = cfg?.showDuration || 100; const toastMagicTimeOut = cfg?.timeOut || 5000; if ( toastMagicPosition.includes('bottom') ) { this.toastContainer.append(toast); } else { this.toastContainer.prepend(toast); } setTimeout(() => toast.classList.add("show"), toastMagicShowDuration); setTimeout(() => closeToastMagicItem(toast), toastMagicTimeOut); } success(...args) { this.show({ type: "success", ...this._parseArgs(args) }); } error(...args) { this.show({ type: "error", ...this._parseArgs(args) }); } warning(...args) { this.show({ type: "warning", ...this._parseArgs(args) }); } info(...args) { this.show({ type: "info", ...this._parseArgs(args) }); } _parseArgs(args) { const [heading = "", description = "", showCloseBtn = false, customBtnText = "", customBtnLink = ""] = args; return { heading, description, showCloseBtn, customBtnText, customBtnLink }; } }; } // =============================== // Initialize Instance Once // =============================== if (typeof window.toastMagic === "undefined") { window.toastMagic = new window.ToastMagic(); } // =============================== // DOM Ready: Setup Container + Events // =============================== document.addEventListener("DOMContentLoaded", function () { const config = window.toastMagicConfig || {}; const toastMagicPosition = config.positionClass || "toast-top-end"; if (!document.querySelector(".toast-container")) { document.body.insertAdjacentHTML( "afterbegin", `
` ); } // Listen for toast trigger buttons document.body.addEventListener("click", function (event) { const btn = event.target.closest("[data-toast-type]"); if (!btn) return; const type = btn.getAttribute("data-toast-type"); const heading = btn.getAttribute("data-toast-heading") || "Notification"; const description = btn.getAttribute("data-toast-description") || ""; const showCloseBtn = btn.hasAttribute("data-toast-close-btn"); const customBtnText = btn.getAttribute("data-toast-btn-text") || ""; const customBtnLink = btn.getAttribute("data-toast-btn-link") || ""; if (window.toastMagic[type]) { window.toastMagic[type](heading, description, showCloseBtn, customBtnText, customBtnLink); } else { window.toastMagic.info(heading, description, showCloseBtn, customBtnText, customBtnLink); } }); // Listen for toast close buttons document.body.addEventListener("click", function (event) { const closeBtn = event.target.closest(".toast-close-btn"); if (closeBtn) { const toast = closeBtn.closest(".toast-item"); if (toast) closeToastMagicItem(toast); } }); }); })();