@frybynite/image-cloud 0.2.8 → 0.3.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 +15 -31
- package/dist/image-cloud-auto-init.js +808 -788
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +624 -603
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +3 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +62 -34
- package/package.json +1 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
const
|
|
1
|
+
const Nt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary: #1a1a2e;--fbn-ic-bg-glass: rgba(255, 255, 255, .05);--fbn-ic-border-glass: rgba(255, 255, 255, .1);--fbn-ic-text-primary: #ffffff;--fbn-ic-text-secondary: #b8b8d1;--fbn-ic-text-muted: #6b6b8f;--fbn-ic-accent-primary: #6366f1;--fbn-ic-accent-secondary: #8b5cf6;--fbn-ic-accent-glow: rgba(99, 102, 241, .4);--fbn-ic-transition-smooth: cubic-bezier(.4, 0, .2, 1);--fbn-ic-transition-bounce: cubic-bezier(.68, -.55, .265, 1.55);--fbn-ic-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--fbn-ic-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--fbn-ic-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--fbn-ic-shadow-glow: 0 0 20px var(--fbn-ic-accent-glow)}.fbn-ic-gallery{position:relative;width:100%;height:100%;overflow:hidden;perspective:1000px}.fbn-ic-image{position:absolute;border-radius:8px;box-shadow:var(--fbn-ic-shadow-md);cursor:pointer;transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s .6s;will-change:transform;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}.fbn-ic-image:hover{box-shadow:var(--fbn-ic-shadow-lg)}.fbn-ic-image.fbn-ic-focused{z-index:1000;box-shadow:0 20px 60px #000000b3,var(--fbn-ic-shadow-glow);transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s 0s;will-change:auto}.fbn-ic-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--fbn-ic-text-secondary);z-index:100;pointer-events:none}.fbn-ic-spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid var(--fbn-ic-border-glass);border-top:4px solid var(--fbn-ic-accent-primary);border-radius:50%;animation:fbn-ic-spin 1s linear infinite}@keyframes fbn-ic-spin{to{transform:rotate(360deg)}}.fbn-ic-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:600px;padding:1.5rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.fbn-ic-hidden{display:none!important}", Et = Object.freeze({
|
|
2
2
|
none: "none",
|
|
3
3
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
4
4
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
5
5
|
lg: "0 8px 32px rgba(0,0,0,0.5)",
|
|
6
6
|
glow: "0 0 30px rgba(255,255,255,0.6)"
|
|
7
|
-
}),
|
|
7
|
+
}), Ct = Object.freeze({
|
|
8
8
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
9
9
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
10
10
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
11
|
-
}),
|
|
11
|
+
}), zt = Object.freeze({
|
|
12
12
|
gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
|
|
13
13
|
bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
|
|
14
14
|
wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
|
|
@@ -56,10 +56,10 @@ const kt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
56
56
|
phaseShift: 0,
|
|
57
57
|
synchronization: "offset"
|
|
58
58
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
59
|
-
}),
|
|
59
|
+
}), Gt = Object.freeze({
|
|
60
60
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
61
61
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
62
|
-
}),
|
|
62
|
+
}), Wt = Object.freeze({
|
|
63
63
|
mode: "adaptive",
|
|
64
64
|
// Default to adaptive sizing
|
|
65
65
|
minSize: 50,
|
|
@@ -71,38 +71,28 @@ const kt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
71
71
|
// No variance by default
|
|
72
72
|
max: 1
|
|
73
73
|
})
|
|
74
|
-
}),
|
|
74
|
+
}), qt = Object.freeze({
|
|
75
75
|
mode: "none",
|
|
76
76
|
range: Object.freeze({
|
|
77
77
|
min: -15,
|
|
78
78
|
max: 15
|
|
79
79
|
})
|
|
80
80
|
}), Dt = Object.freeze({
|
|
81
|
-
sizing:
|
|
82
|
-
rotation:
|
|
83
|
-
}),
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
static: Object.freeze({
|
|
97
|
-
sources: [],
|
|
98
|
-
// Must be provided by user
|
|
99
|
-
validateUrls: !0,
|
|
100
|
-
validationTimeout: 5e3,
|
|
101
|
-
validationMethod: "head",
|
|
102
|
-
failOnAllMissing: !0,
|
|
103
|
-
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"],
|
|
104
|
-
debugLogging: !1
|
|
105
|
-
})
|
|
81
|
+
sizing: Wt,
|
|
82
|
+
rotation: qt
|
|
83
|
+
}), Ut = Object.freeze({
|
|
84
|
+
validateUrls: !0,
|
|
85
|
+
validationTimeout: 5e3,
|
|
86
|
+
validationMethod: "head",
|
|
87
|
+
failOnAllMissing: !0,
|
|
88
|
+
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"],
|
|
89
|
+
debugLogging: !1
|
|
90
|
+
}), S = Object.freeze({
|
|
91
|
+
// Loader configuration (always an array, composite behavior is implicit)
|
|
92
|
+
loaders: [],
|
|
93
|
+
// Shared loader settings
|
|
94
|
+
config: Object.freeze({
|
|
95
|
+
loaders: Ut
|
|
106
96
|
}),
|
|
107
97
|
// Image sizing and rotation configuration
|
|
108
98
|
image: Dt,
|
|
@@ -111,7 +101,7 @@ const kt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
111
101
|
algorithm: "radial",
|
|
112
102
|
scaleDecay: 0,
|
|
113
103
|
// No decay by default (0-1 for radial/spiral)
|
|
114
|
-
responsive:
|
|
104
|
+
responsive: Gt,
|
|
115
105
|
targetCoverage: 0.6,
|
|
116
106
|
// Target 60% of container area
|
|
117
107
|
densityFactor: 1,
|
|
@@ -235,50 +225,50 @@ const kt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
235
225
|
// Debug mode
|
|
236
226
|
debug: !1
|
|
237
227
|
});
|
|
238
|
-
function rt(
|
|
239
|
-
if (!
|
|
240
|
-
if (!t) return { ...
|
|
241
|
-
const e = { ...
|
|
242
|
-
return t.border !== void 0 && (e.border = { ...
|
|
228
|
+
function rt(n, t) {
|
|
229
|
+
if (!n) return t || {};
|
|
230
|
+
if (!t) return { ...n };
|
|
231
|
+
const e = { ...n };
|
|
232
|
+
return t.border !== void 0 && (e.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...n.outline, ...t.outline }), t.shadow !== void 0 && (e.shadow = t.shadow), t.opacity !== void 0 && (e.opacity = t.opacity), t.cursor !== void 0 && (e.cursor = t.cursor), t.className !== void 0 && (e.className = t.className), t.objectFit !== void 0 && (e.objectFit = t.objectFit), t.aspectRatio !== void 0 && (e.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (e.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (e.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (e.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (e.borderRadiusBottomLeft = t.borderRadiusBottomLeft), e;
|
|
243
233
|
}
|
|
244
|
-
function
|
|
245
|
-
if (!t) return { ...
|
|
246
|
-
const e = rt(
|
|
247
|
-
rt(e,
|
|
234
|
+
function Yt(n, t) {
|
|
235
|
+
if (!t) return { ...n };
|
|
236
|
+
const e = rt(n.default, t.default), i = rt(
|
|
237
|
+
rt(e, n.hover),
|
|
248
238
|
t.hover
|
|
249
|
-
),
|
|
250
|
-
rt(e,
|
|
239
|
+
), o = rt(
|
|
240
|
+
rt(e, n.focused),
|
|
251
241
|
t.focused
|
|
252
242
|
);
|
|
253
243
|
return {
|
|
254
244
|
default: e,
|
|
255
245
|
hover: i,
|
|
256
|
-
focused:
|
|
246
|
+
focused: o
|
|
257
247
|
};
|
|
258
248
|
}
|
|
259
|
-
function
|
|
260
|
-
var i,
|
|
261
|
-
if (!t) return { ...
|
|
262
|
-
const e = { ...
|
|
249
|
+
function Xt(n, t) {
|
|
250
|
+
var i, o, a, r, s, h, l, u;
|
|
251
|
+
if (!t) return { ...n };
|
|
252
|
+
const e = { ...n };
|
|
263
253
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
264
|
-
...
|
|
254
|
+
...n.sizing,
|
|
265
255
|
...t.sizing
|
|
266
256
|
}, t.sizing.variance)) {
|
|
267
|
-
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((
|
|
257
|
+
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((o = (i = n.sizing) == null ? void 0 : i.variance) == null ? void 0 : o.min) ?? 1, m = c.max !== void 0 && c.max >= 1 && c.max <= 1.75 ? c.max : ((r = (a = n.sizing) == null ? void 0 : a.variance) == null ? void 0 : r.max) ?? 1;
|
|
268
258
|
e.sizing.variance = { min: d, max: m };
|
|
269
259
|
}
|
|
270
260
|
if (t.rotation !== void 0 && (e.rotation = {
|
|
271
|
-
...
|
|
261
|
+
...n.rotation,
|
|
272
262
|
...t.rotation
|
|
273
263
|
}, t.rotation.range)) {
|
|
274
|
-
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (
|
|
264
|
+
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (s = n.rotation) == null ? void 0 : s.range) == null ? void 0 : h.min) ?? -15, m = c.max !== void 0 && c.max >= 0 && c.max <= 180 ? c.max : ((u = (l = n.rotation) == null ? void 0 : l.range) == null ? void 0 : u.max) ?? 15;
|
|
275
265
|
e.rotation.range = { min: d, max: m };
|
|
276
266
|
}
|
|
277
267
|
return e;
|
|
278
268
|
}
|
|
279
|
-
function
|
|
269
|
+
function Bt(n) {
|
|
280
270
|
var e;
|
|
281
|
-
const t = (e =
|
|
271
|
+
const t = (e = n.layout) == null ? void 0 : e.rotation;
|
|
282
272
|
if (t && "enabled" in t)
|
|
283
273
|
return {
|
|
284
274
|
rotation: {
|
|
@@ -287,9 +277,9 @@ function Xt(o) {
|
|
|
287
277
|
}
|
|
288
278
|
};
|
|
289
279
|
}
|
|
290
|
-
function
|
|
280
|
+
function Jt(n) {
|
|
291
281
|
var e, i;
|
|
292
|
-
const t = (i = (e =
|
|
282
|
+
const t = (i = (e = n.layout) == null ? void 0 : e.sizing) == null ? void 0 : i.variance;
|
|
293
283
|
if (t)
|
|
294
284
|
return {
|
|
295
285
|
sizing: {
|
|
@@ -299,113 +289,112 @@ function Bt(o) {
|
|
|
299
289
|
}
|
|
300
290
|
};
|
|
301
291
|
}
|
|
302
|
-
function Vt(
|
|
303
|
-
var
|
|
304
|
-
const t =
|
|
305
|
-
let i =
|
|
292
|
+
function Vt(n = {}) {
|
|
293
|
+
var h, l;
|
|
294
|
+
const t = Bt(n), e = Jt(n);
|
|
295
|
+
let i = n.image;
|
|
306
296
|
(t || e) && (i = {
|
|
307
297
|
...e || {},
|
|
308
298
|
...t || {},
|
|
309
299
|
...i
|
|
310
|
-
}, i.rotation && (t != null && t.rotation) && ((
|
|
300
|
+
}, i.rotation && (t != null && t.rotation) && ((h = n.image) != null && h.rotation) && (i.rotation = {
|
|
311
301
|
...t.rotation,
|
|
312
|
-
...
|
|
302
|
+
...n.image.rotation
|
|
313
303
|
}));
|
|
314
|
-
const
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
304
|
+
const o = [...n.loaders ?? []];
|
|
305
|
+
n.images && n.images.length > 0 && o.unshift({
|
|
306
|
+
static: {
|
|
307
|
+
sources: [{ urls: n.images }]
|
|
308
|
+
}
|
|
309
|
+
});
|
|
310
|
+
const r = {
|
|
311
|
+
loaders: {
|
|
312
|
+
...Ut,
|
|
313
|
+
...((l = n.config) == null ? void 0 : l.loaders) ?? {}
|
|
314
|
+
}
|
|
315
|
+
}, s = {
|
|
316
|
+
loaders: o,
|
|
317
|
+
config: r,
|
|
318
|
+
image: Xt(Dt, i),
|
|
319
|
+
layout: { ...S.layout },
|
|
320
|
+
animation: { ...S.animation },
|
|
321
|
+
interaction: { ...S.interaction },
|
|
322
|
+
rendering: { ...S.rendering },
|
|
323
|
+
styling: Yt($t, n.styling),
|
|
324
|
+
debug: S.debug
|
|
323
325
|
};
|
|
324
|
-
return
|
|
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
|
-
|
|
379
|
-
...
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
...
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
...o.rendering
|
|
386
|
-
}, o.rendering.responsive && (n.rendering.responsive = {
|
|
387
|
-
...y.rendering.responsive,
|
|
388
|
-
...o.rendering.responsive,
|
|
389
|
-
breakpoints: o.rendering.responsive.breakpoints ? { ...y.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : y.rendering.responsive.breakpoints,
|
|
390
|
-
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : y.rendering.responsive.mobileDetection
|
|
391
|
-
}), o.rendering.ui && (n.rendering.ui = {
|
|
392
|
-
...y.rendering.ui,
|
|
393
|
-
...o.rendering.ui
|
|
394
|
-
}), o.rendering.performance && (n.rendering.performance = {
|
|
395
|
-
...y.rendering.performance,
|
|
396
|
-
...o.rendering.performance
|
|
397
|
-
})), o.debug !== void 0 && (n.debug = o.debug), n;
|
|
326
|
+
return n.layout && (s.layout = {
|
|
327
|
+
...S.layout,
|
|
328
|
+
...n.layout
|
|
329
|
+
}, n.layout.responsive && (s.layout.responsive = {
|
|
330
|
+
...S.layout.responsive,
|
|
331
|
+
mobile: n.layout.responsive.mobile ? { ...S.layout.responsive.mobile, ...n.layout.responsive.mobile } : S.layout.responsive.mobile,
|
|
332
|
+
tablet: n.layout.responsive.tablet ? { ...S.layout.responsive.tablet, ...n.layout.responsive.tablet } : S.layout.responsive.tablet
|
|
333
|
+
}), n.layout.spacing && (s.layout.spacing = {
|
|
334
|
+
...S.layout.spacing,
|
|
335
|
+
...n.layout.spacing
|
|
336
|
+
})), n.animation && (s.animation = {
|
|
337
|
+
...S.animation,
|
|
338
|
+
...n.animation
|
|
339
|
+
}, n.animation.easing && (s.animation.easing = {
|
|
340
|
+
...S.animation.easing,
|
|
341
|
+
...n.animation.easing
|
|
342
|
+
}), n.animation.queue && (s.animation.queue = {
|
|
343
|
+
...S.animation.queue,
|
|
344
|
+
...n.animation.queue
|
|
345
|
+
}), n.animation.performance && (s.animation.performance = {
|
|
346
|
+
...S.animation.performance,
|
|
347
|
+
...n.animation.performance
|
|
348
|
+
}), n.animation.entry && (s.animation.entry = {
|
|
349
|
+
...S.animation.entry,
|
|
350
|
+
...n.animation.entry,
|
|
351
|
+
start: n.animation.entry.start ? {
|
|
352
|
+
...S.animation.entry.start,
|
|
353
|
+
...n.animation.entry.start,
|
|
354
|
+
circular: n.animation.entry.start.circular ? { ...S.animation.entry.start.circular, ...n.animation.entry.start.circular } : S.animation.entry.start.circular
|
|
355
|
+
} : S.animation.entry.start,
|
|
356
|
+
timing: n.animation.entry.timing ? { ...S.animation.entry.timing, ...n.animation.entry.timing } : S.animation.entry.timing,
|
|
357
|
+
path: n.animation.entry.path ? { ...Tt, ...n.animation.entry.path } : S.animation.entry.path,
|
|
358
|
+
rotation: n.animation.entry.rotation ? { ...Rt, ...n.animation.entry.rotation } : S.animation.entry.rotation,
|
|
359
|
+
scale: n.animation.entry.scale ? { ...At, ...n.animation.entry.scale } : S.animation.entry.scale
|
|
360
|
+
})), n.interaction && (s.interaction = {
|
|
361
|
+
...S.interaction,
|
|
362
|
+
...n.interaction
|
|
363
|
+
}, n.interaction.focus && (s.interaction.focus = {
|
|
364
|
+
...S.interaction.focus,
|
|
365
|
+
...n.interaction.focus
|
|
366
|
+
}), n.interaction.navigation && (s.interaction.navigation = {
|
|
367
|
+
...S.interaction.navigation,
|
|
368
|
+
...n.interaction.navigation
|
|
369
|
+
}), n.interaction.gestures && (s.interaction.gestures = {
|
|
370
|
+
...S.interaction.gestures,
|
|
371
|
+
...n.interaction.gestures
|
|
372
|
+
})), n.rendering && (s.rendering = {
|
|
373
|
+
...S.rendering,
|
|
374
|
+
...n.rendering
|
|
375
|
+
}, n.rendering.responsive && (s.rendering.responsive = {
|
|
376
|
+
...S.rendering.responsive,
|
|
377
|
+
...n.rendering.responsive,
|
|
378
|
+
breakpoints: n.rendering.responsive.breakpoints ? { ...S.rendering.responsive.breakpoints, ...n.rendering.responsive.breakpoints } : S.rendering.responsive.breakpoints,
|
|
379
|
+
mobileDetection: n.rendering.responsive.mobileDetection ? n.rendering.responsive.mobileDetection : S.rendering.responsive.mobileDetection
|
|
380
|
+
}), n.rendering.ui && (s.rendering.ui = {
|
|
381
|
+
...S.rendering.ui,
|
|
382
|
+
...n.rendering.ui
|
|
383
|
+
}), n.rendering.performance && (s.rendering.performance = {
|
|
384
|
+
...S.rendering.performance,
|
|
385
|
+
...n.rendering.performance
|
|
386
|
+
})), n.debug !== void 0 && (s.debug = n.debug), s;
|
|
398
387
|
}
|
|
399
|
-
function
|
|
400
|
-
return { ...
|
|
388
|
+
function Kt(n, t) {
|
|
389
|
+
return { ...n ? Ct[n] : Ct.playful, ...t };
|
|
401
390
|
}
|
|
402
|
-
function
|
|
403
|
-
return { ...
|
|
391
|
+
function Zt(n, t) {
|
|
392
|
+
return { ...n ? zt[n] : zt.gentle, ...t };
|
|
404
393
|
}
|
|
405
|
-
function
|
|
406
|
-
return { ...
|
|
394
|
+
function Qt(n, t) {
|
|
395
|
+
return { ...n ? Ft[n] : Ft.gentle, ...t };
|
|
407
396
|
}
|
|
408
|
-
class
|
|
397
|
+
class te {
|
|
409
398
|
constructor(t) {
|
|
410
399
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
411
400
|
}
|
|
@@ -416,8 +405,8 @@ class Qt {
|
|
|
416
405
|
buildTransformString(t) {
|
|
417
406
|
const e = ["translate(-50%, -50%)"];
|
|
418
407
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
419
|
-
const i = t.x ?? 0,
|
|
420
|
-
e.push(`translate(${i}px, ${
|
|
408
|
+
const i = t.x ?? 0, o = t.y ?? 0;
|
|
409
|
+
e.push(`translate(${i}px, ${o}px)`);
|
|
421
410
|
}
|
|
422
411
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && e.push(`scale(${t.scale})`), e.join(" ");
|
|
423
412
|
}
|
|
@@ -430,9 +419,9 @@ class Qt {
|
|
|
430
419
|
* @param easing - CSS easing function (optional)
|
|
431
420
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
432
421
|
*/
|
|
433
|
-
animateTransformCancellable(t, e, i,
|
|
422
|
+
animateTransformCancellable(t, e, i, o = null, a = null) {
|
|
434
423
|
this.cancelAllAnimations(t);
|
|
435
|
-
const r =
|
|
424
|
+
const r = o ?? this.config.duration, s = a ?? this.config.easing.default, h = this.buildTransformString(e), l = this.buildTransformString(i);
|
|
436
425
|
t.style.transition = "none";
|
|
437
426
|
const u = t.animate(
|
|
438
427
|
[
|
|
@@ -441,7 +430,7 @@ class Qt {
|
|
|
441
430
|
],
|
|
442
431
|
{
|
|
443
432
|
duration: r,
|
|
444
|
-
easing:
|
|
433
|
+
easing: s,
|
|
445
434
|
fill: "forwards"
|
|
446
435
|
// Keep final state after animation
|
|
447
436
|
}
|
|
@@ -469,13 +458,13 @@ class Qt {
|
|
|
469
458
|
cancelAnimation(t, e = !0) {
|
|
470
459
|
const i = this.getCurrentTransform(t.element);
|
|
471
460
|
if (t.animation.cancel(), e) {
|
|
472
|
-
const
|
|
461
|
+
const o = this.buildTransformString({
|
|
473
462
|
x: i.x,
|
|
474
463
|
y: i.y,
|
|
475
464
|
rotation: i.rotation,
|
|
476
465
|
scale: i.scale
|
|
477
466
|
});
|
|
478
|
-
t.element.style.transform =
|
|
467
|
+
t.element.style.transform = o;
|
|
479
468
|
}
|
|
480
469
|
return this.activeAnimations.delete(t.element), i;
|
|
481
470
|
}
|
|
@@ -488,8 +477,8 @@ class Qt {
|
|
|
488
477
|
const e = this.activeAnimations.get(t);
|
|
489
478
|
e && this.cancelAnimation(e, !1);
|
|
490
479
|
const i = t.getAnimations();
|
|
491
|
-
for (const
|
|
492
|
-
|
|
480
|
+
for (const o of i)
|
|
481
|
+
o.cancel();
|
|
493
482
|
}
|
|
494
483
|
/**
|
|
495
484
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -501,8 +490,8 @@ class Qt {
|
|
|
501
490
|
const i = getComputedStyle(t).transform;
|
|
502
491
|
if (i === "none" || !i)
|
|
503
492
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
504
|
-
const
|
|
505
|
-
return { x:
|
|
493
|
+
const o = new DOMMatrix(i), a = Math.sqrt(o.a * o.a + o.b * o.b), r = Math.atan2(o.b, o.a) * (180 / Math.PI), s = o.e, h = o.f;
|
|
494
|
+
return { x: s, y: h, rotation: r, scale: a };
|
|
506
495
|
}
|
|
507
496
|
/**
|
|
508
497
|
* Check if an element has an active animation
|
|
@@ -528,11 +517,11 @@ class Qt {
|
|
|
528
517
|
* @param easing - CSS easing function (optional)
|
|
529
518
|
* @returns Promise that resolves when animation completes
|
|
530
519
|
*/
|
|
531
|
-
animateTransform(t, e, i = null,
|
|
532
|
-
return new Promise((
|
|
533
|
-
const r = i ?? this.config.duration,
|
|
534
|
-
t.style.transition = `transform ${r}ms ${
|
|
535
|
-
|
|
520
|
+
animateTransform(t, e, i = null, o = null) {
|
|
521
|
+
return new Promise((a) => {
|
|
522
|
+
const r = i ?? this.config.duration, s = o ?? this.config.easing.default;
|
|
523
|
+
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
|
|
524
|
+
a();
|
|
536
525
|
}, r);
|
|
537
526
|
});
|
|
538
527
|
}
|
|
@@ -561,102 +550,102 @@ class Qt {
|
|
|
561
550
|
return new Promise((e) => setTimeout(e, t));
|
|
562
551
|
}
|
|
563
552
|
}
|
|
564
|
-
function st(
|
|
565
|
-
return
|
|
553
|
+
function st(n, t, e) {
|
|
554
|
+
return n + (t - n) * e;
|
|
566
555
|
}
|
|
567
|
-
function
|
|
568
|
-
const { overshoot:
|
|
569
|
-
let u = 0, c = 0, d = 1, m =
|
|
556
|
+
function ee(n, t, e, i) {
|
|
557
|
+
const { overshoot: o, bounces: a, decayRatio: r } = i, s = e.x - t.x, h = e.y - t.y, l = ie(a, r);
|
|
558
|
+
let u = 0, c = 0, d = 1, m = o, b = !1;
|
|
570
559
|
for (let g = 0; g < l.length; g++)
|
|
571
|
-
if (
|
|
560
|
+
if (n <= l[g].time) {
|
|
572
561
|
c = g === 0 ? 0 : l[g - 1].time, d = l[g].time, m = l[g].overshoot, b = l[g].isOvershoot;
|
|
573
562
|
break;
|
|
574
563
|
}
|
|
575
|
-
const p = (
|
|
564
|
+
const p = (n - c) / (d - c);
|
|
576
565
|
if (b)
|
|
577
566
|
u = 1 + m * gt(p);
|
|
578
567
|
else if (c === 0)
|
|
579
568
|
u = gt(p);
|
|
580
569
|
else {
|
|
581
570
|
const g = l.find(
|
|
582
|
-
(
|
|
571
|
+
(y, v) => y.time > c && v > 0 && l[v - 1].isOvershoot
|
|
583
572
|
), f = 1 + ((g == null ? void 0 : g.overshoot) || m);
|
|
584
573
|
u = st(f, 1, gt(p));
|
|
585
574
|
}
|
|
586
575
|
return {
|
|
587
|
-
x: t.x +
|
|
576
|
+
x: t.x + s * u,
|
|
588
577
|
y: t.y + h * u
|
|
589
578
|
};
|
|
590
579
|
}
|
|
591
|
-
function
|
|
580
|
+
function ie(n, t) {
|
|
592
581
|
const e = [];
|
|
593
582
|
let i = 0.6;
|
|
594
583
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
595
|
-
let
|
|
596
|
-
const r = 0.4 / (
|
|
597
|
-
for (let
|
|
598
|
-
i += r, e.push({ time: i, overshoot:
|
|
584
|
+
let o = 0.15;
|
|
585
|
+
const r = 0.4 / (n * 2);
|
|
586
|
+
for (let s = 0; s < n; s++)
|
|
587
|
+
i += r, e.push({ time: i, overshoot: o, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
599
588
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
600
589
|
}
|
|
601
|
-
function
|
|
602
|
-
const { stiffness:
|
|
590
|
+
function ne(n, t, e, i) {
|
|
591
|
+
const { stiffness: o, damping: a, mass: r, oscillations: s } = i, h = e.x - t.x, l = e.y - t.y, u = Math.sqrt(o / r), c = a / (2 * Math.sqrt(o * r));
|
|
603
592
|
let d;
|
|
604
593
|
if (c < 1) {
|
|
605
|
-
const m = u * Math.sqrt(1 - c * c), b = Math.exp(-c * u *
|
|
594
|
+
const m = u * Math.sqrt(1 - c * c), b = Math.exp(-c * u * n * 3), p = Math.cos(m * n * s * Math.PI);
|
|
606
595
|
d = 1 - b * p;
|
|
607
596
|
} else
|
|
608
|
-
d = 1 - Math.exp(-u *
|
|
597
|
+
d = 1 - Math.exp(-u * n * 3);
|
|
609
598
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
610
599
|
x: t.x + h * d,
|
|
611
600
|
y: t.y + l * d
|
|
612
601
|
};
|
|
613
602
|
}
|
|
614
|
-
function
|
|
615
|
-
const { amplitude:
|
|
603
|
+
function oe(n, t, e, i) {
|
|
604
|
+
const { amplitude: o, frequency: a, decay: r, decayRate: s, phase: h } = i, l = e.x - t.x, u = e.y - t.y, c = Math.sqrt(l * l + u * u), d = c > 0 ? -u / c : 0, m = c > 0 ? l / c : 1, b = a * Math.PI * 2 * n + h, p = r ? Math.pow(1 - n, s) : 1, g = o * Math.sin(b) * p, f = se(n);
|
|
616
605
|
return {
|
|
617
606
|
x: st(t.x, e.x, f) + g * d,
|
|
618
607
|
y: st(t.y, e.y, f) + g * m
|
|
619
608
|
};
|
|
620
609
|
}
|
|
621
|
-
function gt(
|
|
622
|
-
return 1 - (1 -
|
|
610
|
+
function gt(n) {
|
|
611
|
+
return 1 - (1 - n) * (1 - n);
|
|
623
612
|
}
|
|
624
|
-
function
|
|
625
|
-
return 1 - Math.pow(1 -
|
|
613
|
+
function se(n) {
|
|
614
|
+
return 1 - Math.pow(1 - n, 3);
|
|
626
615
|
}
|
|
627
|
-
function
|
|
628
|
-
const { amplitude: i, frequency:
|
|
616
|
+
function ae(n, t, e) {
|
|
617
|
+
const { amplitude: i, frequency: o, decay: a } = e, r = Math.sin(n * o * Math.PI * 2), s = a ? Math.pow(1 - n, 2) : 1, h = i * r * s;
|
|
629
618
|
return t + h;
|
|
630
619
|
}
|
|
631
|
-
function
|
|
632
|
-
const { overshoot: i, bounces:
|
|
633
|
-
|
|
620
|
+
function re(n, t, e) {
|
|
621
|
+
const { overshoot: i, bounces: o } = e, a = [];
|
|
622
|
+
a.push({ time: 0.5, scale: i });
|
|
634
623
|
let r = i;
|
|
635
|
-
const
|
|
624
|
+
const s = 0.5, l = 0.5 / (o * 2);
|
|
636
625
|
let u = 0.5;
|
|
637
|
-
for (let d = 0; d <
|
|
638
|
-
const m = 1 - (r - 1) *
|
|
639
|
-
u += l,
|
|
626
|
+
for (let d = 0; d < o; d++) {
|
|
627
|
+
const m = 1 - (r - 1) * s;
|
|
628
|
+
u += l, a.push({ time: u, scale: m }), r = 1 + (r - 1) * s * s, u += l, d < o - 1 && a.push({ time: u, scale: r });
|
|
640
629
|
}
|
|
641
|
-
|
|
630
|
+
a.push({ time: 1, scale: 1 });
|
|
642
631
|
let c = 1;
|
|
643
|
-
for (let d = 0; d <
|
|
644
|
-
if (
|
|
645
|
-
const m = d === 0 ? 0 :
|
|
646
|
-
c = b + (
|
|
632
|
+
for (let d = 0; d < a.length; d++)
|
|
633
|
+
if (n <= a[d].time) {
|
|
634
|
+
const m = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (n - m) / (a[d].time - m), g = gt(p);
|
|
635
|
+
c = b + (a[d].scale - b) * g;
|
|
647
636
|
break;
|
|
648
637
|
}
|
|
649
638
|
return c * t;
|
|
650
639
|
}
|
|
651
|
-
function
|
|
640
|
+
function ce(n) {
|
|
652
641
|
const {
|
|
653
642
|
element: t,
|
|
654
643
|
startPosition: e,
|
|
655
644
|
endPosition: i,
|
|
656
|
-
pathConfig:
|
|
657
|
-
duration:
|
|
645
|
+
pathConfig: o,
|
|
646
|
+
duration: a,
|
|
658
647
|
imageWidth: r,
|
|
659
|
-
imageHeight:
|
|
648
|
+
imageHeight: s,
|
|
660
649
|
rotation: h,
|
|
661
650
|
scale: l,
|
|
662
651
|
onComplete: u,
|
|
@@ -664,58 +653,58 @@ function re(o) {
|
|
|
664
653
|
startRotation: d,
|
|
665
654
|
scaleConfig: m,
|
|
666
655
|
startScale: b
|
|
667
|
-
} =
|
|
668
|
-
if ((p === "linear" || p === "arc") && !
|
|
656
|
+
} = n, p = o.type, g = d !== void 0 && d !== h, f = (c == null ? void 0 : c.mode) === "wobble", y = (c == null ? void 0 : c.wobble) || { amplitude: 15, frequency: 3, decay: !0 }, v = g || f, I = b !== void 0 && b !== l, R = (m == null ? void 0 : m.mode) === "pop", w = (m == null ? void 0 : m.pop) || { overshoot: 1.2, bounces: 1 };
|
|
657
|
+
if ((p === "linear" || p === "arc") && !v && !(I || R)) {
|
|
669
658
|
u && u();
|
|
670
659
|
return;
|
|
671
660
|
}
|
|
672
|
-
const k = performance.now(),
|
|
673
|
-
function
|
|
674
|
-
const
|
|
661
|
+
const k = performance.now(), P = -r / 2, D = -s / 2;
|
|
662
|
+
function U(N) {
|
|
663
|
+
const z = N - k, x = Math.min(z / a, 1);
|
|
675
664
|
let A;
|
|
676
665
|
switch (p) {
|
|
677
666
|
case "bounce": {
|
|
678
|
-
const
|
|
679
|
-
|
|
680
|
-
|
|
667
|
+
const H = Kt(
|
|
668
|
+
o.bouncePreset,
|
|
669
|
+
o.bounce
|
|
681
670
|
);
|
|
682
|
-
A =
|
|
671
|
+
A = ee(x, e, i, H);
|
|
683
672
|
break;
|
|
684
673
|
}
|
|
685
674
|
case "elastic": {
|
|
686
|
-
const
|
|
687
|
-
|
|
688
|
-
|
|
675
|
+
const H = Zt(
|
|
676
|
+
o.elasticPreset,
|
|
677
|
+
o.elastic
|
|
689
678
|
);
|
|
690
|
-
A =
|
|
679
|
+
A = ne(x, e, i, H);
|
|
691
680
|
break;
|
|
692
681
|
}
|
|
693
682
|
case "wave": {
|
|
694
|
-
const
|
|
695
|
-
|
|
696
|
-
|
|
683
|
+
const H = Qt(
|
|
684
|
+
o.wavePreset,
|
|
685
|
+
o.wave
|
|
697
686
|
);
|
|
698
|
-
A =
|
|
687
|
+
A = oe(x, e, i, H);
|
|
699
688
|
break;
|
|
700
689
|
}
|
|
701
690
|
default:
|
|
702
691
|
A = {
|
|
703
|
-
x: st(e.x, i.x,
|
|
704
|
-
y: st(e.y, i.y,
|
|
692
|
+
x: st(e.x, i.x, x),
|
|
693
|
+
y: st(e.y, i.y, x)
|
|
705
694
|
};
|
|
706
695
|
}
|
|
707
|
-
const O = A.x - i.x,
|
|
696
|
+
const O = A.x - i.x, C = A.y - i.y;
|
|
708
697
|
let T;
|
|
709
|
-
f ? T =
|
|
698
|
+
f ? T = ae(x, h, y) : g ? T = st(d, h, x) : T = h;
|
|
710
699
|
let M;
|
|
711
|
-
R ? M =
|
|
700
|
+
R ? M = re(x, l, w) : I ? M = st(b, l, x) : M = l, t.style.transform = `translate(${P}px, ${D}px) translate(${O}px, ${C}px) rotate(${T}deg) scale(${M})`, x < 1 ? requestAnimationFrame(U) : (t.style.transform = `translate(${P}px, ${D}px) rotate(${h}deg) scale(${l})`, u && u());
|
|
712
701
|
}
|
|
713
|
-
requestAnimationFrame(
|
|
702
|
+
requestAnimationFrame(U);
|
|
714
703
|
}
|
|
715
|
-
function
|
|
716
|
-
return
|
|
704
|
+
function le(n) {
|
|
705
|
+
return n === "bounce" || n === "elastic" || n === "wave";
|
|
717
706
|
}
|
|
718
|
-
const
|
|
707
|
+
const he = {
|
|
719
708
|
radial: "center",
|
|
720
709
|
spiral: "center",
|
|
721
710
|
grid: "top",
|
|
@@ -723,7 +712,7 @@ const le = {
|
|
|
723
712
|
random: "nearest-edge",
|
|
724
713
|
wave: "left"
|
|
725
714
|
};
|
|
726
|
-
class
|
|
715
|
+
class de {
|
|
727
716
|
constructor(t, e) {
|
|
728
717
|
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || Tt, this.rotationConfig = t.rotation || Rt, this.scaleConfig = t.scale || At;
|
|
729
718
|
}
|
|
@@ -731,77 +720,77 @@ class he {
|
|
|
731
720
|
* Get the effective start position, considering layout-aware defaults
|
|
732
721
|
*/
|
|
733
722
|
resolveStartPosition() {
|
|
734
|
-
return this.config.start.position ? this.config.start.position :
|
|
723
|
+
return this.config.start.position ? this.config.start.position : he[this.layoutAlgorithm] || "nearest-edge";
|
|
735
724
|
}
|
|
736
725
|
/**
|
|
737
726
|
* Calculate the starting position for an image's entry animation
|
|
738
727
|
*/
|
|
739
|
-
calculateStartPosition(t, e, i,
|
|
740
|
-
const r = this.resolvedStartPosition,
|
|
728
|
+
calculateStartPosition(t, e, i, o, a) {
|
|
729
|
+
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
741
730
|
switch (r) {
|
|
742
731
|
case "nearest-edge":
|
|
743
|
-
return this.calculateNearestEdge(t, e, i,
|
|
732
|
+
return this.calculateNearestEdge(t, e, i, s);
|
|
744
733
|
case "top":
|
|
745
|
-
return this.calculateEdgePosition("top", t, e, i,
|
|
734
|
+
return this.calculateEdgePosition("top", t, e, i, s);
|
|
746
735
|
case "bottom":
|
|
747
|
-
return this.calculateEdgePosition("bottom", t, e, i,
|
|
736
|
+
return this.calculateEdgePosition("bottom", t, e, i, s);
|
|
748
737
|
case "left":
|
|
749
|
-
return this.calculateEdgePosition("left", t, e, i,
|
|
738
|
+
return this.calculateEdgePosition("left", t, e, i, s);
|
|
750
739
|
case "right":
|
|
751
|
-
return this.calculateEdgePosition("right", t, e, i,
|
|
740
|
+
return this.calculateEdgePosition("right", t, e, i, s);
|
|
752
741
|
case "center":
|
|
753
742
|
return this.calculateCenterPosition(i, t, e);
|
|
754
743
|
case "random-edge":
|
|
755
|
-
return this.calculateRandomEdge(t, e, i,
|
|
744
|
+
return this.calculateRandomEdge(t, e, i, s);
|
|
756
745
|
case "circular":
|
|
757
746
|
return this.calculateCircularPosition(
|
|
758
747
|
t,
|
|
759
748
|
e,
|
|
760
749
|
i,
|
|
761
|
-
|
|
762
|
-
|
|
750
|
+
o,
|
|
751
|
+
a
|
|
763
752
|
);
|
|
764
753
|
default:
|
|
765
|
-
return this.calculateNearestEdge(t, e, i,
|
|
754
|
+
return this.calculateNearestEdge(t, e, i, s);
|
|
766
755
|
}
|
|
767
756
|
}
|
|
768
757
|
/**
|
|
769
758
|
* Calculate start position from the nearest edge (current default behavior)
|
|
770
759
|
*/
|
|
771
|
-
calculateNearestEdge(t, e, i,
|
|
772
|
-
const
|
|
760
|
+
calculateNearestEdge(t, e, i, o) {
|
|
761
|
+
const a = t.x, r = t.y, s = a, h = i.width - a, l = r, u = i.height - r, c = Math.min(s, h, l, u);
|
|
773
762
|
let d = t.x, m = t.y;
|
|
774
|
-
return c ===
|
|
763
|
+
return c === s ? d = -(e.width + o) : c === h ? d = i.width + o : c === l ? m = -(e.height + o) : m = i.height + o, { x: d, y: m };
|
|
775
764
|
}
|
|
776
765
|
/**
|
|
777
766
|
* Calculate start position from a specific edge
|
|
778
767
|
*/
|
|
779
|
-
calculateEdgePosition(t, e, i,
|
|
780
|
-
let r = e.x,
|
|
768
|
+
calculateEdgePosition(t, e, i, o, a) {
|
|
769
|
+
let r = e.x, s = e.y;
|
|
781
770
|
switch (t) {
|
|
782
771
|
case "top":
|
|
783
|
-
|
|
772
|
+
s = -(i.height + a);
|
|
784
773
|
break;
|
|
785
774
|
case "bottom":
|
|
786
|
-
|
|
775
|
+
s = o.height + a;
|
|
787
776
|
break;
|
|
788
777
|
case "left":
|
|
789
|
-
r = -(i.width +
|
|
778
|
+
r = -(i.width + a);
|
|
790
779
|
break;
|
|
791
780
|
case "right":
|
|
792
|
-
r =
|
|
781
|
+
r = o.width + a;
|
|
793
782
|
break;
|
|
794
783
|
}
|
|
795
|
-
return { x: r, y:
|
|
784
|
+
return { x: r, y: s };
|
|
796
785
|
}
|
|
797
786
|
/**
|
|
798
787
|
* Calculate start position from center with scale animation
|
|
799
788
|
*/
|
|
800
789
|
calculateCenterPosition(t, e, i) {
|
|
801
|
-
const
|
|
790
|
+
const o = t.width / 2, a = t.height / 2;
|
|
802
791
|
return {
|
|
803
|
-
x:
|
|
804
|
-
y:
|
|
792
|
+
x: o,
|
|
793
|
+
y: a,
|
|
805
794
|
useScale: !0
|
|
806
795
|
// Signal to use scale animation from 0
|
|
807
796
|
};
|
|
@@ -809,15 +798,15 @@ class he {
|
|
|
809
798
|
/**
|
|
810
799
|
* Calculate start position from a random edge
|
|
811
800
|
*/
|
|
812
|
-
calculateRandomEdge(t, e, i,
|
|
813
|
-
const
|
|
814
|
-
return this.calculateEdgePosition(r, t, e, i,
|
|
801
|
+
calculateRandomEdge(t, e, i, o) {
|
|
802
|
+
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
803
|
+
return this.calculateEdgePosition(r, t, e, i, o);
|
|
815
804
|
}
|
|
816
805
|
/**
|
|
817
806
|
* Calculate start position on a circle around the container
|
|
818
807
|
*/
|
|
819
|
-
calculateCircularPosition(t, e, i,
|
|
820
|
-
const r = this.config.start.circular || {},
|
|
808
|
+
calculateCircularPosition(t, e, i, o, a) {
|
|
809
|
+
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
821
810
|
let h;
|
|
822
811
|
const l = r.radius || "120%";
|
|
823
812
|
if (typeof l == "string" && l.endsWith("%")) {
|
|
@@ -828,7 +817,7 @@ class he {
|
|
|
828
817
|
} else
|
|
829
818
|
h = typeof l == "number" ? l : 500;
|
|
830
819
|
let u;
|
|
831
|
-
|
|
820
|
+
s === "even" ? u = o / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
832
821
|
const c = i.width / 2, d = i.height / 2, m = c + Math.cos(u) * h, b = d + Math.sin(u) * h;
|
|
833
822
|
return { x: m, y: b };
|
|
834
823
|
}
|
|
@@ -836,31 +825,31 @@ class he {
|
|
|
836
825
|
* Get animation parameters for an image
|
|
837
826
|
*/
|
|
838
827
|
getAnimationParams(t) {
|
|
839
|
-
const e = this.config.timing.duration, i = this.config.timing.stagger,
|
|
828
|
+
const e = this.config.timing.duration, i = this.config.timing.stagger, o = this.config.easing;
|
|
840
829
|
return {
|
|
841
830
|
startTransform: "",
|
|
842
831
|
// Will be computed by caller based on start position
|
|
843
832
|
duration: e,
|
|
844
833
|
delay: t * i,
|
|
845
|
-
easing:
|
|
834
|
+
easing: o
|
|
846
835
|
};
|
|
847
836
|
}
|
|
848
837
|
/**
|
|
849
838
|
* Build a CSS transform string for the start position
|
|
850
839
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
851
840
|
*/
|
|
852
|
-
buildStartTransform(t, e, i,
|
|
853
|
-
const l = t.x - e.x, u = t.y - e.y, c =
|
|
841
|
+
buildStartTransform(t, e, i, o, a, r, s, h) {
|
|
842
|
+
const l = t.x - e.x, u = t.y - e.y, c = s !== void 0 ? s : i, d = h !== void 0 ? h : o, m = a !== void 0 ? -a / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${m}px, ${b}px)` : "translate(-50%, -50%)";
|
|
854
843
|
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(${d})`;
|
|
855
844
|
}
|
|
856
845
|
/**
|
|
857
846
|
* Build the final CSS transform string
|
|
858
847
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
859
848
|
*/
|
|
860
|
-
buildFinalTransform(t, e, i,
|
|
861
|
-
if (i !== void 0 &&
|
|
862
|
-
const
|
|
863
|
-
return `translate(${
|
|
849
|
+
buildFinalTransform(t, e, i, o) {
|
|
850
|
+
if (i !== void 0 && o !== void 0) {
|
|
851
|
+
const a = -i / 2, r = -o / 2;
|
|
852
|
+
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${e})`;
|
|
864
853
|
}
|
|
865
854
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${e})`;
|
|
866
855
|
}
|
|
@@ -876,7 +865,7 @@ class he {
|
|
|
876
865
|
* Check if the current path type requires JavaScript animation
|
|
877
866
|
*/
|
|
878
867
|
requiresJSAnimation() {
|
|
879
|
-
return
|
|
868
|
+
return le(this.pathConfig.type);
|
|
880
869
|
}
|
|
881
870
|
/**
|
|
882
871
|
* Get the path configuration
|
|
@@ -926,12 +915,12 @@ class he {
|
|
|
926
915
|
return t + (Math.random() - 0.5) * 60;
|
|
927
916
|
if (typeof i == "number")
|
|
928
917
|
return i;
|
|
929
|
-
const
|
|
930
|
-
return i.min + Math.random() *
|
|
918
|
+
const o = i.max - i.min;
|
|
919
|
+
return i.min + Math.random() * o;
|
|
931
920
|
}
|
|
932
921
|
case "spin": {
|
|
933
|
-
const i = this.rotationConfig.spinCount ?? 1,
|
|
934
|
-
return t + i * 360 *
|
|
922
|
+
const i = this.rotationConfig.spinCount ?? 1, o = this.resolveSpinDirection(t);
|
|
923
|
+
return t + i * 360 * o;
|
|
935
924
|
}
|
|
936
925
|
case "random":
|
|
937
926
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -978,7 +967,7 @@ class he {
|
|
|
978
967
|
amplitude: 15,
|
|
979
968
|
frequency: 3,
|
|
980
969
|
decay: !0
|
|
981
|
-
}, { amplitude:
|
|
970
|
+
}, { amplitude: o, frequency: a, decay: r } = i, s = Math.sin(t * a * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, l = o * s * h;
|
|
982
971
|
return e + l;
|
|
983
972
|
}
|
|
984
973
|
/**
|
|
@@ -1035,15 +1024,15 @@ class he {
|
|
|
1035
1024
|
const i = this.scaleConfig.pop || {
|
|
1036
1025
|
overshoot: 1.2,
|
|
1037
1026
|
bounces: 1
|
|
1038
|
-
}, { overshoot:
|
|
1039
|
-
let
|
|
1027
|
+
}, { overshoot: o, bounces: a } = i, r = this.generateScaleBounceKeyframes(a, o);
|
|
1028
|
+
let s = e;
|
|
1040
1029
|
for (let h = 0; h < r.length; h++)
|
|
1041
1030
|
if (t <= r[h].time) {
|
|
1042
1031
|
const l = h === 0 ? 0 : r[h - 1].time, u = h === 0 ? e : r[h - 1].scale, c = (t - l) / (r[h].time - l), d = this.easeOutQuad(c);
|
|
1043
|
-
|
|
1032
|
+
s = u + (r[h].scale - u) * d;
|
|
1044
1033
|
break;
|
|
1045
1034
|
}
|
|
1046
|
-
return
|
|
1035
|
+
return s * e;
|
|
1047
1036
|
}
|
|
1048
1037
|
/**
|
|
1049
1038
|
* Generate keyframes for scale bounce animation
|
|
@@ -1051,12 +1040,12 @@ class he {
|
|
|
1051
1040
|
generateScaleBounceKeyframes(t, e) {
|
|
1052
1041
|
const i = [];
|
|
1053
1042
|
i.push({ time: 0.5, scale: e });
|
|
1054
|
-
let
|
|
1055
|
-
const
|
|
1043
|
+
let o = e;
|
|
1044
|
+
const a = 0.5, s = 0.5 / (t * 2);
|
|
1056
1045
|
let h = 0.5;
|
|
1057
1046
|
for (let l = 0; l < t; l++) {
|
|
1058
|
-
const u = 1 - (
|
|
1059
|
-
h +=
|
|
1047
|
+
const u = 1 - (o - 1) * a;
|
|
1048
|
+
h += s, i.push({ time: h, scale: u }), o = 1 + (o - 1) * a * a, h += s, l < t - 1 && i.push({ time: h, scale: o });
|
|
1060
1049
|
}
|
|
1061
1050
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1062
1051
|
}
|
|
@@ -1067,7 +1056,7 @@ class he {
|
|
|
1067
1056
|
return 1 - (1 - t) * (1 - t);
|
|
1068
1057
|
}
|
|
1069
1058
|
}
|
|
1070
|
-
class
|
|
1059
|
+
class ue {
|
|
1071
1060
|
constructor(t, e = {}) {
|
|
1072
1061
|
this.config = t, this.imageConfig = e;
|
|
1073
1062
|
}
|
|
@@ -1079,20 +1068,20 @@ class de {
|
|
|
1079
1068
|
* @returns Array of layout objects with position, rotation, scale
|
|
1080
1069
|
*/
|
|
1081
1070
|
generate(t, e, i = {}) {
|
|
1082
|
-
var
|
|
1083
|
-
const
|
|
1071
|
+
var w, L, k, P, D, U, N, z, x;
|
|
1072
|
+
const o = [], { width: a, height: r } = e, s = this.config.spacing.padding, h = i.fixedHeight ?? 200, l = ((w = this.imageConfig.rotation) == null ? void 0 : w.mode) ?? "none", u = ((k = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : k.min) ?? -15, c = ((D = (P = this.imageConfig.rotation) == null ? void 0 : P.range) == null ? void 0 : D.max) ?? 15, d = ((N = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : N.min) ?? 1, m = ((x = (z = this.imageConfig.sizing) == null ? void 0 : z.variance) == null ? void 0 : x.max) ?? 1, b = d !== 1 || m !== 1, g = h * 1.5 / 2, f = h / 2, y = a - s - g, v = r - s - f, I = s + g, R = s + f;
|
|
1084
1073
|
for (let A = 0; A < t; A++) {
|
|
1085
|
-
const O = this.random(
|
|
1074
|
+
const O = this.random(I, y), C = this.random(R, v), T = l === "random" ? this.random(u, c) : 0, M = b ? this.random(d, m) : 1, H = h * M, K = {
|
|
1086
1075
|
id: A,
|
|
1087
1076
|
x: O,
|
|
1088
|
-
y:
|
|
1077
|
+
y: C,
|
|
1089
1078
|
rotation: T,
|
|
1090
1079
|
scale: M,
|
|
1091
|
-
baseSize:
|
|
1080
|
+
baseSize: H
|
|
1092
1081
|
};
|
|
1093
|
-
|
|
1082
|
+
o.push(K);
|
|
1094
1083
|
}
|
|
1095
|
-
return
|
|
1084
|
+
return o;
|
|
1096
1085
|
}
|
|
1097
1086
|
/**
|
|
1098
1087
|
* Utility: Generate random number between min and max
|
|
@@ -1104,7 +1093,7 @@ class de {
|
|
|
1104
1093
|
return Math.random() * (e - t) + t;
|
|
1105
1094
|
}
|
|
1106
1095
|
}
|
|
1107
|
-
class
|
|
1096
|
+
class ge {
|
|
1108
1097
|
constructor(t, e = {}) {
|
|
1109
1098
|
this.config = t, this.imageConfig = e;
|
|
1110
1099
|
}
|
|
@@ -1116,52 +1105,52 @@ class ue {
|
|
|
1116
1105
|
* @returns Array of layout objects with position, rotation, scale
|
|
1117
1106
|
*/
|
|
1118
1107
|
generate(t, e, i = {}) {
|
|
1119
|
-
var L, k,
|
|
1120
|
-
const
|
|
1108
|
+
var L, k, P, D, U, N, z, x, A;
|
|
1109
|
+
const o = [], { width: a, height: r } = e, { debugRadials: s } = this.config, h = i.fixedHeight ?? 200, l = ((L = this.imageConfig.rotation) == null ? void 0 : L.mode) ?? "none", u = ((P = (k = this.imageConfig.rotation) == null ? void 0 : k.range) == null ? void 0 : P.min) ?? -15, c = ((U = (D = this.imageConfig.rotation) == null ? void 0 : D.range) == null ? void 0 : U.max) ?? 15, d = ((z = (N = this.imageConfig.sizing) == null ? void 0 : N.variance) == null ? void 0 : z.min) ?? 1, m = ((A = (x = this.imageConfig.sizing) == null ? void 0 : x.variance) == null ? void 0 : A.max) ?? 1, b = d !== 1 || m !== 1, p = this.config.scaleDecay ?? 0, g = ["green", "blue", "red", "yellow", "orange", "purple"], f = i.fixedHeight ?? h, y = a / 2, v = r / 2, I = Math.ceil(Math.sqrt(t));
|
|
1121
1110
|
if (t > 0) {
|
|
1122
|
-
const O = b ? this.random(d, m) : 1,
|
|
1123
|
-
|
|
1111
|
+
const O = b ? this.random(d, m) : 1, C = f * O;
|
|
1112
|
+
o.push({
|
|
1124
1113
|
id: 0,
|
|
1125
|
-
x:
|
|
1126
|
-
y:
|
|
1114
|
+
x: y,
|
|
1115
|
+
y: v,
|
|
1127
1116
|
rotation: l === "random" ? this.random(u * 0.33, c * 0.33) : 0,
|
|
1128
1117
|
// Less rotation for center
|
|
1129
1118
|
scale: O,
|
|
1130
|
-
baseSize:
|
|
1119
|
+
baseSize: C,
|
|
1131
1120
|
zIndex: 100,
|
|
1132
1121
|
// Center image is highest
|
|
1133
|
-
borderColor:
|
|
1122
|
+
borderColor: s ? "cyan" : void 0
|
|
1134
1123
|
});
|
|
1135
1124
|
}
|
|
1136
|
-
let R = 1,
|
|
1125
|
+
let R = 1, w = 1;
|
|
1137
1126
|
for (; R < t; ) {
|
|
1138
|
-
const O =
|
|
1127
|
+
const O = w / I, C = p > 0 ? 1 - O * p * 0.5 : 1, T = w * (f * 0.8), M = T * 1.5, H = Math.PI * (3 * (M + T) - Math.sqrt((3 * M + T) * (M + 3 * T))), K = this.estimateWidth(f), X = Math.floor(H / (K * 0.7));
|
|
1139
1128
|
if (X === 0) {
|
|
1140
|
-
|
|
1129
|
+
w++;
|
|
1141
1130
|
continue;
|
|
1142
1131
|
}
|
|
1143
|
-
const B = 2 * Math.PI / X, Z =
|
|
1132
|
+
const B = 2 * Math.PI / X, Z = w * (20 * Math.PI / 180);
|
|
1144
1133
|
for (let W = 0; W < X && R < t; W++) {
|
|
1145
|
-
const Q = W * B + Z, tt = b ? this.random(d, m) : 1, q =
|
|
1146
|
-
let Y =
|
|
1147
|
-
const $ = this.config.spacing.padding ?? 50, G = et * 1.5 / 2,
|
|
1148
|
-
Y - G < $ ? Y = $ + G : Y + G >
|
|
1134
|
+
const Q = W * B + Z, tt = b ? this.random(d, m) : 1, q = C * tt, et = f * q;
|
|
1135
|
+
let Y = y + Math.cos(Q) * M, F = v + Math.sin(Q) * T;
|
|
1136
|
+
const $ = this.config.spacing.padding ?? 50, G = et * 1.5 / 2, _ = et / 2;
|
|
1137
|
+
Y - G < $ ? Y = $ + G : Y + G > a - $ && (Y = a - $ - G), F - _ < $ ? F = $ + _ : F + _ > r - $ && (F = r - $ - _);
|
|
1149
1138
|
const it = l === "random" ? this.random(u, c) : 0;
|
|
1150
|
-
|
|
1139
|
+
o.push({
|
|
1151
1140
|
id: R,
|
|
1152
1141
|
x: Y,
|
|
1153
1142
|
y: F,
|
|
1154
1143
|
rotation: it,
|
|
1155
1144
|
scale: q,
|
|
1156
1145
|
baseSize: et,
|
|
1157
|
-
zIndex: Math.max(1, 100 -
|
|
1146
|
+
zIndex: Math.max(1, 100 - w),
|
|
1158
1147
|
// Outer rings have lower z-index
|
|
1159
|
-
borderColor:
|
|
1148
|
+
borderColor: s ? g[(w - 1) % g.length] : void 0
|
|
1160
1149
|
}), R++;
|
|
1161
1150
|
}
|
|
1162
|
-
|
|
1151
|
+
w++;
|
|
1163
1152
|
}
|
|
1164
|
-
return
|
|
1153
|
+
return o;
|
|
1165
1154
|
}
|
|
1166
1155
|
/**
|
|
1167
1156
|
* Estimate image width based on height
|
|
@@ -1182,7 +1171,7 @@ class ue {
|
|
|
1182
1171
|
return Math.random() * (e - t) + t;
|
|
1183
1172
|
}
|
|
1184
1173
|
}
|
|
1185
|
-
const
|
|
1174
|
+
const fe = {
|
|
1186
1175
|
columns: "auto",
|
|
1187
1176
|
rows: "auto",
|
|
1188
1177
|
stagger: "none",
|
|
@@ -1210,7 +1199,7 @@ const ge = {
|
|
|
1210
1199
|
{ x: 0, y: 1 }
|
|
1211
1200
|
// down
|
|
1212
1201
|
];
|
|
1213
|
-
class
|
|
1202
|
+
class me {
|
|
1214
1203
|
constructor(t, e = {}) {
|
|
1215
1204
|
this.config = t, this.imageConfig = e;
|
|
1216
1205
|
}
|
|
@@ -1223,58 +1212,58 @@ class fe {
|
|
|
1223
1212
|
*/
|
|
1224
1213
|
generate(t, e, i = {}) {
|
|
1225
1214
|
var X, B, Z, W, Q, tt, q, et, Y;
|
|
1226
|
-
const
|
|
1215
|
+
const o = [], { width: a, height: r } = e, s = { ...fe, ...this.config.grid }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((X = this.imageConfig.rotation) == null ? void 0 : X.mode) ?? "none", c = ((Z = (B = this.imageConfig.sizing) == null ? void 0 : B.variance) == null ? void 0 : Z.min) ?? 1, d = ((Q = (W = this.imageConfig.sizing) == null ? void 0 : W.variance) == null ? void 0 : Q.max) ?? 1, m = c !== 1 || d !== 1, b = a - 2 * h, p = r - 2 * h, { columns: g, rows: f } = this.calculateGridDimensions(
|
|
1227
1216
|
t,
|
|
1228
1217
|
b,
|
|
1229
1218
|
p,
|
|
1230
1219
|
l,
|
|
1231
|
-
|
|
1232
|
-
),
|
|
1220
|
+
s
|
|
1221
|
+
), y = s.stagger === "row", v = s.stagger === "column", I = y ? g + 0.5 : g, R = v ? f + 0.5 : f, w = (b - s.gap * (g - 1)) / I, L = (p - s.gap * (f - 1)) / R, k = y ? w / 2 : 0, P = v ? L / 2 : 0, D = 1 + s.overlap, U = Math.min(w, L) * D, N = i.fixedHeight ? Math.min(i.fixedHeight, U) : U, z = g * w + (g - 1) * s.gap + k, x = f * L + (f - 1) * s.gap + P, A = h + (b - z) / 2, O = h + (p - x) / 2, C = g * f, T = s.columns !== "auto" && s.rows !== "auto", M = T && t > C;
|
|
1233
1222
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1234
|
-
gridConfigColumns:
|
|
1235
|
-
gridConfigRows:
|
|
1223
|
+
gridConfigColumns: s.columns,
|
|
1224
|
+
gridConfigRows: s.rows,
|
|
1236
1225
|
columns: g,
|
|
1237
1226
|
rows: f,
|
|
1238
|
-
cellCount:
|
|
1227
|
+
cellCount: C,
|
|
1239
1228
|
hasFixedGrid: T,
|
|
1240
1229
|
imageCount: t,
|
|
1241
1230
|
isOverflowMode: M
|
|
1242
1231
|
});
|
|
1243
|
-
const
|
|
1232
|
+
const H = M ? new Array(C).fill(0) : [], K = Math.min(w, L) * s.overflowOffset;
|
|
1244
1233
|
for (let F = 0; F < t; F++) {
|
|
1245
|
-
let $,
|
|
1246
|
-
if (M && F >=
|
|
1247
|
-
const
|
|
1248
|
-
G = Math.floor(
|
|
1234
|
+
let $, j, G = 0;
|
|
1235
|
+
if (M && F >= C) {
|
|
1236
|
+
const V = F - C, J = V % C;
|
|
1237
|
+
G = Math.floor(V / C) + 1, H[J]++, s.fillDirection === "row" ? ($ = J % g, j = Math.floor(J / g)) : (j = J % f, $ = Math.floor(J / f));
|
|
1249
1238
|
} else
|
|
1250
|
-
|
|
1251
|
-
let
|
|
1252
|
-
if (
|
|
1253
|
-
const
|
|
1254
|
-
|
|
1239
|
+
s.fillDirection === "row" ? ($ = F % g, j = Math.floor(F / g)) : (j = F % f, $ = Math.floor(F / f));
|
|
1240
|
+
let _ = A + $ * (w + s.gap) + w / 2, it = O + j * (L + s.gap) + L / 2;
|
|
1241
|
+
if (s.stagger === "row" && j % 2 === 1 ? _ += w / 2 : s.stagger === "column" && $ % 2 === 1 && (it += L / 2), G > 0) {
|
|
1242
|
+
const V = (G - 1) % Lt.length, J = Lt[V];
|
|
1243
|
+
_ += J.x * K, it += J.y * K;
|
|
1255
1244
|
}
|
|
1256
|
-
if (
|
|
1257
|
-
const
|
|
1258
|
-
|
|
1245
|
+
if (s.jitter > 0) {
|
|
1246
|
+
const V = w / 2 * s.jitter, J = L / 2 * s.jitter;
|
|
1247
|
+
_ += this.random(-V, V), it += this.random(-J, J);
|
|
1259
1248
|
}
|
|
1260
|
-
let nt =
|
|
1261
|
-
if (!M &&
|
|
1262
|
-
const
|
|
1263
|
-
if (
|
|
1264
|
-
const Mt =
|
|
1249
|
+
let nt = _, ot = it;
|
|
1250
|
+
if (!M && s.fillDirection === "row") {
|
|
1251
|
+
const V = t % g || g;
|
|
1252
|
+
if (j === Math.floor((t - 1) / g) && V < g) {
|
|
1253
|
+
const Mt = V * w + (V - 1) * s.gap;
|
|
1265
1254
|
let St = 0;
|
|
1266
|
-
|
|
1255
|
+
s.alignment === "center" ? St = (z - Mt) / 2 : s.alignment === "end" && (St = z - Mt), nt += St;
|
|
1267
1256
|
}
|
|
1268
1257
|
}
|
|
1269
|
-
const pt = m ? this.random(c, d) : 1, at =
|
|
1270
|
-
nt = Math.max(yt, Math.min(nt, vt)), ot = Math.max(Ht, Math.min(ot,
|
|
1258
|
+
const pt = m ? this.random(c, d) : 1, at = N * pt, dt = at * 1.5 / 2, ut = at / 2, yt = h + dt, vt = a - h - dt, Ht = h + ut, kt = r - h - ut;
|
|
1259
|
+
nt = Math.max(yt, Math.min(nt, vt)), ot = Math.max(Ht, Math.min(ot, kt));
|
|
1271
1260
|
let wt = 0;
|
|
1272
1261
|
if (u === "random") {
|
|
1273
|
-
const
|
|
1274
|
-
|
|
1262
|
+
const V = ((q = (tt = this.imageConfig.rotation) == null ? void 0 : tt.range) == null ? void 0 : q.min) ?? -15, J = ((Y = (et = this.imageConfig.rotation) == null ? void 0 : et.range) == null ? void 0 : Y.max) ?? 15;
|
|
1263
|
+
s.jitter > 0 ? wt = this.random(V * s.jitter, J * s.jitter) : wt = this.random(V, J);
|
|
1275
1264
|
}
|
|
1276
1265
|
let xt;
|
|
1277
|
-
M && G > 0 ? xt = 50 - G : xt = M ? 100 + F : F + 1,
|
|
1266
|
+
M && G > 0 ? xt = 50 - G : xt = M ? 100 + F : F + 1, o.push({
|
|
1278
1267
|
id: F,
|
|
1279
1268
|
x: nt,
|
|
1280
1269
|
y: ot,
|
|
@@ -1284,25 +1273,25 @@ class fe {
|
|
|
1284
1273
|
zIndex: xt
|
|
1285
1274
|
});
|
|
1286
1275
|
}
|
|
1287
|
-
return
|
|
1276
|
+
return o;
|
|
1288
1277
|
}
|
|
1289
1278
|
/**
|
|
1290
1279
|
* Calculate optimal grid dimensions based on image count and container
|
|
1291
1280
|
*/
|
|
1292
|
-
calculateGridDimensions(t, e, i,
|
|
1293
|
-
let r,
|
|
1294
|
-
if (
|
|
1295
|
-
r =
|
|
1296
|
-
else if (
|
|
1297
|
-
r =
|
|
1298
|
-
else if (
|
|
1299
|
-
|
|
1281
|
+
calculateGridDimensions(t, e, i, o, a) {
|
|
1282
|
+
let r, s;
|
|
1283
|
+
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1284
|
+
r = a.columns, s = a.rows;
|
|
1285
|
+
else if (a.columns !== "auto")
|
|
1286
|
+
r = a.columns, s = Math.ceil(t / r);
|
|
1287
|
+
else if (a.rows !== "auto")
|
|
1288
|
+
s = a.rows, r = Math.ceil(t / s);
|
|
1300
1289
|
else {
|
|
1301
1290
|
const h = e / i;
|
|
1302
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))),
|
|
1291
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))), s = Math.ceil(t / r); r > 1 && (r - 1) * s >= t; )
|
|
1303
1292
|
r--;
|
|
1304
1293
|
}
|
|
1305
|
-
return { columns: Math.max(1, r), rows: Math.max(1,
|
|
1294
|
+
return { columns: Math.max(1, r), rows: Math.max(1, s) };
|
|
1306
1295
|
}
|
|
1307
1296
|
/**
|
|
1308
1297
|
* Utility: Generate random number between min and max
|
|
@@ -1311,14 +1300,14 @@ class fe {
|
|
|
1311
1300
|
return Math.random() * (e - t) + t;
|
|
1312
1301
|
}
|
|
1313
1302
|
}
|
|
1314
|
-
const
|
|
1303
|
+
const pe = Math.PI * (3 - Math.sqrt(5)), be = {
|
|
1315
1304
|
spiralType: "golden",
|
|
1316
1305
|
direction: "counterclockwise",
|
|
1317
1306
|
tightness: 1,
|
|
1318
1307
|
scaleDecay: 0,
|
|
1319
1308
|
startAngle: 0
|
|
1320
1309
|
};
|
|
1321
|
-
class
|
|
1310
|
+
class ye {
|
|
1322
1311
|
constructor(t, e = {}) {
|
|
1323
1312
|
this.config = t, this.imageConfig = e;
|
|
1324
1313
|
}
|
|
@@ -1330,81 +1319,81 @@ class be {
|
|
|
1330
1319
|
* @returns Array of layout objects with position, rotation, scale
|
|
1331
1320
|
*/
|
|
1332
1321
|
generate(t, e, i = {}) {
|
|
1333
|
-
var R,
|
|
1334
|
-
const
|
|
1322
|
+
var R, w, L, k, P, D, U, N, z;
|
|
1323
|
+
const o = [], { width: a, height: r } = e, s = { ...be, ...this.config.spiral }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((R = this.imageConfig.rotation) == null ? void 0 : R.mode) ?? "none", c = ((L = (w = this.imageConfig.rotation) == null ? void 0 : w.range) == null ? void 0 : L.min) ?? -15, d = ((P = (k = this.imageConfig.rotation) == null ? void 0 : k.range) == null ? void 0 : P.max) ?? 15, m = ((U = (D = this.imageConfig.sizing) == null ? void 0 : D.variance) == null ? void 0 : U.min) ?? 1, b = ((z = (N = this.imageConfig.sizing) == null ? void 0 : N.variance) == null ? void 0 : z.max) ?? 1, p = m !== 1 || b !== 1, g = this.config.scaleDecay ?? s.scaleDecay, f = a / 2, y = r / 2, v = Math.min(
|
|
1335
1324
|
f - h - l / 2,
|
|
1336
|
-
|
|
1337
|
-
),
|
|
1338
|
-
for (let
|
|
1325
|
+
y - h - l / 2
|
|
1326
|
+
), I = s.direction === "clockwise" ? -1 : 1;
|
|
1327
|
+
for (let x = 0; x < t; x++) {
|
|
1339
1328
|
let A, O;
|
|
1340
|
-
if (
|
|
1341
|
-
A =
|
|
1342
|
-
else if (
|
|
1343
|
-
const
|
|
1344
|
-
A =
|
|
1329
|
+
if (s.spiralType === "golden")
|
|
1330
|
+
A = x * pe * I + s.startAngle, O = this.calculateGoldenRadius(x, t, v, s.tightness);
|
|
1331
|
+
else if (s.spiralType === "archimedean") {
|
|
1332
|
+
const _ = x * 0.5 * s.tightness;
|
|
1333
|
+
A = _ * I + s.startAngle, O = this.calculateArchimedeanRadius(_, t, v, s.tightness);
|
|
1345
1334
|
} else {
|
|
1346
|
-
const
|
|
1347
|
-
A =
|
|
1335
|
+
const _ = x * 0.3 * s.tightness;
|
|
1336
|
+
A = _ * I + s.startAngle, O = this.calculateLogarithmicRadius(_, t, v, s.tightness);
|
|
1348
1337
|
}
|
|
1349
|
-
const
|
|
1350
|
-
let
|
|
1338
|
+
const C = f + Math.cos(A) * O, T = y + Math.sin(A) * O, M = O / v, H = g > 0 ? 1 - M * g * 0.5 : 1, K = p ? this.random(m, b) : 1, X = H * K, B = l * X, W = B * 1.5 / 2, Q = B / 2, tt = h + W, q = a - h - W, et = h + Q, Y = r - h - Q, F = Math.max(tt, Math.min(C, q)), $ = Math.max(et, Math.min(T, Y));
|
|
1339
|
+
let j = 0;
|
|
1351
1340
|
if (u === "random") {
|
|
1352
|
-
const
|
|
1353
|
-
|
|
1354
|
-
} else u === "tangent" && (
|
|
1355
|
-
const G = t -
|
|
1356
|
-
|
|
1357
|
-
id:
|
|
1341
|
+
const _ = A * 180 / Math.PI % 360, it = this.random(c, d);
|
|
1342
|
+
j = s.spiralType === "golden" ? it : _ * 0.1 + it * 0.9;
|
|
1343
|
+
} else u === "tangent" && (j = this.calculateSpiralTangent(A, O, s));
|
|
1344
|
+
const G = t - x;
|
|
1345
|
+
o.push({
|
|
1346
|
+
id: x,
|
|
1358
1347
|
x: F,
|
|
1359
1348
|
y: $,
|
|
1360
|
-
rotation:
|
|
1349
|
+
rotation: j,
|
|
1361
1350
|
scale: X,
|
|
1362
1351
|
baseSize: B,
|
|
1363
1352
|
zIndex: G
|
|
1364
1353
|
});
|
|
1365
1354
|
}
|
|
1366
|
-
return
|
|
1355
|
+
return o;
|
|
1367
1356
|
}
|
|
1368
1357
|
/**
|
|
1369
1358
|
* Calculate tangent angle for spiral curve at given position
|
|
1370
1359
|
* This aligns the image along the spiral's direction of travel
|
|
1371
1360
|
*/
|
|
1372
1361
|
calculateSpiralTangent(t, e, i) {
|
|
1373
|
-
let
|
|
1362
|
+
let o;
|
|
1374
1363
|
if (i.spiralType === "golden")
|
|
1375
|
-
|
|
1364
|
+
o = t + Math.PI / 2;
|
|
1376
1365
|
else if (i.spiralType === "archimedean") {
|
|
1377
|
-
const r = 1 / i.tightness,
|
|
1378
|
-
|
|
1366
|
+
const r = 1 / i.tightness, s = Math.atan(e / r);
|
|
1367
|
+
o = t + s;
|
|
1379
1368
|
} else {
|
|
1380
|
-
const r = 0.15 / i.tightness,
|
|
1381
|
-
|
|
1369
|
+
const r = 0.15 / i.tightness, s = Math.atan(1 / r);
|
|
1370
|
+
o = t + s;
|
|
1382
1371
|
}
|
|
1383
|
-
return
|
|
1372
|
+
return o * 180 / Math.PI % 360 - 90;
|
|
1384
1373
|
}
|
|
1385
1374
|
/**
|
|
1386
1375
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1387
1376
|
* Creates even distribution like sunflower seeds
|
|
1388
1377
|
*/
|
|
1389
|
-
calculateGoldenRadius(t, e, i,
|
|
1390
|
-
const r = i / Math.sqrt(e) * Math.sqrt(t) /
|
|
1378
|
+
calculateGoldenRadius(t, e, i, o) {
|
|
1379
|
+
const r = i / Math.sqrt(e) * Math.sqrt(t) / o;
|
|
1391
1380
|
return Math.min(r, i);
|
|
1392
1381
|
}
|
|
1393
1382
|
/**
|
|
1394
1383
|
* Calculate radius for Archimedean spiral
|
|
1395
1384
|
* r = a + b*θ (constant spacing between arms)
|
|
1396
1385
|
*/
|
|
1397
|
-
calculateArchimedeanRadius(t, e, i,
|
|
1398
|
-
const
|
|
1399
|
-
return t /
|
|
1386
|
+
calculateArchimedeanRadius(t, e, i, o) {
|
|
1387
|
+
const a = e * 0.5 * o;
|
|
1388
|
+
return t / a * i;
|
|
1400
1389
|
}
|
|
1401
1390
|
/**
|
|
1402
1391
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1403
1392
|
* r = a * e^(b*θ)
|
|
1404
1393
|
*/
|
|
1405
|
-
calculateLogarithmicRadius(t, e, i,
|
|
1406
|
-
const
|
|
1407
|
-
return
|
|
1394
|
+
calculateLogarithmicRadius(t, e, i, o) {
|
|
1395
|
+
const a = i * 0.05, r = 0.15 / o, s = a * Math.exp(r * t), h = e * 0.3 * o, l = a * Math.exp(r * h);
|
|
1396
|
+
return s / l * i;
|
|
1408
1397
|
}
|
|
1409
1398
|
/**
|
|
1410
1399
|
* Utility: Generate random number between min and max
|
|
@@ -1413,7 +1402,7 @@ class be {
|
|
|
1413
1402
|
return Math.random() * (e - t) + t;
|
|
1414
1403
|
}
|
|
1415
1404
|
}
|
|
1416
|
-
const
|
|
1405
|
+
const ve = {
|
|
1417
1406
|
clusterCount: "auto",
|
|
1418
1407
|
clusterSpread: 150,
|
|
1419
1408
|
clusterSpacing: 200,
|
|
@@ -1421,7 +1410,7 @@ const ye = {
|
|
|
1421
1410
|
overlap: 0.3,
|
|
1422
1411
|
distribution: "gaussian"
|
|
1423
1412
|
};
|
|
1424
|
-
class
|
|
1413
|
+
class we {
|
|
1425
1414
|
constructor(t, e = {}) {
|
|
1426
1415
|
this.config = t, this.imageConfig = e;
|
|
1427
1416
|
}
|
|
@@ -1433,83 +1422,83 @@ class ve {
|
|
|
1433
1422
|
* @returns Array of layout objects with position, rotation, scale
|
|
1434
1423
|
*/
|
|
1435
1424
|
generate(t, e, i = {}) {
|
|
1436
|
-
var
|
|
1437
|
-
const
|
|
1425
|
+
var I, R, w, L, k, P, D, U, N;
|
|
1426
|
+
const o = [], { width: a, height: r } = e, s = { ...ve, ...this.config.cluster }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((I = this.imageConfig.rotation) == null ? void 0 : I.mode) ?? "none", c = ((w = (R = this.imageConfig.rotation) == null ? void 0 : R.range) == null ? void 0 : w.min) ?? -15, d = ((k = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : k.max) ?? 15, m = ((D = (P = this.imageConfig.sizing) == null ? void 0 : P.variance) == null ? void 0 : D.min) ?? 1, b = ((N = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : N.max) ?? 1, p = m !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1438
1427
|
t,
|
|
1439
|
-
|
|
1440
|
-
|
|
1428
|
+
s.clusterCount,
|
|
1429
|
+
a,
|
|
1441
1430
|
r,
|
|
1442
|
-
|
|
1431
|
+
s.clusterSpacing
|
|
1443
1432
|
), f = this.generateClusterCenters(
|
|
1444
1433
|
g,
|
|
1445
|
-
|
|
1434
|
+
a,
|
|
1446
1435
|
r,
|
|
1447
1436
|
h,
|
|
1448
|
-
|
|
1449
|
-
),
|
|
1450
|
-
for (let
|
|
1451
|
-
|
|
1452
|
-
let
|
|
1453
|
-
for (let
|
|
1454
|
-
const
|
|
1437
|
+
s
|
|
1438
|
+
), y = new Array(g).fill(0);
|
|
1439
|
+
for (let z = 0; z < t; z++)
|
|
1440
|
+
y[z % g]++;
|
|
1441
|
+
let v = 0;
|
|
1442
|
+
for (let z = 0; z < g; z++) {
|
|
1443
|
+
const x = f[z], A = y[z];
|
|
1455
1444
|
for (let O = 0; O < A; O++) {
|
|
1456
|
-
let
|
|
1457
|
-
if (
|
|
1458
|
-
|
|
1445
|
+
let C, T;
|
|
1446
|
+
if (s.distribution === "gaussian")
|
|
1447
|
+
C = this.gaussianRandom() * x.spread, T = this.gaussianRandom() * x.spread;
|
|
1459
1448
|
else {
|
|
1460
|
-
const
|
|
1461
|
-
|
|
1449
|
+
const j = this.random(0, Math.PI * 2), G = this.random(0, x.spread);
|
|
1450
|
+
C = Math.cos(j) * G, T = Math.sin(j) * G;
|
|
1462
1451
|
}
|
|
1463
|
-
const M = 1 +
|
|
1464
|
-
|
|
1465
|
-
const K = p ? this.random(m, b) : 1, X =
|
|
1466
|
-
let Z =
|
|
1452
|
+
const M = 1 + s.overlap * 0.5, H = 1 + s.overlap * 0.3;
|
|
1453
|
+
C /= M, T /= M;
|
|
1454
|
+
const K = p ? this.random(m, b) : 1, X = H * K, B = l * X;
|
|
1455
|
+
let Z = x.x + C, W = x.y + T;
|
|
1467
1456
|
const tt = B * 1.5 / 2, q = B / 2;
|
|
1468
|
-
Z = Math.max(h + tt, Math.min(Z,
|
|
1469
|
-
const et = u === "random" ? this.random(c, d) : 0, F = Math.sqrt(
|
|
1470
|
-
|
|
1471
|
-
id:
|
|
1457
|
+
Z = Math.max(h + tt, Math.min(Z, a - h - tt)), W = Math.max(h + q, Math.min(W, r - h - q));
|
|
1458
|
+
const et = u === "random" ? this.random(c, d) : 0, F = Math.sqrt(C * C + T * T) / x.spread, $ = Math.round((1 - F) * 50) + 1;
|
|
1459
|
+
o.push({
|
|
1460
|
+
id: v,
|
|
1472
1461
|
x: Z,
|
|
1473
1462
|
y: W,
|
|
1474
1463
|
rotation: et,
|
|
1475
1464
|
scale: X,
|
|
1476
1465
|
baseSize: B,
|
|
1477
1466
|
zIndex: $
|
|
1478
|
-
}),
|
|
1467
|
+
}), v++;
|
|
1479
1468
|
}
|
|
1480
1469
|
}
|
|
1481
|
-
return
|
|
1470
|
+
return o;
|
|
1482
1471
|
}
|
|
1483
1472
|
/**
|
|
1484
1473
|
* Calculate optimal number of clusters based on image count and container
|
|
1485
1474
|
*/
|
|
1486
|
-
calculateClusterCount(t, e, i,
|
|
1475
|
+
calculateClusterCount(t, e, i, o, a) {
|
|
1487
1476
|
if (e !== "auto")
|
|
1488
1477
|
return Math.max(1, Math.min(e, t));
|
|
1489
|
-
const
|
|
1490
|
-
i /
|
|
1478
|
+
const s = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
|
|
1479
|
+
i / a * (o / a) * 0.6
|
|
1491
1480
|
);
|
|
1492
|
-
return Math.max(1, Math.min(
|
|
1481
|
+
return Math.max(1, Math.min(s, h, 10));
|
|
1493
1482
|
}
|
|
1494
1483
|
/**
|
|
1495
1484
|
* Generate cluster center positions with spacing constraints
|
|
1496
1485
|
*/
|
|
1497
|
-
generateClusterCenters(t, e, i,
|
|
1498
|
-
const r = [], h =
|
|
1486
|
+
generateClusterCenters(t, e, i, o, a) {
|
|
1487
|
+
const r = [], h = o + a.clusterSpread, l = e - o - a.clusterSpread, u = o + a.clusterSpread, c = i - o - a.clusterSpread;
|
|
1499
1488
|
for (let d = 0; d < t; d++) {
|
|
1500
1489
|
let m = null, b = -1;
|
|
1501
1490
|
for (let p = 0; p < 100; p++) {
|
|
1502
1491
|
const g = {
|
|
1503
1492
|
x: this.random(h, l),
|
|
1504
1493
|
y: this.random(u, c),
|
|
1505
|
-
spread: this.calculateClusterSpread(
|
|
1494
|
+
spread: this.calculateClusterSpread(a)
|
|
1506
1495
|
};
|
|
1507
1496
|
let f = 1 / 0;
|
|
1508
|
-
for (const
|
|
1509
|
-
const
|
|
1497
|
+
for (const y of r) {
|
|
1498
|
+
const v = g.x - y.x, I = g.y - y.y, R = Math.sqrt(v * v + I * I);
|
|
1510
1499
|
f = Math.min(f, R);
|
|
1511
1500
|
}
|
|
1512
|
-
if ((r.length === 0 || f > b) && (m = g, b = f), f >=
|
|
1501
|
+
if ((r.length === 0 || f > b) && (m = g, b = f), f >= a.clusterSpacing)
|
|
1513
1502
|
break;
|
|
1514
1503
|
}
|
|
1515
1504
|
m && r.push(m);
|
|
@@ -1540,7 +1529,7 @@ class ve {
|
|
|
1540
1529
|
return Math.random() * (e - t) + t;
|
|
1541
1530
|
}
|
|
1542
1531
|
}
|
|
1543
|
-
class
|
|
1532
|
+
class xe {
|
|
1544
1533
|
constructor(t, e = {}) {
|
|
1545
1534
|
this.config = t, this.imageConfig = e;
|
|
1546
1535
|
}
|
|
@@ -1552,25 +1541,25 @@ class we {
|
|
|
1552
1541
|
* @returns Array of layout objects with position, rotation, scale
|
|
1553
1542
|
*/
|
|
1554
1543
|
generate(t, e, i = {}) {
|
|
1555
|
-
var M,
|
|
1556
|
-
const
|
|
1544
|
+
var M, H, K, X, B, Z, W, Q, tt;
|
|
1545
|
+
const o = [], { width: a, height: r } = e, s = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, l = ((M = this.imageConfig.rotation) == null ? void 0 : M.mode) ?? "none", u = ((K = (H = this.imageConfig.rotation) == null ? void 0 : H.range) == null ? void 0 : K.min) ?? -15, c = ((B = (X = this.imageConfig.rotation) == null ? void 0 : X.range) == null ? void 0 : B.max) ?? 15, d = ((W = (Z = this.imageConfig.sizing) == null ? void 0 : Z.variance) == null ? void 0 : W.min) ?? 1, m = ((tt = (Q = this.imageConfig.sizing) == null ? void 0 : Q.variance) == null ? void 0 : tt.max) ?? 1, b = d !== 1 || m !== 1, p = i.fixedHeight ?? s, g = {
|
|
1557
1546
|
...jt,
|
|
1558
1547
|
...this.config.wave
|
|
1559
|
-
}, { rows: f, amplitude:
|
|
1548
|
+
}, { rows: f, amplitude: y, frequency: v, phaseShift: I, synchronization: R } = g, w = Math.ceil(t / f), P = p * 1.5 / 2, D = h + P, U = a - h - P, N = U - D, z = w > 1 ? N / (w - 1) : 0, x = h + y + p / 2, A = r - h - y - p / 2, O = A - x, C = f > 1 ? O / (f - 1) : 0;
|
|
1560
1549
|
let T = 0;
|
|
1561
1550
|
for (let q = 0; q < f && T < t; q++) {
|
|
1562
|
-
const et = f === 1 ? (
|
|
1551
|
+
const et = f === 1 ? (x + A) / 2 : x + q * C;
|
|
1563
1552
|
let Y = 0;
|
|
1564
|
-
R === "offset" ? Y = q *
|
|
1565
|
-
for (let F = 0; F <
|
|
1566
|
-
const $ =
|
|
1553
|
+
R === "offset" ? Y = q * I : R === "alternating" && (Y = q * Math.PI);
|
|
1554
|
+
for (let F = 0; F < w && T < t; F++) {
|
|
1555
|
+
const $ = w === 1 ? (D + U) / 2 : D + F * z, j = this.calculateWaveY($, a, y, v, Y), G = $, _ = et + j, it = b ? this.random(d, m) : 1, nt = p * it;
|
|
1567
1556
|
let ot = 0;
|
|
1568
|
-
l === "tangent" ? ot = this.calculateRotation($,
|
|
1569
|
-
const at = nt * 1.5 / 2, bt = nt / 2, dt = h + at, ut =
|
|
1570
|
-
|
|
1557
|
+
l === "tangent" ? ot = this.calculateRotation($, a, y, v, Y) : l === "random" && (ot = this.random(u, c));
|
|
1558
|
+
const at = nt * 1.5 / 2, bt = nt / 2, dt = h + at, ut = a - h - at, yt = h + bt, vt = r - h - bt;
|
|
1559
|
+
o.push({
|
|
1571
1560
|
id: T,
|
|
1572
1561
|
x: Math.max(dt, Math.min(G, ut)),
|
|
1573
|
-
y: Math.max(yt, Math.min(
|
|
1562
|
+
y: Math.max(yt, Math.min(_, vt)),
|
|
1574
1563
|
rotation: ot,
|
|
1575
1564
|
scale: it,
|
|
1576
1565
|
baseSize: nt,
|
|
@@ -1578,7 +1567,7 @@ class we {
|
|
|
1578
1567
|
}), T++;
|
|
1579
1568
|
}
|
|
1580
1569
|
}
|
|
1581
|
-
return
|
|
1570
|
+
return o;
|
|
1582
1571
|
}
|
|
1583
1572
|
/**
|
|
1584
1573
|
* Calculate Y position displacement on wave curve
|
|
@@ -1589,9 +1578,9 @@ class we {
|
|
|
1589
1578
|
* @param phase - Phase offset
|
|
1590
1579
|
* @returns Y displacement from baseline
|
|
1591
1580
|
*/
|
|
1592
|
-
calculateWaveY(t, e, i,
|
|
1581
|
+
calculateWaveY(t, e, i, o, a) {
|
|
1593
1582
|
const r = t / e;
|
|
1594
|
-
return i * Math.sin(
|
|
1583
|
+
return i * Math.sin(o * r * 2 * Math.PI + a);
|
|
1595
1584
|
}
|
|
1596
1585
|
/**
|
|
1597
1586
|
* Calculate rotation based on wave tangent
|
|
@@ -1602,9 +1591,9 @@ class we {
|
|
|
1602
1591
|
* @param phase - Phase offset
|
|
1603
1592
|
* @returns Rotation angle in degrees
|
|
1604
1593
|
*/
|
|
1605
|
-
calculateRotation(t, e, i,
|
|
1606
|
-
const r = t / e,
|
|
1607
|
-
return Math.atan(
|
|
1594
|
+
calculateRotation(t, e, i, o, a) {
|
|
1595
|
+
const r = t / e, s = i * o * 2 * Math.PI * Math.cos(o * r * 2 * Math.PI + a) / e;
|
|
1596
|
+
return Math.atan(s) * (180 / Math.PI);
|
|
1608
1597
|
}
|
|
1609
1598
|
/**
|
|
1610
1599
|
* Estimate image width based on height
|
|
@@ -1618,7 +1607,7 @@ class we {
|
|
|
1618
1607
|
return Math.random() * (e - t) + t;
|
|
1619
1608
|
}
|
|
1620
1609
|
}
|
|
1621
|
-
class
|
|
1610
|
+
class Se {
|
|
1622
1611
|
constructor(t) {
|
|
1623
1612
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.generator = this.initGenerator();
|
|
1624
1613
|
}
|
|
@@ -1629,18 +1618,18 @@ class xe {
|
|
|
1629
1618
|
initGenerator() {
|
|
1630
1619
|
switch (this.config.algorithm) {
|
|
1631
1620
|
case "radial":
|
|
1632
|
-
return new
|
|
1621
|
+
return new ge(this.config, this.imageConfig);
|
|
1633
1622
|
case "grid":
|
|
1634
|
-
return new
|
|
1623
|
+
return new me(this.config, this.imageConfig);
|
|
1635
1624
|
case "spiral":
|
|
1636
|
-
return new
|
|
1625
|
+
return new ye(this.config, this.imageConfig);
|
|
1637
1626
|
case "cluster":
|
|
1638
|
-
return new ve(this.config, this.imageConfig);
|
|
1639
|
-
case "wave":
|
|
1640
1627
|
return new we(this.config, this.imageConfig);
|
|
1628
|
+
case "wave":
|
|
1629
|
+
return new xe(this.config, this.imageConfig);
|
|
1641
1630
|
case "random":
|
|
1642
1631
|
default:
|
|
1643
|
-
return new
|
|
1632
|
+
return new ue(this.config, this.imageConfig);
|
|
1644
1633
|
}
|
|
1645
1634
|
}
|
|
1646
1635
|
/**
|
|
@@ -1651,10 +1640,10 @@ class xe {
|
|
|
1651
1640
|
* @returns Array of layout objects with position, rotation, scale
|
|
1652
1641
|
*/
|
|
1653
1642
|
generateLayout(t, e, i = {}) {
|
|
1654
|
-
const
|
|
1655
|
-
return
|
|
1656
|
-
this.layouts.set(
|
|
1657
|
-
}),
|
|
1643
|
+
const o = this.generator.generate(t, e, i);
|
|
1644
|
+
return o.forEach((a) => {
|
|
1645
|
+
this.layouts.set(a.id, a);
|
|
1646
|
+
}), o;
|
|
1658
1647
|
}
|
|
1659
1648
|
/**
|
|
1660
1649
|
* Get the original layout state for an image
|
|
@@ -1707,8 +1696,8 @@ class xe {
|
|
|
1707
1696
|
return;
|
|
1708
1697
|
if (typeof i == "number")
|
|
1709
1698
|
return i;
|
|
1710
|
-
const
|
|
1711
|
-
return
|
|
1699
|
+
const o = i, a = this.resolveBreakpoint(t);
|
|
1700
|
+
return a === "mobile" ? o.mobile ?? o.tablet ?? o.screen : a === "tablet" ? o.tablet ?? o.screen ?? o.mobile : o.screen ?? o.tablet ?? o.mobile;
|
|
1712
1701
|
}
|
|
1713
1702
|
/**
|
|
1714
1703
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1718,19 +1707,19 @@ class xe {
|
|
|
1718
1707
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1719
1708
|
* @returns Calculated sizing result with height
|
|
1720
1709
|
*/
|
|
1721
|
-
calculateAdaptiveSize(t, e, i,
|
|
1722
|
-
const
|
|
1710
|
+
calculateAdaptiveSize(t, e, i, o) {
|
|
1711
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1723
1712
|
if (r !== void 0)
|
|
1724
1713
|
return { height: r };
|
|
1725
|
-
const
|
|
1714
|
+
const s = (a == null ? void 0 : a.minSize) ?? 50, h = (a == null ? void 0 : a.maxSize) ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: c, height: d } = t, p = c * d * l / e;
|
|
1726
1715
|
let f = Math.sqrt(p / 1.4);
|
|
1727
1716
|
f *= u, f = Math.min(f, i);
|
|
1728
|
-
let
|
|
1729
|
-
if (
|
|
1730
|
-
const
|
|
1731
|
-
|
|
1717
|
+
let y = this.clamp(f, s, h);
|
|
1718
|
+
if (y === s && f < s) {
|
|
1719
|
+
const v = Math.max(s * 0.05, 20);
|
|
1720
|
+
y = Math.max(v, f);
|
|
1732
1721
|
}
|
|
1733
|
-
return { height:
|
|
1722
|
+
return { height: y };
|
|
1734
1723
|
}
|
|
1735
1724
|
/**
|
|
1736
1725
|
* Utility: Clamp a value between min and max
|
|
@@ -1739,77 +1728,77 @@ class xe {
|
|
|
1739
1728
|
return Math.max(e, Math.min(i, t));
|
|
1740
1729
|
}
|
|
1741
1730
|
}
|
|
1742
|
-
var
|
|
1743
|
-
function
|
|
1744
|
-
return
|
|
1731
|
+
var E = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(E || {});
|
|
1732
|
+
function Ee(n) {
|
|
1733
|
+
return n in Et;
|
|
1745
1734
|
}
|
|
1746
|
-
function Ie(
|
|
1747
|
-
return
|
|
1735
|
+
function Ie(n) {
|
|
1736
|
+
return n ? Ee(n) ? Et[n] : n : Et.md;
|
|
1748
1737
|
}
|
|
1749
|
-
function
|
|
1750
|
-
if (!
|
|
1738
|
+
function Te(n) {
|
|
1739
|
+
if (!n) return "";
|
|
1751
1740
|
const t = [];
|
|
1752
|
-
if (
|
|
1753
|
-
if (typeof
|
|
1754
|
-
t.push(`drop-shadow(${
|
|
1741
|
+
if (n.grayscale !== void 0 && t.push(`grayscale(${n.grayscale})`), n.blur !== void 0 && t.push(`blur(${n.blur}px)`), n.brightness !== void 0 && t.push(`brightness(${n.brightness})`), n.contrast !== void 0 && t.push(`contrast(${n.contrast})`), n.saturate !== void 0 && t.push(`saturate(${n.saturate})`), n.opacity !== void 0 && t.push(`opacity(${n.opacity})`), n.sepia !== void 0 && t.push(`sepia(${n.sepia})`), n.hueRotate !== void 0 && t.push(`hue-rotate(${n.hueRotate}deg)`), n.invert !== void 0 && t.push(`invert(${n.invert})`), n.dropShadow !== void 0)
|
|
1742
|
+
if (typeof n.dropShadow == "string")
|
|
1743
|
+
t.push(`drop-shadow(${n.dropShadow})`);
|
|
1755
1744
|
else {
|
|
1756
|
-
const e =
|
|
1745
|
+
const e = n.dropShadow;
|
|
1757
1746
|
t.push(`drop-shadow(${e.x}px ${e.y}px ${e.blur}px ${e.color})`);
|
|
1758
1747
|
}
|
|
1759
1748
|
return t.join(" ");
|
|
1760
1749
|
}
|
|
1761
|
-
function ct(
|
|
1762
|
-
if (!
|
|
1750
|
+
function ct(n) {
|
|
1751
|
+
if (!n || n.style === "none" || n.width === 0)
|
|
1763
1752
|
return "none";
|
|
1764
|
-
const t =
|
|
1753
|
+
const t = n.width ?? 0, e = n.style ?? "solid", i = n.color ?? "#000000";
|
|
1765
1754
|
return `${t}px ${e} ${i}`;
|
|
1766
1755
|
}
|
|
1767
|
-
function ft(
|
|
1768
|
-
var
|
|
1769
|
-
if (!
|
|
1756
|
+
function ft(n) {
|
|
1757
|
+
var a, r;
|
|
1758
|
+
if (!n) return {};
|
|
1770
1759
|
const t = {};
|
|
1771
|
-
if (
|
|
1772
|
-
const
|
|
1773
|
-
|
|
1774
|
-
} else ((r =
|
|
1775
|
-
if (
|
|
1776
|
-
const
|
|
1760
|
+
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
1761
|
+
const s = ((a = n.border) == null ? void 0 : a.radius) ?? 0;
|
|
1762
|
+
n.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${n.borderRadiusTopLeft}px` : s && (t.borderTopLeftRadius = `${s}px`), n.borderRadiusTopRight !== void 0 ? t.borderTopRightRadius = `${n.borderRadiusTopRight}px` : s && (t.borderTopRightRadius = `${s}px`), n.borderRadiusBottomRight !== void 0 ? t.borderBottomRightRadius = `${n.borderRadiusBottomRight}px` : s && (t.borderBottomRightRadius = `${s}px`), n.borderRadiusBottomLeft !== void 0 ? t.borderBottomLeftRadius = `${n.borderRadiusBottomLeft}px` : s && (t.borderBottomLeftRadius = `${s}px`);
|
|
1763
|
+
} else ((r = n.border) == null ? void 0 : r.radius) !== void 0 && (t.borderRadius = `${n.border.radius}px`);
|
|
1764
|
+
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
1765
|
+
const s = n.border || {}, h = { ...s, ...n.borderTop }, l = { ...s, ...n.borderRight }, u = { ...s, ...n.borderBottom }, c = { ...s, ...n.borderLeft };
|
|
1777
1766
|
t.borderTop = ct(h), t.borderRight = ct(l), t.borderBottom = ct(u), t.borderLeft = ct(c);
|
|
1778
|
-
} else
|
|
1779
|
-
|
|
1780
|
-
const
|
|
1781
|
-
if (t.filter =
|
|
1782
|
-
const
|
|
1783
|
-
t.outline = `${
|
|
1784
|
-
}
|
|
1785
|
-
return
|
|
1767
|
+
} else n.border && (t.border = ct(n.border));
|
|
1768
|
+
n.shadow !== void 0 && (t.boxShadow = Ie(n.shadow));
|
|
1769
|
+
const o = Te(n.filter);
|
|
1770
|
+
if (t.filter = o || "none", n.opacity !== void 0 && (t.opacity = String(n.opacity)), n.cursor !== void 0 && (t.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
1771
|
+
const s = n.outline.width ?? 0, h = n.outline.style ?? "solid", l = n.outline.color ?? "#000000";
|
|
1772
|
+
t.outline = `${s}px ${h} ${l}`, n.outline.offset !== void 0 && (t.outlineOffset = `${n.outline.offset}px`);
|
|
1773
|
+
}
|
|
1774
|
+
return n.objectFit !== void 0 && (t.objectFit = n.objectFit), n.aspectRatio !== void 0 && (t.aspectRatio = n.aspectRatio), t;
|
|
1786
1775
|
}
|
|
1787
|
-
function lt(
|
|
1788
|
-
t.borderRadius !== void 0 && (
|
|
1776
|
+
function lt(n, t) {
|
|
1777
|
+
t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio);
|
|
1789
1778
|
}
|
|
1790
|
-
function Pt(
|
|
1791
|
-
return
|
|
1779
|
+
function Pt(n) {
|
|
1780
|
+
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
1792
1781
|
}
|
|
1793
|
-
function ht(
|
|
1782
|
+
function ht(n, t) {
|
|
1794
1783
|
const e = Pt(t);
|
|
1795
1784
|
e && e.split(" ").forEach((i) => {
|
|
1796
|
-
i.trim() &&
|
|
1785
|
+
i.trim() && n.classList.add(i.trim());
|
|
1797
1786
|
});
|
|
1798
1787
|
}
|
|
1799
|
-
function
|
|
1788
|
+
function _t(n, t) {
|
|
1800
1789
|
const e = Pt(t);
|
|
1801
1790
|
e && e.split(" ").forEach((i) => {
|
|
1802
|
-
i.trim() &&
|
|
1791
|
+
i.trim() && n.classList.remove(i.trim());
|
|
1803
1792
|
});
|
|
1804
1793
|
}
|
|
1805
1794
|
const Ot = {
|
|
1806
1795
|
UNFOCUSING: 999,
|
|
1807
1796
|
FOCUSING: 1e3
|
|
1808
1797
|
};
|
|
1809
|
-
class
|
|
1798
|
+
class Re {
|
|
1810
1799
|
constructor(t, e, i) {
|
|
1811
|
-
var
|
|
1812
|
-
this.state =
|
|
1800
|
+
var o, a;
|
|
1801
|
+
this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = ft(i == null ? void 0 : i.default), this.focusedStyles = ft(i == null ? void 0 : i.focused), this.defaultClassName = (o = i == null ? void 0 : i.default) == null ? void 0 : o.className, this.focusedClassName = (a = i == null ? void 0 : i.focused) == null ? void 0 : a.className;
|
|
1813
1802
|
}
|
|
1814
1803
|
/**
|
|
1815
1804
|
* Get current state machine state
|
|
@@ -1821,7 +1810,7 @@ class Te {
|
|
|
1821
1810
|
* Check if any animation is in progress
|
|
1822
1811
|
*/
|
|
1823
1812
|
isAnimating() {
|
|
1824
|
-
return this.state !==
|
|
1813
|
+
return this.state !== E.IDLE && this.state !== E.FOCUSED;
|
|
1825
1814
|
}
|
|
1826
1815
|
/**
|
|
1827
1816
|
* Normalize scalePercent value
|
|
@@ -1834,19 +1823,19 @@ class Te {
|
|
|
1834
1823
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1835
1824
|
*/
|
|
1836
1825
|
calculateFocusDimensions(t, e, i) {
|
|
1837
|
-
const
|
|
1838
|
-
let
|
|
1839
|
-
const l = i.width *
|
|
1840
|
-
return h > l && (h = l,
|
|
1826
|
+
const o = this.normalizeScalePercent(this.config.scalePercent), a = i.height * o, r = t / e;
|
|
1827
|
+
let s = a, h = s * r;
|
|
1828
|
+
const l = i.width * o;
|
|
1829
|
+
return h > l && (h = l, s = h / r), { width: h, height: s };
|
|
1841
1830
|
}
|
|
1842
1831
|
/**
|
|
1843
1832
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
1844
1833
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1845
1834
|
*/
|
|
1846
1835
|
calculateFocusTransform(t, e) {
|
|
1847
|
-
const i = t.width / 2,
|
|
1836
|
+
const i = t.width / 2, o = t.height / 2, a = i - e.x, r = o - e.y;
|
|
1848
1837
|
return {
|
|
1849
|
-
x:
|
|
1838
|
+
x: a,
|
|
1850
1839
|
y: r,
|
|
1851
1840
|
rotation: 0,
|
|
1852
1841
|
scale: 1
|
|
@@ -1859,8 +1848,8 @@ class Te {
|
|
|
1859
1848
|
buildDimensionZoomTransform(t) {
|
|
1860
1849
|
const e = ["translate(-50%, -50%)"];
|
|
1861
1850
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
1862
|
-
const i = t.x ?? 0,
|
|
1863
|
-
e.push(`translate(${i}px, ${
|
|
1851
|
+
const i = t.x ?? 0, o = t.y ?? 0;
|
|
1852
|
+
e.push(`translate(${i}px, ${o}px)`);
|
|
1864
1853
|
}
|
|
1865
1854
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), e.join(" ");
|
|
1866
1855
|
}
|
|
@@ -1868,19 +1857,19 @@ class Te {
|
|
|
1868
1857
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1869
1858
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1870
1859
|
*/
|
|
1871
|
-
animateWithDimensions(t, e, i,
|
|
1860
|
+
animateWithDimensions(t, e, i, o, a, r, s, h) {
|
|
1872
1861
|
const l = this.buildDimensionZoomTransform(e), u = this.buildDimensionZoomTransform(i);
|
|
1873
1862
|
return t.style.transition = "none", t.animate(
|
|
1874
1863
|
[
|
|
1875
1864
|
{
|
|
1876
1865
|
transform: l,
|
|
1877
|
-
width: `${
|
|
1878
|
-
height: `${
|
|
1866
|
+
width: `${o}px`,
|
|
1867
|
+
height: `${a}px`
|
|
1879
1868
|
},
|
|
1880
1869
|
{
|
|
1881
1870
|
transform: u,
|
|
1882
1871
|
width: `${r}px`,
|
|
1883
|
-
height: `${
|
|
1872
|
+
height: `${s}px`
|
|
1884
1873
|
}
|
|
1885
1874
|
],
|
|
1886
1875
|
{
|
|
@@ -1900,7 +1889,7 @@ class Te {
|
|
|
1900
1889
|
* Remove focused styling from an element
|
|
1901
1890
|
*/
|
|
1902
1891
|
removeFocusedStyling(t, e) {
|
|
1903
|
-
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"),
|
|
1892
|
+
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), _t(t, this.focusedClassName), lt(t, this.defaultStyles), ht(t, this.defaultClassName);
|
|
1904
1893
|
}
|
|
1905
1894
|
/**
|
|
1906
1895
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -1908,16 +1897,16 @@ class Te {
|
|
|
1908
1897
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1909
1898
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1910
1899
|
*/
|
|
1911
|
-
startFocusAnimation(t, e, i,
|
|
1912
|
-
const r = t.style.zIndex || "",
|
|
1900
|
+
startFocusAnimation(t, e, i, o, a) {
|
|
1901
|
+
const r = t.style.zIndex || "", s = t.offsetWidth, h = t.offsetHeight, l = this.calculateFocusDimensions(s, h, e), u = this.calculateFocusTransform(e, i);
|
|
1913
1902
|
this.applyFocusedStyling(t, Ot.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1914
|
-
const c =
|
|
1903
|
+
const c = o ?? {
|
|
1915
1904
|
x: 0,
|
|
1916
1905
|
y: 0,
|
|
1917
1906
|
rotation: i.rotation,
|
|
1918
1907
|
scale: 1
|
|
1919
1908
|
// No scale - using dimensions
|
|
1920
|
-
}, d = (
|
|
1909
|
+
}, d = (a == null ? void 0 : a.width) ?? s, m = (a == null ? void 0 : a.height) ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
|
|
1921
1910
|
t,
|
|
1922
1911
|
c,
|
|
1923
1912
|
u,
|
|
@@ -1940,7 +1929,7 @@ class Te {
|
|
|
1940
1929
|
originalState: i,
|
|
1941
1930
|
focusTransform: u,
|
|
1942
1931
|
originalZIndex: r,
|
|
1943
|
-
originalWidth:
|
|
1932
|
+
originalWidth: s,
|
|
1944
1933
|
originalHeight: h,
|
|
1945
1934
|
focusWidth: l.width,
|
|
1946
1935
|
focusHeight: l.height
|
|
@@ -1949,7 +1938,7 @@ class Te {
|
|
|
1949
1938
|
originalState: i,
|
|
1950
1939
|
animationHandle: g,
|
|
1951
1940
|
direction: "in",
|
|
1952
|
-
originalWidth:
|
|
1941
|
+
originalWidth: s,
|
|
1953
1942
|
originalHeight: h
|
|
1954
1943
|
};
|
|
1955
1944
|
}
|
|
@@ -1958,21 +1947,21 @@ class Te {
|
|
|
1958
1947
|
* Animates back to original dimensions for consistent behavior
|
|
1959
1948
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1960
1949
|
*/
|
|
1961
|
-
startUnfocusAnimation(t, e, i,
|
|
1962
|
-
var b, p, g, f,
|
|
1950
|
+
startUnfocusAnimation(t, e, i, o) {
|
|
1951
|
+
var b, p, g, f, y;
|
|
1963
1952
|
t.style.zIndex = String(Ot.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1964
|
-
const
|
|
1953
|
+
const a = i ?? ((b = this.focusData) == null ? void 0 : b.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = (o == null ? void 0 : o.width) ?? ((p = this.focusData) == null ? void 0 : p.focusWidth) ?? t.offsetWidth, s = (o == null ? void 0 : o.height) ?? ((g = this.focusData) == null ? void 0 : g.focusHeight) ?? t.offsetHeight, h = {
|
|
1965
1954
|
x: 0,
|
|
1966
1955
|
y: 0,
|
|
1967
1956
|
rotation: e.rotation,
|
|
1968
1957
|
scale: 1
|
|
1969
1958
|
// No scale - using dimensions
|
|
1970
|
-
}, l = ((f = this.focusData) == null ? void 0 : f.originalWidth) ?? t.offsetWidth, u = ((
|
|
1959
|
+
}, l = ((f = this.focusData) == null ? void 0 : f.originalWidth) ?? t.offsetWidth, u = ((y = this.focusData) == null ? void 0 : y.originalHeight) ?? t.offsetHeight, c = this.config.animationDuration ?? 600, d = this.animateWithDimensions(
|
|
1971
1960
|
t,
|
|
1972
|
-
|
|
1961
|
+
a,
|
|
1973
1962
|
h,
|
|
1974
1963
|
r,
|
|
1975
|
-
|
|
1964
|
+
s,
|
|
1976
1965
|
l,
|
|
1977
1966
|
u,
|
|
1978
1967
|
c
|
|
@@ -1980,7 +1969,7 @@ class Te {
|
|
|
1980
1969
|
id: `unfocus-${Date.now()}`,
|
|
1981
1970
|
element: t,
|
|
1982
1971
|
animation: d,
|
|
1983
|
-
fromState:
|
|
1972
|
+
fromState: a,
|
|
1984
1973
|
toState: h,
|
|
1985
1974
|
startTime: performance.now(),
|
|
1986
1975
|
duration: c
|
|
@@ -2006,94 +1995,94 @@ class Te {
|
|
|
2006
1995
|
/**
|
|
2007
1996
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2008
1997
|
*/
|
|
2009
|
-
resetElementInstantly(t, e, i,
|
|
1998
|
+
resetElementInstantly(t, e, i, o, a) {
|
|
2010
1999
|
this.animationEngine.cancelAllAnimations(t);
|
|
2011
2000
|
const r = ["translate(-50%, -50%)"];
|
|
2012
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2001
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), o !== void 0 && a !== void 0 && (t.style.width = `${o}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, i);
|
|
2013
2002
|
}
|
|
2014
2003
|
/**
|
|
2015
2004
|
* Focus (zoom) an image to center of container
|
|
2016
2005
|
* Implements cross-animation when swapping focus
|
|
2017
2006
|
*/
|
|
2018
2007
|
async focusImage(t, e, i) {
|
|
2019
|
-
var
|
|
2020
|
-
if (this.currentFocus === t && this.state ===
|
|
2008
|
+
var a, r, s, h, l, u, c, d, m, b, p, g;
|
|
2009
|
+
if (this.currentFocus === t && this.state === E.FOCUSED)
|
|
2021
2010
|
return this.unfocusImage();
|
|
2022
|
-
if (((
|
|
2023
|
-
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0),
|
|
2011
|
+
if (((a = this.incoming) == null ? void 0 : a.element) === t && this.state === E.FOCUSING) {
|
|
2012
|
+
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), y = {
|
|
2024
2013
|
x: f.x,
|
|
2025
2014
|
y: f.y,
|
|
2026
2015
|
rotation: f.rotation,
|
|
2027
2016
|
scale: 1
|
|
2028
2017
|
// No scale transform - using dimensions
|
|
2029
|
-
},
|
|
2018
|
+
}, v = {
|
|
2030
2019
|
width: t.offsetWidth,
|
|
2031
2020
|
height: t.offsetHeight
|
|
2032
2021
|
};
|
|
2033
2022
|
this.outgoing = this.startUnfocusAnimation(
|
|
2034
2023
|
t,
|
|
2035
2024
|
this.incoming.originalState,
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
), this.incoming = null, this.state =
|
|
2025
|
+
y,
|
|
2026
|
+
v
|
|
2027
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, ((r = this.focusData) == null ? void 0 : r.originalZIndex) || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
|
|
2039
2028
|
return;
|
|
2040
2029
|
}
|
|
2041
|
-
const
|
|
2030
|
+
const o = ++this.focusGeneration;
|
|
2042
2031
|
switch (this.state) {
|
|
2043
|
-
case
|
|
2044
|
-
if (this.state =
|
|
2045
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2032
|
+
case E.IDLE:
|
|
2033
|
+
if (this.state = E.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2034
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2046
2035
|
break;
|
|
2047
|
-
case
|
|
2048
|
-
if (this.state =
|
|
2036
|
+
case E.FOCUSED:
|
|
2037
|
+
if (this.state = E.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2049
2038
|
this.currentFocus,
|
|
2050
2039
|
this.focusData.originalState
|
|
2051
2040
|
)), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2052
2041
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2053
2042
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2054
|
-
]), this.focusGeneration !==
|
|
2043
|
+
]), this.focusGeneration !== o)
|
|
2055
2044
|
return;
|
|
2056
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((
|
|
2045
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((s = this.outgoing.originalState.zIndex) == null ? void 0 : s.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2057
2046
|
break;
|
|
2058
|
-
case
|
|
2047
|
+
case E.FOCUSING:
|
|
2059
2048
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2060
2049
|
this.incoming.element,
|
|
2061
2050
|
this.incoming.originalState,
|
|
2062
2051
|
((h = this.focusData) == null ? void 0 : h.originalZIndex) || "",
|
|
2063
2052
|
(l = this.focusData) == null ? void 0 : l.originalWidth,
|
|
2064
2053
|
(u = this.focusData) == null ? void 0 : u.originalHeight
|
|
2065
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2066
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2054
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2055
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2067
2056
|
break;
|
|
2068
|
-
case
|
|
2069
|
-
if (this.state =
|
|
2057
|
+
case E.UNFOCUSING:
|
|
2058
|
+
if (this.state = E.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2070
2059
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2071
2060
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2072
|
-
]), this.focusGeneration !==
|
|
2073
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2061
|
+
]), this.focusGeneration !== o) return;
|
|
2062
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2074
2063
|
break;
|
|
2075
|
-
case
|
|
2064
|
+
case E.CROSS_ANIMATING:
|
|
2076
2065
|
if (((d = this.incoming) == null ? void 0 : d.element) === t)
|
|
2077
2066
|
return;
|
|
2078
2067
|
if (((m = this.outgoing) == null ? void 0 : m.element) === t) {
|
|
2079
|
-
const f = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0),
|
|
2068
|
+
const f = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0), y = {
|
|
2080
2069
|
x: f.x,
|
|
2081
2070
|
y: f.y,
|
|
2082
2071
|
rotation: f.rotation,
|
|
2083
2072
|
scale: 1
|
|
2084
2073
|
// No scale - using dimensions
|
|
2085
|
-
},
|
|
2074
|
+
}, v = {
|
|
2086
2075
|
width: t.offsetWidth,
|
|
2087
2076
|
height: t.offsetHeight
|
|
2088
2077
|
};
|
|
2089
2078
|
if (this.incoming) {
|
|
2090
|
-
const
|
|
2091
|
-
x:
|
|
2092
|
-
y:
|
|
2093
|
-
rotation:
|
|
2079
|
+
const I = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), R = {
|
|
2080
|
+
x: I.x,
|
|
2081
|
+
y: I.y,
|
|
2082
|
+
rotation: I.rotation,
|
|
2094
2083
|
scale: 1
|
|
2095
2084
|
// No scale - using dimensions
|
|
2096
|
-
},
|
|
2085
|
+
}, w = {
|
|
2097
2086
|
width: this.incoming.element.offsetWidth,
|
|
2098
2087
|
height: this.incoming.element.offsetHeight
|
|
2099
2088
|
};
|
|
@@ -2101,15 +2090,15 @@ class Te {
|
|
|
2101
2090
|
this.incoming.element,
|
|
2102
2091
|
this.incoming.originalState,
|
|
2103
2092
|
R,
|
|
2104
|
-
|
|
2093
|
+
w
|
|
2105
2094
|
);
|
|
2106
2095
|
} else
|
|
2107
2096
|
this.outgoing = null;
|
|
2108
|
-
if (this.incoming = this.startFocusAnimation(t, e, i,
|
|
2097
|
+
if (this.incoming = this.startFocusAnimation(t, e, i, y, v), await Promise.all([
|
|
2109
2098
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2110
2099
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2111
|
-
]), this.focusGeneration !==
|
|
2112
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2100
|
+
]), this.focusGeneration !== o) return;
|
|
2101
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2113
2102
|
return;
|
|
2114
2103
|
}
|
|
2115
2104
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2119,28 +2108,28 @@ class Te {
|
|
|
2119
2108
|
this.outgoing.originalWidth,
|
|
2120
2109
|
this.outgoing.originalHeight
|
|
2121
2110
|
), this.outgoing = null), this.incoming) {
|
|
2122
|
-
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0),
|
|
2111
|
+
const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), y = {
|
|
2123
2112
|
x: f.x,
|
|
2124
2113
|
y: f.y,
|
|
2125
2114
|
rotation: f.rotation,
|
|
2126
2115
|
scale: 1
|
|
2127
2116
|
// No scale - using dimensions
|
|
2128
|
-
},
|
|
2117
|
+
}, v = {
|
|
2129
2118
|
width: this.incoming.element.offsetWidth,
|
|
2130
2119
|
height: this.incoming.element.offsetHeight
|
|
2131
2120
|
};
|
|
2132
2121
|
this.outgoing = this.startUnfocusAnimation(
|
|
2133
2122
|
this.incoming.element,
|
|
2134
2123
|
this.incoming.originalState,
|
|
2135
|
-
|
|
2136
|
-
|
|
2124
|
+
y,
|
|
2125
|
+
v
|
|
2137
2126
|
);
|
|
2138
2127
|
}
|
|
2139
2128
|
if (this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2140
2129
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2141
2130
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2142
|
-
]), this.focusGeneration !==
|
|
2143
|
-
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((g = this.outgoing.originalState.zIndex) == null ? void 0 : g.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state =
|
|
2131
|
+
]), this.focusGeneration !== o) return;
|
|
2132
|
+
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((g = this.outgoing.originalState.zIndex) == null ? void 0 : g.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2144
2133
|
break;
|
|
2145
2134
|
}
|
|
2146
2135
|
}
|
|
@@ -2148,10 +2137,10 @@ class Te {
|
|
|
2148
2137
|
* Unfocus current image, returning it to original position
|
|
2149
2138
|
*/
|
|
2150
2139
|
async unfocusImage() {
|
|
2151
|
-
var
|
|
2140
|
+
var a, r, s;
|
|
2152
2141
|
const t = ++this.focusGeneration;
|
|
2153
2142
|
if (!this.currentFocus || !this.focusData) {
|
|
2154
|
-
if (this.incoming && this.state ===
|
|
2143
|
+
if (this.incoming && this.state === E.FOCUSING) {
|
|
2155
2144
|
const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), l = {
|
|
2156
2145
|
x: h.x,
|
|
2157
2146
|
y: h.y,
|
|
@@ -2167,12 +2156,12 @@ class Te {
|
|
|
2167
2156
|
this.incoming.originalState,
|
|
2168
2157
|
l,
|
|
2169
2158
|
u
|
|
2170
|
-
), this.incoming = null, this.state =
|
|
2171
|
-
this.removeFocusedStyling(this.outgoing.element, ((
|
|
2159
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2160
|
+
this.removeFocusedStyling(this.outgoing.element, ((a = this.focusData) == null ? void 0 : a.originalZIndex) || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE;
|
|
2172
2161
|
}
|
|
2173
2162
|
return;
|
|
2174
2163
|
}
|
|
2175
|
-
if (this.state ===
|
|
2164
|
+
if (this.state === E.CROSS_ANIMATING && this.incoming) {
|
|
2176
2165
|
const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), l = {
|
|
2177
2166
|
x: h.x,
|
|
2178
2167
|
y: h.y,
|
|
@@ -2192,12 +2181,12 @@ class Te {
|
|
|
2192
2181
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2193
2182
|
this.waitForAnimation(c.animationHandle)
|
|
2194
2183
|
]), this.focusGeneration !== t) return;
|
|
2195
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(c.element, ((
|
|
2184
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.removeFocusedStyling(c.element, ((s = this.incoming.originalState.zIndex) == null ? void 0 : s.toString()) || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
|
|
2196
2185
|
return;
|
|
2197
2186
|
}
|
|
2198
|
-
this.state =
|
|
2199
|
-
const e = this.currentFocus, i = this.focusData.originalState,
|
|
2200
|
-
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e,
|
|
2187
|
+
this.state = E.UNFOCUSING;
|
|
2188
|
+
const e = this.currentFocus, i = this.focusData.originalState, o = this.focusData.originalZIndex;
|
|
2189
|
+
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, o), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE);
|
|
2201
2190
|
}
|
|
2202
2191
|
/**
|
|
2203
2192
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2215,7 +2204,7 @@ class Te {
|
|
|
2215
2204
|
* Check if an image is currently focused (stable state)
|
|
2216
2205
|
*/
|
|
2217
2206
|
isFocused(t) {
|
|
2218
|
-
return this.currentFocus === t && this.state ===
|
|
2207
|
+
return this.currentFocus === t && this.state === E.FOCUSED;
|
|
2219
2208
|
}
|
|
2220
2209
|
/**
|
|
2221
2210
|
* Check if an image is the target of current focus animation
|
|
@@ -2238,9 +2227,9 @@ class Te {
|
|
|
2238
2227
|
* Used during swipe gestures for visual feedback
|
|
2239
2228
|
*/
|
|
2240
2229
|
setDragOffset(t) {
|
|
2241
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2242
|
-
const e = this.currentFocus, i = this.focusData.focusTransform,
|
|
2243
|
-
|
|
2230
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2231
|
+
const e = this.currentFocus, i = this.focusData.focusTransform, o = ["translate(-50%, -50%)"], a = (i.x ?? 0) + t, r = i.y ?? 0;
|
|
2232
|
+
o.push(`translate(${a}px, ${r}px)`), i.rotation !== void 0 && o.push(`rotate(${i.rotation}deg)`), e.style.transition = "none", e.style.transform = o.join(" ");
|
|
2244
2233
|
}
|
|
2245
2234
|
/**
|
|
2246
2235
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2248,10 +2237,10 @@ class Te {
|
|
|
2248
2237
|
* @param duration - Animation duration in ms (default 150)
|
|
2249
2238
|
*/
|
|
2250
2239
|
clearDragOffset(t, e = 150) {
|
|
2251
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2252
|
-
const i = this.currentFocus,
|
|
2253
|
-
|
|
2254
|
-
const h =
|
|
2240
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2241
|
+
const i = this.currentFocus, o = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = o.x ?? 0, s = o.y ?? 0;
|
|
2242
|
+
a.push(`translate(${r}px, ${s}px)`), o.rotation !== void 0 && a.push(`rotate(${o.rotation}deg)`);
|
|
2243
|
+
const h = a.join(" ");
|
|
2255
2244
|
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform = h, setTimeout(() => {
|
|
2256
2245
|
this.currentFocus === i && (i.style.transition = "none");
|
|
2257
2246
|
}, e)) : (i.style.transition = "none", i.style.transform = h);
|
|
@@ -2260,7 +2249,7 @@ class Te {
|
|
|
2260
2249
|
* Reset zoom state (cancels all animations)
|
|
2261
2250
|
*/
|
|
2262
2251
|
reset() {
|
|
2263
|
-
var t, e, i,
|
|
2252
|
+
var t, e, i, o;
|
|
2264
2253
|
this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
2265
2254
|
this.outgoing.element,
|
|
2266
2255
|
this.outgoing.originalState,
|
|
@@ -2272,17 +2261,17 @@ class Te {
|
|
|
2272
2261
|
this.incoming.originalState,
|
|
2273
2262
|
((e = this.focusData) == null ? void 0 : e.originalZIndex) || "",
|
|
2274
2263
|
(i = this.focusData) == null ? void 0 : i.originalWidth,
|
|
2275
|
-
(
|
|
2264
|
+
(o = this.focusData) == null ? void 0 : o.originalHeight
|
|
2276
2265
|
)), this.currentFocus && this.focusData && this.resetElementInstantly(
|
|
2277
2266
|
this.currentFocus,
|
|
2278
2267
|
this.focusData.originalState,
|
|
2279
2268
|
this.focusData.originalZIndex,
|
|
2280
2269
|
this.focusData.originalWidth,
|
|
2281
2270
|
this.focusData.originalHeight
|
|
2282
|
-
), this.state =
|
|
2271
|
+
), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2283
2272
|
}
|
|
2284
2273
|
}
|
|
2285
|
-
const
|
|
2274
|
+
const Ae = 50, Me = 0.5, Ce = 20, ze = 0.3, Fe = 150, Le = 30, mt = class mt {
|
|
2286
2275
|
constructor(t, e) {
|
|
2287
2276
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = e, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2288
2277
|
}
|
|
@@ -2327,23 +2316,23 @@ const Re = 50, Ae = 0.5, Me = 20, ze = 0.3, Ce = 150, Fe = 30, mt = class mt {
|
|
|
2327
2316
|
}
|
|
2328
2317
|
handleTouchMove(t) {
|
|
2329
2318
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2330
|
-
const e = t.touches[0], i = e.clientX - this.touchState.startX,
|
|
2331
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i +
|
|
2332
|
-
const
|
|
2333
|
-
this.touchState.isHorizontalSwipe =
|
|
2319
|
+
const e = t.touches[0], i = e.clientX - this.touchState.startX, o = e.clientY - this.touchState.startY;
|
|
2320
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + o * o) > 10) {
|
|
2321
|
+
const s = Math.atan2(Math.abs(o), Math.abs(i)) * (180 / Math.PI);
|
|
2322
|
+
this.touchState.isHorizontalSwipe = s <= Le;
|
|
2334
2323
|
}
|
|
2335
2324
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2336
2325
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
|
|
2337
|
-
const
|
|
2338
|
-
this.callbacks.onDragOffset(
|
|
2326
|
+
const a = i * ze;
|
|
2327
|
+
this.callbacks.onDragOffset(a);
|
|
2339
2328
|
}
|
|
2340
2329
|
}
|
|
2341
2330
|
handleTouchEnd(t) {
|
|
2342
2331
|
if (!this.touchState) return;
|
|
2343
2332
|
this.recentTouchTimestamp = Date.now();
|
|
2344
|
-
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime,
|
|
2333
|
+
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, o = Math.abs(e) / i, a = Math.abs(e);
|
|
2345
2334
|
let r = !1;
|
|
2346
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (
|
|
2335
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Ae || o >= Me && a >= Ce) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2347
2336
|
}
|
|
2348
2337
|
handleTouchCancel(t) {
|
|
2349
2338
|
var e;
|
|
@@ -2351,9 +2340,9 @@ const Re = 50, Ae = 0.5, Me = 20, ze = 0.3, Ce = 150, Fe = 30, mt = class mt {
|
|
|
2351
2340
|
}
|
|
2352
2341
|
};
|
|
2353
2342
|
mt.TOUCH_CLICK_DELAY = 300;
|
|
2354
|
-
let
|
|
2355
|
-
class
|
|
2356
|
-
constructor(t
|
|
2343
|
+
let It = mt;
|
|
2344
|
+
class Oe {
|
|
2345
|
+
constructor(t) {
|
|
2357
2346
|
if (this._prepared = !1, this._discoveredUrls = [], this.apiKey = t.apiKey ?? "", this.apiEndpoint = t.apiEndpoint ?? "https://www.googleapis.com/drive/v3/files", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2358
2347
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
2359
2348
|
}
|
|
@@ -2364,12 +2353,12 @@ class Le {
|
|
|
2364
2353
|
async prepare(t) {
|
|
2365
2354
|
this._discoveredUrls = [];
|
|
2366
2355
|
for (const e of this.sources)
|
|
2367
|
-
if (
|
|
2356
|
+
if ("folders" in e)
|
|
2368
2357
|
for (const i of e.folders) {
|
|
2369
|
-
const
|
|
2370
|
-
this._discoveredUrls.push(...
|
|
2358
|
+
const o = e.recursive !== void 0 ? e.recursive : !0, a = await this.loadFromFolder(i, t, o);
|
|
2359
|
+
this._discoveredUrls.push(...a);
|
|
2371
2360
|
}
|
|
2372
|
-
else if (
|
|
2361
|
+
else if ("files" in e) {
|
|
2373
2362
|
const i = await this.loadFiles(e.files, t);
|
|
2374
2363
|
this._discoveredUrls.push(...i);
|
|
2375
2364
|
}
|
|
@@ -2412,9 +2401,9 @@ class Le {
|
|
|
2412
2401
|
// Alternative format
|
|
2413
2402
|
];
|
|
2414
2403
|
for (const i of e) {
|
|
2415
|
-
const
|
|
2416
|
-
if (
|
|
2417
|
-
return
|
|
2404
|
+
const o = t.match(i);
|
|
2405
|
+
if (o && o[1])
|
|
2406
|
+
return o[1];
|
|
2418
2407
|
}
|
|
2419
2408
|
return null;
|
|
2420
2409
|
}
|
|
@@ -2426,15 +2415,15 @@ class Le {
|
|
|
2426
2415
|
* @returns Promise resolving to array of image URLs
|
|
2427
2416
|
*/
|
|
2428
2417
|
async loadFromFolder(t, e, i = !0) {
|
|
2429
|
-
const
|
|
2430
|
-
if (!
|
|
2418
|
+
const o = this.extractFolderId(t);
|
|
2419
|
+
if (!o)
|
|
2431
2420
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2432
2421
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2433
|
-
return this.loadImagesDirectly(
|
|
2422
|
+
return this.loadImagesDirectly(o, e);
|
|
2434
2423
|
try {
|
|
2435
|
-
return i ? await this.loadImagesRecursively(
|
|
2436
|
-
} catch (
|
|
2437
|
-
return console.error("Error loading from Google Drive API:",
|
|
2424
|
+
return i ? await this.loadImagesRecursively(o, e) : await this.loadImagesFromSingleFolder(o, e);
|
|
2425
|
+
} catch (a) {
|
|
2426
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(o, e);
|
|
2438
2427
|
}
|
|
2439
2428
|
}
|
|
2440
2429
|
/**
|
|
@@ -2444,10 +2433,10 @@ class Le {
|
|
|
2444
2433
|
* @returns Promise resolving to array of image URLs
|
|
2445
2434
|
*/
|
|
2446
2435
|
async loadImagesFromSingleFolder(t, e) {
|
|
2447
|
-
const i = [],
|
|
2448
|
-
if (!
|
|
2449
|
-
throw new Error(`API request failed: ${
|
|
2450
|
-
const l = (await
|
|
2436
|
+
const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2437
|
+
if (!s.ok)
|
|
2438
|
+
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2439
|
+
const l = (await s.json()).files.filter(
|
|
2451
2440
|
(u) => u.mimeType.startsWith("image/") && e.isAllowed(u.name)
|
|
2452
2441
|
);
|
|
2453
2442
|
return this.log(`Found ${l.length} images in folder ${t} (non-recursive)`), l.forEach((u) => {
|
|
@@ -2462,25 +2451,25 @@ class Le {
|
|
|
2462
2451
|
*/
|
|
2463
2452
|
async loadFiles(t, e) {
|
|
2464
2453
|
const i = [];
|
|
2465
|
-
for (const
|
|
2466
|
-
const
|
|
2467
|
-
if (!
|
|
2468
|
-
this.log(`Skipping invalid file URL: ${
|
|
2454
|
+
for (const o of t) {
|
|
2455
|
+
const a = this.extractFileId(o);
|
|
2456
|
+
if (!a) {
|
|
2457
|
+
this.log(`Skipping invalid file URL: ${o}`);
|
|
2469
2458
|
continue;
|
|
2470
2459
|
}
|
|
2471
2460
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2472
2461
|
try {
|
|
2473
|
-
const r = `${this.apiEndpoint}/${
|
|
2474
|
-
if (
|
|
2475
|
-
const h = await
|
|
2476
|
-
h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${
|
|
2462
|
+
const r = `${this.apiEndpoint}/${a}?fields=name,mimeType&key=${this.apiKey}`, s = await fetch(r);
|
|
2463
|
+
if (s.ok) {
|
|
2464
|
+
const h = await s.json();
|
|
2465
|
+
h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${a}=s1600`), this.log(`Added file: ${h.name}`)) : this.log(`Skipping non-image file: ${h.name} (${h.mimeType})`);
|
|
2477
2466
|
} else
|
|
2478
|
-
this.log(`Failed to fetch metadata for file ${
|
|
2467
|
+
this.log(`Failed to fetch metadata for file ${a}: ${s.status}`);
|
|
2479
2468
|
} catch (r) {
|
|
2480
|
-
this.log(`Error fetching metadata for file ${
|
|
2469
|
+
this.log(`Error fetching metadata for file ${a}:`, r);
|
|
2481
2470
|
}
|
|
2482
2471
|
else
|
|
2483
|
-
i.push(`https://lh3.googleusercontent.com/d/${
|
|
2472
|
+
i.push(`https://lh3.googleusercontent.com/d/${a}=s1600`);
|
|
2484
2473
|
}
|
|
2485
2474
|
return i;
|
|
2486
2475
|
}
|
|
@@ -2501,9 +2490,9 @@ class Le {
|
|
|
2501
2490
|
// Generic id parameter
|
|
2502
2491
|
];
|
|
2503
2492
|
for (const i of e) {
|
|
2504
|
-
const
|
|
2505
|
-
if (
|
|
2506
|
-
return
|
|
2493
|
+
const o = t.match(i);
|
|
2494
|
+
if (o && o[1])
|
|
2495
|
+
return o[1];
|
|
2507
2496
|
}
|
|
2508
2497
|
return null;
|
|
2509
2498
|
}
|
|
@@ -2514,10 +2503,10 @@ class Le {
|
|
|
2514
2503
|
* @returns Promise resolving to array of image URLs
|
|
2515
2504
|
*/
|
|
2516
2505
|
async loadImagesRecursively(t, e) {
|
|
2517
|
-
const i = [],
|
|
2518
|
-
if (!
|
|
2519
|
-
throw new Error(`API request failed: ${
|
|
2520
|
-
const h = await
|
|
2506
|
+
const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2507
|
+
if (!s.ok)
|
|
2508
|
+
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2509
|
+
const h = await s.json(), l = h.files.filter(
|
|
2521
2510
|
(c) => c.mimeType.startsWith("image/") && e.isAllowed(c.name)
|
|
2522
2511
|
), u = h.files.filter(
|
|
2523
2512
|
(c) => c.mimeType === "application/vnd.google-apps.folder"
|
|
@@ -2541,11 +2530,11 @@ class Le {
|
|
|
2541
2530
|
*/
|
|
2542
2531
|
async loadImagesDirectly(t, e) {
|
|
2543
2532
|
try {
|
|
2544
|
-
const i = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2545
|
-
if (!
|
|
2533
|
+
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(i, { mode: "cors" });
|
|
2534
|
+
if (!o.ok)
|
|
2546
2535
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2547
|
-
const
|
|
2548
|
-
return [...new Set(
|
|
2536
|
+
const a = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2537
|
+
return [...new Set(s.map((u) => u[1]))].map(
|
|
2549
2538
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2550
2539
|
);
|
|
2551
2540
|
} catch (i) {
|
|
@@ -2573,9 +2562,9 @@ class Le {
|
|
|
2573
2562
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2574
2563
|
}
|
|
2575
2564
|
}
|
|
2576
|
-
class
|
|
2577
|
-
constructor(t
|
|
2578
|
-
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.
|
|
2565
|
+
class $e {
|
|
2566
|
+
constructor(t) {
|
|
2567
|
+
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2579
2568
|
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
2580
2569
|
this.log("StaticImageLoader initialized with config:", t);
|
|
2581
2570
|
}
|
|
@@ -2619,13 +2608,13 @@ class Oe {
|
|
|
2619
2608
|
return this._prepared;
|
|
2620
2609
|
}
|
|
2621
2610
|
/**
|
|
2622
|
-
* Process a single source object
|
|
2623
|
-
* @param source - Source configuration
|
|
2611
|
+
* Process a single source object using shape-based detection
|
|
2612
|
+
* @param source - Source configuration detected by key presence
|
|
2624
2613
|
* @param filter - Filter to apply to discovered images
|
|
2625
2614
|
* @returns Promise resolving to array of valid URLs from this source
|
|
2626
2615
|
*/
|
|
2627
2616
|
async processSource(t, e) {
|
|
2628
|
-
return
|
|
2617
|
+
return t ? "urls" in t ? await this.processUrls(t.urls, e) : "path" in t ? await this.processPath(t.path, t.files, e) : "json" in t ? await this.processJson(t.json, e) : (console.warn("Unknown source shape:", t), []) : (console.warn("Invalid source object:", t), []);
|
|
2629
2618
|
}
|
|
2630
2619
|
/**
|
|
2631
2620
|
* Process a list of direct URLs
|
|
@@ -2637,13 +2626,13 @@ class Oe {
|
|
|
2637
2626
|
if (!Array.isArray(t))
|
|
2638
2627
|
return console.warn("URLs must be an array:", t), [];
|
|
2639
2628
|
const i = [];
|
|
2640
|
-
for (const
|
|
2641
|
-
const
|
|
2642
|
-
if (!e.isAllowed(
|
|
2643
|
-
this.log(`Skipping filtered URL: ${
|
|
2629
|
+
for (const o of t) {
|
|
2630
|
+
const a = o.split("/").pop() || o;
|
|
2631
|
+
if (!e.isAllowed(a)) {
|
|
2632
|
+
this.log(`Skipping filtered URL: ${o}`);
|
|
2644
2633
|
continue;
|
|
2645
2634
|
}
|
|
2646
|
-
this.validateUrls ? await this.validateUrl(
|
|
2635
|
+
this.validateUrls ? await this.validateUrl(o) ? i.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : i.push(o);
|
|
2647
2636
|
}
|
|
2648
2637
|
return i;
|
|
2649
2638
|
}
|
|
@@ -2655,20 +2644,40 @@ class Oe {
|
|
|
2655
2644
|
* @returns Promise resolving to array of validated URLs
|
|
2656
2645
|
*/
|
|
2657
2646
|
async processPath(t, e, i) {
|
|
2658
|
-
if (!t)
|
|
2659
|
-
return console.warn("basePath is required for path-type sources"), [];
|
|
2660
2647
|
if (!Array.isArray(e))
|
|
2661
2648
|
return console.warn("files must be an array:", e), [];
|
|
2662
|
-
const
|
|
2663
|
-
for (const
|
|
2664
|
-
if (!i.isAllowed(
|
|
2665
|
-
this.log(`Skipping filtered file: ${
|
|
2649
|
+
const o = [];
|
|
2650
|
+
for (const a of e) {
|
|
2651
|
+
if (!i.isAllowed(a)) {
|
|
2652
|
+
this.log(`Skipping filtered file: ${a}`);
|
|
2666
2653
|
continue;
|
|
2667
2654
|
}
|
|
2668
|
-
const r = this.constructUrl(t,
|
|
2669
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2655
|
+
const r = this.constructUrl(t, a);
|
|
2656
|
+
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
2657
|
+
}
|
|
2658
|
+
return o;
|
|
2659
|
+
}
|
|
2660
|
+
/**
|
|
2661
|
+
* Process a JSON endpoint source
|
|
2662
|
+
* Fetches a JSON endpoint that returns { images: string[] }
|
|
2663
|
+
* @param url - JSON endpoint URL
|
|
2664
|
+
* @param filter - Filter to apply to discovered images
|
|
2665
|
+
* @returns Promise resolving to array of validated URLs
|
|
2666
|
+
*/
|
|
2667
|
+
async processJson(t, e) {
|
|
2668
|
+
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2669
|
+
const i = new AbortController(), o = setTimeout(() => i.abort(), 1e4);
|
|
2670
|
+
try {
|
|
2671
|
+
const a = await fetch(t, { signal: i.signal });
|
|
2672
|
+
if (clearTimeout(o), !a.ok)
|
|
2673
|
+
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
2674
|
+
const r = await a.json();
|
|
2675
|
+
if (!r || !Array.isArray(r.images))
|
|
2676
|
+
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2677
|
+
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2678
|
+
} catch (a) {
|
|
2679
|
+
throw clearTimeout(o), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
2670
2680
|
}
|
|
2671
|
-
return n;
|
|
2672
2681
|
}
|
|
2673
2682
|
/**
|
|
2674
2683
|
* Validate a single URL using HEAD request
|
|
@@ -2689,11 +2698,11 @@ class Oe {
|
|
|
2689
2698
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2690
2699
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2691
2700
|
try {
|
|
2692
|
-
const i = new AbortController(),
|
|
2701
|
+
const i = new AbortController(), o = setTimeout(() => i.abort(), this.validationTimeout), a = await fetch(t, {
|
|
2693
2702
|
method: "HEAD",
|
|
2694
2703
|
signal: i.signal
|
|
2695
2704
|
});
|
|
2696
|
-
return clearTimeout(
|
|
2705
|
+
return clearTimeout(o), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
2697
2706
|
} catch (i) {
|
|
2698
2707
|
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
2699
2708
|
}
|
|
@@ -2710,8 +2719,8 @@ class Oe {
|
|
|
2710
2719
|
return `${i}/${e}`;
|
|
2711
2720
|
if (typeof window > "u")
|
|
2712
2721
|
return `${i}/${e}`;
|
|
2713
|
-
const
|
|
2714
|
-
return `${
|
|
2722
|
+
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2723
|
+
return `${o}${r}/${e}`;
|
|
2715
2724
|
}
|
|
2716
2725
|
/**
|
|
2717
2726
|
* Check if URL is absolute (contains protocol)
|
|
@@ -2733,7 +2742,7 @@ class Oe {
|
|
|
2733
2742
|
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2734
2743
|
}
|
|
2735
2744
|
}
|
|
2736
|
-
class
|
|
2745
|
+
class De {
|
|
2737
2746
|
constructor(t) {
|
|
2738
2747
|
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2739
2748
|
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
@@ -2745,16 +2754,16 @@ class $e {
|
|
|
2745
2754
|
*/
|
|
2746
2755
|
async prepare(t) {
|
|
2747
2756
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2748
|
-
const e = this.loaders.map((i,
|
|
2749
|
-
this.log(`Loader ${
|
|
2750
|
-
}).catch((
|
|
2751
|
-
console.warn(`Loader ${
|
|
2757
|
+
const e = this.loaders.map((i, o) => i.prepare(t).then(() => {
|
|
2758
|
+
this.log(`Loader ${o} prepared with ${i.imagesLength()} images`);
|
|
2759
|
+
}).catch((a) => {
|
|
2760
|
+
console.warn(`Loader ${o} failed to prepare:`, a);
|
|
2752
2761
|
}));
|
|
2753
2762
|
await Promise.all(e);
|
|
2754
2763
|
for (const i of this.loaders)
|
|
2755
2764
|
if (i.isPrepared()) {
|
|
2756
|
-
const
|
|
2757
|
-
this._discoveredUrls.push(...
|
|
2765
|
+
const o = i.imageURLs();
|
|
2766
|
+
this._discoveredUrls.push(...o);
|
|
2758
2767
|
}
|
|
2759
2768
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2760
2769
|
}
|
|
@@ -2790,7 +2799,7 @@ class $e {
|
|
|
2790
2799
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2791
2800
|
}
|
|
2792
2801
|
}
|
|
2793
|
-
class
|
|
2802
|
+
class Ue {
|
|
2794
2803
|
/**
|
|
2795
2804
|
* Create a new ImageFilter
|
|
2796
2805
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2812,8 +2821,8 @@ class De {
|
|
|
2812
2821
|
* @returns True if the file extension is allowed
|
|
2813
2822
|
*/
|
|
2814
2823
|
isAllowed(t) {
|
|
2815
|
-
var
|
|
2816
|
-
const i = (
|
|
2824
|
+
var o;
|
|
2825
|
+
const i = (o = t.split("?")[0].split(".").pop()) == null ? void 0 : o.toLowerCase();
|
|
2817
2826
|
return i ? this.allowedExtensions.includes(i) : !1;
|
|
2818
2827
|
}
|
|
2819
2828
|
/**
|
|
@@ -2869,77 +2878,88 @@ const Pe = `
|
|
|
2869
2878
|
display: none !important;
|
|
2870
2879
|
}
|
|
2871
2880
|
`;
|
|
2872
|
-
function
|
|
2881
|
+
function _e() {
|
|
2873
2882
|
if (typeof document > "u") return;
|
|
2874
|
-
const
|
|
2875
|
-
if (document.getElementById(
|
|
2883
|
+
const n = "fbn-ic-functional-styles";
|
|
2884
|
+
if (document.getElementById(n)) return;
|
|
2876
2885
|
const t = document.createElement("style");
|
|
2877
|
-
t.id =
|
|
2886
|
+
t.id = n, t.textContent = Pe, document.head.appendChild(t);
|
|
2878
2887
|
}
|
|
2879
2888
|
class He {
|
|
2880
2889
|
constructor(t = {}) {
|
|
2881
|
-
var i,
|
|
2882
|
-
this.fullConfig = Vt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.animationEngine = new
|
|
2890
|
+
var i, o, a, r, s, h;
|
|
2891
|
+
this.fullConfig = Vt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.animationEngine = new te(this.fullConfig.animation), this.layoutEngine = new Se({
|
|
2883
2892
|
layout: this.fullConfig.layout,
|
|
2884
2893
|
image: this.fullConfig.image
|
|
2885
|
-
}), this.zoomEngine = new
|
|
2886
|
-
const e = this.fullConfig.animation.entry ||
|
|
2887
|
-
this.entryAnimationEngine = new
|
|
2894
|
+
}), this.zoomEngine = new Re(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = ft((i = this.fullConfig.styling) == null ? void 0 : i.default), this.hoverStyles = ft((o = this.fullConfig.styling) == null ? void 0 : o.hover), this.defaultClassName = (r = (a = this.fullConfig.styling) == null ? void 0 : a.default) == null ? void 0 : r.className, this.hoverClassName = (h = (s = this.fullConfig.styling) == null ? void 0 : s.hover) == null ? void 0 : h.className;
|
|
2895
|
+
const e = this.fullConfig.animation.entry || S.animation.entry;
|
|
2896
|
+
this.entryAnimationEngine = new de(
|
|
2888
2897
|
e,
|
|
2889
2898
|
this.fullConfig.layout.algorithm
|
|
2890
2899
|
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2891
2900
|
}
|
|
2892
2901
|
/**
|
|
2893
|
-
* Create image filter based on config
|
|
2902
|
+
* Create image filter based on shared loader config
|
|
2894
2903
|
*/
|
|
2895
2904
|
createImageFilter() {
|
|
2896
|
-
var
|
|
2897
|
-
const t = this.fullConfig.
|
|
2898
|
-
|
|
2899
|
-
return t === "googleDrive" ? e = (i = this.fullConfig.loader.googleDrive) == null ? void 0 : i.allowedExtensions : e = (n = this.fullConfig.loader.static) == null ? void 0 : n.allowedExtensions, new De(e);
|
|
2905
|
+
var e;
|
|
2906
|
+
const t = (e = this.fullConfig.config.loaders) == null ? void 0 : e.allowedExtensions;
|
|
2907
|
+
return new Ue(t);
|
|
2900
2908
|
}
|
|
2901
2909
|
/**
|
|
2902
2910
|
* Create appropriate image loader based on config
|
|
2911
|
+
* Processes loaders array, merges shared config, wraps in CompositeLoader if needed
|
|
2903
2912
|
*/
|
|
2904
2913
|
createLoader() {
|
|
2905
|
-
|
|
2914
|
+
const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
|
|
2915
|
+
if (!t || t.length === 0)
|
|
2916
|
+
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2917
|
+
const i = t.map((o) => this.createLoaderFromEntry(o, e));
|
|
2918
|
+
return i.length === 1 ? i[0] : new De({
|
|
2919
|
+
loaders: i,
|
|
2920
|
+
debugLogging: e.debugLogging
|
|
2921
|
+
});
|
|
2906
2922
|
}
|
|
2907
2923
|
/**
|
|
2908
|
-
* Create a loader from a
|
|
2924
|
+
* Create a single loader from a LoaderEntry, merging shared config
|
|
2909
2925
|
*/
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2926
|
+
createLoaderFromEntry(t, e) {
|
|
2927
|
+
if ("static" in t) {
|
|
2928
|
+
const i = t.static, o = {
|
|
2929
|
+
...i,
|
|
2930
|
+
validateUrls: i.validateUrls ?? e.validateUrls,
|
|
2931
|
+
validationTimeout: i.validationTimeout ?? e.validationTimeout,
|
|
2932
|
+
validationMethod: i.validationMethod ?? e.validationMethod,
|
|
2933
|
+
failOnAllMissing: i.failOnAllMissing ?? e.failOnAllMissing,
|
|
2934
|
+
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2935
|
+
debugLogging: i.debugLogging ?? e.debugLogging
|
|
2936
|
+
};
|
|
2937
|
+
return new $e(o);
|
|
2938
|
+
} else if ("googleDrive" in t) {
|
|
2939
|
+
const i = t.googleDrive, o = {
|
|
2940
|
+
...i,
|
|
2941
|
+
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2942
|
+
debugLogging: i.debugLogging ?? e.debugLogging
|
|
2943
|
+
};
|
|
2944
|
+
return new Oe(o);
|
|
2945
|
+
} else
|
|
2946
|
+
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2927
2947
|
}
|
|
2928
2948
|
/**
|
|
2929
2949
|
* Initialize the gallery
|
|
2930
2950
|
*/
|
|
2931
2951
|
async init() {
|
|
2932
2952
|
try {
|
|
2933
|
-
if (
|
|
2953
|
+
if (_e(), this.containerRef)
|
|
2934
2954
|
this.containerEl = this.containerRef;
|
|
2935
2955
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2936
2956
|
throw new Error(`Container #${this.containerId} not found`);
|
|
2937
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
2957
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new It(this.containerEl, {
|
|
2938
2958
|
onNext: () => this.navigateToNextImage(),
|
|
2939
2959
|
onPrev: () => this.navigateToPreviousImage(),
|
|
2940
2960
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
2941
2961
|
onDragEnd: (t) => {
|
|
2942
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
2962
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Fe);
|
|
2943
2963
|
}
|
|
2944
2964
|
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
2945
2965
|
} catch (t) {
|
|
@@ -2989,8 +3009,8 @@ class He {
|
|
|
2989
3009
|
}, 500));
|
|
2990
3010
|
}
|
|
2991
3011
|
getImageHeight() {
|
|
2992
|
-
const t = window.innerWidth, e = this.fullConfig.layout.responsive, i = this.fullConfig.image.sizing,
|
|
2993
|
-
return e ? t <= e.mobile.maxWidth ? Math.min(100,
|
|
3012
|
+
const t = window.innerWidth, e = this.fullConfig.layout.responsive, i = this.fullConfig.image.sizing, o = (i == null ? void 0 : i.maxSize) ?? 400;
|
|
3013
|
+
return e ? t <= e.mobile.maxWidth ? Math.min(100, o) : t <= e.tablet.maxWidth ? Math.min(180, o) : Math.min(225, o) : t <= 767 ? Math.min(100, o) : t <= 1199 ? Math.min(180, o) : Math.min(225, o);
|
|
2994
3014
|
}
|
|
2995
3015
|
/**
|
|
2996
3016
|
* Get container bounds for layout calculations
|
|
@@ -3013,13 +3033,13 @@ class He {
|
|
|
3013
3033
|
this.showError("No images found."), this.showLoading(!1);
|
|
3014
3034
|
return;
|
|
3015
3035
|
}
|
|
3016
|
-
const i = this.getContainerBounds(),
|
|
3017
|
-
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${
|
|
3036
|
+
const i = this.getContainerBounds(), o = this.getImageHeight(), a = window.innerWidth;
|
|
3037
|
+
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${o}px`);
|
|
3018
3038
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3019
3039
|
i,
|
|
3020
3040
|
t,
|
|
3021
|
-
|
|
3022
|
-
|
|
3041
|
+
o,
|
|
3042
|
+
a
|
|
3023
3043
|
);
|
|
3024
3044
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
3025
3045
|
} catch (t) {
|
|
@@ -3036,10 +3056,10 @@ class He {
|
|
|
3036
3056
|
if (!this.containerEl) return;
|
|
3037
3057
|
const i = this.getContainerBounds();
|
|
3038
3058
|
this.currentImageHeight = e;
|
|
3039
|
-
const
|
|
3040
|
-
this.imageLayouts =
|
|
3059
|
+
const o = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
|
|
3060
|
+
this.imageLayouts = a, this.displayQueue = [];
|
|
3041
3061
|
let r = 0;
|
|
3042
|
-
const
|
|
3062
|
+
const s = (l) => {
|
|
3043
3063
|
this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(() => {
|
|
3044
3064
|
if (l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1", l.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || l.dataset.startRotation !== l.dataset.rotation || l.dataset.startScale !== l.dataset.scale)) {
|
|
3045
3065
|
const d = {
|
|
@@ -3048,21 +3068,21 @@ class He {
|
|
|
3048
3068
|
}, m = {
|
|
3049
3069
|
x: parseFloat(l.dataset.endX),
|
|
3050
3070
|
y: parseFloat(l.dataset.endY)
|
|
3051
|
-
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation), f = parseFloat(l.dataset.scale),
|
|
3052
|
-
|
|
3071
|
+
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), g = parseFloat(l.dataset.rotation), f = parseFloat(l.dataset.scale), y = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : g, v = l.dataset.startScale ? parseFloat(l.dataset.startScale) : f, I = this.entryAnimationEngine.getTiming();
|
|
3072
|
+
ce({
|
|
3053
3073
|
element: l,
|
|
3054
3074
|
startPosition: d,
|
|
3055
3075
|
endPosition: m,
|
|
3056
3076
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3057
|
-
duration:
|
|
3077
|
+
duration: I.duration,
|
|
3058
3078
|
imageWidth: b,
|
|
3059
3079
|
imageHeight: p,
|
|
3060
3080
|
rotation: g,
|
|
3061
3081
|
scale: f,
|
|
3062
3082
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3063
|
-
startRotation:
|
|
3083
|
+
startRotation: y,
|
|
3064
3084
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3065
|
-
startScale:
|
|
3085
|
+
startScale: v
|
|
3066
3086
|
});
|
|
3067
3087
|
} else {
|
|
3068
3088
|
const d = l.dataset.finalTransform || "";
|
|
@@ -3087,18 +3107,18 @@ class He {
|
|
|
3087
3107
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3088
3108
|
for (; this.displayQueue.length > 0; ) {
|
|
3089
3109
|
const l = this.displayQueue.shift();
|
|
3090
|
-
l &&
|
|
3110
|
+
l && s(l);
|
|
3091
3111
|
}
|
|
3092
3112
|
return;
|
|
3093
3113
|
}
|
|
3094
3114
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3095
|
-
if (
|
|
3115
|
+
if (o !== this.loadGeneration) {
|
|
3096
3116
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3097
3117
|
return;
|
|
3098
3118
|
}
|
|
3099
3119
|
if (this.displayQueue.length > 0) {
|
|
3100
3120
|
const l = this.displayQueue.shift();
|
|
3101
|
-
l &&
|
|
3121
|
+
l && s(l);
|
|
3102
3122
|
}
|
|
3103
3123
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3104
3124
|
}, this.fullConfig.animation.queue.interval);
|
|
@@ -3112,7 +3132,7 @@ class He {
|
|
|
3112
3132
|
l.observe(this.containerEl);
|
|
3113
3133
|
} else
|
|
3114
3134
|
h();
|
|
3115
|
-
this.fullConfig.layout.debugCenters && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()),
|
|
3135
|
+
this.fullConfig.layout.debugCenters && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), a.forEach((l, u) => {
|
|
3116
3136
|
const c = document.createElement("div");
|
|
3117
3137
|
c.className = "fbn-ic-debug-center", c.style.position = "absolute", c.style.width = "12px", c.style.height = "12px", c.style.borderRadius = "50%", c.style.backgroundColor = "red", c.style.border = "2px solid yellow", c.style.zIndex = "9999", c.style.pointerEvents = "none";
|
|
3118
3138
|
const d = l.x, m = l.y;
|
|
@@ -3121,63 +3141,63 @@ class He {
|
|
|
3121
3141
|
var m, b;
|
|
3122
3142
|
const c = document.createElement("img");
|
|
3123
3143
|
c.referrerPolicy = "no-referrer", c.classList.add("fbn-ic-image"), c.dataset.imageId = String(u);
|
|
3124
|
-
const d =
|
|
3144
|
+
const d = a[u];
|
|
3125
3145
|
c.style.position = "absolute", c.style.width = "auto", c.style.height = `${e}px`, c.style.left = `${d.x}px`, c.style.top = `${d.y}px`, d.borderColor && !((b = (m = this.fullConfig.styling) == null ? void 0 : m.default) != null && b.border) && (c.style.border = `5px solid ${d.borderColor}`, c.style.boxSizing = "border-box"), d.zIndex && (c.style.zIndex = String(d.zIndex)), lt(c, this.defaultStyles), ht(c, this.defaultClassName), c.addEventListener("mouseenter", () => {
|
|
3126
3146
|
this.hoveredImage = { element: c, layout: d }, this.zoomEngine.isInvolved(c) || (lt(c, this.hoverStyles), ht(c, this.hoverClassName));
|
|
3127
3147
|
}), c.addEventListener("mouseleave", () => {
|
|
3128
|
-
this.hoveredImage = null, this.zoomEngine.isInvolved(c) || (lt(c, this.defaultStyles),
|
|
3148
|
+
this.hoveredImage = null, this.zoomEngine.isInvolved(c) || (lt(c, this.defaultStyles), _t(c, this.hoverClassName), ht(c, this.defaultClassName));
|
|
3129
3149
|
}), c.addEventListener("click", (p) => {
|
|
3130
3150
|
p.stopPropagation(), this.handleImageClick(c, d);
|
|
3131
3151
|
}), c.style.opacity = "0", c.style.transition = this.entryAnimationEngine.getTransitionCSS(), c.onload = () => {
|
|
3132
|
-
if (
|
|
3152
|
+
if (o !== this.loadGeneration)
|
|
3133
3153
|
return;
|
|
3134
3154
|
const p = c.naturalWidth / c.naturalHeight, g = e * p;
|
|
3135
3155
|
c.style.width = `${g}px`;
|
|
3136
|
-
const f = { x: d.x, y: d.y },
|
|
3156
|
+
const f = { x: d.x, y: d.y }, y = { width: g, height: e }, v = this.entryAnimationEngine.calculateStartPosition(
|
|
3137
3157
|
f,
|
|
3138
|
-
|
|
3158
|
+
y,
|
|
3139
3159
|
i,
|
|
3140
3160
|
u,
|
|
3141
3161
|
t.length
|
|
3142
|
-
),
|
|
3162
|
+
), I = this.entryAnimationEngine.calculateStartRotation(d.rotation), R = this.entryAnimationEngine.calculateStartScale(d.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
3143
3163
|
d.rotation,
|
|
3144
3164
|
d.scale,
|
|
3145
3165
|
g,
|
|
3146
3166
|
e
|
|
3147
3167
|
), L = this.entryAnimationEngine.buildStartTransform(
|
|
3148
|
-
|
|
3168
|
+
v,
|
|
3149
3169
|
f,
|
|
3150
3170
|
d.rotation,
|
|
3151
3171
|
d.scale,
|
|
3152
3172
|
g,
|
|
3153
3173
|
e,
|
|
3154
|
-
|
|
3174
|
+
I,
|
|
3155
3175
|
R
|
|
3156
3176
|
);
|
|
3157
3177
|
this.fullConfig.debug && u < 3 && console.log(`Image ${u}:`, {
|
|
3158
3178
|
finalPosition: f,
|
|
3159
|
-
imageSize:
|
|
3179
|
+
imageSize: y,
|
|
3160
3180
|
left: d.x,
|
|
3161
3181
|
top: d.y,
|
|
3162
|
-
finalTransform:
|
|
3182
|
+
finalTransform: w,
|
|
3163
3183
|
renderedWidth: g,
|
|
3164
3184
|
renderedHeight: e
|
|
3165
|
-
}), c.style.transform = L, c.dataset.finalTransform =
|
|
3185
|
+
}), c.style.transform = L, c.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || I !== d.rotation || R !== d.scale) && (c.dataset.startX = String(v.x), c.dataset.startY = String(v.y), c.dataset.endX = String(f.x), c.dataset.endY = String(f.y), c.dataset.imageWidth = String(g), c.dataset.imageHeight = String(e), c.dataset.rotation = String(d.rotation), c.dataset.scale = String(d.scale), c.dataset.startRotation = String(I), c.dataset.startScale = String(R)), this.displayQueue.push(c);
|
|
3166
3186
|
}, c.onerror = () => r++, c.src = l;
|
|
3167
3187
|
});
|
|
3168
3188
|
}
|
|
3169
3189
|
async handleImageClick(t, e) {
|
|
3170
|
-
var
|
|
3190
|
+
var a, r;
|
|
3171
3191
|
if (!this.containerEl) return;
|
|
3172
|
-
const i = this.zoomEngine.isFocused(t),
|
|
3192
|
+
const i = this.zoomEngine.isFocused(t), o = {
|
|
3173
3193
|
width: this.containerEl.offsetWidth,
|
|
3174
3194
|
height: this.containerEl.offsetHeight
|
|
3175
3195
|
};
|
|
3176
3196
|
if (i)
|
|
3177
|
-
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (
|
|
3197
|
+
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (a = this.swipeEngine) == null || a.disable();
|
|
3178
3198
|
else {
|
|
3179
|
-
const
|
|
3180
|
-
this.currentFocusIndex =
|
|
3199
|
+
const s = t.dataset.imageId;
|
|
3200
|
+
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, (r = this.swipeEngine) == null || r.enable(), await this.zoomEngine.focusImage(t, o, e);
|
|
3181
3201
|
}
|
|
3182
3202
|
}
|
|
3183
3203
|
/**
|
|
@@ -3203,20 +3223,20 @@ class He {
|
|
|
3203
3223
|
this.clearImageCloud(), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), (t = this.swipeEngine) == null || t.destroy();
|
|
3204
3224
|
}
|
|
3205
3225
|
}
|
|
3206
|
-
function
|
|
3226
|
+
function ke() {
|
|
3207
3227
|
if (typeof document > "u") return;
|
|
3208
|
-
const
|
|
3209
|
-
if (document.getElementById(
|
|
3228
|
+
const n = "fbn-ic-styles";
|
|
3229
|
+
if (document.getElementById(n)) return;
|
|
3210
3230
|
const t = document.createElement("style");
|
|
3211
|
-
t.id =
|
|
3231
|
+
t.id = n, t.textContent = Nt, document.head.appendChild(t);
|
|
3212
3232
|
}
|
|
3213
|
-
|
|
3214
|
-
function
|
|
3233
|
+
ke();
|
|
3234
|
+
function Ne() {
|
|
3215
3235
|
if (typeof document > "u") {
|
|
3216
3236
|
console.warn("ImageCloud: Document not available (not in browser environment)");
|
|
3217
3237
|
return;
|
|
3218
3238
|
}
|
|
3219
|
-
const
|
|
3239
|
+
const n = () => {
|
|
3220
3240
|
const t = document.querySelectorAll("[data-image-cloud], [data-image-gallery]");
|
|
3221
3241
|
t.length !== 0 && t.forEach((e) => {
|
|
3222
3242
|
const i = e;
|
|
@@ -3224,34 +3244,34 @@ function ke() {
|
|
|
3224
3244
|
console.error("ImageCloud: Container with data-image-cloud must have an id attribute");
|
|
3225
3245
|
return;
|
|
3226
3246
|
}
|
|
3227
|
-
const
|
|
3228
|
-
let
|
|
3229
|
-
if (
|
|
3247
|
+
const o = i.dataset.config || i.dataset.galleryConfig;
|
|
3248
|
+
let a;
|
|
3249
|
+
if (o)
|
|
3230
3250
|
try {
|
|
3231
|
-
const
|
|
3232
|
-
|
|
3251
|
+
const s = JSON.parse(o);
|
|
3252
|
+
a = {
|
|
3233
3253
|
container: i.id,
|
|
3234
|
-
...
|
|
3254
|
+
...s
|
|
3235
3255
|
};
|
|
3236
|
-
} catch (
|
|
3237
|
-
console.error(`ImageCloud: Failed to parse configuration JSON for #${i.id}:`,
|
|
3256
|
+
} catch (s) {
|
|
3257
|
+
console.error(`ImageCloud: Failed to parse configuration JSON for #${i.id}:`, s);
|
|
3238
3258
|
return;
|
|
3239
3259
|
}
|
|
3240
3260
|
else {
|
|
3241
3261
|
console.error(`ImageCloud: Missing configuration for #${i.id}. Add data-config='{...}' attribute.`);
|
|
3242
3262
|
return;
|
|
3243
3263
|
}
|
|
3244
|
-
new He(
|
|
3245
|
-
console.error("ImageCloud initialization failed:",
|
|
3264
|
+
new He(a).init().catch((s) => {
|
|
3265
|
+
console.error("ImageCloud initialization failed:", s);
|
|
3246
3266
|
});
|
|
3247
3267
|
});
|
|
3248
3268
|
};
|
|
3249
|
-
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded",
|
|
3269
|
+
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", n) : n();
|
|
3250
3270
|
}
|
|
3251
|
-
|
|
3271
|
+
Ne();
|
|
3252
3272
|
export {
|
|
3253
3273
|
He as ImageCloud,
|
|
3254
3274
|
He as ImageGallery,
|
|
3255
|
-
|
|
3275
|
+
Ne as autoInitialize
|
|
3256
3276
|
};
|
|
3257
3277
|
//# sourceMappingURL=image-cloud-auto-init.js.map
|