juice-toast 1.3.3 → 1.3.4
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/CHANGELOG.md +8 -2
- package/EoL.md +4 -1
- package/dist/juice-toast-ios.d.ts +33 -159
- package/dist/juice-toast.d.ts +33 -119
- package/dist/juice-toast.esm.js +43 -5
- package/dist/juice-toast.ios.js +30 -3
- package/package.json +5 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
## v1.3.
|
|
1
|
+
## v1.3.4
|
|
2
|
+
- Bug Fixes
|
|
3
|
+
- Add profile image
|
|
4
|
+
- Add Hook's Plugins
|
|
5
|
+
|
|
6
|
+
v1.3.3
|
|
2
7
|
- Bug Fixes on Closeable Toast & Logic
|
|
3
8
|
|
|
4
9
|
v1.3.2
|
|
5
10
|
- Improved A11Y
|
|
6
11
|
- Adding Background Image
|
|
7
12
|
- Adding more Theme
|
|
8
|
-
- Adding default toast (juiceToast.success|error|info|warning
|
|
13
|
+
- Adding default toast (juiceToast.success|error|info|warning)
|
|
9
14
|
|
|
10
15
|
v1.3.1
|
|
11
16
|
- Improved iOS / Safari (WebKit) compatibility
|
|
@@ -39,6 +44,7 @@ NEXT 120/2026
|
|
|
39
44
|
- Add Promise-based Toast API
|
|
40
45
|
- Add Stack Grouping
|
|
41
46
|
- Improve TypeScript Definitions
|
|
47
|
+
- !Remove UMD due to maintance reason!
|
|
42
48
|
|
|
43
49
|
v1.1.0
|
|
44
50
|
- Add Size Preset
|
package/EoL.md
CHANGED
|
@@ -4,6 +4,9 @@ The following versions and distributions have reached End of Life (EoL) and are
|
|
|
4
4
|
|
|
5
5
|
| EoL Version | Affected Target | Reason |
|
|
6
6
|
|--------------------|-----------------|--------|
|
|
7
|
+
| 1.2.1 | None | This version is End of Support, update to ^1.3.0 |
|
|
7
8
|
| 1.2.0-rc.2026 | UMD build | UMD distribution has been removed to simplify maintenance and reduce build complexity |
|
|
9
|
+
| 0.0.1-next.1202026 | None | This next version are ended, use Release Candidate version |
|
|
8
10
|
| 0.0.0-next.1202026 | Pre-release tag | Versioning structure became inconsistent and difficult to maintain |
|
|
9
|
-
| 1.
|
|
11
|
+
| 1.1.0 | None | This version is End of Support, update to ^1.2.0 |
|
|
12
|
+
| 1.0.0 | Unstable release | Deprecated due to outdated internal architecture and styling standards |
|
|
@@ -1,160 +1,34 @@
|
|
|
1
|
-
/* JuiceToast v1.3.2 (iOS User)
|
|
2
|
-
* (C) 2026 OpenDN Foundation
|
|
3
|
-
* Type Definitions
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
/* ================= CORE ================= */
|
|
7
|
-
|
|
8
|
-
export type ToastPosition =
|
|
9
|
-
| "top-left"
|
|
10
|
-
| "top-right"
|
|
11
|
-
| "bottom-left"
|
|
12
|
-
| "bottom-right"
|
|
13
|
-
| "top-center"
|
|
14
|
-
| "bottom-center"
|
|
15
|
-
| string;
|
|
16
|
-
|
|
17
|
-
export type ToastSize = "sm" | "md" | "lg";
|
|
18
|
-
|
|
19
|
-
export type ToastAnimation =
|
|
20
|
-
| "spin"
|
|
21
|
-
| "pulse"
|
|
22
|
-
| "shake"
|
|
23
|
-
| "bounce"
|
|
24
|
-
| "wiggle"
|
|
25
|
-
| "pop"
|
|
26
|
-
| string;
|
|
27
|
-
|
|
28
|
-
/* ================= ACTIONS ================= */
|
|
29
|
-
|
|
30
|
-
export interface ToastAction {
|
|
31
|
-
label: string;
|
|
32
|
-
onClick?: (ev: MouseEvent) => void;
|
|
33
|
-
closeOnClick?: boolean;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* ================= OPTIONS ================= */
|
|
37
|
-
|
|
38
|
-
export interface ToastOptions {
|
|
39
|
-
title?: string;
|
|
40
|
-
message?: string;
|
|
41
|
-
|
|
42
|
-
theme?: string;
|
|
43
|
-
position?: ToastPosition;
|
|
44
|
-
|
|
45
|
-
duration?: number;
|
|
46
|
-
progress?: boolean;
|
|
47
|
-
progressColor?: string;
|
|
48
|
-
|
|
49
|
-
icon?: string;
|
|
50
|
-
iconPack?: string;
|
|
51
|
-
iconSize?: string;
|
|
52
|
-
iconPosition?: "left" | "right" | "top";
|
|
53
|
-
|
|
54
|
-
iconLink?: string;
|
|
55
|
-
iconAnimate?: ToastAnimation;
|
|
56
|
-
|
|
57
|
-
closable?: boolean;
|
|
58
|
-
|
|
59
|
-
bg?: string;
|
|
60
|
-
color?: string;
|
|
61
|
-
border?: string;
|
|
62
|
-
|
|
63
|
-
width?: string;
|
|
64
|
-
height?: string;
|
|
65
|
-
|
|
66
|
-
size?: ToastSize;
|
|
67
|
-
compact?: boolean;
|
|
68
|
-
|
|
69
|
-
glassUI?: number | boolean;
|
|
70
|
-
|
|
71
|
-
bgImage?: string;
|
|
72
|
-
|
|
73
|
-
enterAnimation?: ToastAnimation;
|
|
74
|
-
animation?: string;
|
|
75
|
-
|
|
76
|
-
actions?: ToastAction[];
|
|
77
|
-
|
|
78
|
-
/* AUDIO */
|
|
79
|
-
playSound?: string;
|
|
80
|
-
|
|
81
|
-
/* TTS */
|
|
82
|
-
tts?: boolean;
|
|
83
|
-
ttsLang?: string;
|
|
84
|
-
ttsRate?: number;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
/* ================= INTERNAL DEFAULTS ================= */
|
|
88
|
-
|
|
89
|
-
export interface JuiceToastDefaults {
|
|
90
|
-
duration: number;
|
|
91
|
-
maxVisible: number;
|
|
92
|
-
swipeThreshold: number;
|
|
93
|
-
glassUI: number;
|
|
94
|
-
playSound: string | null;
|
|
95
|
-
dev: boolean;
|
|
96
|
-
injectCSS: boolean;
|
|
97
|
-
css: string | null;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/* ================= PLUGIN ================= */
|
|
101
|
-
|
|
102
|
-
export interface JuiceToastPluginContext<T extends string = string> {
|
|
103
|
-
toast: HTMLElement;
|
|
104
|
-
cfg: ToastOptions;
|
|
105
|
-
type: T;
|
|
106
|
-
root: HTMLElement;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
export type JuiceToastPlugin<T extends string = string> = (
|
|
110
|
-
ctx: JuiceToastPluginContext<T>
|
|
111
|
-
) => void;
|
|
112
|
-
|
|
113
|
-
/* ================= CONFIG ================= */
|
|
114
|
-
|
|
115
|
-
export type ToastTypeConfig = Record<string, Partial<ToastOptions>>;
|
|
116
|
-
|
|
117
|
-
/* ================= DYNAMIC METHODS ================= */
|
|
118
|
-
|
|
119
|
-
type DynamicToastMethods<T extends string> = {
|
|
120
|
-
[K in T]: (payload?: string | ToastOptions) => void;
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
/* ================= CORE INSTANCE ================= */
|
|
124
|
-
|
|
125
|
-
export interface JuiceToastBase<T extends string = string> {
|
|
126
|
-
_config: ToastTypeConfig;
|
|
127
|
-
_queue: any[];
|
|
128
|
-
_showing: boolean;
|
|
129
|
-
_theme: string;
|
|
130
|
-
_plugins: JuiceToastPlugin<T>[];
|
|
131
|
-
_defaults: JuiceToastDefaults;
|
|
132
|
-
|
|
133
|
-
/* ===== PUBLIC API ===== */
|
|
134
|
-
|
|
135
|
-
setup<C extends ToastTypeConfig>(
|
|
136
|
-
config: C
|
|
137
|
-
): JuiceToastBase<keyof C & string> &
|
|
138
|
-
DynamicToastMethods<keyof C & string>;
|
|
139
|
-
|
|
140
|
-
use(plugin: JuiceToastPlugin<T>): void;
|
|
141
|
-
|
|
142
|
-
addType(name: string, cfg?: Partial<ToastOptions>): void;
|
|
143
|
-
|
|
144
|
-
defineTheme(name: string, styles: Record<string, string>): void;
|
|
145
|
-
|
|
146
|
-
setTheme(name: string): void;
|
|
147
|
-
|
|
148
|
-
clear(): void;
|
|
149
|
-
destroy(): void;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/* ================= FINAL TYPE ================= */
|
|
153
|
-
|
|
154
|
-
export type JuiceToast<T extends string = string> =
|
|
155
|
-
JuiceToastBase<T> & DynamicToastMethods<T>;
|
|
156
|
-
|
|
157
|
-
declare const juiceToast: JuiceToast;
|
|
158
|
-
|
|
159
1
|
export default juiceToast;
|
|
160
|
-
export
|
|
2
|
+
export namespace juiceToast {
|
|
3
|
+
let _config: {};
|
|
4
|
+
let _queue: any[];
|
|
5
|
+
let _showing: boolean;
|
|
6
|
+
let _theme: string;
|
|
7
|
+
let _plugins: any[];
|
|
8
|
+
function setup(e?: {}): void;
|
|
9
|
+
function use(e: any): void;
|
|
10
|
+
function addType(e: any, t?: {}): void;
|
|
11
|
+
function defineTheme(e: any, t?: {}): void;
|
|
12
|
+
function setTheme(e: any): void;
|
|
13
|
+
function clear(): void;
|
|
14
|
+
function destroy(): void;
|
|
15
|
+
function _registerTypes(): void;
|
|
16
|
+
function _enqueue(e: any, t: any): void;
|
|
17
|
+
function _next(): void;
|
|
18
|
+
function _runPlugins(e: any): void;
|
|
19
|
+
function _normalizeGlass(e: any): number;
|
|
20
|
+
function _getRoot(e?: string): HTMLElement;
|
|
21
|
+
namespace _defaults {
|
|
22
|
+
let duration: number;
|
|
23
|
+
let maxVisible: number;
|
|
24
|
+
let swipeThreshold: number;
|
|
25
|
+
let glassUI: number;
|
|
26
|
+
let playSound: any;
|
|
27
|
+
let dev: boolean;
|
|
28
|
+
let injectCSS: boolean;
|
|
29
|
+
let css: any;
|
|
30
|
+
}
|
|
31
|
+
function _warn(e: any): void;
|
|
32
|
+
function _playSound(e: any): void;
|
|
33
|
+
function _showToast(e: any, t: any): void;
|
|
34
|
+
}
|
package/dist/juice-toast.d.ts
CHANGED
|
@@ -1,120 +1,34 @@
|
|
|
1
|
-
/* JuiceToast v1.3.2
|
|
2
|
-
* (C) 2026 OpenDN Foundation
|
|
3
|
-
* Type Definitions
|
|
4
|
-
*/
|
|
5
|
-
/* ================= CORE TYPES ================= */
|
|
6
|
-
|
|
7
|
-
export type ToastPosition =
|
|
8
|
-
| "top-left"
|
|
9
|
-
| "top-right"
|
|
10
|
-
| "bottom-left"
|
|
11
|
-
| "bottom-right"
|
|
12
|
-
| "top-center"
|
|
13
|
-
| "bottom-center";
|
|
14
|
-
|
|
15
|
-
export type ToastSize = "sm" | "md" | "lg";
|
|
16
|
-
|
|
17
|
-
export interface ToastAction {
|
|
18
|
-
label: string;
|
|
19
|
-
onClick?: (ev: MouseEvent) => void;
|
|
20
|
-
closeOnClick?: boolean;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export interface ToastOptions {
|
|
24
|
-
title?: string;
|
|
25
|
-
message?: string;
|
|
26
|
-
|
|
27
|
-
theme?: string;
|
|
28
|
-
position?: ToastPosition;
|
|
29
|
-
|
|
30
|
-
duration?: number;
|
|
31
|
-
progress?: boolean;
|
|
32
|
-
progressColor?: string;
|
|
33
|
-
|
|
34
|
-
icon?: string;
|
|
35
|
-
iconPack?: string;
|
|
36
|
-
iconSize?: string;
|
|
37
|
-
iconPosition?: "left" | "right" | "top";
|
|
38
|
-
|
|
39
|
-
iconLink?: string;
|
|
40
|
-
iconAnimate?: string;
|
|
41
|
-
|
|
42
|
-
closable?: boolean;
|
|
43
|
-
|
|
44
|
-
bg?: string;
|
|
45
|
-
color?: string;
|
|
46
|
-
border?: string;
|
|
47
|
-
|
|
48
|
-
width?: string;
|
|
49
|
-
height?: string;
|
|
50
|
-
|
|
51
|
-
size?: ToastSize;
|
|
52
|
-
compact?: boolean;
|
|
53
|
-
|
|
54
|
-
glassUI?: number | boolean;
|
|
55
|
-
|
|
56
|
-
bgImage?: string;
|
|
57
|
-
|
|
58
|
-
enterAnimation?: string;
|
|
59
|
-
animation?: string;
|
|
60
|
-
|
|
61
|
-
actions?: ToastAction[];
|
|
62
|
-
|
|
63
|
-
/* TTS */
|
|
64
|
-
tts?: boolean;
|
|
65
|
-
ttsLang?: string;
|
|
66
|
-
ttsRate?: number;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* ================= CONFIG TYPES ================= */
|
|
70
|
-
|
|
71
|
-
export type ToastTypeConfig = Record<string, Partial<ToastOptions>>;
|
|
72
|
-
|
|
73
|
-
/* ================= PLUGIN ================= */
|
|
74
|
-
|
|
75
|
-
export interface JuiceToastPluginContext<T extends string = string> {
|
|
76
|
-
toast: HTMLElement;
|
|
77
|
-
cfg: ToastOptions;
|
|
78
|
-
type: T;
|
|
79
|
-
root: HTMLElement;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
export type JuiceToastPlugin<T extends string = string> = (
|
|
83
|
-
ctx: JuiceToastPluginContext<T>
|
|
84
|
-
) => void;
|
|
85
|
-
|
|
86
|
-
/* ================= MAIN INTERFACE ================= */
|
|
87
|
-
|
|
88
|
-
type DynamicToastMethods<T extends string> = {
|
|
89
|
-
[K in T]: (payload?: string | ToastOptions) => void;
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
export interface JuiceToastBase<T extends string = string> {
|
|
93
|
-
/* ===== PUBLIC API ===== */
|
|
94
|
-
|
|
95
|
-
setup<C extends Record<string, Partial<ToastOptions>>>(
|
|
96
|
-
config: C
|
|
97
|
-
): JuiceToastBase<keyof C & string> &
|
|
98
|
-
DynamicToastMethods<keyof C & string>;
|
|
99
|
-
|
|
100
|
-
use(plugin: JuiceToastPlugin<T>): void;
|
|
101
|
-
|
|
102
|
-
addType(name: string, cfg?: Partial<ToastOptions>): void;
|
|
103
|
-
|
|
104
|
-
defineTheme(name: string, styles: Record<string, string>): void;
|
|
105
|
-
|
|
106
|
-
setTheme(name: string): void;
|
|
107
|
-
|
|
108
|
-
clear(): void;
|
|
109
|
-
destroy(): void;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
/* ================= FINAL TYPE ================= */
|
|
113
|
-
|
|
114
|
-
export type JuiceToast<T extends string = string> =
|
|
115
|
-
JuiceToastBase<T> & DynamicToastMethods<T>;
|
|
116
|
-
|
|
117
|
-
declare const juiceToast: JuiceToast;
|
|
118
|
-
|
|
119
1
|
export default juiceToast;
|
|
120
|
-
export
|
|
2
|
+
export namespace juiceToast {
|
|
3
|
+
let _config: {};
|
|
4
|
+
let _queue: any[];
|
|
5
|
+
let _showing: boolean;
|
|
6
|
+
let _theme: string;
|
|
7
|
+
let _plugins: any[];
|
|
8
|
+
function setup(e?: {}): void;
|
|
9
|
+
function use(e: any): void;
|
|
10
|
+
function addType(e: any, t?: {}): void;
|
|
11
|
+
function defineTheme(e: any, t?: {}): void;
|
|
12
|
+
function setTheme(e: any): void;
|
|
13
|
+
function clear(): void;
|
|
14
|
+
function destroy(): void;
|
|
15
|
+
function _registerTypes(): void;
|
|
16
|
+
function _enqueue(e: any, t: any): void;
|
|
17
|
+
function _next(): void;
|
|
18
|
+
function _runPlugins(e: any): void;
|
|
19
|
+
function _normalizeGlass(e: any): number;
|
|
20
|
+
function _getRoot(e?: string): HTMLElement;
|
|
21
|
+
namespace _defaults {
|
|
22
|
+
let duration: number;
|
|
23
|
+
let maxVisible: number;
|
|
24
|
+
let swipeThreshold: number;
|
|
25
|
+
let glassUI: number;
|
|
26
|
+
let playSound: any;
|
|
27
|
+
let dev: boolean;
|
|
28
|
+
let injectCSS: boolean;
|
|
29
|
+
let css: any;
|
|
30
|
+
}
|
|
31
|
+
function _warn(e: any): void;
|
|
32
|
+
function _playSound(e: any): void;
|
|
33
|
+
function _showToast(e: any, t: any): void;
|
|
34
|
+
}
|
package/dist/juice-toast.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* 2026 (C) OpenDN Foundation
|
|
3
|
-
* v1.3.
|
|
3
|
+
* v1.3.4 (Nearing End of Support notifier)
|
|
4
4
|
* ESM (ECMAScript Module)
|
|
5
5
|
*/
|
|
6
|
-
let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMotion=isBrowser&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,TYPE_ANIMATION={success:"bounce",error:"shake",warning:"wiggle",info:"pulse",loading:"spin"},__cssInjected=!1,BASE_CSS=`
|
|
6
|
+
console.warn("%cJuiceToast v1.3.x%c — This version is approaching End of Support on Feb 28th 2026. Use %c^v1.4.x (Gold)%c to remove this message.","background: #f59e0b; color: #000; font-weight: bold; padding: 2px 6px; border-radius: 4px;","color: #555; font-weight: normal;","background: #38bdf8; color: #000; font-weight: bold; padding: 2px 4px; border-radius: 3px;","color: #555; font-weight: normal;");let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMotion=isBrowser&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,TYPE_ANIMATION={success:"bounce",error:"shake",warning:"wiggle",info:"pulse",loading:"spin"},__cssInjected=!1,BASE_CSS=`
|
|
7
7
|
#juice-toast-root {
|
|
8
8
|
position: fixed;
|
|
9
9
|
z-index: 9999;
|
|
@@ -184,6 +184,15 @@ let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMot
|
|
|
184
184
|
font-size: 12px;
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
+
.jt-message code {
|
|
188
|
+
background: rgba(255,255,255,0.1);
|
|
189
|
+
color: #facc15; /* kuning */
|
|
190
|
+
padding: 2px 4px;
|
|
191
|
+
border-radius: 4px;
|
|
192
|
+
font-family: monospace;
|
|
193
|
+
font-size: 0.9em;
|
|
194
|
+
}
|
|
195
|
+
|
|
187
196
|
/* ================= COMPACT ================= */
|
|
188
197
|
|
|
189
198
|
.jt-compact {
|
|
@@ -290,8 +299,14 @@ let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMot
|
|
|
290
299
|
}
|
|
291
300
|
|
|
292
301
|
@keyframes jt-slide {
|
|
293
|
-
from {
|
|
294
|
-
|
|
302
|
+
from {
|
|
303
|
+
transform: translateY(20px);
|
|
304
|
+
opacity: 0;
|
|
305
|
+
}
|
|
306
|
+
to {
|
|
307
|
+
transform: translateY(0);
|
|
308
|
+
opacity: 1;
|
|
309
|
+
}
|
|
295
310
|
}
|
|
296
311
|
|
|
297
312
|
/* ================= CLASSES ================= */
|
|
@@ -328,4 +343,27 @@ let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMot
|
|
|
328
343
|
animation: none !important;
|
|
329
344
|
}
|
|
330
345
|
}
|
|
331
|
-
|
|
346
|
+
|
|
347
|
+
.jt-profile {
|
|
348
|
+
width: 40px;
|
|
349
|
+
height: 40px;
|
|
350
|
+
border-radius: 50%;
|
|
351
|
+
object-fit: cover;
|
|
352
|
+
flex-shrink: 0;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.jt-profile.square {
|
|
356
|
+
border-radius: 6px;
|
|
357
|
+
object-fit: cover;
|
|
358
|
+
margin-right: auto;
|
|
359
|
+
flex-shrink: 0;
|
|
360
|
+
width: 40px;
|
|
361
|
+
height: 40px;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.juice-toast {
|
|
365
|
+
display: flex;
|
|
366
|
+
align-items: center;
|
|
367
|
+
gap: 10px;
|
|
368
|
+
}
|
|
369
|
+
`;function injectCSS(e){if(!isBrowser||__cssInjected)return;let t=document.createElement("style");t.id="juice-toast-style",t.textContent=e,document.head.appendChild(t),__cssInjected=!0}let themes={light:{bg:"#ffffff",color:"#111",border:"1px solid #e5e7eb"},dark:{bg:"#1f2937",color:"#fff",border:"1px solid rgba(255,255,255,.08)"},glass:{bg:"rgba(30,30,30,.35)",color:"#fff",border:"1px solid rgba(255,255,255,.15)"},midnight:{bg:"#0f172a",color:"#e5e7eb",border:"1px solid rgba(255,255,255,.06)"},soft:{bg:"#f8fafc",color:"#0f172a",border:"1px solid #e2e8f0"},neutral:{bg:"#ffffff",color:"#374151",border:"1px solid #d1d5db"},brand:{bg:"#6366f1",color:"#fff",border:"none"},gradient:{bg:"linear-gradient(135deg,#6366f1,#ec4899)",color:"#fff",border:"none"},outline:{bg:"transparent",color:"#111",border:"2px solid currentColor"}},sizePreset={sm:{width:"260px",padding:"10px"},md:{width:"320px",padding:"14px"},lg:{width:"420px",padding:"18px"}},juiceToast={_config:{},_queue:[],_showing:!1,_theme:"dark",_plugins:[],setup(e={}){let{duration:t,maxVisible:s,...i}=e;this._defaults={...this._defaults,duration:t,maxVisible:s},this._config={...this._config,...i},this._registerTypes()},use(e){"function"==typeof e&&this._plugins.push(e)},addType(e,t={}){this._config[e]=t,this._registerTypes()},defineTheme(e,t={}){themes[e]={...themes[e]||{},...t}},setTheme(e){if(this._theme=e,!isBrowser)return;let t=document.getElementById("juice-toast-root");t&&(t.dataset.theme=e)},clear(){this._queue.length=0},destroy(){this.clear(),isBrowser&&document.getElementById("juice-toast-root")?.remove()},_registerTypes(){Object.keys(this._config).forEach(e=>{if("function"==typeof this[e]&&!this[e].__auto)return;let t=t=>this._enqueue(e,t);t.__auto=!0,this[e]=t})},_enqueue(e,t){this._queue.push({type:e,payload:t}),this._showing||this._next()},_next(){if(!this._queue.length){this._showing=!1;return}this._showing=!0;let e=this._queue.shift();this._showToast(e.type,e.payload)},_runPlugins(e){this._plugins.forEach(t=>{try{t(e)}catch(s){this._warn("Plugin error: "+s.message)}})},_normalizeGlass(e){if(!0===e)return 60;if(!1===e||null==e)return 0;let t=Number(e);return Number.isFinite(t)?Math.max(0,Math.min(100,t)):0},_getRoot(e="bottom-right"){if(!isBrowser)return null;let t=document.getElementById(`juice-toast-root-${e}`);if(!t){switch((t=document.createElement("div")).id=`juice-toast-root-${e}`,t.dataset.position=e,t.dataset.theme=this._theme,t.style.position="fixed",t.style.zIndex=9999,e){case"top-left":t.style.top="20px",t.style.left="20px";break;case"top-right":t.style.top="20px",t.style.right="20px";break;case"bottom-left":t.style.bottom="20px",t.style.left="20px";break;case"bottom-right":t.style.bottom="20px",t.style.right="20px";break;case"top-center":t.style.top="20px",t.style.left="50%",t.style.transform="translateX(-50%)";break;case"bottom-center":t.style.bottom="20px",t.style.left="50%",t.style.transform="translateX(-50%)"}document.body.appendChild(t)}return t},_defaults:{duration:2500,maxVisible:3,swipeThreshold:60,glassUI:0,playSound:null,dev:!1,injectCSS:!0,css:null},_warn(e){this._defaults.dev&&"undefined"!=typeof console&&console.warn("[JuiceToast]",e)},_playSound(e){if(!isBrowser)return;let t="string"==typeof e&&e?e:this._defaults.playSound;if(t)try{let s=new Audio(t);s.volume=.6,s.play().catch(()=>{})}catch{}},_showToast(e,t){if(!isBrowser)return;!1!==this._defaults.injectCSS&&injectCSS(this._defaults.css||BASE_CSS);let s=this._config[e]||{},i="object"==typeof t?t:{message:String(t)},a={...s,...i};a.icon=a.icon??a.icon_left_top,a.iconPack=a.iconPack??a.icon_config,a.iconLink=a.iconLink??a.icon_onClick_url,a.iconAnimate=a.iconAnimate??a.icon_onClick_animate,a.position=a.position??a.toast,a.closable=a.closable??a.closeable,a.iconPosition=a.iconPosition||"left",a.compact=!!a.compact;let o=themes[a.theme||this._theme]||{},n=document.createElement("div");n.className="juice-toast";let r=a.animation||"slide-in";if(a.enterAnimation||(n.style.animation=`${r} 0.4s ease forwards`),n.setAttribute("role","alert"),n.setAttribute("aria-live","error"===e?"assertive":"polite"),n.setAttribute("aria-atomic","true"),n.tabIndex=0,a.closable){let l=document.createElement("span");l.tabIndex=0,l.className="juice-toast-close",l.textContent="\xd7",l.addEventListener("keydown",e=>{("Enter"===e.key||" "===e.key)&&(n.remove(),this._next())})}let c=null;if(a.profile&&((c=document.createElement("img")).src=a.profile,c.className="jt-profile","square"===a.profileShape&&c.classList.add("square"),n.appendChild(c)),a.size&&sizePreset[a.size]){let d=sizePreset[a.size];d.width&&(n.style.width=d.width),d.padding&&(n.style.padding=d.padding)}let p=null;if(a.progress&&(a.duration??this._defaults.duration)>0&&((p=document.createElement("div")).className="jt-progress",a.progressColor&&(p.style.background=a.progressColor||"rgba(255,255,255,.7)"),n.appendChild(p)),a.tts&&"speechSynthesis"in window)try{let f=new SpeechSynthesisUtterance(a.message||a.title||"");f.lang=a.ttsLang||"en-US",f.rate=a.ttsRate??1,window.speechSynthesis.speak(f)}catch(g){this._warn("TTS failed: "+g.message)}let h=this._normalizeGlass(a.glassUI??this._defaults.glassUI);h>0&&(n.style.setProperty("--jt-glass",a.glassUI??50),n.classList.add("jt-glass")),h||(n.style.background=a.bg||o.bg),n.style.color=a.color||o.color,n.style.border=a.border||o.border,a.compact&&n.classList.add("jt-compact"),a.width&&(n.style.width=a.width),a.height&&(n.style.height=a.height),a.bgImage&&(n.style.backgroundImage=`url(${a.bgImage})`,n.classList.add("bg-image"));let u=null;if(a.icon){(u=document.createElement("i")).className=["icon",a.iconPack||"",a.icon].join(" ").trim(),a.iconSize&&(u.style.fontSize=a.iconSize),(a.iconLink||a.iconAnimate)&&(u.classList.add("icon-clickable"),u.onclick=e=>{e.stopPropagation(),a.iconAnimate&&(u.classList.remove(a.iconAnimate),u.offsetWidth,u.classList.add(a.iconAnimate)),a.iconLink&&window.open(a.iconLink,"_blank","noopener")});let m=a.iconAnimate??TYPE_ANIMATION[e];m&&(u.classList.add(m),u.addEventListener("click",()=>{u.classList.remove(m),u.offsetWidth,u.classList.add(m)}))}reduceMotion&&(n.classList.remove("pop","bounce","shake","wiggle","pulse","spin"),u?.classList.remove("bounce","shake","wiggle","pulse","spin")),a.message||a.title||this._warn("Toast created without message or title"),a.icon&&!a.iconPack&&this._warn("icon provided without iconPack"),a.duration<0&&this._warn("duration cannot be negative");let $=0,x=0;n.addEventListener("touchstart",e=>{$=e.touches[0].clientX}),n.addEventListener("touchmove",e=>{x=e.touches[0].clientX-$,n.style.transform=`translateX(${x}px)`}),n.addEventListener("touchend",()=>{Math.abs(x)>this._defaults.swipeThreshold?(n.style.transform=`translateX(${x>0?1e3:-1e3}px)`,setTimeout(()=>{n.remove(),this._next()},200)):n.style.transform="",$=x=0});let b=document.createElement("div");b.className="jt-content";let y=a.enterAnimation??"pop";if(y&&!reduceMotion&&n.classList.add(y),a.title){let _=document.createElement("div");_.className="jt-title",_.textContent=a.title,b.appendChild(_)}let j=document.createElement("div");if(j.className="jt-message","string"==typeof a.message){let k=a.message.split(/(`[^`]+`)/g);k.forEach(e=>{if(e.startsWith("`")&&e.endsWith("`")){let t=document.createElement("code");t.textContent=e.slice(1,-1),j.appendChild(t)}else j.appendChild(document.createTextNode(e))})}if(b.appendChild(j),u&&"top"===a.iconPosition?(n.classList.add("jt-icon-top"),n.appendChild(u),n.appendChild(b)):u&&"right"===a.iconPosition?(n.appendChild(b),n.appendChild(u)):(u&&n.appendChild(u),n.appendChild(b)),Array.isArray(a.actions)&&a.actions.length){let w=document.createElement("div");w.className="jt-actions",a.actions.forEach(e=>{let t=document.createElement("button");t.className="jt-action",t.textContent=e.label,t.onclick=t=>{t.stopPropagation(),e.onClick?.(t),e.closeOnClick&&(n.remove(),this._next())},w.appendChild(t)}),b.appendChild(w)}if(a.closable){let v=document.createElement("span");v.className="juice-toast-close",v.textContent="\xd7",v.onclick=()=>{n.remove(),this._next()},n.appendChild(v)}let C=this._getRoot(a.position),E=this._defaults.maxVisible;E&&C.children.length>=E&&C.firstChild.remove(),C.appendChild(n),this._runPlugins({toast:n,cfg:a,type:e,root:C}),requestAnimationFrame(()=>n.classList.add("show"));let S=a.duration??this._defaults.duration;if(0===S)return;let I=Date.now(),T=a.duration??this._defaults.duration,A,L=()=>{if(n.__paused)I=Date.now();else{let e=Date.now();T-=e-I,I=e}T<=0?(n.classList.remove("show"),setTimeout(()=>{n.remove(),this._next()},300)):A=requestAnimationFrame(L),p&&(p.style.transform=`scaleX(${Math.max(0,T/S)})`)};n.addEventListener("mouseenter",()=>n.__paused=!0),n.addEventListener("mouseleave",()=>n.__paused=!1),n.addEventListener("touchstart",()=>n.__paused=!0),n.addEventListener("touchend",()=>n.__paused=!1),requestAnimationFrame(L)}};juiceToast.setup({success:{icon:"fa-check",iconPack:"fas",bg:"#16a34a",progress:!0,duration:4e3},error:{icon:"fa-xmark",iconPack:"fas",bg:"#dc2626",progress:!0,duration:4e3},info:{icon:"fa-circle-info",iconPack:"fas",bg:"#2563eb",duration:4e3,progress:!0},warning:{icon:"fa-triangle-exclamation",iconPack:"fas",bg:"#f59e0b",duration:4e3,progress:!0}});export default juiceToast;export{juiceToast};
|
package/dist/juice-toast.ios.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* OpenDN Foundation (C) 2026
|
|
3
|
-
*
|
|
3
|
+
* Juice Toast v1.3.4 (iOS user | Nearing End of Support notifier)
|
|
4
4
|
* Read CONTRIBUTE.md To Contribute
|
|
5
5
|
*/
|
|
6
|
-
let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMotion=isBrowser&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,isTouch=isBrowser&&("ontouchstart"in window||navigator&&navigator.maxTouchPoints>0),isIOS=isBrowser&&/iPad|iPhone|iPod/.test(navigator.userAgent||""),isIOSStandalone=isBrowser&&(!0===window.navigator.standalone||window.matchMedia&&window.matchMedia("(display-mode: standalone)").matches);function speakTTS(e,t="en-US",s=1){if(!("speechSynthesis"in window))return;let a=new SpeechSynthesisUtterance(e);a.lang=t,a.rate=s;let i=()=>{window.speechSynthesis.speak(a),document.body.removeEventListener("touchstart",i),document.body.removeEventListener("click",i)},o=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream;o&&!1===window.speechSynthesis.speaking?(document.body.addEventListener("touchstart",i,{once:!0}),document.body.addEventListener("click",i,{once:!0})):i()}let raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||(e=>setTimeout(e,16)),TYPE_ANIMATION={success:"bounce",error:"shake",warning:"wiggle",info:"pulse",loading:"spin"},__cssInjected=!1,BASE_CSS=`
|
|
6
|
+
console.warn("%cJuiceToast v1.3.x%c — This version is approaching End of Support on Feb 28th 2026. Use %c^v1.4.x (Gold)%c to remove this message.","background: #f59e0b; color: #000; font-weight: bold; padding: 2px 6px; border-radius: 4px;","color: #555; font-weight: normal;","background: #38bdf8; color: #000; font-weight: bold; padding: 2px 4px; border-radius: 3px;","color: #555; font-weight: normal;");let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMotion=isBrowser&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,isTouch=isBrowser&&("ontouchstart"in window||navigator&&navigator.maxTouchPoints>0),isIOS=isBrowser&&/iPad|iPhone|iPod/.test(navigator.userAgent||""),isIOSStandalone=isBrowser&&(!0===window.navigator.standalone||window.matchMedia&&window.matchMedia("(display-mode: standalone)").matches);function speakTTS(e,t="en-US",s=1){if(!("speechSynthesis"in window))return;let a=new SpeechSynthesisUtterance(e);a.lang=t,a.rate=s;let i=()=>{window.speechSynthesis.speak(a),document.body.removeEventListener("touchstart",i),document.body.removeEventListener("click",i)},o=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream;o&&!1===window.speechSynthesis.speaking?(document.body.addEventListener("touchstart",i,{once:!0}),document.body.addEventListener("click",i,{once:!0})):i()}let raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||(e=>setTimeout(e,16)),TYPE_ANIMATION={success:"bounce",error:"shake",warning:"wiggle",info:"pulse",loading:"spin"},__cssInjected=!1,BASE_CSS=`
|
|
7
7
|
:root {
|
|
8
8
|
--jt-safe-top: env(safe-area-inset-top, 0px);
|
|
9
9
|
--jt-safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
@@ -122,6 +122,15 @@ let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMot
|
|
|
122
122
|
opacity: 1;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
+
.jt-message code {
|
|
126
|
+
background: rgba(255,255,255,0.1);
|
|
127
|
+
color: #facc15; /* kuning */
|
|
128
|
+
padding: 2px 4px;
|
|
129
|
+
border-radius: 4px;
|
|
130
|
+
font-family: monospace;
|
|
131
|
+
font-size: 0.9em;
|
|
132
|
+
}
|
|
133
|
+
|
|
125
134
|
/* ================= CONTENT ================= */
|
|
126
135
|
|
|
127
136
|
.juice-toast .jt-content {
|
|
@@ -325,4 +334,22 @@ let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,reduceMot
|
|
|
325
334
|
animation: none !important;
|
|
326
335
|
}
|
|
327
336
|
}
|
|
328
|
-
`;function injectCSS(e){if(!isBrowser||__cssInjected)return;let t=document.createElement("style");t.id="juice-toast-style",t.textContent=e,document.head.appendChild(t),__cssInjected=!0}let themes={light:{bg:"#ffffff",color:"#111",border:"1px solid #e5e7eb"},dark:{bg:"#1f2937",color:"#fff",border:"1px solid rgba(255,255,255,.08)"},glass:{bg:"rgba(30,30,30,.35)",color:"#fff",border:"1px solid rgba(255,255,255,.15)"},midnight:{bg:"#0f172a",color:"#e5e7eb",border:"1px solid rgba(255,255,255,.06)"},soft:{bg:"#f8fafc",color:"#0f172a",border:"1px solid #e2e8f0"},neutral:{bg:"#ffffff",color:"#374151",border:"1px solid #d1d5db"},brand:{bg:"#6366f1",color:"#fff",border:"none"},gradient:{bg:"linear-gradient(135deg,#6366f1,#ec4899)",color:"#fff",border:"none"},outline:{bg:"transparent",color:"#111",border:"2px solid currentColor"}},sizePreset={sm:{width:"260px",padding:"10px"},md:{width:"320px",padding:"14px"},lg:{width:"420px",padding:"18px"}},juiceToast={_config:{},_queue:[],_showing:!1,_theme:"dark",_plugins:[],setup(e={}){let{duration:t,maxVisible:s,...a}=e;this._defaults={...this._defaults,duration:t,maxVisible:s},this._config=a,isIOS&&(this._defaults.swipeThreshold=Math.min(this._defaults.swipeThreshold||60,50),this._defaults.glassUI=this._defaults.glassUI||60,this._defaults.duration=this._defaults.duration??2200),this._registerTypes()},use(e){"function"==typeof e&&this._plugins.push(e)},addType(e,t={}){this._config[e]=t,this._registerTypes()},defineTheme(e,t={}){themes[e]={...themes[e]||{},...t}},setTheme(e){if(this._theme=e,!isBrowser)return;let t=document.querySelector('[id^="juice-toast-root-"]');t&&(t.dataset.theme=e)},clear(){this._queue.length=0},destroy(){if(this.clear(),!isBrowser)return;let e=document.querySelectorAll('[id^="juice-toast-root-"]');e.forEach(e=>e.remove())},_registerTypes(){Object.keys(this._config).forEach(e=>{if("function"==typeof this[e]&&!this[e].__auto)return;let t=t=>this._enqueue(e,t);t.__auto=!0,this[e]=t})},_enqueue(e,t){this._queue.push({type:e,payload:t}),this._showing||this._next()},_next(){if(!this._queue.length){this._showing=!1;return}this._showing=!0;let e=this._queue.shift();this._showToast(e.type,e.payload)},_runPlugins(e){this._plugins.forEach(t=>{try{t(e)}catch(s){this._warn("Plugin error: "+(s&&s.message?s.message:String(s)))}})},_normalizeGlass(e){if(!0===e)return 60;if(!1===e||null==e)return 0;let t=Number(e);return Number.isFinite(t)?Math.max(0,Math.min(100,t)):0},_getRoot(e="bottom-right"){if(!isBrowser)return null;let t=document.getElementById(`juice-toast-root-${e}`);if(!t){switch((t=document.createElement("div")).id=`juice-toast-root-${e}`,t.dataset.position=e,t.dataset.theme=this._theme,t.style.position="fixed",t.style.zIndex=9999,t.style.display="flex",t.style.flexDirection="column",t.style.gap="8px",t.style.pointerEvents="none",e){case"top-left":t.style.top="calc(20px + env(safe-area-inset-top))",t.style.left="20px",t.style.alignItems="flex-start";break;case"top-right":t.style.top="calc(20px + env(safe-area-inset-top))",t.style.right="20px",t.style.alignItems="flex-end";break;case"bottom-left":t.style.bottom="calc(20px + env(safe-area-inset-bottom))",t.style.left="20px",t.style.alignItems="flex-start";break;case"bottom-right":t.style.bottom="calc(20px + env(safe-area-inset-bottom))",t.style.right="20px",t.style.alignItems="flex-end";break;case"top-center":t.style.top="calc(20px + env(safe-area-inset-top))",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.alignItems="center";break;case"bottom-center":t.style.bottom="calc(20px + env(safe-area-inset-bottom))",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.alignItems="center";break;default:t.style.bottom="calc(20px + env(safe-area-inset-bottom))",t.style.right="20px"}document.body.appendChild(t)}return t},_defaults:{duration:2500,maxVisible:3,swipeThreshold:60,glassUI:0,playSound:null,dev:!1,injectCSS:!0,css:null},_warn(e){this._defaults.dev&&"undefined"!=typeof console&&console.warn("[JuiceToast]",e)},_playSound(e){if(!isBrowser)return;let t="string"==typeof e&&e?e:this._defaults.playSound;if(t)try{let s=new Audio(t);s.volume=.6;let a=()=>{s.play().catch(()=>{}),window.removeEventListener("touchstart",a),window.removeEventListener("click",a)};s.play().catch(()=>{window.addEventListener("touchstart",a,{once:!0}),window.addEventListener("click",a,{once:!0})})}catch(i){}},_showToast(e,t){if(!isBrowser)return;!1!==this._defaults.injectCSS&&injectCSS(this._defaults.css||BASE_CSS);let s=this._config[e]||{},a="object"==typeof t?t:{message:String(t)},i={...s,...a};i.icon=i.icon??i.icon_left_top,i.iconPack=i.iconPack??i.icon_config,i.iconLink=i.iconLink??i.icon_onClick_url,i.iconAnimate=i.iconAnimate??i.icon_onClick_animate,i.position=i.position??i.toast,i.closable=i.closable??i.closeable,i.iconPosition=i.iconPosition||"left",i.compact=!!i.compact;let o=themes[i.theme||this._theme]||{},n=document.createElement("div");n.className="juice-toast";let r=i.animation||"slide-in";if(i.enterAnimation||(n.style.animation=`${r} 0.4s ease forwards`),n.setAttribute("role","alert"),n.setAttribute("aria-live","error"===e?"assertive":"polite"),n.setAttribute("aria-atomic","true"),n.tabIndex=0,i.closable){let l=document.createElement("span");l.className="juice-toast-close",l.textContent="\xd7",l.tabIndex=0,l.addEventListener("keydown",e=>{("Enter"===e.key||" "===e.key)&&(n.remove(),this._next())})}if(i.size&&sizePreset[i.size]){let c=sizePreset[i.size];c.width&&(n.style.width=c.width),c.padding&&(n.style.padding=c.padding)}let d=null,p=i.duration??this._defaults.duration;i.progress&&p>0&&((d=document.createElement("div")).className="jt-progress",i.progressColor&&(d.style.background=i.progressColor||"rgba(255,255,255,.7)"),n.appendChild(d)),i.tts&&i.message&&speakTTS(i.message,i.ttsLang??"en-US",i.ttsRate??1);let u=this._normalizeGlass(i.glassUI??this._defaults.glassUI);u>0&&(n.style.setProperty("--jt-glass",i.glassUI??50),n.classList.add("jt-glass")),u||(n.style.background=i.bg||o.bg),n.style.color=i.color||o.color,n.style.border=i.border||o.border,i.compact&&n.classList.add("jt-compact"),i.width&&(n.style.width=i.width),i.height&&(n.style.height=i.height),i.bgImage&&(n.style.backgroundImage=`url(${i.bgImage})`,n.classList.add("bg-image"));let f=null;if(i.icon){(f=document.createElement("i")).className=["icon",i.iconPack||"",i.icon].join(" ").trim(),i.iconSize&&(f.style.fontSize=i.iconSize),(i.iconLink||i.iconAnimate)&&(f.classList.add("icon-clickable"),f.onclick=e=>{e.stopPropagation(),i.iconAnimate&&(f.classList.remove(i.iconAnimate),f.offsetWidth,f.classList.add(i.iconAnimate)),i.iconLink&&window.open(i.iconLink,"_blank","noopener")});let m=i.iconAnimate??TYPE_ANIMATION[e];m&&(f.classList.add(m),f.addEventListener("click",()=>{f.classList.remove(m),f.offsetWidth,f.classList.add(m)}))}reduceMotion&&(n.classList.remove("pop","bounce","shake","wiggle","pulse","spin"),f?.classList.remove("bounce","shake","wiggle","pulse","spin")),i.message||i.title||this._warn("Toast created without message or title"),i.icon&&!i.iconPack&&this._warn("icon provided without iconPack"),i.duration<0&&this._warn("duration cannot be negative");let h=0,g=0,$=!1,b=e=>{let t=e.touches?e.touches[0]:e;h=t.clientX,g=0,$=!0,n.__paused=!0},x=e=>{if(!$)return;let t=e.touches?e.touches[0]:e;g=t.clientX-h,n.style.transform=`translate3d(${g}px, 0, 0)`},y=()=>{$&&($=!1,Math.abs(g)>(this._defaults.swipeThreshold||60)?(n.style.transition="transform .25s ease, opacity .2s ease",n.style.transform=`translate3d(${g>0?1e3:-1e3}px, 0, 0)`,setTimeout(()=>{n.replaceWith(),n.onclick=null,n.onmousedown=null,n.remove(),this._next()},220)):(n.style.transition="transform .2s ease",n.style.transform=""),setTimeout(()=>{n.__paused=!1},60),h=g=0)};isTouch?(n.addEventListener("touchstart",b,{passive:!0}),n.addEventListener("touchmove",x,{passive:!0}),n.addEventListener("touchend",y),n.addEventListener("touchcancel",y)):n.addEventListener("mousedown",e=>{h=e.clientX,g=0,$=!0,n.__paused=!0;let t=e=>{g=e.clientX-h,n.style.transform=`translate3d(${g}px, 0, 0)`},s=()=>{document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",s),y()};document.addEventListener("mousemove",t),document.addEventListener("mouseup",s)});let _=document.createElement("div");_.className="jt-content";let v=i.enterAnimation??"pop";if(v&&!reduceMotion&&n.classList.add(v),i.title){let k=document.createElement("div");k.className="jt-title",k.textContent=i.title,_.appendChild(k)}let w=document.createElement("div");if(w.className="jt-message",w.textContent=i.message||"",_.appendChild(w),f&&"top"===i.iconPosition?(n.classList.add("jt-icon-top"),n.appendChild(f),n.appendChild(_)):f&&"right"===i.iconPosition?(n.appendChild(_),n.appendChild(f)):(f&&n.appendChild(f),n.appendChild(_)),Array.isArray(i.actions)&&i.actions.length){let j=document.createElement("div");j.className="jt-actions",i.actions.forEach(e=>{let t=document.createElement("button");t.className="jt-action",t.textContent=e.label,t.onclick=t=>{t.stopPropagation(),e.onClick?.(t),e.closeOnClick&&(n.replaceWith(),n.onclick=null,n.onmousedown=null,n.remove(),this._next())},j.appendChild(t)}),_.appendChild(j)}if(i.closable){let S=document.createElement("span");S.className="juice-toast-close",S.textContent="\xd7",S.onclick=()=>{n.replaceWith(),n.onclick=null,n.onmousedown=null,n.remove(),this._next()},n.appendChild(S)}isIOSStandalone&&(n.style.borderRadius=n.style.borderRadius||"14px");let E=this._getRoot(i.position),L=this._defaults.maxVisible;if(L&&E.children.length>=L&&E.firstChild.remove(),E.appendChild(n),this._runPlugins({toast:n,cfg:i,type:e,root:E}),requestAnimationFrame(()=>{n.classList.add("show")}),0===p)return;let C=Date.now(),I=p,T=()=>{if(n.__paused)C=Date.now();else{let e=Date.now();I-=e-C,C=e}if(I<=0?(n.classList.remove("show"),setTimeout(()=>{n.replaceWith(),n.onclick=null,n.onmousedown=null,n.remove(),this._next()},300)):raf(T),d){let t=Math.max(0,Math.min(1,I/p));d.style.transform=`scaleX(${t})`}};isTouch||(n.addEventListener("mouseenter",()=>n.__paused=!0),n.addEventListener("mouseleave",()=>n.__paused=!1)),n.addEventListener("touchstart",()=>{n.__paused=!0},{passive:!0}),n.addEventListener("touchend",()=>{n.__paused=!1}),C=Date.now(),raf(T),(i.playSound||this._defaults.playSound)&&this._playSound(i.playSound)}};juiceToast.setup({success:{icon:"fa-check",iconPack:"fa-solid",bg:"#16a34a",progress:!0,duration:3e3},error:{icon:"fa-xmark",iconPack:"fa-solid",bg:"#dc2626",progress:!0,duration:4e3},info:{icon:"fa-circle-info",iconPack:"fa-solid",bg:"#2563eb",progress:!0},warning:{icon:"fa-triangle-exclamation",iconPack:"fa-solid",bg:"#f59e0b",progress:!0},loading:{icon:"fa-spinner",iconPack:"fa-solid",iconAnimate:"spin",duration:0,progress:!1,closable:!1}});export default juiceToast;export{juiceToast};
|
|
337
|
+
|
|
338
|
+
.jt-profile {
|
|
339
|
+
width: 40px;
|
|
340
|
+
height: 40px;
|
|
341
|
+
border-radius: 50%;
|
|
342
|
+
object-fit: cover;
|
|
343
|
+
flex-shrink: 0;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.jt-profile.square {
|
|
347
|
+
border-radius: 8px;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.juice-toast {
|
|
351
|
+
display: flex;
|
|
352
|
+
align-items: center;
|
|
353
|
+
gap: 10px;
|
|
354
|
+
}
|
|
355
|
+
`;function injectCSS(e){if(!isBrowser||__cssInjected)return;let t=document.createElement("style");t.id="juice-toast-style",t.textContent=e,document.head.appendChild(t),__cssInjected=!0}let themes={light:{bg:"#ffffff",color:"#111",border:"1px solid #e5e7eb"},dark:{bg:"#1f2937",color:"#fff",border:"1px solid rgba(255,255,255,.08)"},glass:{bg:"rgba(30,30,30,.35)",color:"#fff",border:"1px solid rgba(255,255,255,.15)"},midnight:{bg:"#0f172a",color:"#e5e7eb",border:"1px solid rgba(255,255,255,.06)"},soft:{bg:"#f8fafc",color:"#0f172a",border:"1px solid #e2e8f0"},neutral:{bg:"#ffffff",color:"#374151",border:"1px solid #d1d5db"},brand:{bg:"#6366f1",color:"#fff",border:"none"},gradient:{bg:"linear-gradient(135deg,#6366f1,#ec4899)",color:"#fff",border:"none"},outline:{bg:"transparent",color:"#111",border:"2px solid currentColor"}},sizePreset={sm:{width:"260px",padding:"10px"},md:{width:"320px",padding:"14px"},lg:{width:"420px",padding:"18px"}},juiceToast={_config:{},_queue:[],_showing:!1,_theme:"dark",_plugins:[],setup(e={}){let{duration:t,maxVisible:s,...a}=e;this._defaults={...this._defaults,duration:t,maxVisible:s},this._config={...this._config,...a},isIOS&&(this._defaults.swipeThreshold=Math.min(this._defaults.swipeThreshold||60,50),this._defaults.glassUI=this._defaults.glassUI||60,this._defaults.duration=this._defaults.duration??2200),this._registerTypes()},use(e){"function"==typeof e&&this._plugins.push(e)},addType(e,t={}){this._config[e]=t,this._registerTypes()},defineTheme(e,t={}){themes[e]={...themes[e]||{},...t}},setTheme(e){if(this._theme=e,!isBrowser)return;let t=document.querySelector('[id^="juice-toast-root-"]');t&&(t.dataset.theme=e)},clear(){this._queue.length=0},destroy(){if(this.clear(),!isBrowser)return;let e=document.querySelectorAll('[id^="juice-toast-root-"]');e.forEach(e=>e.remove())},_registerTypes(){Object.keys(this._config).forEach(e=>{if("function"==typeof this[e]&&!this[e].__auto)return;let t=t=>this._enqueue(e,t);t.__auto=!0,this[e]=t})},_enqueue(e,t){this._queue.push({type:e,payload:t}),this._showing||this._next()},_next(){if(!this._queue.length){this._showing=!1;return}this._showing=!0;let e=this._queue.shift();this._showToast(e.type,e.payload)},_runPlugins(e){this._plugins.forEach(t=>{try{t(e)}catch(s){this._warn("Plugin error: "+(s&&s.message?s.message:String(s)))}})},_normalizeGlass(e){if(!0===e)return 60;if(!1===e||null==e)return 0;let t=Number(e);return Number.isFinite(t)?Math.max(0,Math.min(100,t)):0},_getRoot(e="bottom-right"){if(!isBrowser)return null;let t=document.getElementById(`juice-toast-root-${e}`);if(!t){switch((t=document.createElement("div")).id=`juice-toast-root-${e}`,t.dataset.position=e,t.dataset.theme=this._theme,t.style.position="fixed",t.style.zIndex=9999,t.style.display="flex",t.style.flexDirection="column",t.style.gap="8px",t.style.pointerEvents="none",e){case"top-left":t.style.top="calc(20px + env(safe-area-inset-top))",t.style.left="20px",t.style.alignItems="flex-start";break;case"top-right":t.style.top="calc(20px + env(safe-area-inset-top))",t.style.right="20px",t.style.alignItems="flex-end";break;case"bottom-left":t.style.bottom="calc(20px + env(safe-area-inset-bottom))",t.style.left="20px",t.style.alignItems="flex-start";break;case"bottom-right":t.style.bottom="calc(20px + env(safe-area-inset-bottom))",t.style.right="20px",t.style.alignItems="flex-end";break;case"top-center":t.style.top="calc(20px + env(safe-area-inset-top))",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.alignItems="center";break;case"bottom-center":t.style.bottom="calc(20px + env(safe-area-inset-bottom))",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.alignItems="center";break;default:t.style.bottom="calc(20px + env(safe-area-inset-bottom))",t.style.right="20px"}document.body.appendChild(t)}return t},_defaults:{duration:2500,maxVisible:3,swipeThreshold:60,glassUI:0,playSound:null,dev:!1,injectCSS:!0,css:null},_warn(e){this._defaults.dev&&"undefined"!=typeof console&&console.warn("[JuiceToast]",e)},_playSound(e){if(!isBrowser)return;let t="string"==typeof e&&e?e:this._defaults.playSound;if(t)try{let s=new Audio(t);s.volume=.6;let a=()=>{s.play().catch(()=>{}),window.removeEventListener("touchstart",a),window.removeEventListener("click",a)};s.play().catch(()=>{window.addEventListener("touchstart",a,{once:!0}),window.addEventListener("click",a,{once:!0})})}catch(i){}},_showToast(e,t){if(!isBrowser)return;!1!==this._defaults.injectCSS&&injectCSS(this._defaults.css||BASE_CSS);let s=this._config[e]||{},a="object"==typeof t?t:{message:String(t)},i={...s,...a};i.icon=i.icon??i.icon_left_top,i.iconPack=i.iconPack??i.icon_config,i.iconLink=i.iconLink??i.icon_onClick_url,i.iconAnimate=i.iconAnimate??i.icon_onClick_animate,i.position=i.position??i.toast,i.closable=i.closable??i.closeable,i.iconPosition=i.iconPosition||"left",i.compact=!!i.compact;let o=themes[i.theme||this._theme]||{},n=document.createElement("div");n.className="juice-toast";let r=i.animation||"slide-in";if(i.enterAnimation||(n.style.animation=`${r} 0.4s ease forwards`),n.setAttribute("role","alert"),n.setAttribute("aria-live","error"===e?"assertive":"polite"),n.setAttribute("aria-atomic","true"),n.tabIndex=0,i.closable){let l=document.createElement("span");l.className="juice-toast-close",l.textContent="\xd7",l.tabIndex=0,l.addEventListener("keydown",e=>{("Enter"===e.key||" "===e.key)&&(n.remove(),this._next())})}if(i.size&&sizePreset[i.size]){let c=sizePreset[i.size];c.width&&(n.style.width=c.width),c.padding&&(n.style.padding=c.padding)}let d=null;i.profile&&((d=document.createElement("img")).src=i.profile,d.className="jt-profile","square"===i.profileShape&&d.classList.add("square"),n.appendChild(d));let p=null,u=i.duration??this._defaults.duration;i.progress&&u>0&&((p=document.createElement("div")).className="jt-progress",i.progressColor&&(p.style.background=i.progressColor||"rgba(255,255,255,.7)"),n.appendChild(p)),i.tts&&i.message&&speakTTS(i.message,i.ttsLang??"en-US",i.ttsRate??1);let f=this._normalizeGlass(i.glassUI??this._defaults.glassUI);f>0&&(n.style.setProperty("--jt-glass",i.glassUI??50),n.classList.add("jt-glass")),f||(n.style.background=i.bg||o.bg),n.style.color=i.color||o.color,n.style.border=i.border||o.border,i.compact&&n.classList.add("jt-compact"),i.width&&(n.style.width=i.width),i.height&&(n.style.height=i.height),i.bgImage&&(n.style.backgroundImage=`url(${i.bgImage})`,n.classList.add("bg-image"));let h=null;if(i.icon){(h=document.createElement("i")).className=["icon",i.iconPack||"",i.icon].join(" ").trim(),i.iconSize&&(h.style.fontSize=i.iconSize),(i.iconLink||i.iconAnimate)&&(h.classList.add("icon-clickable"),h.onclick=e=>{e.stopPropagation(),i.iconAnimate&&(h.classList.remove(i.iconAnimate),h.offsetWidth,h.classList.add(i.iconAnimate)),i.iconLink&&window.open(i.iconLink,"_blank","noopener")});let g=i.iconAnimate??TYPE_ANIMATION[e];g&&(h.classList.add(g),h.addEventListener("click",()=>{h.classList.remove(g),h.offsetWidth,h.classList.add(g)}))}reduceMotion&&(n.classList.remove("pop","bounce","shake","wiggle","pulse","spin"),h?.classList.remove("bounce","shake","wiggle","pulse","spin")),i.message||i.title||this._warn("Toast created without message or title"),i.icon&&!i.iconPack&&this._warn("icon provided without iconPack"),i.duration<0&&this._warn("duration cannot be negative");let m=0,$=0,b=!1,x=e=>{let t=e.touches?e.touches[0]:e;m=t.clientX,$=0,b=!0,n.__paused=!0},y=e=>{if(!b)return;let t=e.touches?e.touches[0]:e;$=t.clientX-m,n.style.transform=`translate3d(${$}px, 0, 0)`},_=()=>{b&&(b=!1,Math.abs($)>(this._defaults.swipeThreshold||60)?(n.style.transition="transform .25s ease, opacity .2s ease",n.style.transform=`translate3d(${$>0?1e3:-1e3}px, 0, 0)`,setTimeout(()=>{n.replaceWith(),n.onclick=null,n.onmousedown=null,n.remove(),this._next()},220)):(n.style.transition="transform .2s ease",n.style.transform=""),setTimeout(()=>{n.__paused=!1},60),m=$=0)};isTouch?(n.addEventListener("touchstart",x,{passive:!0}),n.addEventListener("touchmove",y,{passive:!0}),n.addEventListener("touchend",_),n.addEventListener("touchcancel",_)):n.addEventListener("mousedown",e=>{m=e.clientX,$=0,b=!0,n.__paused=!0;let t=e=>{$=e.clientX-m,n.style.transform=`translate3d(${$}px, 0, 0)`},s=()=>{document.removeEventListener("mousemove",t),document.removeEventListener("mouseup",s),_()};document.addEventListener("mousemove",t),document.addEventListener("mouseup",s)});let v=document.createElement("div");v.className="jt-content";let k=i.enterAnimation??"pop";if(k&&!reduceMotion&&n.classList.add(k),i.title){let w=document.createElement("div");w.className="jt-title",w.textContent=i.title,v.appendChild(w)}let j=document.createElement("div");if(j.className="jt-message","string"==typeof i.message){let S=i.message.split(/(`[^`]+`)/g);S.forEach(e=>{if(e.startsWith("`")&&e.endsWith("`")){let t=document.createElement("code");t.textContent=e.slice(1,-1),j.appendChild(t)}else j.appendChild(document.createTextNode(e))})}if(v.appendChild(j),h&&"top"===i.iconPosition?(n.classList.add("jt-icon-top"),n.appendChild(h),n.appendChild(v)):h&&"right"===i.iconPosition?(n.appendChild(v),n.appendChild(h)):(h&&n.appendChild(h),n.appendChild(v)),Array.isArray(i.actions)&&i.actions.length){let E=document.createElement("div");E.className="jt-actions",i.actions.forEach(e=>{let t=document.createElement("button");t.className="jt-action",t.textContent=e.label,t.onclick=t=>{t.stopPropagation(),e.onClick?.(t),e.closeOnClick&&(n.replaceWith(),n.onclick=null,n.onmousedown=null,n.remove(),this._next())},E.appendChild(t)}),v.appendChild(E)}if(i.closable){let C=document.createElement("span");C.className="juice-toast-close",C.textContent="\xd7",C.onclick=()=>{n.replaceWith(),n.onclick=null,n.onmousedown=null,n.remove(),this._next()},n.appendChild(C)}isIOSStandalone&&(n.style.borderRadius=n.style.borderRadius||"14px");let L=this._getRoot(i.position),I=this._defaults.maxVisible;if(I&&L.children.length>=I&&L.firstChild.remove(),L.appendChild(n),this._runPlugins({toast:n,cfg:i,type:e,root:L}),requestAnimationFrame(()=>{n.classList.add("show")}),0===u)return;let T=Date.now(),A=u,P=()=>{if(n.__paused)T=Date.now();else{let e=Date.now();A-=e-T,T=e}if(A<=0?(n.classList.remove("show"),setTimeout(()=>{n.replaceWith(),n.onclick=null,n.onmousedown=null,n.remove(),this._next()},300)):raf(P),p){let t=Math.max(0,Math.min(1,A/u));p.style.transform=`scaleX(${t})`}};isTouch||(n.addEventListener("mouseenter",()=>n.__paused=!0),n.addEventListener("mouseleave",()=>n.__paused=!1)),n.addEventListener("touchstart",()=>{n.__paused=!0},{passive:!0}),n.addEventListener("touchend",()=>{n.__paused=!1}),T=Date.now(),raf(P),(i.playSound||this._defaults.playSound)&&this._playSound(i.playSound)}};juiceToast.setup({success:{icon:"fa-check",iconPack:"fa-solid",bg:"#16a34a",progress:!0,duration:3e3},error:{icon:"fa-xmark",iconPack:"fa-solid",bg:"#dc2626",progress:!0,duration:4e3},info:{icon:"fa-circle-info",iconPack:"fa-solid",bg:"#2563eb",progress:!0},warning:{icon:"fa-triangle-exclamation",iconPack:"fa-solid",bg:"#f59e0b",progress:!0},loading:{icon:"fa-spinner",iconPack:"fa-solid",iconAnimate:"spin",duration:0,progress:!1,closable:!1}});export default juiceToast;export{juiceToast};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "juice-toast",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"description": "Lightweight, dependency-free toast notification library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"toast",
|
|
@@ -60,5 +60,9 @@
|
|
|
60
60
|
"jsdelivr": "dist/juice-toast.esm.js",
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"prettier": "^3.8.1"
|
|
63
|
+
},
|
|
64
|
+
"dependencies": {
|
|
65
|
+
"react": "^19.2.4",
|
|
66
|
+
"react-dom": "^19.2.4"
|
|
63
67
|
}
|
|
64
68
|
}
|