// Initialize toast container document.addEventListener("DOMContentLoaded", function () { // Load global config if available const toastMagicConfig = window.toastMagicConfig || {}; // Ensure the toast container exists if (!document.querySelector(".toast-container")) { document.body.insertAdjacentHTML( "afterbegin", `
` ); } // Initialize ToastMagic instance const toastMagic = new ToastMagic(); // Event delegation for dynamically created toasts document.body.addEventListener("click", function (event) { const btn = event.target.closest("[data-toast-type]"); if (!btn) return; // Fetch data attributes 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") || ""; // Call the respective toast function dynamically if (toastMagic[type]) { toastMagic[type](heading, description, showCloseBtn, customBtnText, customBtnLink); } else { toastMagic.info(heading, description, showCloseBtn, customBtnText, customBtnLink); } }); }); // Close button event listener document.body.addEventListener("click", function (event) { const closeButton = event.target.closest(".toast-close-btn"); if (!closeButton) return; const toast = closeButton.closest(".toast-item"); if (toast) { closeToastMagicItem(toast); } }); function closeToastMagicItem(toast) { toast.classList.remove("show"); setTimeout(() => { toast.remove(); }, 500); } class ToastMagic { constructor() { const toastMagicConfig = window.toastMagicConfig || {}; // Set configurations from the global config this.toastMagicPosition = toastMagicConfig.positionClass || "toast-top-end"; this.toastMagicCloseButton = toastMagicConfig.closeButton || false; // Find or create toast container 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); } // Remove any existing position class before adding a new one this.toastContainer.classList.remove(...this.toastContainer.classList); this.toastContainer.classList.add("toast-container", this.toastMagicPosition); } 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": toastClass = "toast-info"; toastClassBasic = "info"; break; default: toastClass = "toast-info"; toastClassBasic = "info"; } // Create the toast structure 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 toastMagicConfig = window.toastMagicConfig || {}; const toastMagicPosition = toastMagicConfig.positionClass || "toast-top-end"; const toastMagicShowDuration = toastMagicConfig?.showDuration || 100; const toastMagicHideDuration = toastMagicConfig?.hideDuration || 1000; const toastMagicTimeOut = toastMagicConfig?.timeOut || 5000; if ( toastMagicPosition == 'toast-bottom-end' || toastMagicPosition == 'toast-bottom-start' || toastMagicPosition == 'toast-top-center' ) { this.toastContainer.append(toast); } else { this.toastContainer.prepend(toast); } setTimeout(() => { toast.classList.add("show"); }, toastMagicShowDuration); // Auto close the toast after 3 seconds setTimeout(() => { closeToastMagicItem(toast); }, toastMagicTimeOut); } success(heading = "Success!", description = "", showCloseBtn = false, customBtnText = "", customBtnLink = "") { this.show({type: "success", heading, description, showCloseBtn, customBtnText, customBtnLink}); } error(heading = "Error!", description = "", showCloseBtn = false, customBtnText = "", customBtnLink = "") { this.show({type: "error", heading, description, showCloseBtn, customBtnText, customBtnLink}); } warning(heading = "Warning!", description = "", showCloseBtn = false, customBtnText = "", customBtnLink = "") { this.show({type: "warning", heading, description, showCloseBtn, customBtnText, customBtnLink}); } info(heading = "Info!", description = "", showCloseBtn = false, customBtnText = "", customBtnLink = "") { this.show({type: "info", heading, description, showCloseBtn, customBtnText, customBtnLink}); } } function getToasterIcon(key = null) { if (key == 'success') { return ` `; } else if (key == 'error') { return ``; } else if (key == 'close') { return ``; } else { return ` `; } } // Usage // Define createToast globally const toastMagic = new ToastMagic(); // Example // toastMagic.success("Success!", "Your operation was successful!"); // toastMagic.error("Error!", "Something went wrong."); // toastMagic.warning("Warning!", "This is a warning message."); // toastMagic.info("Info!", "Just an informational message.", true, 'close', 'link');