customizable-toast-notification 2.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,3 +1,16 @@
1
+ # 🌟 Connect with Me!
2
+
3
+ Please feel free to connect or reach out for **feedback**, **suggestions**, or any kind of **requirements** or **fixes**—just anything—at:
4
+
5
+ 📧 **priyanshu.alt191@gmail.com**
6
+
7
+ Your support is highly appreciated! 🙌 If you'd like to show some love, please leave a message of appreciation and don't forget to add your message when supporting me through the QR code below! 💬💖
8
+
9
+ ![Support Me](https://github.com/sammy-cool/support_qr/blob/eb14a600e04dc48dacab11e22cd28f18a31f7a12/support_qr.png)
10
+
11
+ **will surely revert!**
12
+ ---->
13
+
1
14
  # Customizable Toast Notification Library
2
15
 
3
16
  A simple and highly customizable toast notification library for modern JavaScript applications. This library allows you to easily display toast notifications with various configurations to enhance user experience.
package/dist/index.cjs.js CHANGED
@@ -15,5 +15,5 @@
15
15
  * License: MIT
16
16
  * Dependencies: None
17
17
  */
18
- let t={info:"blue",success:"green",error:"red",warning:"darkorange"},e={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"},o=!1;exports.createToast=function(n){if("object"!=typeof n)return;const{message:s,duration:i,position:a="bottom-right",type:r="info",backgroundColor:l,textColor:c,showCloseButton:d=!1,animationDuration:u,animationEasing:p}=n;!function({message:n,duration:s,position:i,type:a,backgroundColor:r,textColor:l,showCloseButton:c,animationDuration:d,animationEasing:u}){if(o)return;o=!0;const p=n||e[a]||"This is a default message.",y=r||t[a]||"gray",m=l||("white"===y?"black":"white");let g=document.getElementById(`toast-container-${i}`);g||(g=document.createElement("div"),g.id=`toast-container-${i}`,g.style.position="fixed",g.style.zIndex="9999",i.includes("bottom")?g.style.bottom="10px":i.includes("top")&&(g.style.top="10px"),i.includes("right")?g.style.right="10px":i.includes("left")?g.style.left="10px":i.includes("center")&&(g.style.top="50%",g.style.left="50%",g.style.transform="translate(-50%, -50%)"),document.body.appendChild(g));const f=document.createElement("div");if(f.textContent=p,f.style.background=y,f.style.color=m,f.style.padding="10px 20px",f.style.marginTop="10px",f.style.borderRadius="5px",f.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",f.style.opacity="0",f.style.transition=`opacity ${d||"0.5s"} ${u||"ease"}`,c){const t=document.createElement("button");t.textContent="×",t.style.marginLeft="10px",t.style.background="transparent",t.style.border="none",t.style.color=m,t.style.cursor="pointer",t.onclick=()=>{f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),o=!1}))},f.appendChild(t)}g.appendChild(f),requestAnimationFrame((()=>{f.style.opacity="1"})),setTimeout((()=>{f.parentNode&&(f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),o=!1})))}),s||3e3)}({message:s,duration:i||3e3,position:a,type:r,backgroundColor:l,textColor:c,showCloseButton:d,animationDuration:u,animationEasing:p})},exports.setDefaultColors=function(e){"object"==typeof e&&Object.assign(t,e)},exports.setDefaultMessages=function(t){"object"==typeof t&&Object.assign(e,t)};
18
+ let t={info:"blue",success:"green",error:"red",warning:"darkorange"},e={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"},o=!1;function n(t,e,n,s,i,r){const a=document.createElement("div");return a.textContent=t,a.style.background=e,a.style.color=n,a.style.padding="10px 20px",a.style.marginTop="10px",a.style.borderRadius="5px",a.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",a.style.opacity="0",a.style.transition=`opacity ${s} ${i}`,r&&function(t,e){const n=document.createElement("button");n.textContent="×",n.style.marginLeft="10px",n.style.background="transparent",n.style.border="none",n.style.color=e,n.style.cursor="pointer",n.onclick=()=>{t.style.opacity="0",t.addEventListener("transitionend",(()=>{t.remove(),o=!1}))},t.appendChild(n)}(a,n),a}function s({message:s,duration:i,position:r,type:a,backgroundColor:l,textColor:c,showCloseButton:u,animationDuration:d,animationEasing:p}){if(o)return;o=!0;const y=s||e[a]||"This is a default message.",m=l||t[a]||"gray",g=c||("white"===m?"black":"white"),f=function(t){let e=document.getElementById(`toast-container-${t}`);return e||(e=document.createElement("div"),e.id=`toast-container-${t}`,e.style.position="fixed",e.style.zIndex="9999",function(t,e){e.includes("bottom")?t.style.bottom="10px":e.includes("top")&&(t.style.top="10px"),e.includes("right")?t.style.right="10px":e.includes("left")?t.style.left="10px":e.includes("center")&&(t.style.top="50%",t.style.left="50%",t.style.transform="translate(-50%, -50%)")}(e,t),document.body.appendChild(e)),e}(r),b=n(y,m,g,d||"0.5s",p||"ease",u);f.appendChild(b),requestAnimationFrame((()=>{b.style.opacity="1"})),setTimeout((()=>{b.parentNode&&(b.style.opacity="0",b.addEventListener("transitionend",(()=>{b.remove(),o=!1})))}),i||3e3)}exports.createToast=function(t){if("object"!=typeof t)return;const{message:e,duration:o,position:n="bottom-right",type:i="info",backgroundColor:r,textColor:a,showCloseButton:l=!1,animationDuration:c,animationEasing:u}=t;s({message:e,duration:o||3e3,position:n,type:i,backgroundColor:r,textColor:a,showCloseButton:l,animationDuration:c,animationEasing:u})},exports.setDefaultColors=function(e){"object"==typeof e&&Object.assign(t,e)},exports.setDefaultMessages=function(t){"object"==typeof t&&Object.assign(e,t)};
19
19
  //# sourceMappingURL=index.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","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 Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license MIT\r\n * @depends None\r\n * @description This library provides a simple way to create toast notifications.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * Description: A simple toast notification library for any JavaScript framework.\r\n * Version: 1.0.0\r\n * License: MIT\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\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 showToast({ message, duration, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing }) {\r\n if (isToastShowing) return;\r\n\r\n isToastShowing = true;\r\n\r\n const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\";\r\n const toastTextColor = textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\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\r\n // Positioning logic\r\n if (position.includes(\"bottom\")) {\r\n toastContainer.style.bottom = \"10px\";\r\n } else if (position.includes(\"top\")) {\r\n toastContainer.style.top = \"10px\";\r\n }\r\n\r\n if (position.includes(\"right\")) {\r\n toastContainer.style.right = \"10px\";\r\n } else if (position.includes(\"left\")) {\r\n toastContainer.style.left = \"10px\";\r\n } else if (position.includes(\"center\")) {\r\n toastContainer.style.top = \"50%\";\r\n toastContainer.style.left = \"50%\";\r\n toastContainer.style.transform = \"translate(-50%, -50%)\";\r\n }\r\n\r\n document.body.appendChild(toastContainer);\r\n }\r\n\r\n const toast = document.createElement(\"div\");\r\n toast.textContent = finalMessage;\r\n toast.style.background = toastBackgroundColor;\r\n toast.style.color = toastTextColor;\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 || '0.5s'} ${animationEasing || 'ease'}`;\r\n\r\n // Close button\r\n if (showCloseButton) {\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 = toastTextColor;\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\n toastContainer.appendChild(toast);\r\n\r\n requestAnimationFrame(() => {\r\n toast.style.opacity = \"1\"; // Fade in effect\r\n });\r\n\r\n setTimeout(() => {\r\n if (toast.parentNode) {\r\n toast.style.opacity = \"0\"; // Fade out effect\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 }, 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 * @return {void}\r\n */\r\nfunction createToast(options) {\r\n // Validate 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 } = options;\r\n\r\n // Validate duration\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({ message, duration: duration || 3000, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing });\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"],"names":["defaultColors","info","success","error","warning","defaultMessages","isToastShowing","options","message","duration","position","type","backgroundColor","textColor","showCloseButton","animationDuration","animationEasing","finalMessage","toastBackgroundColor","toastTextColor","toastContainer","document","getElementById","createElement","id","style","zIndex","includes","bottom","top","right","left","transform","body","appendChild","toast","textContent","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","requestAnimationFrame","setTimeout","parentNode","showToast","newColors","Object","assign","newMessages"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs.js","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 Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license MIT\r\n * @depends None\r\n * @description This library provides a simple way to create toast notifications.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * Description: A simple toast notification library for any JavaScript framework.\r\n * Version: 1.0.0\r\n * License: MIT\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\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(finalMessage, backgroundColor, textColor, animationDuration, animationEasing, showCloseButton) {\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\r\n if (showCloseButton) {\r\n addCloseButton(toast, textColor);\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({ message, duration, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing }) {\r\n if (isToastShowing) return;\r\n\r\n isToastShowing = true;\r\n\r\n const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\";\r\n const toastTextColor = textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\r\n const toastContainer = createToastContainer(position);\r\n const toast = createToastElement(finalMessage, toastBackgroundColor, toastTextColor, animationDuration || '0.5s', animationEasing || 'ease', showCloseButton);\r\n\r\n toastContainer.appendChild(toast);\r\n requestAnimationFrame(() => {\r\n toast.style.opacity = \"1\"; // Fade in effect\r\n });\r\n\r\n setTimeout(() => {\r\n if (toast.parentNode) {\r\n toast.style.opacity = \"0\"; // Fade out effect\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 }, 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 * @return {void}\r\n */\r\nfunction createToast(options) {\r\n // Validate 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 } = options;\r\n\r\n // Validate duration\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({ message, duration: duration || 3000, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing });\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"],"names":["defaultColors","info","success","error","warning","defaultMessages","isToastShowing","createToastElement","finalMessage","backgroundColor","textColor","animationDuration","animationEasing","showCloseButton","toast","document","createElement","textContent","style","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","appendChild","addCloseButton","showToast","message","duration","position","type","toastBackgroundColor","toastTextColor","toastContainer","getElementById","id","zIndex","container","includes","bottom","top","right","left","transform","setPosition","body","createToastContainer","requestAnimationFrame","setTimeout","parentNode","options","newColors","Object","assign","newMessages"],"mappings":"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"}
@@ -14,5 +14,5 @@
14
14
  * License: MIT
15
15
  * Dependencies: None
16
16
  */
17
- let t={info:"blue",success:"green",error:"red",warning:"darkorange"},e={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"},o=!1;function n(n){if("object"!=typeof n)return;const{message:s,duration:i,position:a="bottom-right",type:r="info",backgroundColor:l,textColor:c,showCloseButton:d=!1,animationDuration:u,animationEasing:p}=n;!function({message:n,duration:s,position:i,type:a,backgroundColor:r,textColor:l,showCloseButton:c,animationDuration:d,animationEasing:u}){if(o)return;o=!0;const p=n||e[a]||"This is a default message.",y=r||t[a]||"gray",m=l||("white"===y?"black":"white");let g=document.getElementById(`toast-container-${i}`);g||(g=document.createElement("div"),g.id=`toast-container-${i}`,g.style.position="fixed",g.style.zIndex="9999",i.includes("bottom")?g.style.bottom="10px":i.includes("top")&&(g.style.top="10px"),i.includes("right")?g.style.right="10px":i.includes("left")?g.style.left="10px":i.includes("center")&&(g.style.top="50%",g.style.left="50%",g.style.transform="translate(-50%, -50%)"),document.body.appendChild(g));const f=document.createElement("div");if(f.textContent=p,f.style.background=y,f.style.color=m,f.style.padding="10px 20px",f.style.marginTop="10px",f.style.borderRadius="5px",f.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",f.style.opacity="0",f.style.transition=`opacity ${d||"0.5s"} ${u||"ease"}`,c){const t=document.createElement("button");t.textContent="×",t.style.marginLeft="10px",t.style.background="transparent",t.style.border="none",t.style.color=m,t.style.cursor="pointer",t.onclick=()=>{f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),o=!1}))},f.appendChild(t)}g.appendChild(f),requestAnimationFrame((()=>{f.style.opacity="1"})),setTimeout((()=>{f.parentNode&&(f.style.opacity="0",f.addEventListener("transitionend",(()=>{f.remove(),o=!1})))}),s||3e3)}({message:s,duration:i||3e3,position:a,type:r,backgroundColor:l,textColor:c,showCloseButton:d,animationDuration:u,animationEasing:p})}function s(e){"object"==typeof e&&Object.assign(t,e)}function i(t){"object"==typeof t&&Object.assign(e,t)}export{n as createToast,s as setDefaultColors,i as setDefaultMessages};
17
+ let t={info:"blue",success:"green",error:"red",warning:"darkorange"},e={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"},n=!1;function o(t,e,o,i,s,r){const a=document.createElement("div");return a.textContent=t,a.style.background=e,a.style.color=o,a.style.padding="10px 20px",a.style.marginTop="10px",a.style.borderRadius="5px",a.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",a.style.opacity="0",a.style.transition=`opacity ${i} ${s}`,r&&function(t,e){const o=document.createElement("button");o.textContent="×",o.style.marginLeft="10px",o.style.background="transparent",o.style.border="none",o.style.color=e,o.style.cursor="pointer",o.onclick=()=>{t.style.opacity="0",t.addEventListener("transitionend",(()=>{t.remove(),n=!1}))},t.appendChild(o)}(a,o),a}function i({message:i,duration:s,position:r,type:a,backgroundColor:l,textColor:c,showCloseButton:d,animationDuration:u,animationEasing:p}){if(n)return;n=!0;const y=i||e[a]||"This is a default message.",m=l||t[a]||"gray",g=c||("white"===m?"black":"white"),f=function(t){let e=document.getElementById(`toast-container-${t}`);return e||(e=document.createElement("div"),e.id=`toast-container-${t}`,e.style.position="fixed",e.style.zIndex="9999",function(t,e){e.includes("bottom")?t.style.bottom="10px":e.includes("top")&&(t.style.top="10px"),e.includes("right")?t.style.right="10px":e.includes("left")?t.style.left="10px":e.includes("center")&&(t.style.top="50%",t.style.left="50%",t.style.transform="translate(-50%, -50%)")}(e,t),document.body.appendChild(e)),e}(r),b=o(y,m,g,u||"0.5s",p||"ease",d);f.appendChild(b),requestAnimationFrame((()=>{b.style.opacity="1"})),setTimeout((()=>{b.parentNode&&(b.style.opacity="0",b.addEventListener("transitionend",(()=>{b.remove(),n=!1})))}),s||3e3)}function s(t){if("object"!=typeof t)return;const{message:e,duration:n,position:o="bottom-right",type:s="info",backgroundColor:r,textColor:a,showCloseButton:l=!1,animationDuration:c,animationEasing:d}=t;i({message:e,duration:n||3e3,position:o,type:s,backgroundColor:r,textColor:a,showCloseButton:l,animationDuration:c,animationEasing:d})}function r(e){"object"==typeof e&&Object.assign(t,e)}function a(t){"object"==typeof t&&Object.assign(e,t)}export{s as createToast,r as setDefaultColors,a as setDefaultMessages};
18
18
  //# sourceMappingURL=index.esm.mjs.map
@@ -1 +1 @@
1
- {"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 Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license MIT\r\n * @depends None\r\n * @description This library provides a simple way to create toast notifications.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * Description: A simple toast notification library for any JavaScript framework.\r\n * Version: 1.0.0\r\n * License: MIT\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\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 showToast({ message, duration, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing }) {\r\n if (isToastShowing) return;\r\n\r\n isToastShowing = true;\r\n\r\n const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\";\r\n const toastTextColor = textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\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\r\n // Positioning logic\r\n if (position.includes(\"bottom\")) {\r\n toastContainer.style.bottom = \"10px\";\r\n } else if (position.includes(\"top\")) {\r\n toastContainer.style.top = \"10px\";\r\n }\r\n\r\n if (position.includes(\"right\")) {\r\n toastContainer.style.right = \"10px\";\r\n } else if (position.includes(\"left\")) {\r\n toastContainer.style.left = \"10px\";\r\n } else if (position.includes(\"center\")) {\r\n toastContainer.style.top = \"50%\";\r\n toastContainer.style.left = \"50%\";\r\n toastContainer.style.transform = \"translate(-50%, -50%)\";\r\n }\r\n\r\n document.body.appendChild(toastContainer);\r\n }\r\n\r\n const toast = document.createElement(\"div\");\r\n toast.textContent = finalMessage;\r\n toast.style.background = toastBackgroundColor;\r\n toast.style.color = toastTextColor;\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 || '0.5s'} ${animationEasing || 'ease'}`;\r\n\r\n // Close button\r\n if (showCloseButton) {\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 = toastTextColor;\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\n toastContainer.appendChild(toast);\r\n\r\n requestAnimationFrame(() => {\r\n toast.style.opacity = \"1\"; // Fade in effect\r\n });\r\n\r\n setTimeout(() => {\r\n if (toast.parentNode) {\r\n toast.style.opacity = \"0\"; // Fade out effect\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 }, 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 * @return {void}\r\n */\r\nfunction createToast(options) {\r\n // Validate 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 } = options;\r\n\r\n // Validate duration\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({ message, duration: duration || 3000, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing });\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"],"names":["defaultColors","info","success","error","warning","defaultMessages","isToastShowing","createToast","options","message","duration","position","type","backgroundColor","textColor","showCloseButton","animationDuration","animationEasing","finalMessage","toastBackgroundColor","toastTextColor","toastContainer","document","getElementById","createElement","id","style","zIndex","includes","bottom","top","right","left","transform","body","appendChild","toast","textContent","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","requestAnimationFrame","setTimeout","parentNode","showToast","setDefaultColors","newColors","Object","assign","setDefaultMessages","newMessages"],"mappings":"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"}
1
+ {"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 Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license MIT\r\n * @depends None\r\n * @description This library provides a simple way to create toast notifications.\r\n * Author: Priyanshu Patel\r\n * Email: priyanshu.alt191@gmail.com\r\n * Created: July 31, 2024\r\n * Description: A simple toast notification library for any JavaScript framework.\r\n * Version: 1.0.0\r\n * License: MIT\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\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(finalMessage, backgroundColor, textColor, animationDuration, animationEasing, showCloseButton) {\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\r\n if (showCloseButton) {\r\n addCloseButton(toast, textColor);\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({ message, duration, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing }) {\r\n if (isToastShowing) return;\r\n\r\n isToastShowing = true;\r\n\r\n const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\";\r\n const toastTextColor = textColor || (toastBackgroundColor === \"white\" ? \"black\" : \"white\");\r\n\r\n const toastContainer = createToastContainer(position);\r\n const toast = createToastElement(finalMessage, toastBackgroundColor, toastTextColor, animationDuration || '0.5s', animationEasing || 'ease', showCloseButton);\r\n\r\n toastContainer.appendChild(toast);\r\n requestAnimationFrame(() => {\r\n toast.style.opacity = \"1\"; // Fade in effect\r\n });\r\n\r\n setTimeout(() => {\r\n if (toast.parentNode) {\r\n toast.style.opacity = \"0\"; // Fade out effect\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 }, 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 * @return {void}\r\n */\r\nfunction createToast(options) {\r\n // Validate 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 } = options;\r\n\r\n // Validate duration\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({ message, duration: duration || 3000, position, type, backgroundColor, textColor, showCloseButton, animationDuration, animationEasing });\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"],"names":["defaultColors","info","success","error","warning","defaultMessages","isToastShowing","createToastElement","finalMessage","backgroundColor","textColor","animationDuration","animationEasing","showCloseButton","toast","document","createElement","textContent","style","background","color","padding","marginTop","borderRadius","boxShadow","opacity","transition","closeButton","marginLeft","border","cursor","onclick","addEventListener","remove","appendChild","addCloseButton","showToast","message","duration","position","type","toastBackgroundColor","toastTextColor","toastContainer","getElementById","id","zIndex","container","includes","bottom","top","right","left","transform","setPosition","body","createToastContainer","requestAnimationFrame","setTimeout","parentNode","createToast","options","setDefaultColors","newColors","Object","assign","setDefaultMessages","newMessages"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "customizable-toast-notification",
3
- "version": "2.0.0",
3
+ "version": "3.0.1",
4
4
  "description": "A highly customizable toast notification library for modern web applications.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.mjs",