customizable-toast-notification 3.0.5 → 3.2.0

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
@@ -2,9 +2,9 @@
2
2
 
3
3
  Please feel free to connect or reach out for **feedback**, **suggestions**, or any kind of **requirements** or **fixes**—just anything—at:
4
4
 
5
- 📧 **priyanshu.alt191@gmail.com**
5
+ 📧 **priyanshu.alt191@gmail.com**
6
6
 
7
- <u>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
7
+ <u>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
8
  or
9
9
  **GlobalUPI_ID(eureka91@upi)**
10
10
  or
@@ -22,6 +22,7 @@ or
22
22
  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.
23
23
 
24
24
  ## Table of Contents
25
+
25
26
  - [Features](#features)
26
27
  - [Installation](#installation)
27
28
  - [Usage](#usage)
@@ -31,6 +32,7 @@ A simple and highly customizable toast notification library for modern JavaScrip
31
32
  - [License](#license)
32
33
 
33
34
  ## Features
35
+
34
36
  - Display notifications of different types: info, success, error, and warning.
35
37
  - Customizable background and text colors.
36
38
  - Support for custom messages and default messages.
@@ -39,35 +41,62 @@ A simple and highly customizable toast notification library for modern JavaScrip
39
41
  - Animation effects for a smooth appearance and disappearance.
40
42
 
41
43
  ## Installation
44
+
42
45
  You can install the library via npm:
46
+
43
47
  ```bash
44
48
  npm install customizable-toast-notification
45
49
  ```
46
50
 
47
51
  ## Usage
48
- To use the toast notification library, you need to import it in your JavaScript or TypeScript file:
52
+
53
+ 🔌 CDN Usage (UMD:Universal Module Definition Build)
54
+ You can use this toast notification library directly in your HTML file via a <script> tag:
55
+
56
+ <script src="https://cdn.jsdelivr.net/npm/customizable-toast-notification/dist/index.umd.js"></script>
57
+ <script>
58
+ customizableToast.createToast({
59
+ message: "Hello from the browser!",
60
+ type: "success",
61
+ position: "top-center",
62
+ duration: 4000
63
+ });
64
+ </script>
65
+
66
+ ✅ No build tools or framework needed
67
+ ✅ Works in all modern browsers
68
+
69
+ or To use the toast notification library, you need to import it in your JavaScript or TypeScript file:
70
+
49
71
  ```javascript
50
- import { createToast, setDefaultColors, setDefaultMessages } from 'customizable-toast-notification';
72
+ import {
73
+ createToast,
74
+ setDefaultColors,
75
+ setDefaultMessages,
76
+ } from "customizable-toast-notification";
51
77
 
52
78
  // Create a toast notification
53
79
  createToast({
54
- message: 'This is a custom message!',
80
+ message: "This is a custom message!",
55
81
  duration: 5000, // Duration in milliseconds
56
- position: 'top-right', // Position of the toast
57
- type: 'success', // Type of notification
58
- backgroundColor: 'green', // Custom background color
59
- textColor: 'white', // Custom text color
82
+ position: "top-right", // Position of the toast
83
+ type: "success", // Type of notification
84
+ backgroundColor: "green", // Custom background color
85
+ textColor: "white", // Custom text color
60
86
  showCloseButton: true, // Show close button
61
- animationDuration: '0.5s', // Duration of the animations
62
- animationEasing: 'ease', // Easing function for the animations
87
+ animationDuration: "0.5s", // Duration of the animations
88
+ animationEasing: "ease", // Easing function for the animations
63
89
  });
64
90
  ```
65
91
 
66
92
  ## API Reference
93
+
67
94
  ### createToast
95
+
68
96
  Creates a toast notification with the provided options.
69
97
 
70
98
  #### Parameters
99
+
71
100
  - `options` (Object): Options for the toast notification.
72
101
  - `message` (string, optional): The message to display in the toast. Defaults based on type if not provided.
73
102
  - `duration` (number, optional): The duration the toast should be displayed, in milliseconds (default is 3000).
@@ -80,75 +109,87 @@ Creates a toast notification with the provided options.
80
109
  - `animationEasing` (string, optional): Easing function for the animations (default is 'ease').
81
110
 
82
111
  #### Example
112
+
83
113
  ```javascript
84
114
  createToast({
85
- message: 'Operation completed successfully!',
86
- type: 'success',
115
+ message: "Operation completed successfully!",
116
+ type: "success",
87
117
  });
88
118
  ```
89
119
 
90
120
  ### setDefaultColors
121
+
91
122
  Sets default colors for different toast types.
92
123
 
93
124
  #### Parameters
125
+
94
126
  - `newColors` (Object): New colors to set for toast types, where keys are the toast types (info, success, error, warning).
95
127
 
96
128
  #### Example
129
+
97
130
  ```javascript
98
131
  setDefaultColors({
99
- info: 'blue',
100
- success: 'green',
101
- error: 'red',
102
- warning: 'orange',
132
+ info: "blue",
133
+ success: "green",
134
+ error: "red",
135
+ warning: "orange",
103
136
  });
104
137
  ```
105
138
 
106
139
  ### setDefaultMessages
140
+
107
141
  Sets default messages for different toast types.
108
142
 
109
143
  #### Parameters
144
+
110
145
  - `newMessages` (Object): New messages to set for toast types, where keys are the toast types (info, success, error, warning).
111
146
 
112
147
  #### Example
148
+
113
149
  ```javascript
114
150
  setDefaultMessages({
115
- info: 'This is an informational message!',
116
- success: 'Your action was successful!',
117
- error: 'An error has occurred!',
118
- warning: 'This is a warning message!',
151
+ info: "This is an informational message!",
152
+ success: "Your action was successful!",
153
+ error: "An error has occurred!",
154
+ warning: "This is a warning message!",
119
155
  });
120
156
  ```
121
157
 
122
158
  ## Examples
159
+
123
160
  ### Basic Usage
161
+
124
162
  ```javascript
125
163
  createToast({
126
- message: 'Welcome to our website!',
164
+ message: "Welcome to our website!",
127
165
  duration: 4000,
128
- type: 'info',
166
+ type: "info",
129
167
  });
130
168
  ```
131
169
 
132
170
  ### Custom Colors and Messages
171
+
133
172
  ```javascript
134
173
  setDefaultColors({
135
- success: '#28a745',
136
- error: '#dc3545',
174
+ success: "#28a745",
175
+ error: "#dc3545",
137
176
  });
138
177
 
139
178
  setDefaultMessages({
140
- success: 'Data saved successfully!',
141
- error: 'Failed to save data.',
179
+ success: "Data saved successfully!",
180
+ error: "Failed to save data.",
142
181
  });
143
182
 
144
183
  createToast({
145
- type: 'success',
146
- message: 'Data saved successfully!',
184
+ type: "success",
185
+ message: "Data saved successfully!",
147
186
  });
148
187
  ```
149
188
 
150
189
  ## Contributing
190
+
151
191
  Contributions are welcome! Please read the [CONTRIBUTING.md]() for details on our code of conduct, and the process for submitting pull requests.
152
192
 
153
193
  ## License
154
- This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.
194
+
195
+ This project is licensed under the Apache-2.0 License - see the [LICENSE.md](LICENSE) file for details.
package/dist/index.cjs ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});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)};
2
+ //# sourceMappingURL=index.cjs.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\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(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\r\nconsole.log(\"After toast creation\");"],"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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"}
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 Customizable Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license Apache-2.0\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: 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) {\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({\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}) {\r\n if (isToastShowing) return;\r\n\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 );\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({\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 });\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","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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"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","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 1.0.0\r\n * @license Apache-2.0\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: 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) {\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({\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}) {\r\n if (isToastShowing) return;\r\n\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 );\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({\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 });\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","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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"}
@@ -1,9 +1,9 @@
1
1
  /**
2
2
  * @fileoverview A simple toast notification library for any JavaScript framework.
3
- * @name Toast Notifications
3
+ * @name Customizable Toast Notifications
4
4
  * @author Priyanshu Patel
5
5
  * @version 1.0.0
6
- * @license MIT
6
+ * @license Apache-2.0
7
7
  * @depends None
8
8
  * @description This library provides a simple way to create toast notifications.
9
9
  * Author: Priyanshu Patel
@@ -11,8 +11,8 @@
11
11
  * Created: July 31, 2024
12
12
  * Description: A simple toast notification library for any JavaScript framework.
13
13
  * Version: 1.0.0
14
- * License: MIT
14
+ * License: Apache-2.0
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!"},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};
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\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(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\r\nconsole.log(\"After toast creation\");"],"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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"}
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 Customizable Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license Apache-2.0\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: 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) {\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({\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}) {\r\n if (isToastShowing) return;\r\n\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 );\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({\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 });\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","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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"}
@@ -0,0 +1,18 @@
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).customizableToast={})}(this,function(e){"use strict";
2
+ /**
3
+ * @fileoverview A simple toast notification library for any JavaScript framework.
4
+ * @name Customizable Toast Notifications
5
+ * @author Priyanshu Patel
6
+ * @version 1.0.0
7
+ * @license Apache-2.0
8
+ * @depends None
9
+ * @description This library provides a simple way to create toast notifications.
10
+ * Author: Priyanshu Patel
11
+ * Email: priyanshu.alt191@gmail.com
12
+ * Created: July 31, 2024
13
+ * Description: A simple toast notification library for any JavaScript framework.
14
+ * Version: 1.0.0
15
+ * License: Apache-2.0
16
+ * Dependencies: None
17
+ */let t={info:"blue",success:"green",error:"red",warning:"darkorange"},o={info:"This is an info message.",success:"Action completed successfully!",error:"An error occurred!",warning:"This is a warning message!"},n=!1;function s(e,t,o,s,i,a){const r=document.createElement("div");return r.textContent=e,r.style.background=t,r.style.color=o,r.style.padding="10px 20px",r.style.marginTop="10px",r.style.borderRadius="5px",r.style.boxShadow="0 0 10px rgba(0, 0, 0, 0.1)",r.style.opacity="0",r.style.transition=`opacity ${s} ${i}`,a&&function(e,t){const o=document.createElement("button");o.textContent="×",o.style.marginLeft="10px",o.style.background="transparent",o.style.border="none",o.style.color=t,o.style.cursor="pointer",o.onclick=()=>{e.style.opacity="0",e.addEventListener("transitionend",()=>{e.remove(),n=!1})},e.appendChild(o)}(r,o),r}function i({message:e,duration:i,position:a,type:r,backgroundColor:l,textColor:c,showCloseButton:d,animationDuration:u,animationEasing:p}){if(n)return;n=!0;const y=e||o[r]||"This is a default message.",f=l||t[r]||"gray",m=c||("white"===f?"black":"white"),g=function(e){let t=document.getElementById(`toast-container-${e}`);return t||(t=document.createElement("div"),t.id=`toast-container-${e}`,t.style.position="fixed",t.style.zIndex="9999",function(e,t){t.includes("bottom")?e.style.bottom="10px":t.includes("top")&&(e.style.top="10px"),t.includes("right")?e.style.right="10px":t.includes("left")?e.style.left="10px":t.includes("center")&&(e.style.top="50%",e.style.left="50%",e.style.transform="translate(-50%, -50%)")}(t,e),document.body.appendChild(t)),t}(a),b=s(y,f,m,u||"0.5s",p||"ease",d);g.appendChild(b),requestAnimationFrame(()=>{b.style.opacity="1"}),setTimeout(()=>{b.parentNode&&(b.style.opacity="0",b.addEventListener("transitionend",()=>{b.remove(),n=!1}))},i||3e3)}e.createToast=function(e){if("object"!=typeof e)return;const{message:t,duration:o,position:n="bottom-right",type:s="info",backgroundColor:a,textColor:r,showCloseButton:l=!1,animationDuration:c,animationEasing:d}=e;i({message:t,duration:o||3e3,position:n,type:s,backgroundColor:a,textColor:r,showCloseButton:l,animationDuration:c,animationEasing:d})},e.setDefaultColors=function(e){"object"==typeof e&&Object.assign(t,e)},e.setDefaultMessages=function(e){"object"==typeof e&&Object.assign(o,e)},Object.defineProperty(e,"__esModule",{value:!0})});
18
+ //# sourceMappingURL=index.umd.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.umd.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 Customizable Toast Notifications\r\n * @author Priyanshu Patel\r\n * @version 1.0.0\r\n * @license Apache-2.0\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: 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) {\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({\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}) {\r\n if (isToastShowing) return;\r\n\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 );\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({\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 });\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","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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"}
package/package.json CHANGED
@@ -1,10 +1,19 @@
1
1
  {
2
2
  "name": "customizable-toast-notification",
3
- "version": "3.0.5",
3
+ "version": "3.2.0",
4
4
  "description": "A lightweight and highly customizable toast notification library or component for modern web applications.",
5
- "main": "dist/index.cjs.js",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
6
7
  "module": "dist/index.esm.mjs",
8
+ "unpkg": "dist/index.umd.js",
9
+ "jsdelivr": "dist/index.umd.js",
10
+ "exports": {
11
+ "import": "./dist/index.esm.mjs",
12
+ "require": "./dist/index.cjs",
13
+ "default": "./dist/index.umd.js"
14
+ },
7
15
  "scripts": {
16
+ "postinstall": "node postinstall.js",
8
17
  "build": "rollup -c",
9
18
  "test": "echo \"Error: no test specified\" && exit 1"
10
19
  },
@@ -42,24 +51,45 @@
42
51
  "frontend",
43
52
  "frontend library",
44
53
  "ESM",
45
- "CJS"
54
+ "CJS",
55
+ "cdn",
56
+ "umd",
57
+ "notification",
58
+ "custom-toast",
59
+ "vanilla-js",
60
+ "lightweight"
46
61
  ],
47
- "author": "Priyanshu Patel",
48
- "license": "MIT",
62
+ "author": {
63
+ "name": "Priyanshu Patel",
64
+ "email": "priyanshu.alt191@gmail.com",
65
+ "url": "https://github.com/sammy-cool"
66
+ },
67
+ "license": "Apache-2.0",
49
68
  "files": [
50
- "dist"
69
+ "postinstall.js",
70
+ "dist",
71
+ "README.md",
72
+ "LICENSE"
51
73
  ],
52
74
  "devDependencies": {
53
75
  "@rollup/plugin-commonjs": "^26.0.1",
54
76
  "@rollup/plugin-node-resolve": "^15.2.3",
55
77
  "@rollup/plugin-replace": "^6.0.1",
56
78
  "@rollup/plugin-terser": "^0.4.4",
79
+ "autoprefixer": "^10.4.21",
80
+ "postcss": "^8.5.6",
81
+ "postcss-import": "^16.1.1",
57
82
  "rollup": "^2.78.0",
83
+ "rollup-plugin-postcss": "^4.0.2",
58
84
  "rollup-plugin-size-snapshot": "^0.12.0",
59
85
  "rollup-plugin-visualizer": "^5.12.0"
60
86
  },
61
87
  "repository": {
62
88
  "type": "git",
63
89
  "url": "git+https://github.com/sammy-cool/customizable-toast-notification.git"
64
- }
90
+ },
91
+ "bugs": {
92
+ "url": "https://github.com/sammy-cool/customizable-toast-notification/issues"
93
+ },
94
+ "homepage": "https://github.com/sammy-cool/customizable-toast-notification#readme"
65
95
  }
package/postinstall.js ADDED
@@ -0,0 +1,136 @@
1
+ import fs from "fs";
2
+ import os from "os";
3
+ import path from "path";
4
+ import cp from "child_process";
5
+
6
+ if (
7
+ process.env.CI ||
8
+ process.env.npm_config_global ||
9
+ process.env.NODE_ENV === "production"
10
+ ) {
11
+ process.exit(0);
12
+ }
13
+
14
+ const appName = "customizable-toast";
15
+
16
+ let configDir;
17
+ switch (process.platform) {
18
+ case "win32":
19
+ configDir = path.join(
20
+ process.env.APPDATA || path.join(os.homedir(), "AppData", "Roaming"),
21
+ appName
22
+ );
23
+ break;
24
+ case "darwin":
25
+ configDir = path.join(
26
+ os.homedir(),
27
+ "Library",
28
+ "Application Support",
29
+ appName
30
+ );
31
+ break;
32
+ default:
33
+ configDir = path.join(
34
+ process.env.XDG_CONFIG_HOME || path.join(os.homedir(), ".config"),
35
+ appName
36
+ );
37
+ }
38
+
39
+ const storeFile = path.join(configDir, "install-count.json");
40
+
41
+ // Ensure config dir
42
+ fs.mkdirSync(configDir, { recursive: true });
43
+
44
+ // Read + increment count
45
+ let count = 0;
46
+ try {
47
+ if (fs.existsSync(storeFile)) {
48
+ if (process.platform === "win32") {
49
+ try {
50
+ cp.execSync(`attrib -h "${storeFile}"`);
51
+ } catch (err) {
52
+ process.exit(0);
53
+ }
54
+ }
55
+ const data = JSON.parse(fs.readFileSync(storeFile, "utf8"));
56
+ count = data.count || 0;
57
+ }
58
+ } catch {
59
+ count = 0;
60
+ }
61
+
62
+ count++;
63
+
64
+ // Save count back
65
+ try {
66
+ fs.writeFileSync(storeFile, JSON.stringify({ count }), "utf8");
67
+ if (process.platform === "win32" && count === 1) {
68
+ try {
69
+ cp.execSync(`attrib +h "${storeFile}"`);
70
+ } catch (err) {
71
+ process.exit(0);
72
+ }
73
+ }
74
+ } catch (err) {
75
+ process.exit(0);
76
+ }
77
+
78
+ // --- Message Logic ---
79
+ if (count === 1 || count === 2 || count === 5) {
80
+ showMessage(count);
81
+ } else {
82
+ process.exit(0); // Silent for other installs
83
+ }
84
+
85
+ // --- Spinner + Delayed Message Box ---
86
+ function showMessage(count) {
87
+ const width = process.stdout.columns || 80;
88
+ const boxWidth = 60;
89
+
90
+ const spinnerFrames = ["|", "/", "-", "\\"];
91
+ let i = 0;
92
+
93
+ const stripAnsi = (text) => text.replace(/\x1b\[[0-9;]*m/g, "");
94
+ const pad = (text) =>
95
+ " ".repeat(Math.max(boxWidth - stripAnsi(text).length, 0));
96
+ const center = (text) =>
97
+ " ".repeat(Math.max(Math.floor((width - stripAnsi(text).length) / 2), 0)) +
98
+ text;
99
+
100
+ const lines = [
101
+ count === 5
102
+ ? "🎯Thanks for sticking with it!\nThis is the final message. 🚀"
103
+ : `📦Thanks for using this package!`,
104
+ "",
105
+ "📘 For help: Check the README.md",
106
+ "🤝 Open to collaboration & teamwork.",
107
+ "💼 Looking for exciting dev opportunities.",
108
+ "🔗 Contact: priyanshu.alt191@gmail.com",
109
+ "🚀 Built different. Stay creative.",
110
+ ];
111
+
112
+ const spinner = setInterval(() => {
113
+ process.stdout.write(
114
+ `\r⏳ Finalizing install ${spinnerFrames[i++ % spinnerFrames.length]} `
115
+ );
116
+ }, 100);
117
+
118
+ setTimeout(() => {
119
+ clearInterval(spinner);
120
+ process.stdout.write("\r".padEnd(40, " ") + "\r"); // Clear spinner line
121
+
122
+ console.log(
123
+ "\n" + center(`\x1b[36m\x1b[1m╔${"═".repeat(boxWidth)}╗\x1b[0m`)
124
+ );
125
+ lines.forEach((line) => {
126
+ line.split("\n").forEach((sub) => {
127
+ console.log(
128
+ center(`\x1b[36m║ \x1b[0m${sub}${pad(sub)}\x1b[36m ║\x1b[0m`)
129
+ );
130
+ });
131
+ });
132
+ console.log(center(`\x1b[36m╚${"═".repeat(boxWidth)}╝\x1b[0m`) + "\n");
133
+
134
+ process.exit(0); // ✅ Exit only after message shown
135
+ }, 1200);
136
+ }
package/dist/index.cjs.js DELETED
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});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)};
2
- //# sourceMappingURL=index.cjs.js.map