@r01al/simple-toast 1.0.1 → 1.0.3
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/dist/simple-toast.cjs.js +104 -242
- package/dist/simple-toast.esm.js +104 -242
- package/dist/simple-toast.min.js +1 -1
- package/dist/simple-toast.umd.js +104 -242
- package/package.json +1 -1
package/dist/simple-toast.esm.js
CHANGED
|
@@ -1,234 +1,79 @@
|
|
|
1
|
+
function _defineProperty(e, r, t) {
|
|
2
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
3
|
+
value: t,
|
|
4
|
+
enumerable: true,
|
|
5
|
+
configurable: true,
|
|
6
|
+
writable: true
|
|
7
|
+
}) : e[r] = t, e;
|
|
8
|
+
}
|
|
9
|
+
function ownKeys(e, r) {
|
|
10
|
+
var t = Object.keys(e);
|
|
11
|
+
if (Object.getOwnPropertySymbols) {
|
|
12
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
13
|
+
r && (o = o.filter(function (r) {
|
|
14
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
15
|
+
})), t.push.apply(t, o);
|
|
16
|
+
}
|
|
17
|
+
return t;
|
|
18
|
+
}
|
|
19
|
+
function _objectSpread2(e) {
|
|
20
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
21
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
22
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
|
|
23
|
+
_defineProperty(e, r, t[r]);
|
|
24
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
25
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
return e;
|
|
29
|
+
}
|
|
30
|
+
function _toPrimitive(t, r) {
|
|
31
|
+
if ("object" != typeof t || !t) return t;
|
|
32
|
+
var e = t[Symbol.toPrimitive];
|
|
33
|
+
if (void 0 !== e) {
|
|
34
|
+
var i = e.call(t, r);
|
|
35
|
+
if ("object" != typeof i) return i;
|
|
36
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
37
|
+
}
|
|
38
|
+
return ("string" === r ? String : Number)(t);
|
|
39
|
+
}
|
|
40
|
+
function _toPropertyKey(t) {
|
|
41
|
+
var i = _toPrimitive(t, "string");
|
|
42
|
+
return "symbol" == typeof i ? i : i + "";
|
|
43
|
+
}
|
|
44
|
+
|
|
1
45
|
const defaultConfig = {
|
|
2
|
-
position: '
|
|
46
|
+
position: 'bc',
|
|
3
47
|
duration: 3000,
|
|
4
48
|
theme: 'l',
|
|
5
49
|
dismissible: true,
|
|
6
50
|
maxToasts: 10
|
|
7
51
|
};
|
|
8
|
-
|
|
9
|
-
let globalConfig = { ...defaultConfig };
|
|
10
|
-
|
|
52
|
+
let globalConfig = _objectSpread2({}, defaultConfig);
|
|
11
53
|
function configure(config) {
|
|
12
|
-
globalConfig = {
|
|
54
|
+
globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), config);
|
|
13
55
|
}
|
|
14
|
-
|
|
15
56
|
function getConfig() {
|
|
16
57
|
return globalConfig;
|
|
17
58
|
}
|
|
18
59
|
|
|
19
60
|
let stylesInjected = false;
|
|
20
|
-
|
|
21
61
|
function injectStyles() {
|
|
22
62
|
if (stylesInjected) return;
|
|
23
|
-
|
|
24
63
|
const style = document.createElement('style');
|
|
25
64
|
style.setAttribute('data-r01st', '');
|
|
26
|
-
style.textContent =
|
|
27
|
-
.r01st-container {
|
|
28
|
-
position: fixed;
|
|
29
|
-
z-index: 9999;
|
|
30
|
-
pointer-events: none;
|
|
31
|
-
padding: 16px;
|
|
32
|
-
}
|
|
33
|
-
.r01st-container[data-position="tl"] {
|
|
34
|
-
top: 0;
|
|
35
|
-
left: 0;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.r01st-container[data-position="tc"] {
|
|
39
|
-
top: 0;
|
|
40
|
-
left: 50%;
|
|
41
|
-
margin-left: -210px;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.r01st-container[data-position="tr"] {
|
|
45
|
-
top: 0;
|
|
46
|
-
right: 0;
|
|
47
|
-
}
|
|
48
|
-
.r01st-container[data-position="ml"] {
|
|
49
|
-
top: 50%;
|
|
50
|
-
left: 0;
|
|
51
|
-
margin-top: -50px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.r01st-container[data-position="mc"] {
|
|
55
|
-
top: 50%;
|
|
56
|
-
left: 50%;
|
|
57
|
-
margin-left: -210px;
|
|
58
|
-
margin-top: -50px;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.r01st-container[data-position="mr"] {
|
|
62
|
-
top: 50%;
|
|
63
|
-
right: 0;
|
|
64
|
-
margin-top: -50px;
|
|
65
|
-
}
|
|
66
|
-
.r01st-container[data-position="bl"] {
|
|
67
|
-
bottom: 0;
|
|
68
|
-
left: 0;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.r01st-container[data-position="bc"] {
|
|
72
|
-
bottom: 0;
|
|
73
|
-
left: 50%;
|
|
74
|
-
margin-left: -210px;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.r01st-container[data-position="br"] {
|
|
78
|
-
bottom: 0;
|
|
79
|
-
right: 0;
|
|
80
|
-
}
|
|
81
|
-
.r01st {
|
|
82
|
-
pointer-events: auto;
|
|
83
|
-
position: relative;
|
|
84
|
-
min-width: 280px;
|
|
85
|
-
max-width: 420px;
|
|
86
|
-
padding: 16px;
|
|
87
|
-
margin-bottom: 16px;
|
|
88
|
-
border-radius: 8px;
|
|
89
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
90
|
-
font-size: 14px;
|
|
91
|
-
line-height: 1.5;
|
|
92
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
93
|
-
color: #ffffff;
|
|
94
|
-
opacity: 0;
|
|
95
|
-
transition: opacity 0.3s ease, margin-top 0.3s ease;
|
|
96
|
-
margin-top: -20px;
|
|
97
|
-
}
|
|
98
|
-
.r01st-show {
|
|
99
|
-
opacity: 1;
|
|
100
|
-
margin-top: 0;
|
|
101
|
-
}
|
|
102
|
-
.r01st-container[data-theme="l"] .r01st-success {
|
|
103
|
-
background-color: #10b981;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.r01st-container[data-theme="l"] .r01st-error {
|
|
107
|
-
background-color: #ef4444;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.r01st-container[data-theme="l"] .r01st-info {
|
|
111
|
-
background-color: #3b82f6;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.r01st-container[data-theme="l"] .r01st-warning {
|
|
115
|
-
background-color: #f59e0b;
|
|
116
|
-
}
|
|
117
|
-
.r01st-container[data-theme="d"] .r01st-success {
|
|
118
|
-
background-color: #059669;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.r01st-container[data-theme="d"] .r01st-error {
|
|
122
|
-
background-color: #dc2626;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.r01st-container[data-theme="d"] .r01st-info {
|
|
126
|
-
background-color: #2563eb;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.r01st-container[data-theme="d"] .r01st-warning {
|
|
130
|
-
background-color: #d97706;
|
|
131
|
-
}
|
|
132
|
-
.r01st-content {
|
|
133
|
-
display: inline-block;
|
|
134
|
-
width: 100%;
|
|
135
|
-
vertical-align: top;
|
|
136
|
-
padding-right: 30px;
|
|
137
|
-
}
|
|
138
|
-
.r01st-icon {
|
|
139
|
-
display: inline-block;
|
|
140
|
-
width: 20px;
|
|
141
|
-
height: 20px;
|
|
142
|
-
vertical-align: middle;
|
|
143
|
-
margin-right: 12px;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.r01st-icon svg {
|
|
147
|
-
width: 100%;
|
|
148
|
-
height: 100%;
|
|
149
|
-
display: block;
|
|
150
|
-
}
|
|
151
|
-
.r01st-message {
|
|
152
|
-
display: inline-block;
|
|
153
|
-
vertical-align: middle;
|
|
154
|
-
word-wrap: break-word;
|
|
155
|
-
max-width: calc(100% - 32px);
|
|
156
|
-
}
|
|
157
|
-
.r01st-close {
|
|
158
|
-
position: absolute;
|
|
159
|
-
top: 16px;
|
|
160
|
-
right: 16px;
|
|
161
|
-
background: transparent;
|
|
162
|
-
border: none;
|
|
163
|
-
color: #ffffff;
|
|
164
|
-
font-size: 24px;
|
|
165
|
-
line-height: 1;
|
|
166
|
-
cursor: pointer;
|
|
167
|
-
padding: 0;
|
|
168
|
-
width: 24px;
|
|
169
|
-
height: 24px;
|
|
170
|
-
text-align: center;
|
|
171
|
-
border-radius: 4px;
|
|
172
|
-
opacity: 0.8;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.r01st-close:hover {
|
|
176
|
-
background-color: rgba(255, 255, 255, 0.2);
|
|
177
|
-
opacity: 1;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.r01st-close:focus {
|
|
181
|
-
outline: 2px solid #ffffff;
|
|
182
|
-
outline-offset: 2px;
|
|
183
|
-
}
|
|
184
|
-
.r01st-container[data-position^="b"] .r01st {
|
|
185
|
-
margin-top: 0;
|
|
186
|
-
margin-bottom: -20px;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.r01st-container[data-position^="b"] .r01st-show {
|
|
190
|
-
margin-bottom: 16px;
|
|
191
|
-
}
|
|
192
|
-
@media (max-width: 480px) {
|
|
193
|
-
.r01st-container {
|
|
194
|
-
left: 0 !important;
|
|
195
|
-
right: 0 !important;
|
|
196
|
-
margin-left: 0 !important;
|
|
197
|
-
padding: 8px;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.r01st {
|
|
201
|
-
min-width: auto;
|
|
202
|
-
max-width: none;
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
@media (prefers-reduced-motion: reduce) {
|
|
206
|
-
.r01st {
|
|
207
|
-
transition: opacity 0.2s;
|
|
208
|
-
margin-top: 0;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
@media print {
|
|
212
|
-
.r01st-container {
|
|
213
|
-
display: none;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
`;
|
|
217
|
-
|
|
65
|
+
style.textContent = "\n.r01st-container {\n position: fixed;\n z-index: 9999;\n pointer-events: none;\n padding: 16px;\n}\n.r01st-container[data-position=\"tl\"] {\n top: 0;\n left: 0;\n}\n\n.r01st-container[data-position=\"tc\"] {\n top: 0;\n left: 50%;\n margin-left: -210px;\n}\n\n.r01st-container[data-position=\"tr\"] {\n top: 0;\n right: 0;\n}\n.r01st-container[data-position=\"ml\"] {\n top: 50%;\n left: 0;\n margin-top: -50px;\n}\n\n.r01st-container[data-position=\"mc\"] {\n top: 50%;\n left: 50%;\n margin-left: -210px;\n margin-top: -50px;\n}\n\n.r01st-container[data-position=\"mr\"] {\n top: 50%;\n right: 0;\n margin-top: -50px;\n}\n.r01st-container[data-position=\"bl\"] {\n bottom: 0;\n left: 0;\n}\n\n.r01st-container[data-position=\"bc\"] {\n bottom: 0;\n left: 50%;\n margin-left: -210px;\n}\n\n.r01st-container[data-position=\"br\"] {\n bottom: 0;\n right: 0;\n}\n.r01st {\n pointer-events: auto;\n position: relative;\n min-width: 280px;\n max-width: 420px;\n padding: 16px;\n margin-bottom: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n font-size: 14px;\n line-height: 1.5;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n color: #ffffff;\n opacity: 0;\n transition: opacity 0.3s ease, margin-top 0.3s ease;\n margin-top: -20px;\n}\n.r01st-show {\n opacity: 1;\n margin-top: 0;\n}\n.r01st-container[data-theme=\"l\"] .r01st-success {\n background-color: #10b981;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-error {\n background-color: #ef4444;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-info {\n background-color: #3b82f6;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-warning {\n background-color: #f59e0b;\n}\n.r01st-container[data-theme=\"d\"] .r01st-success {\n background-color: #059669;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-error {\n background-color: #dc2626;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-info {\n background-color: #2563eb;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-warning {\n background-color: #d97706;\n}\n.r01st-content {\n display: inline-block;\n width: 100%;\n vertical-align: top;\n}\n.r01st-table {\n width: 100%;\n border-collapse: collapse;\n}\n.r01st-cell {\n vertical-align: middle;\n}\n.r01st-message-cell {\n width: 100%;\n}\n.r01st-close-cell {\n width: 1%;\n padding-left: 8px;\n}\n.r01st-icon {\n display: inline-block;\n width: 20px;\n height: 20px;\n vertical-align: middle;\n margin-right: 12px;\n}\n\n.r01st-icon svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.r01st-message {\n display: inline-block;\n vertical-align: middle;\n word-wrap: break-word;\n max-width: calc(100% - 32px);\n}\n.r01st-close {\n background: transparent;\n border: none;\n color: #ffffff;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 4px;\n opacity: 0.8;\n}\n\n.r01st-close:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1;\n}\n\n.r01st-close:focus {\n outline: 2px solid #ffffff;\n outline-offset: 2px;\n}\n.r01st-container[data-position^=\"b\"] .r01st {\n margin-top: 0;\n margin-bottom: -20px;\n}\n\n.r01st-container[data-position^=\"b\"] .r01st-show {\n margin-bottom: 16px;\n}\n@media (max-width: 480px) {\n .r01st-container {\n left: 0 !important;\n right: 0 !important;\n margin-left: 0 !important;\n padding: 8px;\n }\n\n .r01st {\n min-width: auto;\n max-width: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .r01st {\n transition: opacity 0.2s;\n margin-top: 0;\n }\n}\n@media print {\n .r01st-container {\n display: none;\n }\n}\n";
|
|
218
66
|
document.head.appendChild(style);
|
|
219
67
|
stylesInjected = true;
|
|
220
68
|
}
|
|
221
69
|
|
|
222
70
|
let container = null;
|
|
223
|
-
|
|
224
71
|
function getContainer(position, theme) {
|
|
225
72
|
injectStyles();
|
|
226
|
-
|
|
227
73
|
if (container && (container.getAttribute('data-position') !== position || container.getAttribute('data-theme') !== theme)) {
|
|
228
74
|
container.parentNode.removeChild(container);
|
|
229
75
|
container = null;
|
|
230
76
|
}
|
|
231
|
-
|
|
232
77
|
if (!container) {
|
|
233
78
|
container = document.createElement('div');
|
|
234
79
|
container.className = 'r01st-container';
|
|
@@ -239,10 +84,8 @@ function getContainer(position, theme) {
|
|
|
239
84
|
container.setAttribute('data-theme', theme);
|
|
240
85
|
document.body.appendChild(container);
|
|
241
86
|
}
|
|
242
|
-
|
|
243
87
|
return container;
|
|
244
88
|
}
|
|
245
|
-
|
|
246
89
|
function cleanupContainer(activeCount) {
|
|
247
90
|
if (container && activeCount === 0) {
|
|
248
91
|
container.parentNode.removeChild(container);
|
|
@@ -265,32 +108,39 @@ function createToastElement(message, type, dismissible, className, id, onClose)
|
|
|
265
108
|
toastEl.className = 'r01st r01st-' + type + (className ? ' ' + className : '');
|
|
266
109
|
toastEl.setAttribute('role', 'alert');
|
|
267
110
|
toastEl.setAttribute('data-toast-id', id);
|
|
268
|
-
|
|
269
111
|
const content = document.createElement('div');
|
|
270
112
|
content.className = 'r01st-content';
|
|
271
|
-
|
|
272
113
|
const icon = document.createElement('span');
|
|
273
114
|
icon.className = 'r01st-icon';
|
|
274
115
|
icon.innerHTML = getIcon(type);
|
|
275
116
|
icon.setAttribute('aria-hidden', 'true');
|
|
276
117
|
content.appendChild(icon);
|
|
277
|
-
|
|
278
118
|
const messageEl = document.createElement('span');
|
|
279
119
|
messageEl.className = 'r01st-message';
|
|
280
120
|
messageEl.textContent = message;
|
|
281
121
|
content.appendChild(messageEl);
|
|
282
|
-
|
|
283
|
-
toastEl.appendChild(content);
|
|
284
|
-
|
|
285
122
|
if (dismissible) {
|
|
123
|
+
const layoutTable = document.createElement('table');
|
|
124
|
+
layoutTable.className = 'r01st-table';
|
|
125
|
+
const layoutRow = document.createElement('tr');
|
|
126
|
+
const messageCell = document.createElement('td');
|
|
127
|
+
messageCell.className = 'r01st-cell r01st-message-cell';
|
|
128
|
+
messageCell.appendChild(content);
|
|
129
|
+
const closeCell = document.createElement('td');
|
|
130
|
+
closeCell.className = 'r01st-cell r01st-close-cell';
|
|
286
131
|
const closeBtn = document.createElement('button');
|
|
287
132
|
closeBtn.className = 'r01st-close';
|
|
288
133
|
closeBtn.innerHTML = '×';
|
|
289
134
|
closeBtn.setAttribute('aria-label', 'Close notification');
|
|
290
135
|
closeBtn.onclick = onClose;
|
|
291
|
-
|
|
136
|
+
closeCell.appendChild(closeBtn);
|
|
137
|
+
layoutRow.appendChild(messageCell);
|
|
138
|
+
layoutRow.appendChild(closeCell);
|
|
139
|
+
layoutTable.appendChild(layoutRow);
|
|
140
|
+
toastEl.appendChild(layoutTable);
|
|
141
|
+
} else {
|
|
142
|
+
toastEl.appendChild(content);
|
|
292
143
|
}
|
|
293
|
-
|
|
294
144
|
return toastEl;
|
|
295
145
|
}
|
|
296
146
|
|
|
@@ -299,10 +149,8 @@ function showToast(element) {
|
|
|
299
149
|
element.className = element.className + ' r01st-show';
|
|
300
150
|
});
|
|
301
151
|
}
|
|
302
|
-
|
|
303
152
|
function hideToast(element, callback) {
|
|
304
153
|
element.className = element.className.replace(' r01st-show', '');
|
|
305
|
-
|
|
306
154
|
setTimeout(() => {
|
|
307
155
|
if (element.parentNode) {
|
|
308
156
|
element.parentNode.removeChild(element);
|
|
@@ -313,59 +161,52 @@ function hideToast(element, callback) {
|
|
|
313
161
|
|
|
314
162
|
let toastCounter = 0;
|
|
315
163
|
const activeToasts = new Map();
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
const config = {
|
|
319
|
-
const {
|
|
320
|
-
|
|
164
|
+
function createToast(message) {
|
|
165
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
166
|
+
const config = _objectSpread2(_objectSpread2({}, getConfig()), options);
|
|
167
|
+
const {
|
|
168
|
+
position,
|
|
169
|
+
duration,
|
|
170
|
+
dismissible,
|
|
171
|
+
theme,
|
|
172
|
+
className,
|
|
173
|
+
type = 'info'
|
|
174
|
+
} = config;
|
|
321
175
|
const id = ++toastCounter;
|
|
322
|
-
|
|
323
176
|
if (activeToasts.size >= getConfig().maxToasts) {
|
|
324
177
|
const firstToast = activeToasts.keys().next().value;
|
|
325
178
|
dismissToast(firstToast);
|
|
326
179
|
}
|
|
327
|
-
|
|
328
180
|
const container = getContainer(position, theme);
|
|
329
|
-
|
|
330
181
|
const handleClose = () => dismissToast(id);
|
|
331
|
-
|
|
332
182
|
const toastEl = createToastElement(message, type, dismissible, className, id, handleClose);
|
|
333
|
-
|
|
334
183
|
container.appendChild(toastEl);
|
|
335
|
-
|
|
336
184
|
showToast(toastEl);
|
|
337
|
-
|
|
338
185
|
const toastData = {
|
|
339
186
|
element: toastEl,
|
|
340
187
|
timeoutId: null
|
|
341
188
|
};
|
|
342
|
-
|
|
343
189
|
if (duration > 0) {
|
|
344
190
|
toastData.timeoutId = setTimeout(() => dismissToast(id), duration);
|
|
345
191
|
}
|
|
346
|
-
|
|
347
192
|
activeToasts.set(id, toastData);
|
|
348
|
-
|
|
349
193
|
return id;
|
|
350
194
|
}
|
|
351
|
-
|
|
352
195
|
function dismissToast(id) {
|
|
353
196
|
const toastData = activeToasts.get(id);
|
|
354
197
|
if (!toastData) return;
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
198
|
+
const {
|
|
199
|
+
element,
|
|
200
|
+
timeoutId
|
|
201
|
+
} = toastData;
|
|
358
202
|
if (timeoutId) {
|
|
359
203
|
clearTimeout(timeoutId);
|
|
360
204
|
}
|
|
361
|
-
|
|
362
205
|
activeToasts.delete(id);
|
|
363
|
-
|
|
364
206
|
hideToast(element, () => {
|
|
365
207
|
cleanupContainer(activeToasts.size);
|
|
366
208
|
});
|
|
367
209
|
}
|
|
368
|
-
|
|
369
210
|
function dismissAllToasts() {
|
|
370
211
|
const ids = Array.from(activeToasts.keys());
|
|
371
212
|
ids.forEach(id => dismissToast(id));
|
|
@@ -377,15 +218,36 @@ function dismissAllToasts() {
|
|
|
377
218
|
* @param {Object} options - Toast options
|
|
378
219
|
* @returns {number} Toast ID
|
|
379
220
|
*/
|
|
380
|
-
function toast(message
|
|
221
|
+
function toast(message) {
|
|
222
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
381
223
|
return createToast(message, options);
|
|
382
224
|
}
|
|
383
225
|
|
|
384
226
|
// Shorthand methods
|
|
385
|
-
toast.success = (message
|
|
386
|
-
|
|
387
|
-
toast
|
|
388
|
-
|
|
227
|
+
toast.success = function (message) {
|
|
228
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
229
|
+
return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
230
|
+
type: 'success'
|
|
231
|
+
}));
|
|
232
|
+
};
|
|
233
|
+
toast.error = function (message) {
|
|
234
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
235
|
+
return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
236
|
+
type: 'error'
|
|
237
|
+
}));
|
|
238
|
+
};
|
|
239
|
+
toast.info = function (message) {
|
|
240
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
241
|
+
return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
242
|
+
type: 'info'
|
|
243
|
+
}));
|
|
244
|
+
};
|
|
245
|
+
toast.warning = function (message) {
|
|
246
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
247
|
+
return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
|
|
248
|
+
type: 'warning'
|
|
249
|
+
}));
|
|
250
|
+
};
|
|
389
251
|
|
|
390
252
|
// Export dismiss methods
|
|
391
253
|
toast.dismiss = dismissToast;
|
package/dist/simple-toast.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).SimpleToast={})}(this,function(n){"use strict";
|
|
1
|
+
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).SimpleToast={})}(this,function(n){"use strict";function t(n,t,e){return(t=function(n){var t=function(n,t){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var r=e.call(n,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(n)}(n,"string");return"symbol"==typeof t?t:t+""}(t))in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function e(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable})),e.push.apply(e,r)}return e}function r(n){for(var r=1;arguments.length>r;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?e(Object(o),!0).forEach(function(e){t(n,e,o[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):e(Object(o)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(o,t))})}return n}let o=r({},{position:"bc",duration:3e3,theme:"l",dismissible:!0,maxToasts:10});function i(){return o}let a=!1;let s=null;function l(n,t){return function(){if(a)return;const n=document.createElement("style");n.setAttribute("data-r01st",""),n.textContent='\n.r01st-container {\n position: fixed;\n z-index: 9999;\n pointer-events: none;\n padding: 16px;\n}\n.r01st-container[data-position="tl"] {\n top: 0;\n left: 0;\n}\n\n.r01st-container[data-position="tc"] {\n top: 0;\n left: 50%;\n margin-left: -210px;\n}\n\n.r01st-container[data-position="tr"] {\n top: 0;\n right: 0;\n}\n.r01st-container[data-position="ml"] {\n top: 50%;\n left: 0;\n margin-top: -50px;\n}\n\n.r01st-container[data-position="mc"] {\n top: 50%;\n left: 50%;\n margin-left: -210px;\n margin-top: -50px;\n}\n\n.r01st-container[data-position="mr"] {\n top: 50%;\n right: 0;\n margin-top: -50px;\n}\n.r01st-container[data-position="bl"] {\n bottom: 0;\n left: 0;\n}\n\n.r01st-container[data-position="bc"] {\n bottom: 0;\n left: 50%;\n margin-left: -210px;\n}\n\n.r01st-container[data-position="br"] {\n bottom: 0;\n right: 0;\n}\n.r01st {\n pointer-events: auto;\n position: relative;\n min-width: 280px;\n max-width: 420px;\n padding: 16px;\n margin-bottom: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n font-size: 14px;\n line-height: 1.5;\n font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n color: #ffffff;\n opacity: 0;\n transition: opacity 0.3s ease, margin-top 0.3s ease;\n margin-top: -20px;\n}\n.r01st-show {\n opacity: 1;\n margin-top: 0;\n}\n.r01st-container[data-theme="l"] .r01st-success {\n background-color: #10b981;\n}\n\n.r01st-container[data-theme="l"] .r01st-error {\n background-color: #ef4444;\n}\n\n.r01st-container[data-theme="l"] .r01st-info {\n background-color: #3b82f6;\n}\n\n.r01st-container[data-theme="l"] .r01st-warning {\n background-color: #f59e0b;\n}\n.r01st-container[data-theme="d"] .r01st-success {\n background-color: #059669;\n}\n\n.r01st-container[data-theme="d"] .r01st-error {\n background-color: #dc2626;\n}\n\n.r01st-container[data-theme="d"] .r01st-info {\n background-color: #2563eb;\n}\n\n.r01st-container[data-theme="d"] .r01st-warning {\n background-color: #d97706;\n}\n.r01st-content {\n display: inline-block;\n width: 100%;\n vertical-align: top;\n}\n.r01st-table {\n width: 100%;\n border-collapse: collapse;\n}\n.r01st-cell {\n vertical-align: middle;\n}\n.r01st-message-cell {\n width: 100%;\n}\n.r01st-close-cell {\n width: 1%;\n padding-left: 8px;\n}\n.r01st-icon {\n display: inline-block;\n width: 20px;\n height: 20px;\n vertical-align: middle;\n margin-right: 12px;\n}\n\n.r01st-icon svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.r01st-message {\n display: inline-block;\n vertical-align: middle;\n word-wrap: break-word;\n max-width: calc(100% - 32px);\n}\n.r01st-close {\n background: transparent;\n border: none;\n color: #ffffff;\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 4px;\n opacity: 0.8;\n}\n\n.r01st-close:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1;\n}\n\n.r01st-close:focus {\n outline: 2px solid #ffffff;\n outline-offset: 2px;\n}\n.r01st-container[data-position^="b"] .r01st {\n margin-top: 0;\n margin-bottom: -20px;\n}\n\n.r01st-container[data-position^="b"] .r01st-show {\n margin-bottom: 16px;\n}\n@media (max-width: 480px) {\n .r01st-container {\n left: 0 !important;\n right: 0 !important;\n margin-left: 0 !important;\n padding: 8px;\n }\n\n .r01st {\n min-width: auto;\n max-width: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .r01st {\n transition: opacity 0.2s;\n margin-top: 0;\n }\n}\n@media print {\n .r01st-container {\n display: none;\n }\n}\n',document.head.appendChild(n),a=!0}(),!s||s.getAttribute("data-position")===n&&s.getAttribute("data-theme")===t||(s.parentNode.removeChild(s),s=null),s||(s=document.createElement("div"),s.className="r01st-container",s.setAttribute("role","region"),s.setAttribute("aria-label","Notifications"),s.setAttribute("aria-live","polite"),s.setAttribute("data-position",n),s.setAttribute("data-theme",t),document.body.appendChild(s)),s}let c=0;const d=new Map;function p(n){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const e=r(r({},i()),t),{position:o,duration:a,dismissible:s,theme:p,className:m,type:f="info"}=e,g=++c;if(d.size>=i().maxToasts){u(d.keys().next().value)}const b=l(o,p),h=function(n,t,e,r,o,i){const a=document.createElement("div");a.className="r01st r01st-"+t+(r?" "+r:""),a.setAttribute("role","alert"),a.setAttribute("data-toast-id",o);const s=document.createElement("div");s.className="r01st-content";const l=document.createElement("span");l.className="r01st-icon",l.innerHTML=function(n){const t={success:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>',error:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>',info:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>',warning:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>'};return t[n]||t.info}(t),l.setAttribute("aria-hidden","true"),s.appendChild(l);const c=document.createElement("span");if(c.className="r01st-message",c.textContent=n,s.appendChild(c),e){const n=document.createElement("table");n.className="r01st-table";const t=document.createElement("tr"),e=document.createElement("td");e.className="r01st-cell r01st-message-cell",e.appendChild(s);const r=document.createElement("td");r.className="r01st-cell r01st-close-cell";const o=document.createElement("button");o.className="r01st-close",o.innerHTML="×",o.setAttribute("aria-label","Close notification"),o.onclick=i,r.appendChild(o),t.appendChild(e),t.appendChild(r),n.appendChild(t),a.appendChild(n)}else a.appendChild(s);return a}(n,f,s,m,g,()=>u(g));var v;b.appendChild(h),v=h,requestAnimationFrame(()=>{v.className=v.className+" r01st-show"});const x={element:h,timeoutId:null};return a>0&&(x.timeoutId=setTimeout(()=>u(g),a)),d.set(g,x),g}function u(n){const t=d.get(n);if(!t)return;const{element:e,timeoutId:r}=t;r&&clearTimeout(r),d.delete(n),function(n,t){n.className=n.className.replace(" r01st-show",""),setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n),t&&t()},300)}(e,()=>{var n;n=d.size,s&&0===n&&(s.parentNode.removeChild(s),s=null)})}function m(n){return p(n,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{})}m.success=function(n){return m(n,r(r({},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),{},{type:"success"}))},m.error=function(n){return m(n,r(r({},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),{},{type:"error"}))},m.info=function(n){return m(n,r(r({},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),{},{type:"info"}))},m.warning=function(n){return m(n,r(r({},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),{},{type:"warning"}))},m.dismiss=u,m.dismissAll=function(){Array.from(d.keys()).forEach(n=>u(n))},n.configure=function(n){o=r(r({},o),n)},n.default=m,n.toast=m,Object.defineProperty(n,"__esModule",{value:!0})});
|