customizable-toast-notification/dist/index.esm.mjs.map

A lightweight and highly customizable toast notification library or component for modern web applications.

{"version":3,"file":"index.esm.mjs","sources":["../src/index.js"],"sourcesContent":["\"use strict\";\r\n\r\n/**\r\n * @fileoverview A simple toast notification library for any JavaScript framework.\r\n * @name Customizable Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version __VERSION__\r\n * @build Production\r\n * @license Apache-2.0\r\n * @depends None\r\n * @description A lightweight and fully customizable toast notification library\r\n * designed for seamless integration with any JavaScript or framework-based UI.\r\n * Supports flexible positioning, theming, icons, animations, and timing options\r\n * out of the box — with zero dependencies.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * License: Apache-2.0\r\n * Dependencies: None\r\n */\r\n\r\n/**\r\n * Creates a toast notification.\r\n *\r\n * @param {Object} options - Options for the toast notification.\r\n * @param {string} [options.message] - The message to display in the toast. Defaults based on type if not provided.\r\n * @param {number} [options.duration=3000] - The duration the toast should be displayed, in milliseconds.\r\n * @param {string} [options.position='bottom-right'] - The position of the toast on the screen.\r\n * @param {string} [options.type='info'] - The type of the toast ('info', 'success', 'error', 'warning').\r\n * @param {string} [options.backgroundColor] - Custom background color for the toast notification.\r\n * @param {string} [options.textColor='white'] - Custom text color for the toast notification.\r\n * @param {string} [options.animationDuration='0.5s'] - Duration of the fade-in and fade-out animations.\r\n * @param {string} [options.animationEasing='ease'] - Easing function for the animations.\r\n * @param {boolean} [options.showCloseButton=false] - Whether to show a close button.\r\n * @return {void}\r\n */\r\n\r\n/** ########################################### Defaults ############################################ */\r\n\r\nconsole.log(\"Before toast creation\");\r\n\r\nlet defaultColors = {\r\n  info: \"blue\",\r\n  success: \"green\",\r\n  error: \"red\",\r\n  warning: \"darkorange\",\r\n};\r\n\r\nlet defaultMessages = {\r\n  info: \"This is an info message.\",\r\n  success: \"Action completed successfully!\",\r\n  error: \"An error occurred!\",\r\n  warning: \"This is a warning message!\",\r\n};\r\n\r\n// Flag to manage if a toast is currently being shown\r\nlet isToastShowing = false;\r\n\r\nfunction createToastContainer(position) {\r\n  let toastContainer = document.getElementById(`toast-container-${position}`);\r\n  if (!toastContainer) {\r\n    toastContainer = document.createElement(\"div\");\r\n    toastContainer.id = `toast-container-${position}`;\r\n    toastContainer.style.position = \"fixed\";\r\n    toastContainer.style.zIndex = \"9999\";\r\n    setPosition(toastContainer, position);\r\n    document.body.appendChild(toastContainer);\r\n  }\r\n  return toastContainer;\r\n}\r\n\r\nfunction setPosition(container, position) {\r\n  if (position.includes(\"bottom\")) {\r\n    container.style.bottom = \"10px\";\r\n  } else if (position.includes(\"top\")) {\r\n    container.style.top = \"10px\";\r\n  }\r\n\r\n  if (position.includes(\"right\")) {\r\n    container.style.right = \"10px\";\r\n  } else if (position.includes(\"left\")) {\r\n    container.style.left = \"10px\";\r\n  } else if (position.includes(\"center\")) {\r\n    container.style.top = \"50%\";\r\n    container.style.left = \"50%\";\r\n    container.style.transform = \"translate(-50%, -50%)\";\r\n  }\r\n}\r\n\r\nfunction createToastElement(\r\n  finalMessage,\r\n  backgroundColor,\r\n  textColor,\r\n  animationDuration,\r\n  animationEasing,\r\n  showCloseButton,\r\n  showProgressBar,\r\n  progressColor,\r\n  progressHeight,\r\n  progressPosition,\r\n  duration\r\n) {\r\n  const toast = document.createElement(\"div\");\r\n  toast.textContent = finalMessage;\r\n  toast.style.background = backgroundColor;\r\n  toast.style.color = textColor;\r\n  toast.style.padding = \"10px 20px\";\r\n  toast.style.marginTop = \"10px\";\r\n  toast.style.borderRadius = \"5px\";\r\n  toast.style.boxShadow = \"0 0 10px rgba(0, 0, 0, 0.1)\";\r\n  toast.style.opacity = \"0\";\r\n  toast.style.transition = `opacity ${animationDuration} ${animationEasing}`;\r\n  toast.style.position = \"relative\";\r\n  toast.style.overflow = \"hidden\";\r\n\r\n  if (showCloseButton) {\r\n    addCloseButton(toast, textColor);\r\n  }\r\n\r\n  if (showProgressBar) {\r\n    const progressBar = document.createElement(\"div\");\r\n    progressBar.style.position = \"absolute\";\r\n    progressBar.style[progressPosition === \"top\" ? \"top\" : \"bottom\"] = \"0\";\r\n    progressBar.style.left = \"0\";\r\n    progressBar.style.height = progressHeight || \"4px\";\r\n    progressBar.style.backgroundColor = progressColor || textColor;\r\n    progressBar.style.width = \"100%\";\r\n    progressBar.style.transition = `width ${duration}ms linear`;\r\n\r\n    // Trigger animation\r\n    requestAnimationFrame(() => {\r\n      progressBar.style.width = \"0%\";\r\n    });\r\n\r\n    toast.appendChild(progressBar);\r\n  }\r\n\r\n  return toast;\r\n}\r\n\r\nfunction addCloseButton(toast, textColor) {\r\n  const closeButton = document.createElement(\"button\");\r\n  closeButton.textContent = \"×\";\r\n  closeButton.style.marginLeft = \"10px\";\r\n  closeButton.style.background = \"transparent\";\r\n  closeButton.style.border = \"none\";\r\n  closeButton.style.color = textColor;\r\n  closeButton.style.cursor = \"pointer\";\r\n\r\n  closeButton.onclick = () => {\r\n    toast.style.opacity = \"0\"; // Start fade out\r\n    toast.addEventListener(\"transitionend\", () => {\r\n      toast.remove();\r\n      isToastShowing = false; // Reset the flag when the toast is removed\r\n    });\r\n  };\r\n\r\n  toast.appendChild(closeButton);\r\n}\r\n\r\nfunction showToast({\r\n  message,\r\n  duration,\r\n  position,\r\n  type,\r\n  backgroundColor,\r\n  textColor,\r\n  showCloseButton,\r\n  animationDuration,\r\n  animationEasing,\r\n  showProgressBar,\r\n  progressColor,\r\n  progressHeight,\r\n  progressPosition,\r\n}) {\r\n  if (isToastShowing) return;\r\n  isToastShowing = true;\r\n\r\n  const finalMessage =\r\n    message || defaultMessages[type] || \"This is a default message.\";\r\n  const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\";\r\n  const toastTextColor =\r\n    textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\r\n  const toastContainer = createToastContainer(position);\r\n  const toast = createToastElement(\r\n    finalMessage,\r\n    toastBackgroundColor,\r\n    toastTextColor,\r\n    animationDuration || \"0.5s\",\r\n    animationEasing || \"ease\",\r\n    showCloseButton,\r\n    showProgressBar,\r\n    progressColor,\r\n    progressHeight,\r\n    progressPosition,\r\n    duration || 3000\r\n  );\r\n\r\n  toastContainer.appendChild(toast);\r\n  requestAnimationFrame(() => {\r\n    toast.style.opacity = \"1\";\r\n  });\r\n\r\n  setTimeout(() => {\r\n    if (toast.parentNode) {\r\n      toast.style.opacity = \"0\";\r\n      toast.addEventListener(\"transitionend\", () => {\r\n        toast.remove();\r\n        isToastShowing = false;\r\n      });\r\n    }\r\n  }, duration || 3000);\r\n}\r\n\r\n/**\r\n * Create a toast notification with the provided options.\r\n *\r\n * @param {Object} options - Options for the toast notification.\r\n * @param {string} [options.message] - The message to display in the toast.\r\n * @param {number} [options.duration=3000] - The duration of the toast in milliseconds.\r\n * @param {string} [options.position='bottom-right'] - The position of the toast.\r\n * @param {string} [options.type='info'] - The type of the toast.\r\n * @param {string} [options.backgroundColor] - The custom background color.\r\n * @param {string} [options.textColor='white'] - The custom text color.\r\n * @param {boolean} [options.showCloseButton=false] - Whether to show a close button.\r\n * @param {string} [options.animationDuration='0.5s'] - Duration of animations.\r\n * @param {string} [options.animationEasing='ease'] - Easing function for animations.\r\n * @param {boolean} [options.showProgressBar=false] - Show a visual progress bar.\r\n * @param {string} [options.progressColor] - Color of the progress bar.\r\n * @param {string} [options.progressHeight='4px'] - Height of the progress bar.\r\n * @param {string} [options.progressPosition='bottom'] - 'top' or 'bottom' placement of the progress bar.\r\n * @return {void}\r\n */\r\nfunction createToast(options) {\r\n  if (typeof options !== \"object\") {\r\n    console.error(\"Options should be an object.\");\r\n    return;\r\n  }\r\n\r\n  const {\r\n    message,\r\n    duration,\r\n    position = \"bottom-right\",\r\n    type = \"info\",\r\n    backgroundColor,\r\n    textColor,\r\n    showCloseButton = false,\r\n    animationDuration,\r\n    animationEasing,\r\n    showProgressBar = false,\r\n    progressColor,\r\n    progressHeight = \"4px\",\r\n    progressPosition = \"bottom\",\r\n  } = options;\r\n\r\n  if (duration && typeof duration !== \"number\") {\r\n    console.warn(\"Duration should be a number. Falling back to default value.\");\r\n  }\r\n\r\n  showToast({\r\n    message,\r\n    duration: duration || 3000,\r\n    position,\r\n    type,\r\n    backgroundColor,\r\n    textColor,\r\n    showCloseButton,\r\n    animationDuration,\r\n    animationEasing,\r\n    showProgressBar,\r\n    progressColor,\r\n    progressHeight,\r\n    progressPosition,\r\n  });\r\n}\r\n\r\n/**\r\n * Set default colors for toast types.\r\n *\r\n * @param {Object} newColors - New colors to set for toast types.\r\n * @return {void}\r\n */\r\nfunction setDefaultColors(newColors) {\r\n  // Validate newColors\r\n  if (typeof newColors !== \"object\") {\r\n    console.error(\"New colors should be an object.\");\r\n    return;\r\n  }\r\n\r\n  Object.assign(defaultColors, newColors);\r\n}\r\n\r\n/**\r\n * Set default messages for toast types.\r\n *\r\n * @param {Object} newMessages - New messages to set for toast types.\r\n * @return {void}\r\n */\r\nfunction setDefaultMessages(newMessages) {\r\n  // Validate newMessages\r\n  if (typeof newMessages !== \"object\") {\r\n    console.error(\"New messages should be an object.\");\r\n    return;\r\n  }\r\n\r\n  Object.assign(defaultMessages, newMessages);\r\n}\r\n\r\nexport { createToast, setDefaultColors, setDefaultMessages };\r\n\r\nconsole.log(\"After toast creation\");\r\n"],"names":["defaultColors","info","success","error","warning","defaultMessages","isToastShowing","createToastElement","finalMessage","backgroundColor","textColor","animationDuration","animationEasing","showCloseButton","showProgressBar","progressColor","progressHeight","progressPosition","duration","toast","document","createElement","textContent","style","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","position","overflow","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","appendChild","addCloseButton","progressBar","left","height","width","requestAnimationFrame","showToast","message","type","toastBackgroundColor","toastTextColor","toastContainer","getElementById","id","zIndex","container","includes","bottom","top","right","transform","setPosition","body","createToastContainer","setTimeout","parentNode","createToast","options","setDefaultColors","newColors","Object","assign","setDefaultMessages","newMessages"],"mappings":"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"}