@t007/toast 0.0.23 → 0.0.25
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 +80 -15
- package/dist/index.css +15 -10
- package/dist/index.d.ts +60 -128
- package/dist/index.global.js +115 -161
- package/dist/index.js +105 -155
- package/package.json +3 -2
package/dist/index.global.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
(() => {
|
|
3
|
-
//
|
|
3
|
+
// ../../../sia-reactor/dist/chunk-IBAPWB27.js
|
|
4
4
|
function clamp(min = 0, val, max = Infinity) {
|
|
5
5
|
return Math.min(Math.max(val, min), max);
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
//
|
|
8
|
+
// ../../../sia-reactor/dist/chunk-RI45W4O6.js
|
|
9
9
|
function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
|
|
10
10
|
return assignEl(el, props, dataset, styles), el;
|
|
11
11
|
}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
//
|
|
25
|
+
// ../../../sia-reactor/dist/chunk-3OT72G7R.js
|
|
26
26
|
function onAllMethods(owner, callback, skipOwn = true, nested = false) {
|
|
27
27
|
let proto = owner;
|
|
28
28
|
while (proto && proto !== Object.prototype) {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
});
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
//
|
|
43
|
+
// ../../../sia-reactor/dist/chunk-EZ4VRGYI.js
|
|
44
44
|
var CTX = {
|
|
45
45
|
/** Flag indicating whether the application is running in development mode. */
|
|
46
46
|
isDevEnv: "undefined" !== typeof process ? process.env.NODE_ENV !== "production" : true,
|
|
@@ -56,7 +56,9 @@
|
|
|
56
56
|
return "object" === typeof obj && obj !== null && (arraycheck ? !Array.isArray(obj) : true);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
// ../utils/dist/
|
|
59
|
+
// ../utils/dist/chunk-N5KX6IW4.js
|
|
60
|
+
var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable='true'],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
|
|
61
|
+
var isInteractive = (target) => target instanceof HTMLElement && target.matches(INTERACTIVE_SELECTOR);
|
|
60
62
|
var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
|
|
61
63
|
function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
|
|
62
64
|
w.t007 ??= {}, w.t007._resourceCache ??= {};
|
|
@@ -85,6 +87,9 @@
|
|
|
85
87
|
});
|
|
86
88
|
return w.t007._resourceCache[src];
|
|
87
89
|
}
|
|
90
|
+
function isDef(val) {
|
|
91
|
+
return "undefined" !== typeof val;
|
|
92
|
+
}
|
|
88
93
|
function isSym(val) {
|
|
89
94
|
return "symbol" === typeof val;
|
|
90
95
|
}
|
|
@@ -110,8 +115,7 @@
|
|
|
110
115
|
}
|
|
111
116
|
}
|
|
112
117
|
if ("undefined" !== typeof window) {
|
|
113
|
-
window.t007 ??= {};
|
|
114
|
-
t007.VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
|
|
118
|
+
(window.t007 ??= {}).VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
|
|
115
119
|
window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
|
|
116
120
|
window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
|
|
117
121
|
window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
|
|
@@ -120,57 +124,62 @@
|
|
|
120
124
|
window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
|
|
121
125
|
}
|
|
122
126
|
|
|
123
|
-
// src/index.js
|
|
127
|
+
// src/js/index.js
|
|
124
128
|
var T007_Toast = class {
|
|
129
|
+
#constructed = false;
|
|
130
|
+
// to minimize updates
|
|
125
131
|
#autoCloseInterval;
|
|
126
132
|
#progressInterval;
|
|
127
133
|
#timeVisible = 0;
|
|
128
134
|
#isPaused = false;
|
|
129
135
|
#shouldUnPause;
|
|
130
136
|
queue = [];
|
|
131
|
-
|
|
137
|
+
inactive = true;
|
|
132
138
|
#visiblityChange = () => this.#shouldUnPause = document.visibilityState === "visible";
|
|
133
139
|
constructor(options) {
|
|
134
140
|
bindAllMethods(this);
|
|
135
|
-
this.opts =
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
!isNum(this.opts.delay) ? this.init() : this.queue.push(setTimeout(this.init, this.opts.delay));
|
|
141
|
+
this.opts = options;
|
|
142
|
+
t007.toasts.set(this.opts.id ??= uid(this.opts.groupId ??= "t007_toast_"), this);
|
|
143
|
+
!isNum(this.opts.delay) ? this.activate() : this.queue.push(setTimeout(this.activate, this.opts.delay));
|
|
139
144
|
this.update(this.opts);
|
|
140
145
|
}
|
|
141
|
-
|
|
142
|
-
this.toastElement = createEl("div", { className: "t007-toast"
|
|
146
|
+
activate() {
|
|
147
|
+
this.toastElement = createEl("div", { className: `t007-toast${this.scoped ? " t007-toast-scoped" : ""}`, id: this.opts.id, ariaAtomic: "true" }, { groupId: this.opts.groupId });
|
|
143
148
|
requestAnimationFrame(() => this.toastElement.classList.add("t007-toast-show"));
|
|
144
|
-
this.
|
|
149
|
+
this.inactive = false;
|
|
145
150
|
}
|
|
146
|
-
update(options) {
|
|
147
|
-
if (!options || !isObj(options)) return this.opts.id;
|
|
151
|
+
update(options, constructed = this.#constructed) {
|
|
152
|
+
if (!options || !isObj(options) || constructed && this.inactive) return this.opts.id;
|
|
148
153
|
try {
|
|
149
154
|
this.opts = { ...this.opts, ...options };
|
|
150
|
-
const run = () => Object.keys(options).forEach((key) => this[key] = options[key]);
|
|
155
|
+
const run = () => (Object.keys(options).forEach((key) => this[key] = options[key]), this.#constructed = true, !constructed && (this.position = this.opts.position));
|
|
151
156
|
!isNum(this.opts.delay) ? run() : this.queue.push(setTimeout(run, this.opts.delay));
|
|
152
157
|
this.opts.delay = null;
|
|
153
158
|
} catch (err) {
|
|
154
|
-
console.error("toast update failed:", err);
|
|
159
|
+
console.error("t007 toast update failed:", err);
|
|
155
160
|
}
|
|
156
161
|
return this.opts.id;
|
|
157
162
|
}
|
|
158
163
|
play = () => setTimeout(() => this.#isPaused = false);
|
|
159
164
|
pause = () => this.#isPaused = true;
|
|
165
|
+
get rootElement() {
|
|
166
|
+
return this.opts.rootElement ?? document.body;
|
|
167
|
+
}
|
|
160
168
|
set rootElement(value) {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
169
|
+
if (this.#constructed) this.position = this.opts.position;
|
|
170
|
+
}
|
|
171
|
+
get scoped() {
|
|
172
|
+
return this.rootElement !== document.body;
|
|
164
173
|
}
|
|
165
174
|
set type(value) {
|
|
166
175
|
this.toastElement.classList.remove("info", "success", "error", "warning");
|
|
167
176
|
value && this.toastElement.classList.add(value);
|
|
168
177
|
this.toastElement.role = value === "error" || value === "warning" ? "alert" : "status";
|
|
169
178
|
this.toastElement.ariaLive = value === "error" || value === "warning" ? "assertive" : "polite";
|
|
170
|
-
if (value) this.icon = this.opts.icon;
|
|
179
|
+
if (value && this.#constructed) this.icon = this.opts.icon;
|
|
171
180
|
}
|
|
172
181
|
set bodyHTML(value) {
|
|
173
|
-
this.toastElement.querySelectorAll("
|
|
182
|
+
for (const el of this.toastElement.querySelectorAll(":scope > *:not(.t007-toast-cancel-button)")) el.remove();
|
|
174
183
|
this.toastElement.insertAdjacentHTML("afterbegin", `${value ? isFunc(value) ? value() : value : ""}`);
|
|
175
184
|
}
|
|
176
185
|
set render(value) {
|
|
@@ -196,12 +205,7 @@
|
|
|
196
205
|
const image = () => this.toastElement.querySelector(".t007-toast-image");
|
|
197
206
|
if (value) {
|
|
198
207
|
this._setUpBodyHTML();
|
|
199
|
-
this.toastElement.querySelector(".t007-toast-image-wrapper").prepend(
|
|
200
|
-
image() || createEl("img", {
|
|
201
|
-
className: "t007-toast-image",
|
|
202
|
-
alt: "toast-image"
|
|
203
|
-
})
|
|
204
|
-
);
|
|
208
|
+
this.toastElement.querySelector(".t007-toast-image-wrapper").prepend(image() || createEl("img", { className: "t007-toast-image", alt: "toast-image" }));
|
|
205
209
|
const img = image();
|
|
206
210
|
img.src = value;
|
|
207
211
|
img.onload = img.onerror = () => img.dataset.loaded = img.complete && img.naturalWidth > 0;
|
|
@@ -215,7 +219,7 @@
|
|
|
215
219
|
const icon = () => this.toastElement.querySelector(".t007-toast-icon:not(.t007-toast-loader)");
|
|
216
220
|
if (value) {
|
|
217
221
|
this._setUpBodyHTML();
|
|
218
|
-
this.toastElement.querySelector(".t007-toast-image-wrapper").
|
|
222
|
+
this.toastElement.querySelector(".t007-toast-image-wrapper").append(icon() || createEl("span", { className: "t007-toast-icon" }));
|
|
219
223
|
const icn = icon();
|
|
220
224
|
icn.innerHTML = icn.dataset.icon = this.icon;
|
|
221
225
|
} else icon()?.remove();
|
|
@@ -224,49 +228,25 @@
|
|
|
224
228
|
const loader = () => this.toastElement.querySelector(".t007-toast-loader");
|
|
225
229
|
if (value) {
|
|
226
230
|
this._setUpBodyHTML();
|
|
227
|
-
this.toastElement.querySelectorAll(".t007-toast-icon:not(.t007-toast-loader)")
|
|
228
|
-
this.toastElement.querySelector(".t007-toast-image-wrapper").
|
|
229
|
-
loader() || createEl("span", {
|
|
230
|
-
className: "t007-toast-icon t007-toast-loader"
|
|
231
|
-
})
|
|
232
|
-
);
|
|
231
|
+
for (const i of this.toastElement.querySelectorAll(".t007-toast-icon:not(.t007-toast-loader)")) i.remove();
|
|
232
|
+
this.toastElement.querySelector(".t007-toast-image-wrapper").append(loader() || createEl("span", { className: "t007-toast-icon t007-toast-loader" }));
|
|
233
233
|
loader().innerHTML = isStr(value) ? value : t007.TOAST_ICONS.loading;
|
|
234
234
|
} else {
|
|
235
235
|
loader()?.remove();
|
|
236
|
-
this.icon = this.opts.icon;
|
|
236
|
+
if (this.#constructed) this.icon = this.opts.icon;
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
239
|
set closeButton(value) {
|
|
240
240
|
const btn = this.toastElement.querySelector(".t007-toast-cancel-button");
|
|
241
|
-
if (value)
|
|
242
|
-
this.toastElement.appendChild(
|
|
243
|
-
btn || createEl("button", {
|
|
244
|
-
title: "Close",
|
|
245
|
-
ariaLabel: "Close notification",
|
|
246
|
-
className: "t007-toast-cancel-button",
|
|
247
|
-
innerHTML: "×",
|
|
248
|
-
onclick: this._remove
|
|
249
|
-
})
|
|
250
|
-
);
|
|
241
|
+
if (value) this.toastElement.append(btn || createEl("button", { title: "Close", ariaLabel: "Close notification", className: "t007-toast-cancel-button", innerHTML: "×", onclick: this.remove }));
|
|
251
242
|
else btn?.remove();
|
|
252
243
|
}
|
|
253
244
|
get animation() {
|
|
245
|
+
const p = this.opts.position;
|
|
254
246
|
if (this.opts.animation === true || this.opts.animation === "slide")
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
case "bottom-right":
|
|
259
|
-
return "slide-left";
|
|
260
|
-
case "top-center":
|
|
261
|
-
case "center-center":
|
|
262
|
-
case "bottom-center":
|
|
263
|
-
return this.opts.position === "top-center" ? "slide-down" : "slide-up";
|
|
264
|
-
case "top-left":
|
|
265
|
-
case "center-left":
|
|
266
|
-
case "bottom-left":
|
|
267
|
-
default:
|
|
268
|
-
return "slide-right";
|
|
269
|
-
}
|
|
247
|
+
if (p === "top-right" || p === "center-right" || p === "bottom-right") return "slide-left";
|
|
248
|
+
else if (p === "top-center" || p === "center-center" || p === "bottom-center") return p === "top-center" ? "slide-down" : "slide-up";
|
|
249
|
+
else return "slide-right";
|
|
270
250
|
return this.opts.animation;
|
|
271
251
|
}
|
|
272
252
|
set animation(value) {
|
|
@@ -278,6 +258,7 @@
|
|
|
278
258
|
set autoClose(value) {
|
|
279
259
|
cancelAnimationFrame(this.#autoCloseInterval);
|
|
280
260
|
this.#timeVisible = 0;
|
|
261
|
+
this.nprogress = void 0;
|
|
281
262
|
let lastTime;
|
|
282
263
|
const loop = (time) => {
|
|
283
264
|
if (this.#shouldUnPause) {
|
|
@@ -291,7 +272,7 @@
|
|
|
291
272
|
if (!this.#isPaused) {
|
|
292
273
|
this.#timeVisible += time - lastTime;
|
|
293
274
|
this.onTimeUpdate?.(this.#timeVisible);
|
|
294
|
-
if (isNum(this.autoClose) && this.#timeVisible >= this.autoClose) return this.
|
|
275
|
+
if (isNum(this.autoClose) && this.#timeVisible >= this.autoClose) return this.remove("smooth", true);
|
|
295
276
|
}
|
|
296
277
|
lastTime = time;
|
|
297
278
|
this.#autoCloseInterval = requestAnimationFrame(loop);
|
|
@@ -299,20 +280,21 @@
|
|
|
299
280
|
if (value) this.#autoCloseInterval = requestAnimationFrame(loop);
|
|
300
281
|
}
|
|
301
282
|
set position(value) {
|
|
302
|
-
|
|
303
|
-
const container = this.
|
|
283
|
+
if (!this.#constructed) return;
|
|
284
|
+
const currContainer = this.toastElement.parentElement, container = this.rootElement.querySelector(`:scope > .t007-toast-container[data-position="${value}"]`) || this._createContainer(value);
|
|
304
285
|
container[this.opts.newestOnTop ? "prepend" : "append"](this.toastElement);
|
|
305
|
-
|
|
286
|
+
this.toastElement.classList.toggle("t007-toast-scoped", this.scoped);
|
|
287
|
+
if (!(currContainer == null || currContainer.hasChildNodes())) currContainer.remove();
|
|
306
288
|
}
|
|
307
289
|
set closeOnClick(value) {
|
|
308
|
-
this.toastElement.onclick = value ? () => this.
|
|
290
|
+
this.toastElement.onclick = value ? () => this.remove() : null;
|
|
309
291
|
}
|
|
310
292
|
set hideProgressBar(value) {
|
|
311
293
|
this.toastElement.classList.toggle("progress", !value);
|
|
312
|
-
this.nprogress = 0;
|
|
294
|
+
this.nprogress = void 0;
|
|
313
295
|
cancelAnimationFrame(this.#progressInterval);
|
|
314
296
|
const loop = () => {
|
|
315
|
-
if (isNum(this.autoClose) && !this.#isPaused) this.nprogress =
|
|
297
|
+
if (isNum(this.autoClose) && !this.#isPaused) this.nprogress = void 0;
|
|
316
298
|
this.#progressInterval = requestAnimationFrame(loop);
|
|
317
299
|
};
|
|
318
300
|
if (!value) this.#progressInterval = requestAnimationFrame(loop);
|
|
@@ -320,7 +302,7 @@
|
|
|
320
302
|
get nprogress() {
|
|
321
303
|
return Number(this.toastElement.style.getProperty("--progress"));
|
|
322
304
|
}
|
|
323
|
-
set nprogress(value) {
|
|
305
|
+
set nprogress(value = 1 - this.#timeVisible / this.autoClose) {
|
|
324
306
|
this.toastElement.style.setProperty("--progress", value);
|
|
325
307
|
}
|
|
326
308
|
set pauseOnHover(value) {
|
|
@@ -335,7 +317,9 @@
|
|
|
335
317
|
this.toastElement.dataset.tag = value;
|
|
336
318
|
}
|
|
337
319
|
set renotify(value) {
|
|
338
|
-
|
|
320
|
+
if (value && this.opts.tag) {
|
|
321
|
+
for (const toast2 of t007.toasts.values()) if (toast2.opts.tag === this.opts.tag && toast2.opts.id !== this.opts.id) toast2.remove("instant");
|
|
322
|
+
}
|
|
339
323
|
}
|
|
340
324
|
get vibrate() {
|
|
341
325
|
return this.opts.vibrate === true ? t007.TOAST_VIBRATIONS[this.opts.type] || t007.TOAST_VIBRATIONS.info : this.opts.vibrate;
|
|
@@ -343,12 +327,10 @@
|
|
|
343
327
|
set vibrate(value) {
|
|
344
328
|
value && navigator?.vibrate?.(this.vibrate);
|
|
345
329
|
}
|
|
346
|
-
set
|
|
330
|
+
set limit(value) {
|
|
347
331
|
const toastsInContainer = [...this.toastElement?.parentElement?.children || []];
|
|
348
332
|
if (!toastsInContainer.length) return;
|
|
349
|
-
for (let i = 0; i < toastsInContainer.length - value; i++)
|
|
350
|
-
[...t007.toasts.values()].find((t) => t.toastElement === (this.opts.newestOnTop ? toastsInContainer[toastsInContainer.length - 1 - i] : toastsInContainer[i]))?._remove("instant");
|
|
351
|
-
}
|
|
333
|
+
for (let i = 0; i < toastsInContainer.length - value; i++) [...t007.toasts.values()].find((t) => t.toastElement === (this.opts.newestOnTop ? toastsInContainer[toastsInContainer.length - 1 - i] : toastsInContainer[i]))?.remove("instant");
|
|
352
334
|
}
|
|
353
335
|
set newestOnTop(value) {
|
|
354
336
|
this.toastElement?.parentElement?.[value ? "prepend" : "append"](this.toastElement);
|
|
@@ -361,7 +343,7 @@
|
|
|
361
343
|
_handleToastPointerStart(e) {
|
|
362
344
|
if (isStr(this._ptrType) && e.pointerType !== this._ptrType) return;
|
|
363
345
|
if (e.touches?.length > 1) return;
|
|
364
|
-
!e.target
|
|
346
|
+
!isInteractive(e.target) && this.toastElement.setPointerCapture(e.pointerId);
|
|
365
347
|
this.#isPaused = true;
|
|
366
348
|
this._ptrTicker = this._ptrDirSet = this._ptrDir = false;
|
|
367
349
|
this._ptrStartX = e.clientX ?? e.targetTouches[0]?.clientX;
|
|
@@ -389,34 +371,28 @@
|
|
|
389
371
|
_handleToastPointerUp(e) {
|
|
390
372
|
if (isStr(this._ptrType) && e.pointerType !== this._ptrType) return;
|
|
391
373
|
cancelAnimationFrame(this._ptrRAF);
|
|
392
|
-
if (Math.abs(this._ptrDeltaX) > this.toastElement.offsetWidth * (this.opts.dragToClosePercent.x ?? this.opts.dragToClosePercent / 100) || Math.abs(this._ptrDeltaY) > this.toastElement.offsetHeight * (this.opts.dragToClosePercent.y ?? this.opts.dragToClosePercent / 100)) return this.
|
|
374
|
+
if (Math.abs(this._ptrDeltaX) > this.toastElement.offsetWidth * ((this.opts.dragToClosePercent.x ?? this.opts.dragToClosePercent) / 100) || Math.abs(this._ptrDeltaY) > this.toastElement.offsetHeight * ((this.opts.dragToClosePercent.y ?? this.opts.dragToClosePercent) / 100)) return this.remove("instant");
|
|
393
375
|
this.#isPaused = this._ptrTicker = this._ptrDirSet = this._ptrDir = false;
|
|
394
376
|
this.toastElement.removeEventListener("pointermove", this._handleToastPointerMove, { passive: false });
|
|
395
|
-
this.toastElement.style.removeProperty(
|
|
396
|
-
this.toastElement.style.removeProperty("transform");
|
|
397
|
-
this.toastElement.style.removeProperty("opacity");
|
|
377
|
+
for (const prop of ["transition", "transform", "opacity"]) this.toastElement.style.removeProperty(prop);
|
|
398
378
|
}
|
|
399
|
-
|
|
400
|
-
if (!this.opts.isLoading) t007.toasts.delete(this.id);
|
|
401
|
-
this.queue
|
|
379
|
+
remove(manner = "smooth", timeElapsed = false) {
|
|
380
|
+
if (!this.opts.isLoading) t007.toasts.delete(this.opts.id);
|
|
381
|
+
for (const tid of this.queue) clearTimeout(tid);
|
|
402
382
|
document.removeEventListener("visibilitychange", this.#visiblityChange);
|
|
403
|
-
cancelAnimationFrame(this.#autoCloseInterval);
|
|
404
|
-
|
|
405
|
-
if (this.destroyed || manner === "instant" || !this.animation) this._cleanUpToast();
|
|
383
|
+
cancelAnimationFrame(this.#autoCloseInterval), cancelAnimationFrame(this.#progressInterval);
|
|
384
|
+
if (this.inactive || manner === "instant" || !this.animation) this._cleanUpToast();
|
|
406
385
|
else this.toastElement.onanimationend = this._cleanUpToast;
|
|
407
386
|
this.toastElement.classList.remove("t007-toast-show");
|
|
408
387
|
this.onClose?.(timeElapsed);
|
|
409
388
|
}
|
|
410
389
|
_createContainer(position) {
|
|
411
|
-
const container =
|
|
412
|
-
container.
|
|
413
|
-
|
|
414
|
-
container.dataset.position = position;
|
|
415
|
-
this.opts.rootElement?.append(container);
|
|
416
|
-
return container;
|
|
390
|
+
const container = createEl("div", { className: "t007-toast-container" }, { position });
|
|
391
|
+
container.style.setProperty("--t007-toast-container-position", !this.scoped ? "fixed" : "absolute");
|
|
392
|
+
return this.rootElement.appendChild(container);
|
|
417
393
|
}
|
|
418
394
|
_setUpBodyHTML() {
|
|
419
|
-
this.toastElement.querySelectorAll("
|
|
395
|
+
this.#constructed && this.toastElement.querySelectorAll(":scope > *:not(.t007-toast-image-wrapper, .t007-toast-body, .t007-toast-actions-wrapper, .t007-toast-cancel-button)").forEach((el) => el.remove());
|
|
420
396
|
const imageWrapper = () => this.toastElement.querySelector(".t007-toast-image-wrapper");
|
|
421
397
|
if (!imageWrapper()) this.toastElement.prepend(createEl("div", { className: "t007-toast-image-wrapper" }));
|
|
422
398
|
if (!this.toastElement.querySelector(".t007-toast-body")) imageWrapper().insertAdjacentElement("afterend", createEl("div", { className: "t007-toast-body" }));
|
|
@@ -425,46 +401,41 @@
|
|
|
425
401
|
const container = this.toastElement.parentElement;
|
|
426
402
|
this.toastElement.remove();
|
|
427
403
|
if (!container?.hasChildNodes()) container?.remove();
|
|
428
|
-
this.
|
|
404
|
+
this.inactive = true;
|
|
429
405
|
}
|
|
430
406
|
};
|
|
431
407
|
var toasting = {
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
408
|
+
isActive(_, id, _toast = t007.toasts.get(id)) {
|
|
409
|
+
return isDef(id) ? !!_toast && !_toast.inactive : t007.toasts.size > 0 && [...t007.toasts.values()].some((toast2) => !toast2.inactive);
|
|
410
|
+
},
|
|
411
|
+
update(base, id, options, _toast) {
|
|
412
|
+
const toast2 = _toast ?? t007.toasts.get(id);
|
|
413
|
+
if (toast2?.queue) for (const tid of toast2.queue) clearTimeout(tid);
|
|
414
|
+
return toast2 && (toast2.inactive ? base(options.render, { ...toast2.opts, id, ...options }) : toast2.update(options));
|
|
436
415
|
},
|
|
437
|
-
message: (base,
|
|
416
|
+
message: (base, getDefaults, action, renderOrId, options = {}) => {
|
|
438
417
|
options = { ...options, type: action === "warn" ? "warning" : action };
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
418
|
+
const id = options.id ?? renderOrId, toast2 = t007.toasts.get(id);
|
|
419
|
+
if (!toast2) return base(renderOrId, options);
|
|
420
|
+
const { autoClose, closeButton, closeOnClick, dragToClose } = getDefaults();
|
|
421
|
+
return base.update(id, { ...toast2.opts.isLoading ? { closeButton, closeOnClick, dragToClose } : null, ...options.id ? { render: renderOrId } : null, autoClose, ...options, isLoading: false }, toast2);
|
|
422
|
+
},
|
|
423
|
+
loading: (base, renderOrId, options = {}) => {
|
|
424
|
+
const id = options.id ?? renderOrId, toast2 = t007.toasts.get(id);
|
|
425
|
+
return (toast2 ? base.update : base)(id, { closeButton: false, closeOnClick: false, dragToClose: false, ...options.id ? { render: renderOrId } : null, autoClose: false, ...options, isLoading: options.isLoading || true, type: "" }, toast2 || void 0);
|
|
446
426
|
},
|
|
447
|
-
loading: (base, renderOrId, options = {}) => (t007.toasts.get(renderOrId) ? base.update : base)(renderOrId, {
|
|
448
|
-
autoClose: false,
|
|
449
|
-
closeButton: false,
|
|
450
|
-
closeOnClick: false,
|
|
451
|
-
dragToClose: false,
|
|
452
|
-
...options,
|
|
453
|
-
isLoading: options.isLoading || true,
|
|
454
|
-
type: ""
|
|
455
|
-
}),
|
|
456
427
|
promise(base, promise = new Promise((res, rej) => setTimeout(Math.round(Math.random()) ? res : rej, 3e3)), { pending, success, error } = {}) {
|
|
457
428
|
if (!promise || !isFunc(promise.then)) return console.error("toast.promise() requires a valid promise");
|
|
458
429
|
const NFC = (input, type) => isStr(input) ? { render: input, type } : isObj(input) ? { ...input, type } : { type };
|
|
459
|
-
const
|
|
460
|
-
const
|
|
430
|
+
const pendingCfg = NFC(pending);
|
|
431
|
+
const pendingId = base.loading(pendingCfg.render || "Promise pending...", { ...pendingCfg });
|
|
461
432
|
promise.then(
|
|
462
433
|
(response) => {
|
|
463
434
|
const successConfig = NFC(success || "Promise resolved", "success");
|
|
464
435
|
const { render, bodyHTML } = successConfig;
|
|
465
436
|
if (isFunc(render)) successConfig.render = (response2) => render(response2);
|
|
466
437
|
if (isFunc(bodyHTML)) successConfig.bodyHTML = (response2) => bodyHTML(response2);
|
|
467
|
-
base.success(
|
|
438
|
+
base.success(pendingId, successConfig);
|
|
468
439
|
return response;
|
|
469
440
|
},
|
|
470
441
|
(err) => {
|
|
@@ -472,55 +443,44 @@
|
|
|
472
443
|
const { render, bodyHTML } = errorConfig;
|
|
473
444
|
if (isFunc(render)) errorConfig.render = (err2) => render(err2);
|
|
474
445
|
if (isFunc(bodyHTML)) errorConfig.bodyHTML = (err2) => bodyHTML(err2);
|
|
475
|
-
base.error(
|
|
446
|
+
base.error(pendingId, errorConfig);
|
|
476
447
|
return Promise.reject(err);
|
|
477
448
|
}
|
|
478
449
|
);
|
|
479
450
|
return promise;
|
|
480
451
|
},
|
|
481
452
|
dismiss(base, id, manner, timeElapsed) {
|
|
482
|
-
return !
|
|
453
|
+
return !isDef(id) ? base.dismissAll() : t007.toasts.get(id)?.remove(manner, timeElapsed);
|
|
483
454
|
},
|
|
484
|
-
dismissAll(base,
|
|
485
|
-
t007.toasts.values()
|
|
455
|
+
dismissAll(base, groupId) {
|
|
456
|
+
for (const toast2 of t007.toasts.values()) (!isDef(groupId) ? true : toast2.opts.groupId === groupId) && toast2.remove();
|
|
486
457
|
},
|
|
487
|
-
doForAll(base, action, options,
|
|
488
|
-
t007.toasts.
|
|
458
|
+
doForAll(base, action, options, groupId) {
|
|
459
|
+
for (const toast2 of t007.toasts.values()) (!isDef(groupId) ? true : toast2.opts.groupId === groupId) && base[action]?.(toast2.opts.id, options);
|
|
489
460
|
},
|
|
490
|
-
getAll(base,
|
|
491
|
-
return t007.toasts.values().filter((toast2) => !
|
|
461
|
+
getAll(base, groupId) {
|
|
462
|
+
return t007.toasts.values().filter((toast2) => !isDef(groupId) ? true : toast2.opts.groupId === groupId);
|
|
492
463
|
}
|
|
493
464
|
};
|
|
494
|
-
var toaster = (defOptions = {},
|
|
495
|
-
const
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
}).id;
|
|
502
|
-
base.update = (id, options) => toasting.update(base, id, options);
|
|
503
|
-
["info", "success", "warn", "error"].forEach((action) => toasting.message(base, defaults, action));
|
|
504
|
-
base.loading = (render, options) => toasting.loading(base, render, options);
|
|
505
|
-
base.promise = (promise, options) => toasting.promise(base, promise, options);
|
|
465
|
+
var toaster = (defOptions = {}, groupId = "t007_toast_") => {
|
|
466
|
+
const getDefaults = () => ({ ...t007.TOAST_DEFAULT_OPTIONS, ...defOptions }), base = (render, options = {}, mayBeId = render?.startsWith?.(groupId)) => new T007_Toast({ ...getDefaults(), ...options, id: mayBeId ? render : options.id, render: mayBeId ? options.render : render, groupId }).opts.id;
|
|
467
|
+
base.isActive = (id) => toasting.isActive(base, id);
|
|
468
|
+
base.update = (id, options, _toast) => toasting.update(base, id, options, _toast);
|
|
469
|
+
for (const action of ["info", "success", "warn", "error"]) base[action] = (renderOrId, options) => toasting.message(base, getDefaults, action, renderOrId, options);
|
|
470
|
+
base.loading = (renderOrId, options) => toasting.loading(base, renderOrId, options);
|
|
471
|
+
base.promise = (promise, config) => toasting.promise(base, promise, config);
|
|
506
472
|
base.dismiss = (id, manner, timeElapsed) => toasting.dismiss(base, id, manner, timeElapsed);
|
|
507
|
-
base.dismissAll = (
|
|
508
|
-
base.doForAll = (action, options,
|
|
509
|
-
base.getAll = (
|
|
473
|
+
base.dismissAll = (groupId2) => toasting.dismissAll(base, groupId2);
|
|
474
|
+
base.doForAll = (action, options, groupId2) => toasting.doForAll(base, action, options, groupId2);
|
|
475
|
+
base.getAll = (groupId2) => toasting.getAll(base, groupId2);
|
|
510
476
|
return base;
|
|
511
477
|
};
|
|
512
478
|
var toast = toaster();
|
|
513
479
|
var index_default = toast;
|
|
514
480
|
if ("undefined" !== typeof window) {
|
|
515
|
-
t007.toast = toast;
|
|
516
|
-
t007.toasting = toasting;
|
|
517
|
-
t007.toaster = toaster;
|
|
481
|
+
t007.toast = toast, t007.toasting = toasting, t007.toaster = toaster;
|
|
518
482
|
t007.toasts = /* @__PURE__ */ new Map();
|
|
519
|
-
t007.TOAST_DEFAULT_OPTIONS ??= {};
|
|
520
|
-
t007.TOAST_DURATIONS ??= {};
|
|
521
|
-
t007.TOAST_VIBRATIONS ??= {};
|
|
522
|
-
t007.TOAST_ICONS ??= {};
|
|
523
|
-
t007.TOAST_DEFAULT_OPTIONS.rootElement ??= document.body;
|
|
483
|
+
t007.TOAST_DEFAULT_OPTIONS ??= {}, t007.TOAST_DURATIONS ??= {}, t007.TOAST_VIBRATIONS ??= {}, t007.TOAST_ICONS ??= {};
|
|
524
484
|
t007.TOAST_DEFAULT_OPTIONS.render ??= "";
|
|
525
485
|
t007.TOAST_DEFAULT_OPTIONS.type ??= "";
|
|
526
486
|
t007.TOAST_DEFAULT_OPTIONS.icon ??= true;
|
|
@@ -540,22 +500,16 @@
|
|
|
540
500
|
t007.TOAST_DEFAULT_OPTIONS.vibrate ??= false;
|
|
541
501
|
t007.TOAST_DEFAULT_OPTIONS.animation ??= true;
|
|
542
502
|
t007.TOAST_DEFAULT_OPTIONS.newestOnTop ??= false;
|
|
543
|
-
t007.TOAST_DEFAULT_OPTIONS.
|
|
544
|
-
t007.TOAST_DURATIONS.success ??= 2500;
|
|
545
|
-
t007.
|
|
546
|
-
t007.TOAST_DURATIONS.warning ??= 3500;
|
|
547
|
-
t007.TOAST_DURATIONS.info ??= 4e3;
|
|
548
|
-
t007.TOAST_VIBRATIONS.success ??= [100, 50, 100];
|
|
549
|
-
t007.TOAST_VIBRATIONS.warning ??= [300, 100, 300];
|
|
550
|
-
t007.TOAST_VIBRATIONS.error ??= [500, 200, 500];
|
|
551
|
-
t007.TOAST_VIBRATIONS.info ??= [200];
|
|
503
|
+
t007.TOAST_DEFAULT_OPTIONS.limit ??= 100;
|
|
504
|
+
t007.TOAST_DURATIONS.success ??= 2500, t007.TOAST_DURATIONS.error ??= 4500, t007.TOAST_DURATIONS.warning ??= 3500, t007.TOAST_DURATIONS.info ??= 4e3;
|
|
505
|
+
t007.TOAST_VIBRATIONS.success ??= [100, 50, 100], t007.TOAST_VIBRATIONS.warning ??= [300, 100, 300], t007.TOAST_VIBRATIONS.error ??= [500, 200, 500], t007.TOAST_VIBRATIONS.info ??= [200];
|
|
552
506
|
t007.TOAST_ICONS.success ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#27ae60"/><path fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 12l3 3l6-6"/></svg>`;
|
|
553
507
|
t007.TOAST_ICONS.error ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#e74c3c"/><path fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M8 8l8 8M16 8l-8 8"/></svg>`;
|
|
554
508
|
t007.TOAST_ICONS.warning ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 24 24"><path fill="#f1c40f" stroke="#f39c12" stroke-width="2" stroke-linejoin="round" d="M12 3L2.5 20.5A2 2 0 0 0 4.5 23h15a2 2 0 0 0 2-2.5L12 3z"/><circle cx="12" cy="17" r="1.5" fill="#fff"/><path fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8v6"/></svg>`;
|
|
555
509
|
t007.TOAST_ICONS.info ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#3498db"/><path fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 10v6"/><circle cx="12" cy="7" r="1.5" fill="#fff"/></svg>`;
|
|
556
510
|
t007.TOAST_ICONS.loading ??= `<svg class="no-css-fill" width="24" height="24" viewBox="0 0 16 16" fill="none" style="scale:0.75;"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="whitesmoke" d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8"/><path fill="gray" d="M7.25.75A.75.75 0 0 1 8 0a8 8 0 0 1 8 8 .75.75 0 0 1-1.5 0A6.5 6.5 0 0 0 8 1.5a.75.75 0 0 1-.75-.75"/></g><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="600ms" repeatCount="indefinite"/></svg>`;
|
|
557
511
|
loadResource(T007_TOAST_CSS_SRC);
|
|
558
|
-
window.
|
|
512
|
+
window.toast ??= t007.toast;
|
|
559
513
|
console.log("%cT007 Toasts attached to window!", "color: darkturquoise");
|
|
560
514
|
}
|
|
561
515
|
})();
|