minisnackbar 1.0.1 → 2.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 +46 -40
- package/dist/index.d.ts +55 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/minisnackbar.cjs +381 -0
- package/dist/minisnackbar.cjs.map +1 -0
- package/dist/minisnackbar.esm.js +368 -380
- package/dist/minisnackbar.esm.js.map +1 -1
- package/dist/minisnackbar.js +377 -385
- package/dist/minisnackbar.js.map +1 -1
- package/dist/minisnackbar.min.cjs +12 -0
- package/dist/minisnackbar.min.cjs.map +1 -0
- package/dist/minisnackbar.min.js +10 -10
- package/dist/minisnackbar.min.js.map +1 -1
- package/package.json +20 -12
- package/src/index.d.ts +0 -35
package/dist/minisnackbar.js
CHANGED
|
@@ -1,389 +1,381 @@
|
|
|
1
|
-
(function (factory) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Snackbar = {}));
|
|
5
|
+
})(this, (function (exports) { 'use strict';
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
/*
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
/*
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
color: var(--mini-snackbar-btn-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
// Module exports
|
|
379
|
-
if (typeof module !== 'undefined' && module.exports) {
|
|
380
|
-
module.exports = Snackbar;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
// Make available globally in browser
|
|
384
|
-
if (typeof window !== 'undefined') {
|
|
385
|
-
window.Snackbar = Snackbar;
|
|
386
|
-
}
|
|
7
|
+
/**
|
|
8
|
+
* MiniSnackbar - A simple vanilla JavaScript snackbar/toast library
|
|
9
|
+
*
|
|
10
|
+
* @version 2.0.0
|
|
11
|
+
* @author Shanto Islam <shantoislamdev@gmail.com>
|
|
12
|
+
* @license MIT
|
|
13
|
+
* @description A lightweight, zero-dependency snackbar library with Material Design integration
|
|
14
|
+
* @repository https://github.com/shantoislamdev/minisnackbar
|
|
15
|
+
* @homepage https://github.com/shantoislamdev/minisnackbar#readme
|
|
16
|
+
*/
|
|
17
|
+
// Snackbar class
|
|
18
|
+
class Snackbar {
|
|
19
|
+
static init(options = {}) {
|
|
20
|
+
if (this._initialized)
|
|
21
|
+
return;
|
|
22
|
+
if (typeof document === 'undefined' || !document.body) {
|
|
23
|
+
console.error('Snackbar: DOM is not available');
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
if (options.transitionDuration && typeof options.transitionDuration === 'number') {
|
|
27
|
+
this._transitionDuration = options.transitionDuration;
|
|
28
|
+
}
|
|
29
|
+
if (document.getElementById('mini-snackbar')) {
|
|
30
|
+
this._initialized = true;
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
if (!document.getElementById('mini-snackbar-styles')) {
|
|
34
|
+
const style = document.createElement('style');
|
|
35
|
+
style.id = 'mini-snackbar-styles';
|
|
36
|
+
style.textContent = `
|
|
37
|
+
.mini-snackbar {
|
|
38
|
+
/* Positioning */
|
|
39
|
+
position: fixed;
|
|
40
|
+
z-index: 1000;
|
|
41
|
+
left: 50%;
|
|
42
|
+
bottom: 30px;
|
|
43
|
+
transform: translateX(-50%) translateY(100%);
|
|
44
|
+
|
|
45
|
+
/* Sizing */
|
|
46
|
+
min-width: 250px;
|
|
47
|
+
max-width: 90%;
|
|
48
|
+
|
|
49
|
+
/* Layout */
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: space-between;
|
|
53
|
+
gap: 8px;
|
|
54
|
+
padding: 0.875rem 1rem;
|
|
55
|
+
|
|
56
|
+
/* Visibility */
|
|
57
|
+
visibility: hidden;
|
|
58
|
+
|
|
59
|
+
/* Theming */
|
|
60
|
+
background-color: var(--mini-snackbar-bg, var(--md-sys-color-inverse-surface, rgba(255, 255, 255, 1)));
|
|
61
|
+
color: var(--mini-snackbar-text, var(--md-sys-color-inverse-on-surface, rgba(27, 27, 27, 1)));
|
|
62
|
+
border: var(--mini-snackbar-border, none);
|
|
63
|
+
font-family: var(--mini-snackbar-font-family, inherit);
|
|
64
|
+
font-size: 0.875rem;
|
|
65
|
+
text-align: left;
|
|
66
|
+
border-radius: var(--mini-snackbar-radius, 1rem);
|
|
67
|
+
box-shadow: var(--mini-snackbar-shadow, 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12));
|
|
68
|
+
|
|
69
|
+
/* Animation */
|
|
70
|
+
transition: var(--mini-snackbar-transition, transform ${this._transitionDuration}ms ease-in-out);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.mini-snackbar.show {
|
|
74
|
+
visibility: visible;
|
|
75
|
+
transform: translateX(-50%) translateY(0);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Material Component Action Button */
|
|
79
|
+
.mini-snackbar .mini-snackbar-action {
|
|
80
|
+
flex-shrink: 0;
|
|
81
|
+
padding: 0.5rem 1rem;
|
|
82
|
+
margin: -0.5rem -0.5rem -0.5rem 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Fallback Action Button (when Material Components unavailable) */
|
|
86
|
+
.mini-snackbar md-text-button[data-fallback] {
|
|
87
|
+
display: inline-block;
|
|
88
|
+
flex-shrink: 0;
|
|
89
|
+
padding: 0.5rem 1rem;
|
|
90
|
+
margin: -0.5rem -0.5rem -0.5rem 0;
|
|
91
|
+
border: none;
|
|
92
|
+
background: var(--mini-snackbar-btn-bg, transparent);
|
|
93
|
+
font-size: inherit;
|
|
94
|
+
font-family: inherit;
|
|
95
|
+
font-weight: 500;
|
|
96
|
+
letter-spacing: 0.0892857143em;
|
|
97
|
+
text-transform: uppercase;
|
|
98
|
+
color: var(--mini-snackbar-btn-text, inherit);
|
|
99
|
+
cursor: pointer;
|
|
100
|
+
user-select: none;
|
|
101
|
+
border-radius: var(--mini-snackbar-btn-radius, 1rem);
|
|
102
|
+
transition: opacity 0.2s ease;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.mini-snackbar md-text-button[data-fallback]:hover {
|
|
106
|
+
opacity: var(--mini-snackbar-btn-hover-opacity, 0.8);
|
|
107
|
+
outline: var(--mini-snackbar-btn-hover-outline, 2px solid var(--mini-snackbar-btn-text, inherit));
|
|
108
|
+
outline-offset: var(--mini-snackbar-btn-outline-offset, 2px);
|
|
109
|
+
background-color: var(--mini-snackbar-btn-hover-bg, transparent);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.mini-snackbar md-text-button[data-fallback]:focus {
|
|
113
|
+
outline: var(--mini-snackbar-btn-focus-outline, 2px solid var(--mini-snackbar-btn-text, inherit));
|
|
114
|
+
outline-offset: var(--mini-snackbar-btn-outline-offset, 2px);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Mobile responsive */
|
|
118
|
+
@media (max-width: 600px) {
|
|
119
|
+
.mini-snackbar {
|
|
120
|
+
bottom: 90px;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Accessibility: Reduced motion */
|
|
125
|
+
@media (prefers-reduced-motion: reduce) {
|
|
126
|
+
.mini-snackbar {
|
|
127
|
+
transition: opacity 0.15s ease;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
`;
|
|
131
|
+
document.head.appendChild(style);
|
|
132
|
+
}
|
|
133
|
+
const snackbar = document.createElement('div');
|
|
134
|
+
snackbar.id = 'mini-snackbar';
|
|
135
|
+
snackbar.className = 'mini-snackbar';
|
|
136
|
+
snackbar.setAttribute('role', 'alert');
|
|
137
|
+
snackbar.setAttribute('aria-live', 'assertive');
|
|
138
|
+
snackbar.setAttribute('aria-atomic', 'true');
|
|
139
|
+
const snackbarText = document.createElement('span');
|
|
140
|
+
snackbarText.className = 'mini-snackbar-text';
|
|
141
|
+
snackbar.appendChild(snackbarText);
|
|
142
|
+
document.body.appendChild(snackbar);
|
|
143
|
+
this._initialized = true;
|
|
144
|
+
}
|
|
145
|
+
static destroy() {
|
|
146
|
+
this.hideCurrent();
|
|
147
|
+
this.clearQueue();
|
|
148
|
+
const snackbar = document.getElementById('mini-snackbar');
|
|
149
|
+
if (snackbar)
|
|
150
|
+
snackbar.remove();
|
|
151
|
+
const styles = document.getElementById('mini-snackbar-styles');
|
|
152
|
+
if (styles)
|
|
153
|
+
styles.remove();
|
|
154
|
+
this._state = 'idle';
|
|
155
|
+
this._isShowing = false;
|
|
156
|
+
this._currentActionHandler = null;
|
|
157
|
+
this._currentTimeout = null;
|
|
158
|
+
this._initialized = false;
|
|
159
|
+
}
|
|
160
|
+
static getTransitionDuration() {
|
|
161
|
+
const snackbar = document.getElementById('mini-snackbar');
|
|
162
|
+
if (!snackbar)
|
|
163
|
+
return this._transitionDuration;
|
|
164
|
+
try {
|
|
165
|
+
const computedStyle = window.getComputedStyle(snackbar);
|
|
166
|
+
const duration = computedStyle.transitionDuration;
|
|
167
|
+
if (duration && duration !== '0s') {
|
|
168
|
+
const value = parseFloat(duration);
|
|
169
|
+
return duration.includes('ms') ? value : value * 1000;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
catch (e) {
|
|
173
|
+
console.warn('Snackbar: Could not read transition duration from CSS', e);
|
|
174
|
+
}
|
|
175
|
+
return this._transitionDuration;
|
|
176
|
+
}
|
|
177
|
+
static add(message, action = null, duration = 3000) {
|
|
178
|
+
if (!this._initialized) {
|
|
179
|
+
console.warn('Snackbar: Not initialized. Call Snackbar.init() first.');
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
if (typeof message !== 'string' || message.trim() === '') {
|
|
183
|
+
console.warn('Snackbar: Message must be a non-empty string');
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
if (action !== null &&
|
|
187
|
+
(typeof action !== 'object' ||
|
|
188
|
+
typeof action.text !== 'string' ||
|
|
189
|
+
typeof action.handler !== 'function')) {
|
|
190
|
+
console.warn('Snackbar: Action must be an object with "text" (string) and "handler" (function) properties');
|
|
191
|
+
return;
|
|
192
|
+
}
|
|
193
|
+
if (typeof duration !== 'number' || duration <= 0) {
|
|
194
|
+
console.warn('Snackbar: Duration must be a positive number');
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
197
|
+
this._queue.push({ message, action, duration });
|
|
198
|
+
if (this._state === 'idle')
|
|
199
|
+
this.showNext();
|
|
200
|
+
}
|
|
201
|
+
static _cleanupAction() {
|
|
202
|
+
const snackbar = document.getElementById('mini-snackbar');
|
|
203
|
+
if (!snackbar)
|
|
204
|
+
return;
|
|
205
|
+
const actionButton = snackbar.querySelector('.mini-snackbar-action');
|
|
206
|
+
if (actionButton && this._currentActionHandler) {
|
|
207
|
+
actionButton.removeEventListener('click', this._currentActionHandler);
|
|
208
|
+
this._currentActionHandler = null;
|
|
209
|
+
actionButton.remove();
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
static _showSnackbar(message, action, duration, onHide = null) {
|
|
213
|
+
const snackbar = document.getElementById('mini-snackbar');
|
|
214
|
+
if (!snackbar) {
|
|
215
|
+
console.error('Snackbar: Snackbar element not found. Ensure init() has been called.');
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
this._state = 'showing';
|
|
219
|
+
this._isShowing = true;
|
|
220
|
+
const snackbarText = snackbar.querySelector('.mini-snackbar-text');
|
|
221
|
+
if (snackbarText) {
|
|
222
|
+
snackbarText.textContent = message;
|
|
223
|
+
}
|
|
224
|
+
if (action) {
|
|
225
|
+
const actionButton = document.createElement('md-text-button');
|
|
226
|
+
actionButton.classList.add('mini-snackbar-action');
|
|
227
|
+
// Fallback for when Material Components are not available
|
|
228
|
+
if (customElements.get('md-text-button') === undefined) {
|
|
229
|
+
actionButton.setAttribute('data-fallback', '');
|
|
230
|
+
}
|
|
231
|
+
actionButton.textContent = action.text;
|
|
232
|
+
this._currentActionHandler = () => {
|
|
233
|
+
action.handler();
|
|
234
|
+
this._hideSnackbar(onHide);
|
|
235
|
+
};
|
|
236
|
+
actionButton.addEventListener('click', this._currentActionHandler);
|
|
237
|
+
snackbar.appendChild(actionButton);
|
|
238
|
+
}
|
|
239
|
+
snackbar.classList.add('show');
|
|
240
|
+
this._currentTimeout = setTimeout(() => {
|
|
241
|
+
this._hideSnackbar(onHide);
|
|
242
|
+
}, duration);
|
|
243
|
+
}
|
|
244
|
+
static _hideSnackbar(onHide = null) {
|
|
245
|
+
if (this._currentTimeout) {
|
|
246
|
+
clearTimeout(this._currentTimeout);
|
|
247
|
+
this._currentTimeout = null;
|
|
248
|
+
}
|
|
249
|
+
this._state = 'transitioning';
|
|
250
|
+
const snackbar = document.getElementById('mini-snackbar');
|
|
251
|
+
if (snackbar) {
|
|
252
|
+
snackbar.classList.remove('show');
|
|
253
|
+
}
|
|
254
|
+
this._cleanupAction();
|
|
255
|
+
// Wait for CSS transition to complete
|
|
256
|
+
const transitionDuration = this.getTransitionDuration();
|
|
257
|
+
setTimeout(() => {
|
|
258
|
+
this._isShowing = false;
|
|
259
|
+
this._state = 'idle';
|
|
260
|
+
if (onHide)
|
|
261
|
+
onHide();
|
|
262
|
+
}, transitionDuration);
|
|
263
|
+
}
|
|
264
|
+
static show(message, action = null, duration = 3000) {
|
|
265
|
+
if (!this._initialized) {
|
|
266
|
+
console.warn('Snackbar: Not initialized. Call Snackbar.init() first.');
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
if (typeof message !== 'string' || message.trim() === '') {
|
|
270
|
+
console.warn('Snackbar: Message must be a non-empty string');
|
|
271
|
+
return;
|
|
272
|
+
}
|
|
273
|
+
if (action !== null &&
|
|
274
|
+
(typeof action !== 'object' ||
|
|
275
|
+
typeof action.text !== 'string' ||
|
|
276
|
+
typeof action.handler !== 'function')) {
|
|
277
|
+
console.warn('Snackbar: Action must be an object with "text" (string) and "handler" (function) properties');
|
|
278
|
+
return;
|
|
279
|
+
}
|
|
280
|
+
if (typeof duration !== 'number' || duration <= 0) {
|
|
281
|
+
console.warn('Snackbar: Duration must be a positive number');
|
|
282
|
+
return;
|
|
283
|
+
}
|
|
284
|
+
// Queue message if currently transitioning
|
|
285
|
+
if (this._state === 'transitioning') {
|
|
286
|
+
this.add(message, action, duration);
|
|
287
|
+
return;
|
|
288
|
+
}
|
|
289
|
+
// Interrupt current snackbar if showing
|
|
290
|
+
if (this._isShowing) {
|
|
291
|
+
this._state = 'transitioning';
|
|
292
|
+
if (this._currentTimeout) {
|
|
293
|
+
clearTimeout(this._currentTimeout);
|
|
294
|
+
this._currentTimeout = null;
|
|
295
|
+
}
|
|
296
|
+
const snackbar = document.getElementById('mini-snackbar');
|
|
297
|
+
if (snackbar) {
|
|
298
|
+
snackbar.classList.remove('show');
|
|
299
|
+
}
|
|
300
|
+
this._cleanupAction();
|
|
301
|
+
const transitionDuration = this.getTransitionDuration();
|
|
302
|
+
setTimeout(() => {
|
|
303
|
+
this._isShowing = false;
|
|
304
|
+
this._state = 'idle';
|
|
305
|
+
this._showSnackbar(message, action, duration);
|
|
306
|
+
}, transitionDuration);
|
|
307
|
+
}
|
|
308
|
+
else {
|
|
309
|
+
this._showSnackbar(message, action, duration);
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
static showNext() {
|
|
313
|
+
if (this._queue.length === 0) {
|
|
314
|
+
this._isShowing = false;
|
|
315
|
+
this._state = 'idle';
|
|
316
|
+
return;
|
|
317
|
+
}
|
|
318
|
+
const item = this._queue.shift();
|
|
319
|
+
if (item) {
|
|
320
|
+
const { message, action, duration } = item;
|
|
321
|
+
this._showSnackbar(message, action, duration, () => {
|
|
322
|
+
setTimeout(() => this.showNext(), 200);
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
static clearQueue() {
|
|
327
|
+
this._queue = [];
|
|
328
|
+
}
|
|
329
|
+
static hideCurrent() {
|
|
330
|
+
if (this._isShowing && this._state !== 'transitioning') {
|
|
331
|
+
this._hideSnackbar();
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
static isInitialized() {
|
|
335
|
+
return this._initialized;
|
|
336
|
+
}
|
|
337
|
+
// Getters/setters for testing
|
|
338
|
+
static get queue() {
|
|
339
|
+
return this._queue;
|
|
340
|
+
}
|
|
341
|
+
static set queue(value) {
|
|
342
|
+
this._queue = value;
|
|
343
|
+
}
|
|
344
|
+
static get isShowing() {
|
|
345
|
+
return this._isShowing;
|
|
346
|
+
}
|
|
347
|
+
static set isShowing(value) {
|
|
348
|
+
this._isShowing = value;
|
|
349
|
+
}
|
|
350
|
+
static get currentTimeout() {
|
|
351
|
+
return this._currentTimeout;
|
|
352
|
+
}
|
|
353
|
+
static set currentTimeout(value) {
|
|
354
|
+
this._currentTimeout = value;
|
|
355
|
+
}
|
|
356
|
+
static get state() {
|
|
357
|
+
return this._state;
|
|
358
|
+
}
|
|
359
|
+
static set state(value) {
|
|
360
|
+
this._state = value;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
Snackbar._queue = [];
|
|
364
|
+
Snackbar._isShowing = false;
|
|
365
|
+
Snackbar._currentTimeout = null;
|
|
366
|
+
Snackbar._state = 'idle';
|
|
367
|
+
Snackbar._currentActionHandler = null;
|
|
368
|
+
Snackbar._transitionDuration = 250;
|
|
369
|
+
Snackbar._initialized = false;
|
|
370
|
+
// Make available globally in browser for UMD builds
|
|
371
|
+
if (typeof window !== 'undefined') {
|
|
372
|
+
window.Snackbar = Snackbar;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
exports.Snackbar = Snackbar;
|
|
376
|
+
exports.default = Snackbar;
|
|
377
|
+
|
|
378
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
387
379
|
|
|
388
380
|
}));
|
|
389
381
|
//# sourceMappingURL=minisnackbar.js.map
|