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