toastify-pro 1.0.0 → 1.0.2

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.
Files changed (5) hide show
  1. package/dist/toastify-pro.esm.js +156 -0
  2. package/dist/toastify-pro.umd.js +160 -3
  3. package/dist/toastify-pro.umd.min.js +1 -1
  4. package/package.json +1 -1
  5. package/src/toastify-pro.js +143 -116
package/dist/toastify-pro.esm.js CHANGED
@@ -1 +1,157 @@
1
+ class ToastifyPro {
2
+ constructor(options = {}) {
3
+ this.defaultOptions = {
4
+ position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
5
+ timeout: options.timeout || 3000,
6
+ allowClose: options.allowClose !== false, // default true
7
+ maxLength: options.maxLength || 100,
8
+ };
9
+
10
+ // create container only once
11
+ const existing = document.querySelector(
12
+ `.toastify-pro-container.${this.defaultOptions.position}`
13
+ );
14
+ if (existing) {
15
+ this.container = existing;
16
+ } else {
17
+ this.container = document.createElement("div");
18
+ this.container.className = `toastify-pro-container ${this.defaultOptions.position}`;
19
+ document.body.appendChild(this.container);
20
+ }
21
+
22
+ this.injectStyles();
23
+ }
24
+
25
+ injectStyles() {
26
+ if (document.getElementById("toastify-pro-styles")) return; // load once
27
+ const style = document.createElement("style");
28
+ style.id = "toastify-pro-styles";
29
+ style.textContent = `
30
+ .toastify-pro-container {
31
+ position: fixed;
32
+ z-index: 9999;
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: 10px;
36
+ pointer-events: none;
37
+ }
38
+ .toastify-pro-container.top-left { top: 20px; left: 20px; align-items: flex-start; }
39
+ .toastify-pro-container.top-right { top: 20px; right: 20px; align-items: flex-end; }
40
+ .toastify-pro-container.bottom-left { bottom: 20px; left: 20px; align-items: flex-start; }
41
+ .toastify-pro-container.bottom-right { bottom: 20px; right: 20px; align-items: flex-end; }
42
+ .toastify-pro-container.top-center { top: 20px; left: 50%; transform: translateX(-50%); }
43
+ .toastify-pro-container.bottom-center { bottom: 150px; left: 50%; transform: translateX(-50%); }
44
+
45
+ .toastify-pro {
46
+ min-width: 220px;
47
+ max-width: 320px;
48
+ padding: 12px 18px;
49
+ border-radius: 20px;
50
+ font-size: 14px;
51
+ font-family: sans-serif;
52
+ color: white;
53
+ opacity: 0;
54
+ transform: translateY(20px);
55
+ transition: all 0.3s ease;
56
+ pointer-events: auto;
57
+ position: relative;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: space-between;
61
+ gap: 12px;
62
+ }
63
+ .toastify-pro.show { opacity: 1; transform: translateY(0); }
64
+ .toastify-pro.success { background: rgba(76, 175, 80, 0.9); }
65
+ .toastify-pro.error { background: rgba(244, 67, 54, 0.9); }
66
+ .toastify-pro.info { background: rgba(33, 150, 243, 0.9); }
67
+ .toastify-pro.warning { background: rgba(255, 152, 0, 0.9); }
68
+ .toastify-pro.dark { background: rgba(0,0,0,0.85); }
69
+ .toastify-pro.light { background: rgba(255,255,255,0.9); color: #000; }
70
+
71
+ .toastify-pro .toast-content {
72
+ flex: 1;
73
+ padding-right: 8px;
74
+ line-height: 1.4;
75
+ }
76
+
77
+ .toastify-pro .close-btn {
78
+ cursor: pointer;
79
+ font-size: 18px;
80
+ color: inherit;
81
+ opacity: 0.8;
82
+ padding: 2px 4px;
83
+ border-radius: 3px;
84
+ transition: opacity 0.2s ease, background-color 0.2s ease;
85
+ flex-shrink: 0;
86
+ min-width: 20px;
87
+ text-align: center;
88
+ line-height: 1;
89
+ }
90
+ .toastify-pro .close-btn:hover {
91
+ opacity: 1;
92
+ background-color: rgba(0,0,0,0.1);
93
+ }
94
+ .toastify-pro.light .close-btn:hover {
95
+ background-color: rgba(0,0,0,0.05);
96
+ }
97
+ `;
98
+ document.head.appendChild(style);
99
+ }
100
+
101
+ show(message, type = "dark", opts = {}) {
102
+ const options = { ...this.defaultOptions, ...opts };
103
+
104
+ const toast = document.createElement("div");
105
+ toast.className = `toastify-pro ${type}`;
106
+
107
+ // Create content wrapper for the message
108
+ const contentWrapper = document.createElement("div");
109
+ contentWrapper.className = "toast-content";
110
+ contentWrapper.textContent = message.substring(0, options.maxLength);
111
+ toast.appendChild(contentWrapper);
112
+
113
+ if (options.allowClose) {
114
+ const closeBtn = document.createElement("span");
115
+ closeBtn.className = "close-btn";
116
+ closeBtn.innerHTML = "×";
117
+ closeBtn.onclick = () => this.removeToast(toast);
118
+ toast.appendChild(closeBtn);
119
+ }
120
+
121
+ this.container.appendChild(toast);
122
+
123
+ // show animation
124
+ setTimeout(() => toast.classList.add("show"), 50);
125
+
126
+ // auto remove
127
+ if (options.timeout > 0) {
128
+ setTimeout(() => this.removeToast(toast), options.timeout);
129
+ }
130
+ }
131
+
132
+ removeToast(toast) {
133
+ toast.classList.remove("show");
134
+ setTimeout(() => toast.remove(), 300);
135
+ }
136
+
137
+ success(msg, opts) {
138
+ this.show(msg, "success", opts);
139
+ }
140
+ error(msg, opts) {
141
+ this.show(msg, "error", opts);
142
+ }
143
+ info(msg, opts) {
144
+ this.show(msg, "info", opts);
145
+ }
146
+ warning(msg, opts) {
147
+ this.show(msg, "warning", opts);
148
+ }
149
+ dark(msg, opts) {
150
+ this.show(msg, "dark", opts);
151
+ }
152
+ light(msg, opts) {
153
+ this.show(msg, "light", opts);
154
+ }
155
+ }
1
156
 
157
+ export { ToastifyPro as default };
package/dist/toastify-pro.umd.js CHANGED
@@ -1,8 +1,165 @@
1
- (function (factory) {
1
+ (function (global, factory) {
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
2
3
  typeof define === 'function' && define.amd ? define(factory) :
3
- factory();
4
- })((function () { 'use strict';
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ToastifyPro = factory());
5
+ })(this, (function () { 'use strict';
5
6
 
7
+ class ToastifyPro {
8
+ constructor(options = {}) {
9
+ this.defaultOptions = {
10
+ position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
11
+ timeout: options.timeout || 3000,
12
+ allowClose: options.allowClose !== false, // default true
13
+ maxLength: options.maxLength || 100,
14
+ };
15
+
16
+ // create container only once
17
+ const existing = document.querySelector(
18
+ `.toastify-pro-container.${this.defaultOptions.position}`
19
+ );
20
+ if (existing) {
21
+ this.container = existing;
22
+ } else {
23
+ this.container = document.createElement("div");
24
+ this.container.className = `toastify-pro-container ${this.defaultOptions.position}`;
25
+ document.body.appendChild(this.container);
26
+ }
27
+
28
+ this.injectStyles();
29
+ }
30
+
31
+ injectStyles() {
32
+ if (document.getElementById("toastify-pro-styles")) return; // load once
33
+ const style = document.createElement("style");
34
+ style.id = "toastify-pro-styles";
35
+ style.textContent = `
36
+ .toastify-pro-container {
37
+ position: fixed;
38
+ z-index: 9999;
39
+ display: flex;
40
+ flex-direction: column;
41
+ gap: 10px;
42
+ pointer-events: none;
43
+ }
44
+ .toastify-pro-container.top-left { top: 20px; left: 20px; align-items: flex-start; }
45
+ .toastify-pro-container.top-right { top: 20px; right: 20px; align-items: flex-end; }
46
+ .toastify-pro-container.bottom-left { bottom: 20px; left: 20px; align-items: flex-start; }
47
+ .toastify-pro-container.bottom-right { bottom: 20px; right: 20px; align-items: flex-end; }
48
+ .toastify-pro-container.top-center { top: 20px; left: 50%; transform: translateX(-50%); }
49
+ .toastify-pro-container.bottom-center { bottom: 150px; left: 50%; transform: translateX(-50%); }
50
+
51
+ .toastify-pro {
52
+ min-width: 220px;
53
+ max-width: 320px;
54
+ padding: 12px 18px;
55
+ border-radius: 20px;
56
+ font-size: 14px;
57
+ font-family: sans-serif;
58
+ color: white;
59
+ opacity: 0;
60
+ transform: translateY(20px);
61
+ transition: all 0.3s ease;
62
+ pointer-events: auto;
63
+ position: relative;
64
+ display: flex;
65
+ align-items: center;
66
+ justify-content: space-between;
67
+ gap: 12px;
68
+ }
69
+ .toastify-pro.show { opacity: 1; transform: translateY(0); }
70
+ .toastify-pro.success { background: rgba(76, 175, 80, 0.9); }
71
+ .toastify-pro.error { background: rgba(244, 67, 54, 0.9); }
72
+ .toastify-pro.info { background: rgba(33, 150, 243, 0.9); }
73
+ .toastify-pro.warning { background: rgba(255, 152, 0, 0.9); }
74
+ .toastify-pro.dark { background: rgba(0,0,0,0.85); }
75
+ .toastify-pro.light { background: rgba(255,255,255,0.9); color: #000; }
76
+
77
+ .toastify-pro .toast-content {
78
+ flex: 1;
79
+ padding-right: 8px;
80
+ line-height: 1.4;
81
+ }
82
+
83
+ .toastify-pro .close-btn {
84
+ cursor: pointer;
85
+ font-size: 18px;
86
+ color: inherit;
87
+ opacity: 0.8;
88
+ padding: 2px 4px;
89
+ border-radius: 3px;
90
+ transition: opacity 0.2s ease, background-color 0.2s ease;
91
+ flex-shrink: 0;
92
+ min-width: 20px;
93
+ text-align: center;
94
+ line-height: 1;
95
+ }
96
+ .toastify-pro .close-btn:hover {
97
+ opacity: 1;
98
+ background-color: rgba(0,0,0,0.1);
99
+ }
100
+ .toastify-pro.light .close-btn:hover {
101
+ background-color: rgba(0,0,0,0.05);
102
+ }
103
+ `;
104
+ document.head.appendChild(style);
105
+ }
106
+
107
+ show(message, type = "dark", opts = {}) {
108
+ const options = { ...this.defaultOptions, ...opts };
109
+
110
+ const toast = document.createElement("div");
111
+ toast.className = `toastify-pro ${type}`;
112
+
113
+ // Create content wrapper for the message
114
+ const contentWrapper = document.createElement("div");
115
+ contentWrapper.className = "toast-content";
116
+ contentWrapper.textContent = message.substring(0, options.maxLength);
117
+ toast.appendChild(contentWrapper);
118
+
119
+ if (options.allowClose) {
120
+ const closeBtn = document.createElement("span");
121
+ closeBtn.className = "close-btn";
122
+ closeBtn.innerHTML = "×";
123
+ closeBtn.onclick = () => this.removeToast(toast);
124
+ toast.appendChild(closeBtn);
125
+ }
126
+
127
+ this.container.appendChild(toast);
128
+
129
+ // show animation
130
+ setTimeout(() => toast.classList.add("show"), 50);
131
+
132
+ // auto remove
133
+ if (options.timeout > 0) {
134
+ setTimeout(() => this.removeToast(toast), options.timeout);
135
+ }
136
+ }
137
+
138
+ removeToast(toast) {
139
+ toast.classList.remove("show");
140
+ setTimeout(() => toast.remove(), 300);
141
+ }
142
+
143
+ success(msg, opts) {
144
+ this.show(msg, "success", opts);
145
+ }
146
+ error(msg, opts) {
147
+ this.show(msg, "error", opts);
148
+ }
149
+ info(msg, opts) {
150
+ this.show(msg, "info", opts);
151
+ }
152
+ warning(msg, opts) {
153
+ this.show(msg, "warning", opts);
154
+ }
155
+ dark(msg, opts) {
156
+ this.show(msg, "dark", opts);
157
+ }
158
+ light(msg, opts) {
159
+ this.show(msg, "light", opts);
160
+ }
161
+ }
6
162
 
163
+ return ToastifyPro;
7
164
 
8
165
  }));
package/dist/toastify-pro.umd.min.js CHANGED
@@ -1 +1 @@
1
- !function(n){"function"==typeof define&&define.amd?define(n):n()}(function(){});
1
+ !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).ToastifyPro=n()}(this,function(){"use strict";return class{constructor(t={}){this.defaultOptions={position:t.position||"bottom-center",timeout:t.timeout||3e3,allowClose:!1!==t.allowClose,maxLength:t.maxLength||100};const n=document.querySelector(`.toastify-pro-container.${this.defaultOptions.position}`);n?this.container=n:(this.container=document.createElement("div"),this.container.className=`toastify-pro-container ${this.defaultOptions.position}`,document.body.appendChild(this.container)),this.injectStyles()}injectStyles(){if(document.getElementById("toastify-pro-styles"))return;const t=document.createElement("style");t.id="toastify-pro-styles",t.textContent="\n .toastify-pro-container {\n position: fixed;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n gap: 10px;\n pointer-events: none;\n }\n .toastify-pro-container.top-left { top: 20px; left: 20px; align-items: flex-start; }\n .toastify-pro-container.top-right { top: 20px; right: 20px; align-items: flex-end; }\n .toastify-pro-container.bottom-left { bottom: 20px; left: 20px; align-items: flex-start; }\n .toastify-pro-container.bottom-right { bottom: 20px; right: 20px; align-items: flex-end; }\n .toastify-pro-container.top-center { top: 20px; left: 50%; transform: translateX(-50%); }\n .toastify-pro-container.bottom-center { bottom: 150px; left: 50%; transform: translateX(-50%); }\n\n .toastify-pro {\n min-width: 220px;\n max-width: 320px;\n padding: 12px 18px;\n border-radius: 20px;\n font-size: 14px;\n font-family: sans-serif;\n color: white;\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.3s ease;\n pointer-events: auto;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n }\n .toastify-pro.show { opacity: 1; transform: translateY(0); }\n .toastify-pro.success { background: rgba(76, 175, 80, 0.9); }\n .toastify-pro.error { background: rgba(244, 67, 54, 0.9); }\n .toastify-pro.info { background: rgba(33, 150, 243, 0.9); }\n .toastify-pro.warning { background: rgba(255, 152, 0, 0.9); }\n .toastify-pro.dark { background: rgba(0,0,0,0.85); }\n .toastify-pro.light { background: rgba(255,255,255,0.9); color: #000; }\n\n .toastify-pro .toast-content {\n flex: 1;\n padding-right: 8px;\n line-height: 1.4;\n }\n\n .toastify-pro .close-btn {\n cursor: pointer;\n font-size: 18px;\n color: inherit;\n opacity: 0.8;\n padding: 2px 4px;\n border-radius: 3px;\n transition: opacity 0.2s ease, background-color 0.2s ease;\n flex-shrink: 0;\n min-width: 20px;\n text-align: center;\n line-height: 1;\n }\n .toastify-pro .close-btn:hover { \n opacity: 1; \n background-color: rgba(0,0,0,0.1);\n }\n .toastify-pro.light .close-btn:hover { \n background-color: rgba(0,0,0,0.05);\n }\n ",document.head.appendChild(t)}show(t,n="dark",o={}){const e={...this.defaultOptions,...o},i=document.createElement("div");i.className=`toastify-pro ${n}`;const s=document.createElement("div");if(s.className="toast-content",s.textContent=t.substring(0,e.maxLength),i.appendChild(s),e.allowClose){const t=document.createElement("span");t.className="close-btn",t.innerHTML="×",t.onclick=()=>this.removeToast(i),i.appendChild(t)}this.container.appendChild(i),setTimeout(()=>i.classList.add("show"),50),e.timeout>0&&setTimeout(()=>this.removeToast(i),e.timeout)}removeToast(t){t.classList.remove("show"),setTimeout(()=>t.remove(),300)}success(t,n){this.show(t,"success",n)}error(t,n){this.show(t,"error",n)}info(t,n){this.show(t,"info",n)}warning(t,n){this.show(t,"warning",n)}dark(t,n){this.show(t,"dark",n)}light(t,n){this.show(t,"light",n)}}});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "toastify-pro",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "A lightweight customizable toast notification library",
5
5
  "main": "dist/toastify-pro.umd.js",
6
6
  "module": "dist/toastify-pro.esm.js",
package/src/toastify-pro.js CHANGED
@@ -1,130 +1,157 @@
1
- class ToastifyPro {
2
- constructor(options = {}) {
3
- this.defaultOptions = {
4
- position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
5
- timeout: options.timeout || 3000,
6
- allowClose: options.allowClose !== false, // default true
7
- maxLength: options.maxLength || 100,
8
- };
9
-
10
- // create container only once
11
- const existing = document.querySelector(
12
- `.toastify-pro-container.${this.defaultOptions.position}`
13
- );
14
- if (existing) {
15
- this.container = existing;
16
- } else {
17
- this.container = document.createElement("div");
18
- this.container.className = `toastify-pro-container ${this.defaultOptions.position}`;
19
- document.body.appendChild(this.container);
20
- }
21
-
22
- this.injectStyles();
23
- }
1
+ class ToastifyPro {
2
+ constructor(options = {}) {
3
+ this.defaultOptions = {
4
+ position: options.position || "bottom-center", // top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
5
+ timeout: options.timeout || 3000,
6
+ allowClose: options.allowClose !== false, // default true
7
+ maxLength: options.maxLength || 100,
8
+ };
24
9
 
25
- injectStyles() {
26
- if (document.getElementById("toastify-pro-styles")) return; // load once
27
- const style = document.createElement("style");
28
- style.id = "toastify-pro-styles";
29
- style.textContent = `
30
- .toastify-pro-container {
31
- position: fixed;
32
- z-index: 9999;
33
- display: flex;
34
- flex-direction: column;
35
- gap: 10px;
36
- pointer-events: none;
37
- }
38
- .toastify-pro-container.top-left { top: 20px; left: 20px; align-items: flex-start; }
39
- .toastify-pro-container.top-right { top: 20px; right: 20px; align-items: flex-end; }
40
- .toastify-pro-container.bottom-left { bottom: 20px; left: 20px; align-items: flex-start; }
41
- .toastify-pro-container.bottom-right { bottom: 20px; right: 20px; align-items: flex-end; }
42
- .toastify-pro-container.top-center { top: 20px; left: 50%; transform: translateX(-50%); }
43
- .toastify-pro-container.bottom-center { bottom: 150px; left: 50%; transform: translateX(-50%); }
44
-
45
- .toastify-pro {
46
- min-width: 220px;
47
- max-width: 320px;
48
- padding: 12px 18px;
49
- border-radius: 20px;
50
- font-size: 14px;
51
- font-family: sans-serif;
52
- color: white;
53
- opacity: 0;
54
- transform: translateY(20px);
55
- transition: all 0.3s ease;
56
- pointer-events: auto;
57
- position: relative;
58
- }
59
- .toastify-pro.show { opacity: 1; transform: translateY(0); }
60
- .toastify-pro.success { background: rgba(76, 175, 80, 0.9); }
61
- .toastify-pro.error { background: rgba(244, 67, 54, 0.9); }
62
- .toastify-pro.info { background: rgba(33, 150, 243, 0.9); }
63
- .toastify-pro.warning { background: rgba(255, 152, 0, 0.9); }
64
- .toastify-pro.dark { background: rgba(0,0,0,0.85); }
65
- .toastify-pro.light { background: rgba(255,255,255,0.9); color: #000; }
66
-
67
- .toastify-pro .close-btn {
68
- position: absolute;
69
- right: 20px;
70
- top: 8px;
71
- cursor: pointer;
72
- font-size: 20px;
73
- color: inherit;
74
- opacity: 0.8;
75
- }
76
- .toastify-pro .close-btn:hover { opacity: 1; }
77
- `;
78
- document.head.appendChild(style);
10
+ // create container only once
11
+ const existing = document.querySelector(
12
+ `.toastify-pro-container.${this.defaultOptions.position}`
13
+ );
14
+ if (existing) {
15
+ this.container = existing;
16
+ } else {
17
+ this.container = document.createElement("div");
18
+ this.container.className = `toastify-pro-container ${this.defaultOptions.position}`;
19
+ document.body.appendChild(this.container);
79
20
  }
80
21
 
81
- show(message, type = "dark", opts = {}) {
82
- const options = { ...this.defaultOptions, ...opts };
83
-
84
- const toast = document.createElement("div");
85
- toast.className = `toastify-pro ${type}`;
86
- toast.innerText = message.substring(0, options.maxLength);
87
-
88
- if (options.allowClose) {
89
- const closeBtn = document.createElement("span");
90
- closeBtn.className = "close-btn";
91
- closeBtn.innerHTML = "×";
92
- closeBtn.onclick = () => this.removeToast(toast);
93
- toast.appendChild(closeBtn);
94
- }
95
-
96
- this.container.appendChild(toast);
22
+ this.injectStyles();
23
+ }
97
24
 
98
- // show animation
99
- setTimeout(() => toast.classList.add("show"), 50);
100
-
101
- // auto remove
102
- if (options.timeout > 0) {
103
- setTimeout(() => this.removeToast(toast), options.timeout);
104
- }
25
+ injectStyles() {
26
+ if (document.getElementById("toastify-pro-styles")) return; // load once
27
+ const style = document.createElement("style");
28
+ style.id = "toastify-pro-styles";
29
+ style.textContent = `
30
+ .toastify-pro-container {
31
+ position: fixed;
32
+ z-index: 9999;
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: 10px;
36
+ pointer-events: none;
105
37
  }
38
+ .toastify-pro-container.top-left { top: 20px; left: 20px; align-items: flex-start; }
39
+ .toastify-pro-container.top-right { top: 20px; right: 20px; align-items: flex-end; }
40
+ .toastify-pro-container.bottom-left { bottom: 20px; left: 20px; align-items: flex-start; }
41
+ .toastify-pro-container.bottom-right { bottom: 20px; right: 20px; align-items: flex-end; }
42
+ .toastify-pro-container.top-center { top: 20px; left: 50%; transform: translateX(-50%); }
43
+ .toastify-pro-container.bottom-center { bottom: 150px; left: 50%; transform: translateX(-50%); }
106
44
 
107
- removeToast(toast) {
108
- toast.classList.remove("show");
109
- setTimeout(() => toast.remove(), 300);
45
+ .toastify-pro {
46
+ min-width: 220px;
47
+ max-width: 320px;
48
+ padding: 12px 18px;
49
+ border-radius: 20px;
50
+ font-size: 14px;
51
+ font-family: sans-serif;
52
+ color: white;
53
+ opacity: 0;
54
+ transform: translateY(20px);
55
+ transition: all 0.3s ease;
56
+ pointer-events: auto;
57
+ position: relative;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: space-between;
61
+ gap: 12px;
110
62
  }
63
+ .toastify-pro.show { opacity: 1; transform: translateY(0); }
64
+ .toastify-pro.success { background: rgba(76, 175, 80, 0.9); }
65
+ .toastify-pro.error { background: rgba(244, 67, 54, 0.9); }
66
+ .toastify-pro.info { background: rgba(33, 150, 243, 0.9); }
67
+ .toastify-pro.warning { background: rgba(255, 152, 0, 0.9); }
68
+ .toastify-pro.dark { background: rgba(0,0,0,0.85); }
69
+ .toastify-pro.light { background: rgba(255,255,255,0.9); color: #000; }
111
70
 
112
- success(msg, opts) {
113
- this.show(msg, "success", opts);
71
+ .toastify-pro .toast-content {
72
+ flex: 1;
73
+ padding-right: 8px;
74
+ line-height: 1.4;
114
75
  }
115
- error(msg, opts) {
116
- this.show(msg, "error", opts);
76
+
77
+ .toastify-pro .close-btn {
78
+ cursor: pointer;
79
+ font-size: 18px;
80
+ color: inherit;
81
+ opacity: 0.8;
82
+ padding: 2px 4px;
83
+ border-radius: 3px;
84
+ transition: opacity 0.2s ease, background-color 0.2s ease;
85
+ flex-shrink: 0;
86
+ min-width: 20px;
87
+ text-align: center;
88
+ line-height: 1;
117
89
  }
118
- info(msg, opts) {
119
- this.show(msg, "info", opts);
90
+ .toastify-pro .close-btn:hover {
91
+ opacity: 1;
92
+ background-color: rgba(0,0,0,0.1);
120
93
  }
121
- warning(msg, opts) {
122
- this.show(msg, "warning", opts);
94
+ .toastify-pro.light .close-btn:hover {
95
+ background-color: rgba(0,0,0,0.05);
123
96
  }
124
- dark(msg, opts) {
125
- this.show(msg, "dark", opts);
97
+ `;
98
+ document.head.appendChild(style);
99
+ }
100
+
101
+ show(message, type = "dark", opts = {}) {
102
+ const options = { ...this.defaultOptions, ...opts };
103
+
104
+ const toast = document.createElement("div");
105
+ toast.className = `toastify-pro ${type}`;
106
+
107
+ // Create content wrapper for the message
108
+ const contentWrapper = document.createElement("div");
109
+ contentWrapper.className = "toast-content";
110
+ contentWrapper.textContent = message.substring(0, options.maxLength);
111
+ toast.appendChild(contentWrapper);
112
+
113
+ if (options.allowClose) {
114
+ const closeBtn = document.createElement("span");
115
+ closeBtn.className = "close-btn";
116
+ closeBtn.innerHTML = "×";
117
+ closeBtn.onclick = () => this.removeToast(toast);
118
+ toast.appendChild(closeBtn);
126
119
  }
127
- light(msg, opts) {
128
- this.show(msg, "light", opts);
120
+
121
+ this.container.appendChild(toast);
122
+
123
+ // show animation
124
+ setTimeout(() => toast.classList.add("show"), 50);
125
+
126
+ // auto remove
127
+ if (options.timeout > 0) {
128
+ setTimeout(() => this.removeToast(toast), options.timeout);
129
129
  }
130
- }
130
+ }
131
+
132
+ removeToast(toast) {
133
+ toast.classList.remove("show");
134
+ setTimeout(() => toast.remove(), 300);
135
+ }
136
+
137
+ success(msg, opts) {
138
+ this.show(msg, "success", opts);
139
+ }
140
+ error(msg, opts) {
141
+ this.show(msg, "error", opts);
142
+ }
143
+ info(msg, opts) {
144
+ this.show(msg, "info", opts);
145
+ }
146
+ warning(msg, opts) {
147
+ this.show(msg, "warning", opts);
148
+ }
149
+ dark(msg, opts) {
150
+ this.show(msg, "dark", opts);
151
+ }
152
+ light(msg, opts) {
153
+ this.show(msg, "light", opts);
154
+ }
155
+ }
156
+
157
+ export default ToastifyPro;