customizable-toast-notification 1.0.0 → 3.0.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 +137 -66
- package/dist/external_asset/support_qr.png +0 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.mjs +1 -1
- package/dist/index.esm.mjs.map +1 -1
- package/package.json +9 -10
package/README.md
CHANGED
|
@@ -1,81 +1,152 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
#
|
|
15
|
-
|
|
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
|
+
|
|
10
|
+
|
|
11
|
+
**will surely revert!**
|
|
12
|
+
---->
|
|
13
|
+
|
|
14
|
+
# Customizable Toast Notification Library
|
|
15
|
+
|
|
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.
|
|
17
|
+
|
|
18
|
+
## Table of Contents
|
|
19
|
+
- [Features](#features)
|
|
20
|
+
- [Installation](#installation)
|
|
21
|
+
- [Usage](#usage)
|
|
22
|
+
- [API Reference](#api-reference)
|
|
23
|
+
- [Examples](#examples)
|
|
24
|
+
- [Contributing](#contributing)
|
|
25
|
+
- [License](#license)
|
|
26
|
+
|
|
27
|
+
## Features
|
|
28
|
+
- Display notifications of different types: info, success, error, and warning.
|
|
29
|
+
- Customizable background and text colors.
|
|
30
|
+
- Support for custom messages and default messages.
|
|
31
|
+
- Adjustable display duration and positioning on the screen.
|
|
32
|
+
- Close button functionality for user control.
|
|
33
|
+
- Animation effects for a smooth appearance and disappearance.
|
|
34
|
+
|
|
35
|
+
## Installation
|
|
36
|
+
You can install the library via npm:
|
|
37
|
+
```bash
|
|
16
38
|
npm install customizable-toast-notification
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
39
|
+
```
|
|
40
|
+
Or, if you prefer using yarn:
|
|
41
|
+
```bash
|
|
42
|
+
yarn add customizable-toast-notification
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Usage
|
|
46
|
+
To use the toast notification library, you need to import it in your JavaScript or TypeScript file:
|
|
47
|
+
```javascript
|
|
21
48
|
import { createToast, setDefaultColors, setDefaultMessages } from 'customizable-toast-notification';
|
|
22
|
-
Creating a Toast Notification
|
|
23
|
-
You can create a toast notification by calling the createToast function with various options:
|
|
24
49
|
|
|
25
|
-
|
|
26
|
-
Copy code
|
|
50
|
+
// Create a toast notification
|
|
27
51
|
createToast({
|
|
28
|
-
message: 'This is a custom message',
|
|
29
|
-
duration: 5000, //
|
|
30
|
-
position: 'top-right', // Position
|
|
31
|
-
type: 'success', // Type of
|
|
52
|
+
message: 'This is a custom message!',
|
|
53
|
+
duration: 5000, // Duration in milliseconds
|
|
54
|
+
position: 'top-right', // Position of the toast
|
|
55
|
+
type: 'success', // Type of notification
|
|
32
56
|
backgroundColor: 'green', // Custom background color
|
|
33
57
|
textColor: 'white', // Custom text color
|
|
34
|
-
showCloseButton: true //
|
|
58
|
+
showCloseButton: true, // Show close button
|
|
59
|
+
animationDuration: '0.5s', // Duration of the animations
|
|
60
|
+
animationEasing: 'ease', // Easing function for the animations
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## API Reference
|
|
65
|
+
### createToast
|
|
66
|
+
Creates a toast notification with the provided options.
|
|
67
|
+
|
|
68
|
+
#### Parameters
|
|
69
|
+
- `options` (Object): Options for the toast notification.
|
|
70
|
+
- `message` (string, optional): The message to display in the toast. Defaults based on type if not provided.
|
|
71
|
+
- `duration` (number, optional): The duration the toast should be displayed, in milliseconds (default is 3000).
|
|
72
|
+
- `position` (string, optional): The position of the toast on the screen (default is 'bottom-right').
|
|
73
|
+
- `type` (string, optional): The type of the toast (info, success, error, warning, default is 'info').
|
|
74
|
+
- `backgroundColor` (string, optional): Custom background color for the toast notification.
|
|
75
|
+
- `textColor` (string, optional): Custom text color for the toast notification (default is 'white').
|
|
76
|
+
- `showCloseButton` (boolean, optional): Whether to show a close button (default is false).
|
|
77
|
+
- `animationDuration` (string, optional): Duration of the fade-in and fade-out animations (default is '0.5s').
|
|
78
|
+
- `animationEasing` (string, optional): Easing function for the animations (default is 'ease').
|
|
79
|
+
|
|
80
|
+
#### Example
|
|
81
|
+
```javascript
|
|
82
|
+
createToast({
|
|
83
|
+
message: 'Operation completed successfully!',
|
|
84
|
+
type: 'success',
|
|
35
85
|
});
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### setDefaultColors
|
|
89
|
+
Sets default colors for different toast types.
|
|
36
90
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
type String info Type of the toast (info, success, error, warning).
|
|
43
|
-
backgroundColor String Depends on type Custom background color for the toast.
|
|
44
|
-
textColor String white Custom text color.
|
|
45
|
-
showCloseButton Boolean false Whether to show a close button in the toast.
|
|
46
|
-
Customizing Default Colors and Messages
|
|
47
|
-
You can customize default colors and messages for different toast types:
|
|
48
|
-
|
|
49
|
-
javascript
|
|
50
|
-
Copy code
|
|
91
|
+
#### Parameters
|
|
92
|
+
- `newColors` (Object): New colors to set for toast types, where keys are the toast types (info, success, error, warning).
|
|
93
|
+
|
|
94
|
+
#### Example
|
|
95
|
+
```javascript
|
|
51
96
|
setDefaultColors({
|
|
97
|
+
info: 'blue',
|
|
52
98
|
success: 'green',
|
|
53
|
-
error: '
|
|
99
|
+
error: 'red',
|
|
100
|
+
warning: 'orange',
|
|
101
|
+
});
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### setDefaultMessages
|
|
105
|
+
Sets default messages for different toast types.
|
|
106
|
+
|
|
107
|
+
#### Parameters
|
|
108
|
+
- `newMessages` (Object): New messages to set for toast types, where keys are the toast types (info, success, error, warning).
|
|
109
|
+
|
|
110
|
+
#### Example
|
|
111
|
+
```javascript
|
|
112
|
+
setDefaultMessages({
|
|
113
|
+
info: 'This is an informational message!',
|
|
114
|
+
success: 'Your action was successful!',
|
|
115
|
+
error: 'An error has occurred!',
|
|
116
|
+
warning: 'This is a warning message!',
|
|
117
|
+
});
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Examples
|
|
121
|
+
### Basic Usage
|
|
122
|
+
```javascript
|
|
123
|
+
createToast({
|
|
124
|
+
message: 'Welcome to our website!',
|
|
125
|
+
duration: 4000,
|
|
126
|
+
type: 'info',
|
|
127
|
+
});
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Custom Colors and Messages
|
|
131
|
+
```javascript
|
|
132
|
+
setDefaultColors({
|
|
133
|
+
success: '#28a745',
|
|
134
|
+
error: '#dc3545',
|
|
54
135
|
});
|
|
55
136
|
|
|
56
137
|
setDefaultMessages({
|
|
57
|
-
success: '
|
|
58
|
-
error: '
|
|
138
|
+
success: 'Data saved successfully!',
|
|
139
|
+
error: 'Failed to save data.',
|
|
59
140
|
});
|
|
60
|
-
Example Usage in HTML
|
|
61
|
-
html
|
|
62
|
-
Copy code
|
|
63
|
-
<button id="showToast">Show Toast</button>
|
|
64
|
-
|
|
65
|
-
<script>
|
|
66
|
-
document.getElementById('showToast').addEventListener('click', () => {
|
|
67
|
-
createToast({
|
|
68
|
-
message: 'This is a custom toast message.',
|
|
69
|
-
duration: 4000,
|
|
70
|
-
position: 'top-right',
|
|
71
|
-
type: 'warning',
|
|
72
|
-
backgroundColor: 'red',
|
|
73
|
-
textColor: 'yellow',
|
|
74
|
-
showCloseButton: true
|
|
75
|
-
});
|
|
76
|
-
});
|
|
77
|
-
</script>
|
|
78
|
-
|
|
79
|
-
#License
|
|
80
|
-
This project is licensed under the MIT License.
|
|
81
141
|
|
|
142
|
+
createToast({
|
|
143
|
+
type: 'success',
|
|
144
|
+
message: 'Data saved successfully!',
|
|
145
|
+
});
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Contributing
|
|
149
|
+
Contributions are welcome! Please read the [CONTRIBUTING.md]() for details on our code of conduct, and the process for submitting pull requests.
|
|
150
|
+
|
|
151
|
+
## License
|
|
152
|
+
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.
|
|
Binary file
|
package/dist/index.cjs.js
CHANGED
|
@@ -15,5 +15,5 @@
|
|
|
15
15
|
* License: MIT
|
|
16
16
|
* Dependencies: None
|
|
17
17
|
*/
|
|
18
|
-
let
|
|
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
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -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// Queue to manage active toasts\r\nconst toastQueue = [];\r\nlet isToastShowing = false;\r\n\r\nfunction showNextToast() {\r\n if (toastQueue.length === 0 || isToastShowing) return;\r\n\r\n isToastShowing = true;\r\n const { message, duration, position, type, backgroundColor, textColor, showCloseButton } = toastQueue.shift();\r\n\r\n const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\"; // Use backgroundColor first\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 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.left = \"50%\";\r\n toastContainer.style.transform = \"translateX(-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; // Use the determined background color\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 0.5s\";\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;\r\n showNextToast(); // Show the next toast in the queue\r\n if (!toastContainer.hasChildNodes()) {\r\n toastContainer.remove();\r\n }\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\";\r\n });\r\n\r\n setTimeout(() => {\r\n if (toast.parentNode) {\r\n toast.style.opacity = \"0\";\r\n toast.addEventListener(\"transitionend\", () => {\r\n toast.remove();\r\n isToastShowing = false;\r\n showNextToast(); // Show the next toast in the queue\r\n if (!toastContainer.hasChildNodes()) {\r\n toastContainer.remove();\r\n }\r\n });\r\n }\r\n }, duration);\r\n}\r\n\r\nfunction createToast(options) {\r\n const {\r\n message,\r\n duration = 3000,\r\n position = \"bottom-right\",\r\n type = \"info\",\r\n backgroundColor,\r\n textColor,\r\n showCloseButton = false,\r\n } = options;\r\n\r\n toastQueue.push({\r\n message,\r\n duration,\r\n position,\r\n type,\r\n backgroundColor,\r\n textColor,\r\n showCloseButton,\r\n });\r\n \r\n showNextToast(); // Attempt to show the next toast\r\n}\r\n\r\nfunction setDefaultColors(newColors) {\r\n Object.assign(defaultColors, newColors);\r\n}\r\n\r\nfunction setDefaultMessages(newMessages) {\r\n Object.assign(defaultMessages, newMessages);\r\n}\r\n\r\nexport { createToast, setDefaultColors, setDefaultMessages };\r\n"],"names":["defaultColors","info","success","error","warning","defaultMessages","toastQueue","isToastShowing","showNextToast","length","message","duration","position","type","backgroundColor","textColor","showCloseButton","shift","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","hasChildNodes","requestAnimationFrame","setTimeout","parentNode","options","push","newColors","Object","assign","newMessages"],"mappings":";;;;;;;;;;;;;;;;;AAqCA,IAAIA,EAAgB,CAClBC,KAAM,OACNC,QAAS,QACTC,MAAO,MACPC,QAAS,cAGPC,EAAkB,CACpBJ,KAAM,2BACNC,QAAS,iCACTC,MAAO,qBACPC,QAAS,8BAIX,MAAME,EAAa,GACnB,IAAIC,GAAiB,EAErB,SAASC,IACP,GAA0B,IAAtBF,EAAWG,QAAgBF,EAAgB,OAE/CA,GAAiB,EACjB,MAAMG,QAAEA,EAAOC,SAAEA,EAAQC,SAAEA,EAAQC,KAAEA,EAAIC,gBAAEA,EAAeC,UAAEA,EAASC,gBAAEA,GAAoBV,EAAWW,QAEhGC,EAAeR,GAAWL,EAAgBQ,IAAS,6BACnDM,EAAuBL,GAAmBd,EAAca,IAAS,OACjEO,EAAiBL,IAAuC,UAAzBI,EAAmC,QAAU,SAElF,IAAIE,EAAiBC,SAASC,eAAe,mBAAmBX,KAC3DS,IACHA,EAAiBC,SAASE,cAAc,OACxCH,EAAeI,GAAK,mBAAmBb,IACvCS,EAAeK,MAAMd,SAAW,QAChCS,EAAeK,MAAMC,OAAS,OAE1Bf,EAASgB,SAAS,UACpBP,EAAeK,MAAMG,OAAS,OACrBjB,EAASgB,SAAS,SAC3BP,EAAeK,MAAMI,IAAM,QAGzBlB,EAASgB,SAAS,SACpBP,EAAeK,MAAMK,MAAQ,OACpBnB,EAASgB,SAAS,QAC3BP,EAAeK,MAAMM,KAAO,OACnBpB,EAASgB,SAAS,YAC3BP,EAAeK,MAAMM,KAAO,MAC5BX,EAAeK,MAAMO,UAAY,oBAGnCX,SAASY,KAAKC,YAAYd,IAG5B,MAAMe,EAAQd,SAASE,cAAc,OAYrC,GAXAY,EAAMC,YAAcnB,EACpBkB,EAAMV,MAAMY,WAAanB,EACzBiB,EAAMV,MAAMa,MAAQnB,EACpBgB,EAAMV,MAAMc,QAAU,YACtBJ,EAAMV,MAAMe,UAAY,OACxBL,EAAMV,MAAMgB,aAAe,MAC3BN,EAAMV,MAAMiB,UAAY,8BACxBP,EAAMV,MAAMkB,QAAU,IACtBR,EAAMV,MAAMmB,WAAa,eAGrB7B,EAAiB,CACnB,MAAM8B,EAAcxB,SAASE,cAAc,UAC3CsB,EAAYT,YAAc,IAC1BS,EAAYpB,MAAMqB,WAAa,OAC/BD,EAAYpB,MAAMY,WAAa,cAC/BQ,EAAYpB,MAAMsB,OAAS,OAC3BF,EAAYpB,MAAMa,MAAQnB,EAC1B0B,EAAYpB,MAAMuB,OAAS,UAE3BH,EAAYI,QAAU,KACpBd,EAAMV,MAAMkB,QAAU,IACtBR,EAAMe,iBAAiB,iBAAiB,KACtCf,EAAMgB,SACN7C,GAAiB,EACjBC,IACKa,EAAegC,iBAClBhC,EAAe+B,QAChB,GACD,EAGJhB,EAAMD,YAAYW,EACnB,CAEDzB,EAAec,YAAYC,GAE3BkB,uBAAsB,KACpBlB,EAAMV,MAAMkB,QAAU,GAAG,IAG3BW,YAAW,KACLnB,EAAMoB,aACRpB,EAAMV,MAAMkB,QAAU,IACtBR,EAAMe,iBAAiB,iBAAiB,KACtCf,EAAMgB,SACN7C,GAAiB,EACjBC,IACKa,EAAegC,iBAClBhC,EAAe+B,QAChB,IAEJ,GACAzC,EACL,qBAEA,SAAqB8C,GACnB,MAAM/C,QACJA,EAAOC,SACPA,EAAW,IAAIC,SACfA,EAAW,eAAcC,KACzBA,EAAO,OAAMC,gBACbA,EAAeC,UACfA,EAASC,gBACTA,GAAkB,GAChByC,EAEJnD,EAAWoD,KAAK,CACdhD,UACAC,WACAC,WACAC,OACAC,kBACAC,YACAC,oBAGFR,GACF,2BAEA,SAA0BmD,GACxBC,OAAOC,OAAO7D,EAAe2D,EAC/B,6BAEA,SAA4BG,GAC1BF,OAAOC,OAAOxD,EAAiByD,EACjC"}
|
|
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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"}
|
package/dist/index.esm.mjs
CHANGED
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
* License: MIT
|
|
15
15
|
* Dependencies: None
|
|
16
16
|
*/
|
|
17
|
-
let
|
|
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
|
package/dist/index.esm.mjs.map
CHANGED
|
@@ -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// Queue to manage active toasts\r\nconst toastQueue = [];\r\nlet isToastShowing = false;\r\n\r\nfunction showNextToast() {\r\n if (toastQueue.length === 0 || isToastShowing) return;\r\n\r\n isToastShowing = true;\r\n const { message, duration, position, type, backgroundColor, textColor, showCloseButton } = toastQueue.shift();\r\n\r\n const finalMessage = message || defaultMessages[type] || \"This is a default message.\";\r\n const toastBackgroundColor = backgroundColor || defaultColors[type] || \"gray\"; // Use backgroundColor first\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 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.left = \"50%\";\r\n toastContainer.style.transform = \"translateX(-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; // Use the determined background color\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 0.5s\";\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;\r\n showNextToast(); // Show the next toast in the queue\r\n if (!toastContainer.hasChildNodes()) {\r\n toastContainer.remove();\r\n }\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\";\r\n });\r\n\r\n setTimeout(() => {\r\n if (toast.parentNode) {\r\n toast.style.opacity = \"0\";\r\n toast.addEventListener(\"transitionend\", () => {\r\n toast.remove();\r\n isToastShowing = false;\r\n showNextToast(); // Show the next toast in the queue\r\n if (!toastContainer.hasChildNodes()) {\r\n toastContainer.remove();\r\n }\r\n });\r\n }\r\n }, duration);\r\n}\r\n\r\nfunction createToast(options) {\r\n const {\r\n message,\r\n duration = 3000,\r\n position = \"bottom-right\",\r\n type = \"info\",\r\n backgroundColor,\r\n textColor,\r\n showCloseButton = false,\r\n } = options;\r\n\r\n toastQueue.push({\r\n message,\r\n duration,\r\n position,\r\n type,\r\n backgroundColor,\r\n textColor,\r\n showCloseButton,\r\n });\r\n \r\n showNextToast(); // Attempt to show the next toast\r\n}\r\n\r\nfunction setDefaultColors(newColors) {\r\n Object.assign(defaultColors, newColors);\r\n}\r\n\r\nfunction setDefaultMessages(newMessages) {\r\n Object.assign(defaultMessages, newMessages);\r\n}\r\n\r\nexport { createToast, setDefaultColors, setDefaultMessages };\r\n"],"names":["defaultColors","info","success","error","warning","defaultMessages","toastQueue","isToastShowing","showNextToast","length","message","duration","position","type","backgroundColor","textColor","showCloseButton","shift","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","hasChildNodes","requestAnimationFrame","setTimeout","parentNode","createToast","options","push","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": "
|
|
3
|
+
"version": "3.0.0",
|
|
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",
|
|
@@ -9,19 +9,15 @@
|
|
|
9
9
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
10
10
|
},
|
|
11
11
|
"keywords": [
|
|
12
|
+
"javascript-library",
|
|
13
|
+
"toast-notification-library",
|
|
14
|
+
"toast-notification",
|
|
12
15
|
"toast",
|
|
13
16
|
"notification",
|
|
14
17
|
"customizable",
|
|
15
18
|
"UI",
|
|
16
19
|
"library",
|
|
17
20
|
"JavaScript",
|
|
18
|
-
"ESM",
|
|
19
|
-
"CJS",
|
|
20
|
-
"best-toast-notification",
|
|
21
|
-
"best-library",
|
|
22
|
-
"priyanshu",
|
|
23
|
-
"priyanshu-patel",
|
|
24
|
-
"toast-notification",
|
|
25
21
|
"npm-library",
|
|
26
22
|
"toast-library",
|
|
27
23
|
"toast",
|
|
@@ -29,7 +25,10 @@
|
|
|
29
25
|
"npm",
|
|
30
26
|
"npm-package",
|
|
31
27
|
"javascript",
|
|
32
|
-
"
|
|
28
|
+
"best-toast-notification",
|
|
29
|
+
"best-library",
|
|
30
|
+
"ESM",
|
|
31
|
+
"CJS"
|
|
33
32
|
],
|
|
34
33
|
"author": "Priyanshu Patel",
|
|
35
34
|
"license": "MIT",
|
|
@@ -46,6 +45,6 @@
|
|
|
46
45
|
},
|
|
47
46
|
"repository": {
|
|
48
47
|
"type": "git",
|
|
49
|
-
"url": "https://github.com/sammy-cool/customizable-toast-notification"
|
|
48
|
+
"url": "git+https://github.com/sammy-cool/customizable-toast-notification.git"
|
|
50
49
|
}
|
|
51
50
|
}
|