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