toast.min.js

// Dynamically load CSS
(function () {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://praweensoni.github.io/notification-Style/toastnotifypks.css";
  document.head.appendChild(link);
})();

// Toast notification logic
function showToast(options) {
  const defaultOptions = {
    type: "success",
    message: "Data saved successfully!",
    duration: 5000,
    customTitle: null,
  };

  // Merge user options with defaults
  const { type, message, duration, customTitle } = {
    ...defaultOptions,
    ...options,
  };

  const toastDetails = {
    success: {
      icon: '<svg xmlns="http://www.w3.org/2000/svg"  fill="#0abf30" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>',
      title: "Success",
    },
    error: {
      icon: '<svg xmlns="http://www.w3.org/2000/svg"  fill="#e24d4c" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4 9.4 24.6 9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>',
      title: "Error",
    },
    warning: {
      icon: '<svg xmlns="http://www.w3.org/2000/svg"  fill="#e9bd0c" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>',
      title: "Warning",
    },
    info: {
      icon: '<svg xmlns="http://www.w3.org/2000/svg"  fill="#3498db" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>',
      title: "Info",
    },
  };

  const notification =
    document.querySelector(".notification") || createNotificationContainer();

  const { icon, title } = toastDetails[type] || toastDetails.info;

  // Remove toast (global function for accessibility)
  const removeToast = (toast) => {
    toast.classList.add("hide");
    if (toast.timeoutId) clearTimeout(toast.timeoutId);
    setTimeout(() => toast.remove(), 500);
  };

  const toast = document.createElement("div");
  toast.className = `toast ${type}`;
  toast.style.setProperty("--duration", `${duration}ms`);
  toast.innerHTML = `
      <div class="toast-icon">${icon}</div>
      <div class="toast-message">
        <p>${customTitle || title}:</p>
        ${message}
      </div>
      <div class="toast-close">&times;</div>
    `;

  // Attach removeToast to close button
  toast
    .querySelector(".toast-close")
    .addEventListener("click", () => removeToast(toast));

  notification.appendChild(toast);
  toast.timeoutId = setTimeout(() => removeToast(toast), duration);
}

function createNotificationContainer() {
  const container = document.createElement("div");
  container.className = "notification";
  document.body.appendChild(container);
  return container;
}