@frybynite/image-cloud 0.7.5 → 0.7.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/dist/image-cloud-auto-init.js +566 -560
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +943 -937
- 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 +2 -2
- package/dist/react.d.ts +2 -2
- package/dist/react.js +928 -922
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +2 -2
- package/dist/vue.js +942 -936
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +2 -2
- package/dist/web-component.js +657 -651
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const $t = ".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}", ft = 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)",
|
|
@@ -8,23 +8,23 @@ const Dt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
8
8
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
9
9
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
10
10
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
11
|
-
}),
|
|
11
|
+
}), St = Object.freeze({
|
|
12
12
|
gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
|
|
13
13
|
bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
|
|
14
14
|
wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
|
|
15
15
|
snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
|
|
16
|
-
}),
|
|
16
|
+
}), Et = 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 }),
|
|
20
20
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
21
|
-
}), pt = Object.freeze({
|
|
22
|
-
type: "linear"
|
|
23
21
|
}), bt = Object.freeze({
|
|
24
|
-
|
|
22
|
+
type: "linear"
|
|
25
23
|
}), yt = Object.freeze({
|
|
26
24
|
mode: "none"
|
|
27
|
-
}),
|
|
25
|
+
}), vt = Object.freeze({
|
|
26
|
+
mode: "none"
|
|
27
|
+
}), Ct = Object.freeze({
|
|
28
28
|
default: Object.freeze({
|
|
29
29
|
border: Object.freeze({
|
|
30
30
|
width: 0,
|
|
@@ -50,7 +50,7 @@ const Dt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
50
50
|
focused: Object.freeze({
|
|
51
51
|
shadow: "none"
|
|
52
52
|
})
|
|
53
|
-
}),
|
|
53
|
+
}), Dt = Object.freeze({
|
|
54
54
|
rows: 1,
|
|
55
55
|
amplitude: 100,
|
|
56
56
|
frequency: 2,
|
|
@@ -78,15 +78,15 @@ const Dt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
78
78
|
min: -15,
|
|
79
79
|
max: 15
|
|
80
80
|
})
|
|
81
|
-
}),
|
|
81
|
+
}), At = Object.freeze({
|
|
82
82
|
sizing: Ut,
|
|
83
83
|
rotation: _t
|
|
84
|
-
}),
|
|
84
|
+
}), Lt = Object.freeze({
|
|
85
85
|
validateUrls: !0,
|
|
86
86
|
validationTimeout: 5e3,
|
|
87
87
|
validationMethod: "head",
|
|
88
88
|
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"]
|
|
89
|
-
}),
|
|
89
|
+
}), Mt = Object.freeze({
|
|
90
90
|
enabled: !1,
|
|
91
91
|
centers: !1,
|
|
92
92
|
loaders: !1
|
|
@@ -95,11 +95,11 @@ const Dt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
95
95
|
loaders: [],
|
|
96
96
|
// Shared loader settings and debug config
|
|
97
97
|
config: Object.freeze({
|
|
98
|
-
loaders:
|
|
99
|
-
debug:
|
|
98
|
+
loaders: Lt,
|
|
99
|
+
debug: Mt
|
|
100
100
|
}),
|
|
101
101
|
// Image sizing and rotation configuration
|
|
102
|
-
image:
|
|
102
|
+
image: At,
|
|
103
103
|
// Pattern-based layout configuration
|
|
104
104
|
layout: Object.freeze({
|
|
105
105
|
algorithm: "radial",
|
|
@@ -161,9 +161,9 @@ const Dt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
161
161
|
}),
|
|
162
162
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
163
163
|
// smooth deceleration
|
|
164
|
-
path:
|
|
165
|
-
rotation:
|
|
166
|
-
scale:
|
|
164
|
+
path: bt,
|
|
165
|
+
rotation: yt,
|
|
166
|
+
scale: vt
|
|
167
167
|
})
|
|
168
168
|
}),
|
|
169
169
|
// Pattern-based interaction configuration
|
|
@@ -216,50 +216,50 @@ const Dt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
216
216
|
})
|
|
217
217
|
}),
|
|
218
218
|
// Image styling
|
|
219
|
-
styling:
|
|
219
|
+
styling: Ct
|
|
220
220
|
});
|
|
221
|
-
function Z(
|
|
222
|
-
if (!
|
|
223
|
-
if (!t) return { ...
|
|
224
|
-
const i = { ...
|
|
225
|
-
return t.border !== void 0 && (i.border = { ...
|
|
221
|
+
function Z(o, t) {
|
|
222
|
+
if (!o) return t || {};
|
|
223
|
+
if (!t) return { ...o };
|
|
224
|
+
const i = { ...o };
|
|
225
|
+
return t.border !== void 0 && (i.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
226
226
|
}
|
|
227
|
-
function Ht(
|
|
228
|
-
if (!t) return { ...
|
|
229
|
-
const i = Z(
|
|
230
|
-
Z(i,
|
|
227
|
+
function Ht(o, t) {
|
|
228
|
+
if (!t) return { ...o };
|
|
229
|
+
const i = Z(o.default, t.default), e = Z(
|
|
230
|
+
Z(i, o.hover),
|
|
231
231
|
t.hover
|
|
232
|
-
),
|
|
233
|
-
Z(i,
|
|
232
|
+
), n = Z(
|
|
233
|
+
Z(i, o.focused),
|
|
234
234
|
t.focused
|
|
235
235
|
);
|
|
236
236
|
return {
|
|
237
237
|
default: i,
|
|
238
238
|
hover: e,
|
|
239
|
-
focused:
|
|
239
|
+
focused: n
|
|
240
240
|
};
|
|
241
241
|
}
|
|
242
|
-
function
|
|
243
|
-
if (!t) return { ...
|
|
244
|
-
const i = { ...
|
|
242
|
+
function jt(o, t) {
|
|
243
|
+
if (!t) return { ...o };
|
|
244
|
+
const i = { ...o };
|
|
245
245
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
246
|
-
...
|
|
246
|
+
...o.sizing,
|
|
247
247
|
...t.sizing
|
|
248
248
|
}, t.sizing.variance)) {
|
|
249
|
-
const e = t.sizing.variance,
|
|
250
|
-
i.sizing.variance = { min:
|
|
249
|
+
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1, a = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : o.sizing?.variance?.max ?? 1;
|
|
250
|
+
i.sizing.variance = { min: n, max: a };
|
|
251
251
|
}
|
|
252
252
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
253
|
-
...
|
|
253
|
+
...o.rotation,
|
|
254
254
|
...t.rotation
|
|
255
255
|
}, t.rotation.range)) {
|
|
256
|
-
const e = t.rotation.range,
|
|
257
|
-
i.rotation.range = { min:
|
|
256
|
+
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15, a = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : o.rotation?.range?.max ?? 15;
|
|
257
|
+
i.rotation.range = { min: n, max: a };
|
|
258
258
|
}
|
|
259
259
|
return i;
|
|
260
260
|
}
|
|
261
|
-
function
|
|
262
|
-
const t =
|
|
261
|
+
function Nt(o) {
|
|
262
|
+
const t = o.layout?.rotation;
|
|
263
263
|
if (t && "enabled" in t)
|
|
264
264
|
return {
|
|
265
265
|
rotation: {
|
|
@@ -268,8 +268,8 @@ function kt(n) {
|
|
|
268
268
|
}
|
|
269
269
|
};
|
|
270
270
|
}
|
|
271
|
-
function
|
|
272
|
-
const t =
|
|
271
|
+
function kt(o) {
|
|
272
|
+
const t = o.layout?.sizing?.variance;
|
|
273
273
|
if (t)
|
|
274
274
|
return {
|
|
275
275
|
sizing: {
|
|
@@ -279,113 +279,113 @@ function jt(n) {
|
|
|
279
279
|
}
|
|
280
280
|
};
|
|
281
281
|
}
|
|
282
|
-
function Wt(
|
|
283
|
-
const t =
|
|
284
|
-
let e =
|
|
282
|
+
function Wt(o = {}) {
|
|
283
|
+
const t = Nt(o), i = kt(o);
|
|
284
|
+
let e = o.image;
|
|
285
285
|
(t || i) && (e = {
|
|
286
286
|
...i || {},
|
|
287
287
|
...t || {},
|
|
288
288
|
...e
|
|
289
|
-
}, e.rotation && t?.rotation &&
|
|
289
|
+
}, e.rotation && t?.rotation && o.image?.rotation && (e.rotation = {
|
|
290
290
|
...t.rotation,
|
|
291
|
-
...
|
|
291
|
+
...o.image.rotation
|
|
292
292
|
}));
|
|
293
|
-
const
|
|
294
|
-
|
|
293
|
+
const n = [...o.loaders ?? []];
|
|
294
|
+
o.images && o.images.length > 0 && n.unshift({
|
|
295
295
|
static: {
|
|
296
|
-
sources: [{ urls:
|
|
296
|
+
sources: [{ urls: o.images }]
|
|
297
297
|
}
|
|
298
298
|
});
|
|
299
299
|
const r = {
|
|
300
300
|
loaders: {
|
|
301
|
-
...
|
|
302
|
-
...
|
|
301
|
+
...Lt,
|
|
302
|
+
...o.config?.loaders ?? {}
|
|
303
303
|
}
|
|
304
304
|
}, s = {
|
|
305
|
-
loaders:
|
|
305
|
+
loaders: n,
|
|
306
306
|
config: r,
|
|
307
|
-
image:
|
|
307
|
+
image: jt(At, e),
|
|
308
308
|
layout: { ...y.layout },
|
|
309
309
|
animation: { ...y.animation },
|
|
310
310
|
interaction: { ...y.interaction },
|
|
311
311
|
rendering: { ...y.rendering },
|
|
312
|
-
styling: Ht(
|
|
312
|
+
styling: Ht(Ct, o.styling)
|
|
313
313
|
};
|
|
314
|
-
return
|
|
314
|
+
return o.layout && (s.layout = {
|
|
315
315
|
...y.layout,
|
|
316
|
-
...
|
|
317
|
-
},
|
|
316
|
+
...o.layout
|
|
317
|
+
}, o.layout.responsive && (s.layout.responsive = {
|
|
318
318
|
...y.layout.responsive,
|
|
319
|
-
mobile:
|
|
320
|
-
tablet:
|
|
321
|
-
}),
|
|
319
|
+
mobile: o.layout.responsive.mobile ? { ...y.layout.responsive.mobile, ...o.layout.responsive.mobile } : y.layout.responsive.mobile,
|
|
320
|
+
tablet: o.layout.responsive.tablet ? { ...y.layout.responsive.tablet, ...o.layout.responsive.tablet } : y.layout.responsive.tablet
|
|
321
|
+
}), o.layout.spacing && (s.layout.spacing = {
|
|
322
322
|
...y.layout.spacing,
|
|
323
|
-
...
|
|
324
|
-
})),
|
|
323
|
+
...o.layout.spacing
|
|
324
|
+
})), o.animation && (s.animation = {
|
|
325
325
|
...y.animation,
|
|
326
|
-
...
|
|
327
|
-
},
|
|
326
|
+
...o.animation
|
|
327
|
+
}, o.animation.easing && (s.animation.easing = {
|
|
328
328
|
...y.animation.easing,
|
|
329
|
-
...
|
|
330
|
-
}),
|
|
329
|
+
...o.animation.easing
|
|
330
|
+
}), o.animation.queue && (s.animation.queue = {
|
|
331
331
|
...y.animation.queue,
|
|
332
|
-
...
|
|
333
|
-
}),
|
|
332
|
+
...o.animation.queue
|
|
333
|
+
}), o.animation.performance && (s.animation.performance = {
|
|
334
334
|
...y.animation.performance,
|
|
335
|
-
...
|
|
336
|
-
}),
|
|
335
|
+
...o.animation.performance
|
|
336
|
+
}), o.animation.entry && (s.animation.entry = {
|
|
337
337
|
...y.animation.entry,
|
|
338
|
-
...
|
|
339
|
-
start:
|
|
338
|
+
...o.animation.entry,
|
|
339
|
+
start: o.animation.entry.start ? {
|
|
340
340
|
...y.animation.entry.start,
|
|
341
|
-
...
|
|
342
|
-
circular:
|
|
341
|
+
...o.animation.entry.start,
|
|
342
|
+
circular: o.animation.entry.start.circular ? { ...y.animation.entry.start.circular, ...o.animation.entry.start.circular } : y.animation.entry.start.circular
|
|
343
343
|
} : y.animation.entry.start,
|
|
344
|
-
timing:
|
|
345
|
-
path:
|
|
346
|
-
rotation:
|
|
347
|
-
scale:
|
|
348
|
-
})),
|
|
344
|
+
timing: o.animation.entry.timing ? { ...y.animation.entry.timing, ...o.animation.entry.timing } : y.animation.entry.timing,
|
|
345
|
+
path: o.animation.entry.path ? { ...bt, ...o.animation.entry.path } : y.animation.entry.path,
|
|
346
|
+
rotation: o.animation.entry.rotation ? { ...yt, ...o.animation.entry.rotation } : y.animation.entry.rotation,
|
|
347
|
+
scale: o.animation.entry.scale ? { ...vt, ...o.animation.entry.scale } : y.animation.entry.scale
|
|
348
|
+
})), o.interaction && (s.interaction = {
|
|
349
349
|
...y.interaction,
|
|
350
|
-
...
|
|
351
|
-
},
|
|
350
|
+
...o.interaction
|
|
351
|
+
}, o.interaction.focus && (s.interaction.focus = {
|
|
352
352
|
...y.interaction.focus,
|
|
353
|
-
...
|
|
354
|
-
}),
|
|
353
|
+
...o.interaction.focus
|
|
354
|
+
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
355
355
|
...y.interaction.navigation,
|
|
356
|
-
...
|
|
357
|
-
}),
|
|
356
|
+
...o.interaction.navigation
|
|
357
|
+
}), o.interaction.gestures && (s.interaction.gestures = {
|
|
358
358
|
...y.interaction.gestures,
|
|
359
|
-
...
|
|
360
|
-
})),
|
|
359
|
+
...o.interaction.gestures
|
|
360
|
+
})), o.rendering && (s.rendering = {
|
|
361
361
|
...y.rendering,
|
|
362
|
-
...
|
|
363
|
-
},
|
|
362
|
+
...o.rendering
|
|
363
|
+
}, o.rendering.responsive && (s.rendering.responsive = {
|
|
364
364
|
...y.rendering.responsive,
|
|
365
|
-
...
|
|
366
|
-
breakpoints:
|
|
367
|
-
mobileDetection:
|
|
368
|
-
}),
|
|
365
|
+
...o.rendering.responsive,
|
|
366
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...y.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : y.rendering.responsive.breakpoints,
|
|
367
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : y.rendering.responsive.mobileDetection
|
|
368
|
+
}), o.rendering.ui && (s.rendering.ui = {
|
|
369
369
|
...y.rendering.ui,
|
|
370
|
-
...
|
|
371
|
-
}),
|
|
370
|
+
...o.rendering.ui
|
|
371
|
+
}), o.rendering.performance && (s.rendering.performance = {
|
|
372
372
|
...y.rendering.performance,
|
|
373
|
-
...
|
|
373
|
+
...o.rendering.performance
|
|
374
374
|
})), s.config.debug = {
|
|
375
|
-
...
|
|
376
|
-
...
|
|
375
|
+
...Mt,
|
|
376
|
+
...o.config?.debug ?? {}
|
|
377
377
|
}, s;
|
|
378
378
|
}
|
|
379
|
-
function Gt(
|
|
380
|
-
return { ...
|
|
379
|
+
function Gt(o, t) {
|
|
380
|
+
return { ...o ? xt[o] : xt.playful, ...t };
|
|
381
381
|
}
|
|
382
|
-
function qt(
|
|
383
|
-
return { ...
|
|
382
|
+
function qt(o, t) {
|
|
383
|
+
return { ...o ? St[o] : St.gentle, ...t };
|
|
384
384
|
}
|
|
385
|
-
function
|
|
386
|
-
return { ...
|
|
385
|
+
function Bt(o, t) {
|
|
386
|
+
return { ...o ? Et[o] : Et.gentle, ...t };
|
|
387
387
|
}
|
|
388
|
-
class
|
|
388
|
+
class Yt {
|
|
389
389
|
constructor(t) {
|
|
390
390
|
this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
|
|
391
391
|
}
|
|
@@ -396,8 +396,8 @@ class Xt {
|
|
|
396
396
|
buildTransformString(t) {
|
|
397
397
|
const i = ["translate(-50%, -50%)"];
|
|
398
398
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
399
|
-
const e = t.x ?? 0,
|
|
400
|
-
i.push(`translate(${e}px, ${
|
|
399
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
400
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
401
401
|
}
|
|
402
402
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
403
403
|
}
|
|
@@ -410,9 +410,9 @@ class Xt {
|
|
|
410
410
|
* @param easing - CSS easing function (optional)
|
|
411
411
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
412
412
|
*/
|
|
413
|
-
animateTransformCancellable(t, i, e,
|
|
413
|
+
animateTransformCancellable(t, i, e, n = null, a = null) {
|
|
414
414
|
this.cancelAllAnimations(t);
|
|
415
|
-
const r =
|
|
415
|
+
const r = n ?? this.config.duration, s = a ?? this.config.easing.default, h = this.buildTransformString(i), c = this.buildTransformString(e);
|
|
416
416
|
t.style.transition = "none";
|
|
417
417
|
const d = t.animate(
|
|
418
418
|
[
|
|
@@ -449,13 +449,13 @@ class Xt {
|
|
|
449
449
|
cancelAnimation(t, i = !0) {
|
|
450
450
|
const e = this.getCurrentTransform(t.element);
|
|
451
451
|
if (t.animation.cancel(), i) {
|
|
452
|
-
const
|
|
452
|
+
const n = this.buildTransformString({
|
|
453
453
|
x: e.x,
|
|
454
454
|
y: e.y,
|
|
455
455
|
rotation: e.rotation,
|
|
456
456
|
scale: e.scale
|
|
457
457
|
});
|
|
458
|
-
t.element.style.transform =
|
|
458
|
+
t.element.style.transform = n;
|
|
459
459
|
}
|
|
460
460
|
return this.activeAnimations.delete(t.element), e;
|
|
461
461
|
}
|
|
@@ -468,8 +468,8 @@ class Xt {
|
|
|
468
468
|
const i = this.activeAnimations.get(t);
|
|
469
469
|
i && this.cancelAnimation(i, !1);
|
|
470
470
|
const e = t.getAnimations();
|
|
471
|
-
for (const
|
|
472
|
-
|
|
471
|
+
for (const n of e)
|
|
472
|
+
n.cancel();
|
|
473
473
|
}
|
|
474
474
|
/**
|
|
475
475
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -481,7 +481,7 @@ class Xt {
|
|
|
481
481
|
const e = getComputedStyle(t).transform;
|
|
482
482
|
if (e === "none" || !e)
|
|
483
483
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
484
|
-
const
|
|
484
|
+
const n = new DOMMatrix(e), a = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), s = n.e, h = n.f;
|
|
485
485
|
return { x: s, y: h, rotation: r, scale: a };
|
|
486
486
|
}
|
|
487
487
|
/**
|
|
@@ -508,9 +508,9 @@ class Xt {
|
|
|
508
508
|
* @param easing - CSS easing function (optional)
|
|
509
509
|
* @returns Promise that resolves when animation completes
|
|
510
510
|
*/
|
|
511
|
-
animateTransform(t, i, e = null,
|
|
511
|
+
animateTransform(t, i, e = null, n = null) {
|
|
512
512
|
return new Promise((a) => {
|
|
513
|
-
const r = e ?? this.config.duration, s =
|
|
513
|
+
const r = e ?? this.config.duration, s = n ?? this.config.easing.default;
|
|
514
514
|
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
515
515
|
a();
|
|
516
516
|
}, r);
|
|
@@ -541,99 +541,99 @@ class Xt {
|
|
|
541
541
|
return new Promise((i) => setTimeout(i, t));
|
|
542
542
|
}
|
|
543
543
|
}
|
|
544
|
-
function V(
|
|
545
|
-
return
|
|
544
|
+
function V(o, t, i) {
|
|
545
|
+
return o + (t - o) * i;
|
|
546
546
|
}
|
|
547
|
-
function
|
|
548
|
-
const { overshoot:
|
|
549
|
-
let d = 0, l = 0, u = 1, g =
|
|
547
|
+
function Xt(o, t, i, e) {
|
|
548
|
+
const { overshoot: n, bounces: a, decayRatio: r } = e, s = i.x - t.x, h = i.y - t.y, c = Jt(a, r);
|
|
549
|
+
let d = 0, l = 0, u = 1, g = n, p = !1;
|
|
550
550
|
for (let f = 0; f < c.length; f++)
|
|
551
|
-
if (
|
|
551
|
+
if (o <= c[f].time) {
|
|
552
552
|
l = f === 0 ? 0 : c[f - 1].time, u = c[f].time, g = c[f].overshoot, p = c[f].isOvershoot;
|
|
553
553
|
break;
|
|
554
554
|
}
|
|
555
|
-
const b = (
|
|
555
|
+
const b = (o - l) / (u - l);
|
|
556
556
|
if (p)
|
|
557
|
-
d = 1 + g *
|
|
557
|
+
d = 1 + g * ot(b);
|
|
558
558
|
else if (l === 0)
|
|
559
|
-
d =
|
|
559
|
+
d = ot(b);
|
|
560
560
|
else {
|
|
561
561
|
const m = 1 + (c.find(
|
|
562
|
-
(
|
|
562
|
+
(S, v) => S.time > l && v > 0 && c[v - 1].isOvershoot
|
|
563
563
|
)?.overshoot || g);
|
|
564
|
-
d = V(m, 1,
|
|
564
|
+
d = V(m, 1, ot(b));
|
|
565
565
|
}
|
|
566
566
|
return {
|
|
567
567
|
x: t.x + s * d,
|
|
568
568
|
y: t.y + h * d
|
|
569
569
|
};
|
|
570
570
|
}
|
|
571
|
-
function Jt(
|
|
571
|
+
function Jt(o, t) {
|
|
572
572
|
const i = [];
|
|
573
573
|
let e = 0.6;
|
|
574
574
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
575
|
-
let
|
|
576
|
-
const r = 0.4 / (
|
|
577
|
-
for (let s = 0; s <
|
|
578
|
-
e += r, i.push({ time: e, overshoot:
|
|
575
|
+
let n = 0.15;
|
|
576
|
+
const r = 0.4 / (o * 2);
|
|
577
|
+
for (let s = 0; s < o; s++)
|
|
578
|
+
e += r, i.push({ time: e, overshoot: n, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
579
579
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
580
580
|
}
|
|
581
|
-
function Vt(
|
|
582
|
-
const { stiffness:
|
|
581
|
+
function Vt(o, t, i, e) {
|
|
582
|
+
const { stiffness: n, damping: a, mass: r, oscillations: s } = e, h = i.x - t.x, c = i.y - t.y, d = Math.sqrt(n / r), l = a / (2 * Math.sqrt(n * r));
|
|
583
583
|
let u;
|
|
584
584
|
if (l < 1) {
|
|
585
|
-
const g = d * Math.sqrt(1 - l * l), p = Math.exp(-l * d *
|
|
585
|
+
const g = d * Math.sqrt(1 - l * l), p = Math.exp(-l * d * o * 3), b = Math.cos(g * o * s * Math.PI);
|
|
586
586
|
u = 1 - p * b;
|
|
587
587
|
} else
|
|
588
|
-
u = 1 - Math.exp(-d *
|
|
588
|
+
u = 1 - Math.exp(-d * o * 3);
|
|
589
589
|
return u = Math.max(0, Math.min(u, 1.3)), {
|
|
590
590
|
x: t.x + h * u,
|
|
591
591
|
y: t.y + c * u
|
|
592
592
|
};
|
|
593
593
|
}
|
|
594
|
-
function Kt(
|
|
595
|
-
const { amplitude:
|
|
594
|
+
function Kt(o, t, i, e) {
|
|
595
|
+
const { amplitude: n, frequency: a, decay: r, decayRate: s, phase: h } = e, c = i.x - t.x, d = i.y - t.y, l = Math.sqrt(c * c + d * d), u = l > 0 ? -d / l : 0, g = l > 0 ? c / l : 1, p = a * Math.PI * 2 * o + h, b = r ? Math.pow(1 - o, s) : 1, f = n * Math.sin(p) * b, m = Zt(o);
|
|
596
596
|
return {
|
|
597
597
|
x: V(t.x, i.x, m) + f * u,
|
|
598
598
|
y: V(t.y, i.y, m) + f * g
|
|
599
599
|
};
|
|
600
600
|
}
|
|
601
|
-
function
|
|
602
|
-
return 1 - (1 -
|
|
601
|
+
function ot(o) {
|
|
602
|
+
return 1 - (1 - o) * (1 - o);
|
|
603
603
|
}
|
|
604
|
-
function Zt(
|
|
605
|
-
return 1 - Math.pow(1 -
|
|
604
|
+
function Zt(o) {
|
|
605
|
+
return 1 - Math.pow(1 - o, 3);
|
|
606
606
|
}
|
|
607
|
-
function Qt(
|
|
608
|
-
const { amplitude: e, frequency:
|
|
607
|
+
function Qt(o, t, i) {
|
|
608
|
+
const { amplitude: e, frequency: n, decay: a } = i, r = Math.sin(o * n * Math.PI * 2), s = a ? Math.pow(1 - o, 2) : 1, h = e * r * s;
|
|
609
609
|
return t + h;
|
|
610
610
|
}
|
|
611
|
-
function te(
|
|
612
|
-
const { overshoot: e, bounces:
|
|
611
|
+
function te(o, t, i) {
|
|
612
|
+
const { overshoot: e, bounces: n } = i, a = [];
|
|
613
613
|
a.push({ time: 0.5, scale: e });
|
|
614
614
|
let r = e;
|
|
615
|
-
const s = 0.5, c = 0.5 / (
|
|
615
|
+
const s = 0.5, c = 0.5 / (n * 2);
|
|
616
616
|
let d = 0.5;
|
|
617
|
-
for (let u = 0; u <
|
|
617
|
+
for (let u = 0; u < n; u++) {
|
|
618
618
|
const g = 1 - (r - 1) * s;
|
|
619
|
-
d += c, a.push({ time: d, scale: g }), r = 1 + (r - 1) * s * s, d += c, u <
|
|
619
|
+
d += c, a.push({ time: d, scale: g }), r = 1 + (r - 1) * s * s, d += c, u < n - 1 && a.push({ time: d, scale: r });
|
|
620
620
|
}
|
|
621
621
|
a.push({ time: 1, scale: 1 });
|
|
622
622
|
let l = 1;
|
|
623
623
|
for (let u = 0; u < a.length; u++)
|
|
624
|
-
if (
|
|
625
|
-
const g = u === 0 ? 0 : a[u - 1].time, p = u === 0 ? 1 : a[u - 1].scale, b = (
|
|
624
|
+
if (o <= a[u].time) {
|
|
625
|
+
const g = u === 0 ? 0 : a[u - 1].time, p = u === 0 ? 1 : a[u - 1].scale, b = (o - g) / (a[u].time - g), f = ot(b);
|
|
626
626
|
l = p + (a[u].scale - p) * f;
|
|
627
627
|
break;
|
|
628
628
|
}
|
|
629
629
|
return l * t;
|
|
630
630
|
}
|
|
631
|
-
function ee(
|
|
631
|
+
function ee(o) {
|
|
632
632
|
const {
|
|
633
633
|
element: t,
|
|
634
634
|
startPosition: i,
|
|
635
635
|
endPosition: e,
|
|
636
|
-
pathConfig:
|
|
636
|
+
pathConfig: n,
|
|
637
637
|
duration: a,
|
|
638
638
|
imageWidth: r,
|
|
639
639
|
imageHeight: s,
|
|
@@ -644,58 +644,58 @@ function ee(n) {
|
|
|
644
644
|
startRotation: u,
|
|
645
645
|
scaleConfig: g,
|
|
646
646
|
startScale: p
|
|
647
|
-
} =
|
|
648
|
-
if ((b === "linear" || b === "arc") && !v && !(w ||
|
|
647
|
+
} = o, b = n.type, f = u !== void 0 && u !== h, m = l?.mode === "wobble", S = l?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, v = f || m, w = p !== void 0 && p !== c, E = g?.mode === "pop", x = g?.pop || { overshoot: 1.2, bounces: 1 };
|
|
648
|
+
if ((b === "linear" || b === "arc") && !v && !(w || E)) {
|
|
649
649
|
d && d();
|
|
650
650
|
return;
|
|
651
651
|
}
|
|
652
|
-
const
|
|
653
|
-
function _(
|
|
654
|
-
const
|
|
655
|
-
let
|
|
652
|
+
const M = performance.now(), z = -r / 2, U = -s / 2;
|
|
653
|
+
function _(B) {
|
|
654
|
+
const j = B - M, T = Math.min(j / a, 1);
|
|
655
|
+
let O;
|
|
656
656
|
switch (b) {
|
|
657
657
|
case "bounce": {
|
|
658
|
-
const
|
|
659
|
-
|
|
660
|
-
|
|
658
|
+
const $ = Gt(
|
|
659
|
+
n.bouncePreset,
|
|
660
|
+
n.bounce
|
|
661
661
|
);
|
|
662
|
-
|
|
662
|
+
O = Xt(T, i, e, $);
|
|
663
663
|
break;
|
|
664
664
|
}
|
|
665
665
|
case "elastic": {
|
|
666
|
-
const
|
|
667
|
-
|
|
668
|
-
|
|
666
|
+
const $ = qt(
|
|
667
|
+
n.elasticPreset,
|
|
668
|
+
n.elastic
|
|
669
669
|
);
|
|
670
|
-
|
|
670
|
+
O = Vt(T, i, e, $);
|
|
671
671
|
break;
|
|
672
672
|
}
|
|
673
673
|
case "wave": {
|
|
674
|
-
const
|
|
675
|
-
|
|
676
|
-
|
|
674
|
+
const $ = Bt(
|
|
675
|
+
n.wavePreset,
|
|
676
|
+
n.wave
|
|
677
677
|
);
|
|
678
|
-
|
|
678
|
+
O = Kt(T, i, e, $);
|
|
679
679
|
break;
|
|
680
680
|
}
|
|
681
681
|
default:
|
|
682
|
-
|
|
683
|
-
x: V(i.x, e.x,
|
|
684
|
-
y: V(i.y, e.y,
|
|
682
|
+
O = {
|
|
683
|
+
x: V(i.x, e.x, T),
|
|
684
|
+
y: V(i.y, e.y, T)
|
|
685
685
|
};
|
|
686
686
|
}
|
|
687
|
-
const
|
|
688
|
-
let
|
|
689
|
-
m ?
|
|
690
|
-
let
|
|
691
|
-
|
|
687
|
+
const k = O.x - e.x, H = O.y - e.y;
|
|
688
|
+
let A;
|
|
689
|
+
m ? A = Qt(T, h, S) : f ? A = V(u, h, T) : A = h;
|
|
690
|
+
let C;
|
|
691
|
+
E ? C = te(T, c, x) : w ? C = V(p, c, T) : C = c, t.style.transform = `translate(${z}px, ${U}px) translate(${k}px, ${H}px) rotate(${A}deg) scale(${C})`, T < 1 ? requestAnimationFrame(_) : (t.style.transform = `translate(${z}px, ${U}px) rotate(${h}deg) scale(${c})`, d && d());
|
|
692
692
|
}
|
|
693
693
|
requestAnimationFrame(_);
|
|
694
694
|
}
|
|
695
|
-
function ie(
|
|
696
|
-
return
|
|
695
|
+
function ie(o) {
|
|
696
|
+
return o === "bounce" || o === "elastic" || o === "wave";
|
|
697
697
|
}
|
|
698
|
-
const
|
|
698
|
+
const oe = {
|
|
699
699
|
radial: "center",
|
|
700
700
|
spiral: "center",
|
|
701
701
|
grid: "top",
|
|
@@ -703,20 +703,20 @@ const ne = {
|
|
|
703
703
|
random: "nearest-edge",
|
|
704
704
|
wave: "left"
|
|
705
705
|
};
|
|
706
|
-
class
|
|
706
|
+
class ne {
|
|
707
707
|
constructor(t, i) {
|
|
708
|
-
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
708
|
+
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || bt, this.rotationConfig = t.rotation || yt, this.scaleConfig = t.scale || vt;
|
|
709
709
|
}
|
|
710
710
|
/**
|
|
711
711
|
* Get the effective start position, considering layout-aware defaults
|
|
712
712
|
*/
|
|
713
713
|
resolveStartPosition() {
|
|
714
|
-
return this.config.start.position ? this.config.start.position :
|
|
714
|
+
return this.config.start.position ? this.config.start.position : oe[this.layoutAlgorithm] || "nearest-edge";
|
|
715
715
|
}
|
|
716
716
|
/**
|
|
717
717
|
* Calculate the starting position for an image's entry animation
|
|
718
718
|
*/
|
|
719
|
-
calculateStartPosition(t, i, e,
|
|
719
|
+
calculateStartPosition(t, i, e, n, a) {
|
|
720
720
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
721
721
|
switch (r) {
|
|
722
722
|
case "nearest-edge":
|
|
@@ -738,7 +738,7 @@ class oe {
|
|
|
738
738
|
t,
|
|
739
739
|
i,
|
|
740
740
|
e,
|
|
741
|
-
|
|
741
|
+
n,
|
|
742
742
|
a
|
|
743
743
|
);
|
|
744
744
|
default:
|
|
@@ -748,28 +748,28 @@ class oe {
|
|
|
748
748
|
/**
|
|
749
749
|
* Calculate start position from the nearest edge (current default behavior)
|
|
750
750
|
*/
|
|
751
|
-
calculateNearestEdge(t, i, e,
|
|
751
|
+
calculateNearestEdge(t, i, e, n) {
|
|
752
752
|
const a = t.x, r = t.y, s = a, h = e.width - a, c = r, d = e.height - r, l = Math.min(s, h, c, d);
|
|
753
753
|
let u = t.x, g = t.y;
|
|
754
|
-
return l === s ? u = -(i.width +
|
|
754
|
+
return l === s ? u = -(i.width + n) : l === h ? u = e.width + n : l === c ? g = -(i.height + n) : g = e.height + n, { x: u, y: g };
|
|
755
755
|
}
|
|
756
756
|
/**
|
|
757
757
|
* Calculate start position from a specific edge
|
|
758
758
|
*/
|
|
759
|
-
calculateEdgePosition(t, i, e,
|
|
759
|
+
calculateEdgePosition(t, i, e, n, a) {
|
|
760
760
|
let r = i.x, s = i.y;
|
|
761
761
|
switch (t) {
|
|
762
762
|
case "top":
|
|
763
763
|
s = -(e.height + a);
|
|
764
764
|
break;
|
|
765
765
|
case "bottom":
|
|
766
|
-
s =
|
|
766
|
+
s = n.height + a;
|
|
767
767
|
break;
|
|
768
768
|
case "left":
|
|
769
769
|
r = -(e.width + a);
|
|
770
770
|
break;
|
|
771
771
|
case "right":
|
|
772
|
-
r =
|
|
772
|
+
r = n.width + a;
|
|
773
773
|
break;
|
|
774
774
|
}
|
|
775
775
|
return { x: r, y: s };
|
|
@@ -778,9 +778,9 @@ class oe {
|
|
|
778
778
|
* Calculate start position from center with scale animation
|
|
779
779
|
*/
|
|
780
780
|
calculateCenterPosition(t, i, e) {
|
|
781
|
-
const
|
|
781
|
+
const n = t.width / 2, a = t.height / 2;
|
|
782
782
|
return {
|
|
783
|
-
x:
|
|
783
|
+
x: n,
|
|
784
784
|
y: a,
|
|
785
785
|
useScale: !0
|
|
786
786
|
// Signal to use scale animation from 0
|
|
@@ -789,14 +789,14 @@ class oe {
|
|
|
789
789
|
/**
|
|
790
790
|
* Calculate start position from a random edge
|
|
791
791
|
*/
|
|
792
|
-
calculateRandomEdge(t, i, e,
|
|
792
|
+
calculateRandomEdge(t, i, e, n) {
|
|
793
793
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
794
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
794
|
+
return this.calculateEdgePosition(r, t, i, e, n);
|
|
795
795
|
}
|
|
796
796
|
/**
|
|
797
797
|
* Calculate start position on a circle around the container
|
|
798
798
|
*/
|
|
799
|
-
calculateCircularPosition(t, i, e,
|
|
799
|
+
calculateCircularPosition(t, i, e, n, a) {
|
|
800
800
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
801
801
|
let h;
|
|
802
802
|
const c = r.radius || "120%";
|
|
@@ -808,7 +808,7 @@ class oe {
|
|
|
808
808
|
} else
|
|
809
809
|
h = typeof c == "number" ? c : 500;
|
|
810
810
|
let d;
|
|
811
|
-
s === "even" ? d =
|
|
811
|
+
s === "even" ? d = n / a * 2 * Math.PI : d = Math.random() * 2 * Math.PI;
|
|
812
812
|
const l = e.width / 2, u = e.height / 2, g = l + Math.cos(d) * h, p = u + Math.sin(d) * h;
|
|
813
813
|
return { x: g, y: p };
|
|
814
814
|
}
|
|
@@ -829,17 +829,17 @@ class oe {
|
|
|
829
829
|
* Build a CSS transform string for the start position
|
|
830
830
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
831
831
|
*/
|
|
832
|
-
buildStartTransform(t, i, e,
|
|
833
|
-
const c = t.x - i.x, d = t.y - i.y, l = s !== void 0 ? s : e, u = h !== void 0 ? h :
|
|
832
|
+
buildStartTransform(t, i, e, n, a, r, s, h) {
|
|
833
|
+
const c = t.x - i.x, d = t.y - i.y, l = s !== void 0 ? s : e, u = h !== void 0 ? h : n, g = a !== void 0 ? -a / 2 : 0, p = r !== void 0 ? -r / 2 : 0, b = a !== void 0 ? `translate(${g}px, ${p}px)` : "translate(-50%, -50%)";
|
|
834
834
|
return t.useScale ? `${b} translate(${c}px, ${d}px) rotate(${l}deg) scale(0)` : `${b} translate(${c}px, ${d}px) rotate(${l}deg) scale(${u})`;
|
|
835
835
|
}
|
|
836
836
|
/**
|
|
837
837
|
* Build the final CSS transform string
|
|
838
838
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
839
839
|
*/
|
|
840
|
-
buildFinalTransform(t, i, e,
|
|
841
|
-
if (e !== void 0 &&
|
|
842
|
-
const a = -e / 2, r = -
|
|
840
|
+
buildFinalTransform(t, i, e, n) {
|
|
841
|
+
if (e !== void 0 && n !== void 0) {
|
|
842
|
+
const a = -e / 2, r = -n / 2;
|
|
843
843
|
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
844
844
|
}
|
|
845
845
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
@@ -905,12 +905,12 @@ class oe {
|
|
|
905
905
|
return t + (Math.random() - 0.5) * 60;
|
|
906
906
|
if (typeof e == "number")
|
|
907
907
|
return e;
|
|
908
|
-
const
|
|
909
|
-
return e.min + Math.random() *
|
|
908
|
+
const n = e.max - e.min;
|
|
909
|
+
return e.min + Math.random() * n;
|
|
910
910
|
}
|
|
911
911
|
case "spin": {
|
|
912
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
913
|
-
return t + e * 360 *
|
|
912
|
+
const e = this.rotationConfig.spinCount ?? 1, n = this.resolveSpinDirection(t);
|
|
913
|
+
return t + e * 360 * n;
|
|
914
914
|
}
|
|
915
915
|
case "random":
|
|
916
916
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -958,7 +958,7 @@ class oe {
|
|
|
958
958
|
amplitude: 15,
|
|
959
959
|
frequency: 3,
|
|
960
960
|
decay: !0
|
|
961
|
-
}, { amplitude:
|
|
961
|
+
}, { amplitude: n, frequency: a, decay: r } = e, s = Math.sin(t * a * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, c = n * s * h;
|
|
962
962
|
return i + c;
|
|
963
963
|
}
|
|
964
964
|
/**
|
|
@@ -1015,7 +1015,7 @@ class oe {
|
|
|
1015
1015
|
const e = this.scaleConfig.pop || {
|
|
1016
1016
|
overshoot: 1.2,
|
|
1017
1017
|
bounces: 1
|
|
1018
|
-
}, { overshoot:
|
|
1018
|
+
}, { overshoot: n, bounces: a } = e, r = this.generateScaleBounceKeyframes(a, n);
|
|
1019
1019
|
let s = i;
|
|
1020
1020
|
for (let h = 0; h < r.length; h++)
|
|
1021
1021
|
if (t <= r[h].time) {
|
|
@@ -1031,12 +1031,12 @@ class oe {
|
|
|
1031
1031
|
generateScaleBounceKeyframes(t, i) {
|
|
1032
1032
|
const e = [];
|
|
1033
1033
|
e.push({ time: 0.5, scale: i });
|
|
1034
|
-
let
|
|
1034
|
+
let n = i;
|
|
1035
1035
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1036
1036
|
let h = 0.5;
|
|
1037
1037
|
for (let c = 0; c < t; c++) {
|
|
1038
|
-
const d = 1 - (
|
|
1039
|
-
h += s, e.push({ time: h, scale: d }),
|
|
1038
|
+
const d = 1 - (n - 1) * a;
|
|
1039
|
+
h += s, e.push({ time: h, scale: d }), n = 1 + (n - 1) * a * a, h += s, c < t - 1 && e.push({ time: h, scale: n });
|
|
1040
1040
|
}
|
|
1041
1041
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1042
1042
|
}
|
|
@@ -1059,19 +1059,19 @@ class se {
|
|
|
1059
1059
|
* @returns Array of layout objects with position, rotation, scale
|
|
1060
1060
|
*/
|
|
1061
1061
|
generate(t, i, e = {}) {
|
|
1062
|
-
const
|
|
1062
|
+
const n = [], { width: a, height: r } = i, s = this.config.spacing.padding, h = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", d = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, u = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, p = u !== 1 || g !== 1, f = h * 1.5 / 2, m = h / 2, S = a - s - f, v = r - s - m, w = s + f, E = s + m;
|
|
1063
1063
|
for (let x = 0; x < t; x++) {
|
|
1064
|
-
const
|
|
1064
|
+
const R = this.random(w, S), M = this.random(E, v), z = c === "random" ? this.random(d, l) : 0, U = p ? this.random(u, g) : 1, _ = h * U, B = {
|
|
1065
1065
|
id: x,
|
|
1066
|
-
x:
|
|
1067
|
-
y:
|
|
1066
|
+
x: R,
|
|
1067
|
+
y: M,
|
|
1068
1068
|
rotation: z,
|
|
1069
1069
|
scale: U,
|
|
1070
1070
|
baseSize: _
|
|
1071
1071
|
};
|
|
1072
|
-
|
|
1072
|
+
n.push(B);
|
|
1073
1073
|
}
|
|
1074
|
-
return
|
|
1074
|
+
return n;
|
|
1075
1075
|
}
|
|
1076
1076
|
/**
|
|
1077
1077
|
* Utility: Generate random number between min and max
|
|
@@ -1095,16 +1095,16 @@ class ae {
|
|
|
1095
1095
|
* @returns Array of layout objects with position, rotation, scale
|
|
1096
1096
|
*/
|
|
1097
1097
|
generate(t, i, e = {}) {
|
|
1098
|
-
const
|
|
1098
|
+
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, l = this.imageConfig.sizing?.variance?.min ?? 1, u = this.imageConfig.sizing?.variance?.max ?? 1, g = l !== 1 || u !== 1, p = this.config.scaleDecay ?? 0, b = e.fixedHeight ?? s, f = a / 2, m = r / 2, S = Math.ceil(Math.sqrt(t));
|
|
1099
1099
|
if (t > 0) {
|
|
1100
|
-
const
|
|
1101
|
-
|
|
1100
|
+
const E = g ? this.random(l, u) : 1, x = b * E;
|
|
1101
|
+
n.push({
|
|
1102
1102
|
id: 0,
|
|
1103
1103
|
x: f,
|
|
1104
1104
|
y: m,
|
|
1105
1105
|
rotation: h === "random" ? this.random(c * 0.33, d * 0.33) : 0,
|
|
1106
1106
|
// Less rotation for center
|
|
1107
|
-
scale:
|
|
1107
|
+
scale: E,
|
|
1108
1108
|
baseSize: x,
|
|
1109
1109
|
zIndex: 100
|
|
1110
1110
|
// Center image is highest
|
|
@@ -1112,32 +1112,32 @@ class ae {
|
|
|
1112
1112
|
}
|
|
1113
1113
|
let v = 1, w = 1;
|
|
1114
1114
|
for (; v < t; ) {
|
|
1115
|
-
const
|
|
1115
|
+
const E = w / S, x = p > 0 ? 1 - E * p * 0.5 : 1, R = w * (b * 0.8), M = R * 1.5, z = Math.PI * (3 * (M + R) - Math.sqrt((3 * M + R) * (M + 3 * R))), U = this.estimateWidth(b), _ = Math.floor(z / (U * 0.7));
|
|
1116
1116
|
if (_ === 0) {
|
|
1117
1117
|
w++;
|
|
1118
1118
|
continue;
|
|
1119
1119
|
}
|
|
1120
|
-
const
|
|
1121
|
-
for (let
|
|
1122
|
-
const
|
|
1123
|
-
let
|
|
1124
|
-
const
|
|
1125
|
-
|
|
1120
|
+
const B = 2 * Math.PI / _, j = w * (20 * Math.PI / 180);
|
|
1121
|
+
for (let T = 0; T < _ && v < t; T++) {
|
|
1122
|
+
const O = T * B + j, k = g ? this.random(l, u) : 1, H = x * k, A = b * H;
|
|
1123
|
+
let C = f + Math.cos(O) * M, $ = m + Math.sin(O) * R;
|
|
1124
|
+
const D = this.config.spacing.padding ?? 50, P = A * 1.5 / 2, L = A / 2;
|
|
1125
|
+
C - P < D ? C = D + P : C + P > a - D && (C = a - D - P), $ - L < D ? $ = D + L : $ + L > r - D && ($ = r - D - L);
|
|
1126
1126
|
const W = h === "random" ? this.random(c, d) : 0;
|
|
1127
|
-
|
|
1127
|
+
n.push({
|
|
1128
1128
|
id: v,
|
|
1129
|
-
x:
|
|
1130
|
-
y:
|
|
1129
|
+
x: C,
|
|
1130
|
+
y: $,
|
|
1131
1131
|
rotation: W,
|
|
1132
1132
|
scale: H,
|
|
1133
|
-
baseSize:
|
|
1133
|
+
baseSize: A,
|
|
1134
1134
|
zIndex: Math.max(1, 100 - w)
|
|
1135
1135
|
// Outer rings have lower z-index
|
|
1136
1136
|
}), v++;
|
|
1137
1137
|
}
|
|
1138
1138
|
w++;
|
|
1139
1139
|
}
|
|
1140
|
-
return
|
|
1140
|
+
return n;
|
|
1141
1141
|
}
|
|
1142
1142
|
/**
|
|
1143
1143
|
* Estimate image width based on height
|
|
@@ -1198,73 +1198,73 @@ class ce {
|
|
|
1198
1198
|
* @returns Array of layout objects with position, rotation, scale
|
|
1199
1199
|
*/
|
|
1200
1200
|
generate(t, i, e = {}) {
|
|
1201
|
-
const
|
|
1201
|
+
const n = [], { width: a, height: r } = i, s = { ...re, ...this.config.grid }, h = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.sizing?.variance?.min ?? 1, u = this.imageConfig.sizing?.variance?.max ?? 1, g = l !== 1 || u !== 1, p = a - 2 * h, b = r - 2 * h, { columns: f, rows: m } = this.calculateGridDimensions(
|
|
1202
1202
|
t,
|
|
1203
1203
|
p,
|
|
1204
1204
|
b,
|
|
1205
1205
|
c,
|
|
1206
1206
|
s
|
|
1207
|
-
),
|
|
1207
|
+
), S = s.stagger === "row", v = s.stagger === "column", w = S ? f + 0.5 : f, E = v ? m + 0.5 : m, x = (p - s.gap * (f - 1)) / w, R = (b - s.gap * (m - 1)) / E, M = S ? x / 2 : 0, z = v ? R / 2 : 0, U = 1 + s.overlap, _ = Math.min(x, R) * U, B = e.fixedHeight ? Math.min(e.fixedHeight, _) : _, j = f * x + (f - 1) * s.gap + M, T = m * R + (m - 1) * s.gap + z, O = h + (p - j) / 2, k = h + (b - T) / 2, H = f * m, A = s.columns !== "auto" && s.rows !== "auto", C = A && t > H;
|
|
1208
1208
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1209
1209
|
gridConfigColumns: s.columns,
|
|
1210
1210
|
gridConfigRows: s.rows,
|
|
1211
1211
|
columns: f,
|
|
1212
1212
|
rows: m,
|
|
1213
1213
|
cellCount: H,
|
|
1214
|
-
hasFixedGrid:
|
|
1214
|
+
hasFixedGrid: A,
|
|
1215
1215
|
imageCount: t,
|
|
1216
|
-
isOverflowMode:
|
|
1216
|
+
isOverflowMode: C
|
|
1217
1217
|
});
|
|
1218
|
-
const
|
|
1218
|
+
const $ = C ? new Array(H).fill(0) : [], D = Math.min(x, R) * s.overflowOffset;
|
|
1219
1219
|
for (let F = 0; F < t; F++) {
|
|
1220
|
-
let P,
|
|
1221
|
-
if (
|
|
1222
|
-
const q = F - H,
|
|
1223
|
-
W = Math.floor(q / H) + 1,
|
|
1220
|
+
let P, L, W = 0;
|
|
1221
|
+
if (C && F >= H) {
|
|
1222
|
+
const q = F - H, N = q % H;
|
|
1223
|
+
W = Math.floor(q / H) + 1, $[N]++, s.fillDirection === "row" ? (P = N % f, L = Math.floor(N / f)) : (L = N % m, P = Math.floor(N / m));
|
|
1224
1224
|
} else
|
|
1225
|
-
s.fillDirection === "row" ? (P = F % f,
|
|
1226
|
-
let G =
|
|
1227
|
-
if (s.stagger === "row" &&
|
|
1228
|
-
const q = (W - 1) % It.length,
|
|
1229
|
-
G +=
|
|
1225
|
+
s.fillDirection === "row" ? (P = F % f, L = Math.floor(F / f)) : (L = F % m, P = Math.floor(F / m));
|
|
1226
|
+
let G = O + P * (x + s.gap) + x / 2, Y = k + L * (R + s.gap) + R / 2;
|
|
1227
|
+
if (s.stagger === "row" && L % 2 === 1 ? G += x / 2 : s.stagger === "column" && P % 2 === 1 && (Y += R / 2), W > 0) {
|
|
1228
|
+
const q = (W - 1) % It.length, N = It[q];
|
|
1229
|
+
G += N.x * D, Y += N.y * D;
|
|
1230
1230
|
}
|
|
1231
1231
|
if (s.jitter > 0) {
|
|
1232
|
-
const q = x / 2 * s.jitter,
|
|
1233
|
-
G += this.random(-q, q),
|
|
1232
|
+
const q = x / 2 * s.jitter, N = R / 2 * s.jitter;
|
|
1233
|
+
G += this.random(-q, q), Y += this.random(-N, N);
|
|
1234
1234
|
}
|
|
1235
|
-
let
|
|
1236
|
-
if (!
|
|
1235
|
+
let X = G, J = Y;
|
|
1236
|
+
if (!C && s.fillDirection === "row") {
|
|
1237
1237
|
const q = t % f || f;
|
|
1238
|
-
if (
|
|
1238
|
+
if (L === Math.floor((t - 1) / f) && q < f) {
|
|
1239
1239
|
const wt = q * x + (q - 1) * s.gap;
|
|
1240
|
-
let
|
|
1241
|
-
s.alignment === "center" ?
|
|
1240
|
+
let ut = 0;
|
|
1241
|
+
s.alignment === "center" ? ut = (j - wt) / 2 : s.alignment === "end" && (ut = j - wt), X += ut;
|
|
1242
1242
|
}
|
|
1243
1243
|
}
|
|
1244
|
-
const
|
|
1245
|
-
|
|
1246
|
-
let
|
|
1244
|
+
const at = g ? this.random(l, u) : 1, K = B * at, et = K * 1.5 / 2, it = K / 2, ct = h + et, lt = a - h - et, Ft = h + it, Ot = r - h - it;
|
|
1245
|
+
X = Math.max(ct, Math.min(X, lt)), J = Math.max(Ft, Math.min(J, Ot));
|
|
1246
|
+
let ht = 0;
|
|
1247
1247
|
if (d === "random") {
|
|
1248
|
-
const q = this.imageConfig.rotation?.range?.min ?? -15,
|
|
1249
|
-
s.jitter > 0 ?
|
|
1248
|
+
const q = this.imageConfig.rotation?.range?.min ?? -15, N = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1249
|
+
s.jitter > 0 ? ht = this.random(q * s.jitter, N * s.jitter) : ht = this.random(q, N);
|
|
1250
1250
|
}
|
|
1251
|
-
let
|
|
1252
|
-
|
|
1251
|
+
let dt;
|
|
1252
|
+
C && W > 0 ? dt = 50 - W : dt = C ? 100 + F : F + 1, n.push({
|
|
1253
1253
|
id: F,
|
|
1254
|
-
x:
|
|
1254
|
+
x: X,
|
|
1255
1255
|
y: J,
|
|
1256
|
-
rotation:
|
|
1257
|
-
scale:
|
|
1256
|
+
rotation: ht,
|
|
1257
|
+
scale: at,
|
|
1258
1258
|
baseSize: K,
|
|
1259
|
-
zIndex:
|
|
1259
|
+
zIndex: dt
|
|
1260
1260
|
});
|
|
1261
1261
|
}
|
|
1262
|
-
return
|
|
1262
|
+
return n;
|
|
1263
1263
|
}
|
|
1264
1264
|
/**
|
|
1265
1265
|
* Calculate optimal grid dimensions based on image count and container
|
|
1266
1266
|
*/
|
|
1267
|
-
calculateGridDimensions(t, i, e,
|
|
1267
|
+
calculateGridDimensions(t, i, e, n, a) {
|
|
1268
1268
|
let r, s;
|
|
1269
1269
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1270
1270
|
r = a.columns, s = a.rows;
|
|
@@ -1305,79 +1305,79 @@ class de {
|
|
|
1305
1305
|
* @returns Array of layout objects with position, rotation, scale
|
|
1306
1306
|
*/
|
|
1307
1307
|
generate(t, i, e = {}) {
|
|
1308
|
-
const
|
|
1308
|
+
const n = [], { width: a, height: r } = i, s = { ...he, ...this.config.spiral }, h = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, b = g !== 1 || p !== 1, f = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, S = r / 2, v = Math.min(
|
|
1309
1309
|
m - h - c / 2,
|
|
1310
|
-
|
|
1310
|
+
S - h - c / 2
|
|
1311
1311
|
), w = s.direction === "clockwise" ? -1 : 1;
|
|
1312
|
-
for (let
|
|
1313
|
-
let x,
|
|
1312
|
+
for (let E = 0; E < t; E++) {
|
|
1313
|
+
let x, R;
|
|
1314
1314
|
if (s.spiralType === "golden")
|
|
1315
|
-
x =
|
|
1315
|
+
x = E * le * w + s.startAngle, R = this.calculateGoldenRadius(E, t, v, s.tightness);
|
|
1316
1316
|
else if (s.spiralType === "archimedean") {
|
|
1317
|
-
const G =
|
|
1318
|
-
x = G * w + s.startAngle,
|
|
1317
|
+
const G = E * 0.5 * s.tightness;
|
|
1318
|
+
x = G * w + s.startAngle, R = this.calculateArchimedeanRadius(G, t, v, s.tightness);
|
|
1319
1319
|
} else {
|
|
1320
|
-
const G =
|
|
1321
|
-
x = G * w + s.startAngle,
|
|
1320
|
+
const G = E * 0.3 * s.tightness;
|
|
1321
|
+
x = G * w + s.startAngle, R = this.calculateLogarithmicRadius(G, t, v, s.tightness);
|
|
1322
1322
|
}
|
|
1323
|
-
const
|
|
1324
|
-
let
|
|
1323
|
+
const M = m + Math.cos(x) * R, z = S + Math.sin(x) * R, U = R / v, _ = f > 0 ? 1 - U * f * 0.5 : 1, B = b ? this.random(g, p) : 1, j = _ * B, T = c * j, k = T * 1.5 / 2, H = T / 2, A = h + k, C = a - h - k, $ = h + H, D = r - h - H, F = Math.max(A, Math.min(M, C)), P = Math.max($, Math.min(z, D));
|
|
1324
|
+
let L = 0;
|
|
1325
1325
|
if (d === "random") {
|
|
1326
|
-
const G = x * 180 / Math.PI % 360,
|
|
1327
|
-
|
|
1328
|
-
} else d === "tangent" && (
|
|
1329
|
-
const W = t -
|
|
1330
|
-
|
|
1331
|
-
id:
|
|
1326
|
+
const G = x * 180 / Math.PI % 360, Y = this.random(l, u);
|
|
1327
|
+
L = s.spiralType === "golden" ? Y : G * 0.1 + Y * 0.9;
|
|
1328
|
+
} else d === "tangent" && (L = this.calculateSpiralTangent(x, R, s));
|
|
1329
|
+
const W = t - E;
|
|
1330
|
+
n.push({
|
|
1331
|
+
id: E,
|
|
1332
1332
|
x: F,
|
|
1333
1333
|
y: P,
|
|
1334
|
-
rotation:
|
|
1335
|
-
scale:
|
|
1336
|
-
baseSize:
|
|
1334
|
+
rotation: L,
|
|
1335
|
+
scale: j,
|
|
1336
|
+
baseSize: T,
|
|
1337
1337
|
zIndex: W
|
|
1338
1338
|
});
|
|
1339
1339
|
}
|
|
1340
|
-
return
|
|
1340
|
+
return n;
|
|
1341
1341
|
}
|
|
1342
1342
|
/**
|
|
1343
1343
|
* Calculate tangent angle for spiral curve at given position
|
|
1344
1344
|
* This aligns the image along the spiral's direction of travel
|
|
1345
1345
|
*/
|
|
1346
1346
|
calculateSpiralTangent(t, i, e) {
|
|
1347
|
-
let
|
|
1347
|
+
let n;
|
|
1348
1348
|
if (e.spiralType === "golden")
|
|
1349
|
-
|
|
1349
|
+
n = t + Math.PI / 2;
|
|
1350
1350
|
else if (e.spiralType === "archimedean") {
|
|
1351
1351
|
const r = 1 / e.tightness, s = Math.atan(i / r);
|
|
1352
|
-
|
|
1352
|
+
n = t + s;
|
|
1353
1353
|
} else {
|
|
1354
1354
|
const r = 0.15 / e.tightness, s = Math.atan(1 / r);
|
|
1355
|
-
|
|
1355
|
+
n = t + s;
|
|
1356
1356
|
}
|
|
1357
|
-
return
|
|
1357
|
+
return n * 180 / Math.PI % 360 - 90;
|
|
1358
1358
|
}
|
|
1359
1359
|
/**
|
|
1360
1360
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1361
1361
|
* Creates even distribution like sunflower seeds
|
|
1362
1362
|
*/
|
|
1363
|
-
calculateGoldenRadius(t, i, e,
|
|
1364
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1363
|
+
calculateGoldenRadius(t, i, e, n) {
|
|
1364
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / n;
|
|
1365
1365
|
return Math.min(r, e);
|
|
1366
1366
|
}
|
|
1367
1367
|
/**
|
|
1368
1368
|
* Calculate radius for Archimedean spiral
|
|
1369
1369
|
* r = a + b*θ (constant spacing between arms)
|
|
1370
1370
|
*/
|
|
1371
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1372
|
-
const a = i * 0.5 *
|
|
1371
|
+
calculateArchimedeanRadius(t, i, e, n) {
|
|
1372
|
+
const a = i * 0.5 * n;
|
|
1373
1373
|
return t / a * e;
|
|
1374
1374
|
}
|
|
1375
1375
|
/**
|
|
1376
1376
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1377
1377
|
* r = a * e^(b*θ)
|
|
1378
1378
|
*/
|
|
1379
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1380
|
-
const a = e * 0.05, r = 0.15 /
|
|
1379
|
+
calculateLogarithmicRadius(t, i, e, n) {
|
|
1380
|
+
const a = e * 0.05, r = 0.15 / n, s = a * Math.exp(r * t), h = i * 0.3 * n, c = a * Math.exp(r * h);
|
|
1381
1381
|
return s / c * e;
|
|
1382
1382
|
}
|
|
1383
1383
|
/**
|
|
@@ -1407,7 +1407,7 @@ class ge {
|
|
|
1407
1407
|
* @returns Array of layout objects with position, rotation, scale
|
|
1408
1408
|
*/
|
|
1409
1409
|
generate(t, i, e = {}) {
|
|
1410
|
-
const
|
|
1410
|
+
const n = [], { width: a, height: r } = i, s = { ...ue, ...this.config.cluster }, h = this.config.spacing.padding, c = e.fixedHeight ?? 200, d = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, b = g !== 1 || p !== 1, f = this.calculateClusterCount(
|
|
1411
1411
|
t,
|
|
1412
1412
|
s.clusterCount,
|
|
1413
1413
|
a,
|
|
@@ -1419,56 +1419,56 @@ class ge {
|
|
|
1419
1419
|
r,
|
|
1420
1420
|
h,
|
|
1421
1421
|
s
|
|
1422
|
-
),
|
|
1422
|
+
), S = new Array(f).fill(0);
|
|
1423
1423
|
for (let w = 0; w < t; w++)
|
|
1424
|
-
|
|
1424
|
+
S[w % f]++;
|
|
1425
1425
|
let v = 0;
|
|
1426
1426
|
for (let w = 0; w < f; w++) {
|
|
1427
|
-
const
|
|
1428
|
-
for (let
|
|
1429
|
-
let
|
|
1427
|
+
const E = m[w], x = S[w];
|
|
1428
|
+
for (let R = 0; R < x; R++) {
|
|
1429
|
+
let M, z;
|
|
1430
1430
|
if (s.distribution === "gaussian")
|
|
1431
|
-
|
|
1431
|
+
M = this.gaussianRandom() * E.spread, z = this.gaussianRandom() * E.spread;
|
|
1432
1432
|
else {
|
|
1433
|
-
const
|
|
1434
|
-
|
|
1433
|
+
const L = this.random(0, Math.PI * 2), W = this.random(0, E.spread);
|
|
1434
|
+
M = Math.cos(L) * W, z = Math.sin(L) * W;
|
|
1435
1435
|
}
|
|
1436
1436
|
const U = 1 + s.overlap * 0.5, _ = 1 + s.overlap * 0.3;
|
|
1437
|
-
|
|
1438
|
-
const
|
|
1439
|
-
let
|
|
1440
|
-
const
|
|
1441
|
-
|
|
1442
|
-
const
|
|
1443
|
-
|
|
1437
|
+
M /= U, z /= U;
|
|
1438
|
+
const B = b ? this.random(g, p) : 1, j = _ * B, T = c * j;
|
|
1439
|
+
let O = E.x + M, k = E.y + z;
|
|
1440
|
+
const A = T * 1.5 / 2, C = T / 2;
|
|
1441
|
+
O = Math.max(h + A, Math.min(O, a - h - A)), k = Math.max(h + C, Math.min(k, r - h - C));
|
|
1442
|
+
const $ = d === "random" ? this.random(l, u) : 0, F = Math.sqrt(M * M + z * z) / E.spread, P = Math.round((1 - F) * 50) + 1;
|
|
1443
|
+
n.push({
|
|
1444
1444
|
id: v,
|
|
1445
|
-
x:
|
|
1446
|
-
y:
|
|
1447
|
-
rotation:
|
|
1448
|
-
scale:
|
|
1449
|
-
baseSize:
|
|
1445
|
+
x: O,
|
|
1446
|
+
y: k,
|
|
1447
|
+
rotation: $,
|
|
1448
|
+
scale: j,
|
|
1449
|
+
baseSize: T,
|
|
1450
1450
|
zIndex: P
|
|
1451
1451
|
}), v++;
|
|
1452
1452
|
}
|
|
1453
1453
|
}
|
|
1454
|
-
return
|
|
1454
|
+
return n;
|
|
1455
1455
|
}
|
|
1456
1456
|
/**
|
|
1457
1457
|
* Calculate optimal number of clusters based on image count and container
|
|
1458
1458
|
*/
|
|
1459
|
-
calculateClusterCount(t, i, e,
|
|
1459
|
+
calculateClusterCount(t, i, e, n, a) {
|
|
1460
1460
|
if (i !== "auto")
|
|
1461
1461
|
return Math.max(1, Math.min(i, t));
|
|
1462
1462
|
const s = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
|
|
1463
|
-
e / a * (
|
|
1463
|
+
e / a * (n / a) * 0.6
|
|
1464
1464
|
);
|
|
1465
1465
|
return Math.max(1, Math.min(s, h, 10));
|
|
1466
1466
|
}
|
|
1467
1467
|
/**
|
|
1468
1468
|
* Generate cluster center positions with spacing constraints
|
|
1469
1469
|
*/
|
|
1470
|
-
generateClusterCenters(t, i, e,
|
|
1471
|
-
const r = [], h =
|
|
1470
|
+
generateClusterCenters(t, i, e, n, a) {
|
|
1471
|
+
const r = [], h = n + a.clusterSpread, c = i - n - a.clusterSpread, d = n + a.clusterSpread, l = e - n - a.clusterSpread;
|
|
1472
1472
|
for (let u = 0; u < t; u++) {
|
|
1473
1473
|
let g = null, p = -1;
|
|
1474
1474
|
for (let b = 0; b < 100; b++) {
|
|
@@ -1478,9 +1478,9 @@ class ge {
|
|
|
1478
1478
|
spread: this.calculateClusterSpread(a)
|
|
1479
1479
|
};
|
|
1480
1480
|
let m = 1 / 0;
|
|
1481
|
-
for (const
|
|
1482
|
-
const v = f.x -
|
|
1483
|
-
m = Math.min(m,
|
|
1481
|
+
for (const S of r) {
|
|
1482
|
+
const v = f.x - S.x, w = f.y - S.y, E = Math.sqrt(v * v + w * w);
|
|
1483
|
+
m = Math.min(m, E);
|
|
1484
1484
|
}
|
|
1485
1485
|
if ((r.length === 0 || m > p) && (g = f, p = m), m >= a.clusterSpacing)
|
|
1486
1486
|
break;
|
|
@@ -1525,32 +1525,32 @@ class fe {
|
|
|
1525
1525
|
* @returns Array of layout objects with position, rotation, scale
|
|
1526
1526
|
*/
|
|
1527
1527
|
generate(t, i, e = {}) {
|
|
1528
|
-
const
|
|
1529
|
-
...
|
|
1528
|
+
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", d = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, u = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, p = u !== 1 || g !== 1, b = e.fixedHeight ?? s, f = {
|
|
1529
|
+
...Dt,
|
|
1530
1530
|
...this.config.wave
|
|
1531
|
-
}, { rows: m, amplitude:
|
|
1532
|
-
let
|
|
1533
|
-
for (let
|
|
1534
|
-
const
|
|
1535
|
-
let
|
|
1536
|
-
|
|
1537
|
-
for (let F = 0; F < x &&
|
|
1538
|
-
const P = x === 1 ? (U + _) / 2 : U + F *
|
|
1531
|
+
}, { rows: m, amplitude: S, frequency: v, phaseShift: w, synchronization: E } = f, x = Math.ceil(t / m), z = b * 1.5 / 2, U = h + z, _ = a - h - z, B = _ - U, j = x > 1 ? B / (x - 1) : 0, T = h + S + b / 2, O = r - h - S - b / 2, k = O - T, H = m > 1 ? k / (m - 1) : 0;
|
|
1532
|
+
let A = 0;
|
|
1533
|
+
for (let C = 0; C < m && A < t; C++) {
|
|
1534
|
+
const $ = m === 1 ? (T + O) / 2 : T + C * H;
|
|
1535
|
+
let D = 0;
|
|
1536
|
+
E === "offset" ? D = C * w : E === "alternating" && (D = C * Math.PI);
|
|
1537
|
+
for (let F = 0; F < x && A < t; F++) {
|
|
1538
|
+
const P = x === 1 ? (U + _) / 2 : U + F * j, L = this.calculateWaveY(P, a, S, v, D), W = P, G = $ + L, Y = p ? this.random(u, g) : 1, X = b * Y;
|
|
1539
1539
|
let J = 0;
|
|
1540
|
-
c === "tangent" ? J = this.calculateRotation(P, a,
|
|
1541
|
-
const K =
|
|
1542
|
-
|
|
1543
|
-
id:
|
|
1544
|
-
x: Math.max(
|
|
1545
|
-
y: Math.max(
|
|
1540
|
+
c === "tangent" ? J = this.calculateRotation(P, a, S, v, D) : c === "random" && (J = this.random(d, l));
|
|
1541
|
+
const K = X * 1.5 / 2, rt = X / 2, et = h + K, it = a - h - K, ct = h + rt, lt = r - h - rt;
|
|
1542
|
+
n.push({
|
|
1543
|
+
id: A,
|
|
1544
|
+
x: Math.max(et, Math.min(W, it)),
|
|
1545
|
+
y: Math.max(ct, Math.min(G, lt)),
|
|
1546
1546
|
rotation: J,
|
|
1547
|
-
scale:
|
|
1548
|
-
baseSize:
|
|
1549
|
-
zIndex:
|
|
1550
|
-
}),
|
|
1547
|
+
scale: Y,
|
|
1548
|
+
baseSize: X,
|
|
1549
|
+
zIndex: A + 1
|
|
1550
|
+
}), A++;
|
|
1551
1551
|
}
|
|
1552
1552
|
}
|
|
1553
|
-
return
|
|
1553
|
+
return n;
|
|
1554
1554
|
}
|
|
1555
1555
|
/**
|
|
1556
1556
|
* Calculate Y position displacement on wave curve
|
|
@@ -1561,9 +1561,9 @@ class fe {
|
|
|
1561
1561
|
* @param phase - Phase offset
|
|
1562
1562
|
* @returns Y displacement from baseline
|
|
1563
1563
|
*/
|
|
1564
|
-
calculateWaveY(t, i, e,
|
|
1564
|
+
calculateWaveY(t, i, e, n, a) {
|
|
1565
1565
|
const r = t / i;
|
|
1566
|
-
return e * Math.sin(
|
|
1566
|
+
return e * Math.sin(n * r * 2 * Math.PI + a);
|
|
1567
1567
|
}
|
|
1568
1568
|
/**
|
|
1569
1569
|
* Calculate rotation based on wave tangent
|
|
@@ -1574,8 +1574,8 @@ class fe {
|
|
|
1574
1574
|
* @param phase - Phase offset
|
|
1575
1575
|
* @returns Rotation angle in degrees
|
|
1576
1576
|
*/
|
|
1577
|
-
calculateRotation(t, i, e,
|
|
1578
|
-
const r = t / i, s = e *
|
|
1577
|
+
calculateRotation(t, i, e, n, a) {
|
|
1578
|
+
const r = t / i, s = e * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + a) / i;
|
|
1579
1579
|
return Math.atan(s) * (180 / Math.PI);
|
|
1580
1580
|
}
|
|
1581
1581
|
/**
|
|
@@ -1622,10 +1622,10 @@ class me {
|
|
|
1622
1622
|
* @returns Array of layout objects with position, rotation, scale
|
|
1623
1623
|
*/
|
|
1624
1624
|
generateLayout(t, i, e = {}) {
|
|
1625
|
-
const
|
|
1626
|
-
return
|
|
1625
|
+
const n = this.placementLayout.generate(t, i, e);
|
|
1626
|
+
return n.forEach((a) => {
|
|
1627
1627
|
this.layouts.set(a.id, a);
|
|
1628
|
-
}),
|
|
1628
|
+
}), n;
|
|
1629
1629
|
}
|
|
1630
1630
|
/**
|
|
1631
1631
|
* Get the original layout state for an image
|
|
@@ -1678,8 +1678,8 @@ class me {
|
|
|
1678
1678
|
return;
|
|
1679
1679
|
if (typeof e == "number")
|
|
1680
1680
|
return e;
|
|
1681
|
-
const
|
|
1682
|
-
return a === "mobile" ?
|
|
1681
|
+
const n = e, a = this.resolveBreakpoint(t);
|
|
1682
|
+
return a === "mobile" ? n.mobile ?? n.tablet ?? n.screen : a === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1683
1683
|
}
|
|
1684
1684
|
/**
|
|
1685
1685
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1689,19 +1689,19 @@ class me {
|
|
|
1689
1689
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1690
1690
|
* @returns Calculated sizing result with height
|
|
1691
1691
|
*/
|
|
1692
|
-
calculateAdaptiveSize(t, i, e,
|
|
1693
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1692
|
+
calculateAdaptiveSize(t, i, e, n) {
|
|
1693
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1694
1694
|
if (r !== void 0)
|
|
1695
1695
|
return { height: r };
|
|
1696
1696
|
const s = a?.minSize ?? 50, h = a?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, d = this.config.densityFactor ?? 1, { width: l, height: u } = t, b = l * u * c / i;
|
|
1697
1697
|
let m = Math.sqrt(b / 1.4);
|
|
1698
1698
|
m *= d, m = Math.min(m, e);
|
|
1699
|
-
let
|
|
1700
|
-
if (
|
|
1699
|
+
let S = this.clamp(m, s, h);
|
|
1700
|
+
if (S === s && m < s) {
|
|
1701
1701
|
const v = Math.max(s * 0.05, 20);
|
|
1702
|
-
|
|
1702
|
+
S = Math.max(v, m);
|
|
1703
1703
|
}
|
|
1704
|
-
return { height:
|
|
1704
|
+
return { height: S };
|
|
1705
1705
|
}
|
|
1706
1706
|
/**
|
|
1707
1707
|
* Utility: Clamp a value between min and max
|
|
@@ -1710,8 +1710,8 @@ class me {
|
|
|
1710
1710
|
return Math.max(i, Math.min(e, t));
|
|
1711
1711
|
}
|
|
1712
1712
|
}
|
|
1713
|
-
var I = /* @__PURE__ */ ((
|
|
1714
|
-
const
|
|
1713
|
+
var I = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(I || {});
|
|
1714
|
+
const Rt = {
|
|
1715
1715
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1716
1716
|
circle: "circle(50%)",
|
|
1717
1717
|
square: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
|
@@ -1758,103 +1758,103 @@ const Ct = {
|
|
|
1758
1758
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
1759
1759
|
}
|
|
1760
1760
|
};
|
|
1761
|
-
function be(
|
|
1762
|
-
if (
|
|
1763
|
-
return
|
|
1761
|
+
function be(o) {
|
|
1762
|
+
if (o)
|
|
1763
|
+
return o in Rt ? Rt[o] : o;
|
|
1764
1764
|
}
|
|
1765
|
-
function ye(
|
|
1766
|
-
const e = pe[
|
|
1765
|
+
function ye(o, t, i) {
|
|
1766
|
+
const e = pe[o];
|
|
1767
1767
|
if (!e) return "";
|
|
1768
|
-
const
|
|
1769
|
-
if (
|
|
1770
|
-
return `circle(${Math.round(50 *
|
|
1771
|
-
const a = e.refHeight *
|
|
1768
|
+
const n = t / e.refHeight;
|
|
1769
|
+
if (o === "circle")
|
|
1770
|
+
return `circle(${Math.round(50 * n * 100) / 100}px)`;
|
|
1771
|
+
const a = e.refHeight * n, r = a / 2, s = a / 2, h = (i ?? a) / 2, c = t / 2, d = h - r, l = c - s;
|
|
1772
1772
|
return `polygon(${e.points.map(([g, p]) => {
|
|
1773
|
-
const b = Math.round((g *
|
|
1773
|
+
const b = Math.round((g * n + d) * 100) / 100, f = Math.round((p * n + l) * 100) / 100;
|
|
1774
1774
|
return `${b}px ${f}px`;
|
|
1775
1775
|
}).join(", ")})`;
|
|
1776
1776
|
}
|
|
1777
|
-
function ve(
|
|
1778
|
-
return
|
|
1777
|
+
function ve(o) {
|
|
1778
|
+
return o in ft;
|
|
1779
1779
|
}
|
|
1780
|
-
function we(
|
|
1781
|
-
return
|
|
1780
|
+
function we(o) {
|
|
1781
|
+
return o ? ve(o) ? ft[o] : o : ft.md;
|
|
1782
1782
|
}
|
|
1783
|
-
function xe(
|
|
1784
|
-
if (!
|
|
1783
|
+
function xe(o) {
|
|
1784
|
+
if (!o) return "";
|
|
1785
1785
|
const t = [];
|
|
1786
|
-
if (
|
|
1787
|
-
if (typeof
|
|
1788
|
-
t.push(`drop-shadow(${
|
|
1786
|
+
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)
|
|
1787
|
+
if (typeof o.dropShadow == "string")
|
|
1788
|
+
t.push(`drop-shadow(${o.dropShadow})`);
|
|
1789
1789
|
else {
|
|
1790
|
-
const i =
|
|
1790
|
+
const i = o.dropShadow;
|
|
1791
1791
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
1792
1792
|
}
|
|
1793
1793
|
return t.join(" ");
|
|
1794
1794
|
}
|
|
1795
|
-
function Q(
|
|
1796
|
-
if (!
|
|
1795
|
+
function Q(o) {
|
|
1796
|
+
if (!o || o.style === "none" || o.width === 0)
|
|
1797
1797
|
return "none";
|
|
1798
|
-
const t =
|
|
1798
|
+
const t = o.width ?? 0, i = o.style ?? "solid", e = o.color ?? "#000000";
|
|
1799
1799
|
return `${t}px ${i} ${e}`;
|
|
1800
1800
|
}
|
|
1801
|
-
function
|
|
1802
|
-
if (!
|
|
1801
|
+
function tt(o, t, i) {
|
|
1802
|
+
if (!o) return {};
|
|
1803
1803
|
const e = {};
|
|
1804
|
-
if (
|
|
1805
|
-
const s =
|
|
1806
|
-
|
|
1807
|
-
} else
|
|
1808
|
-
if (
|
|
1809
|
-
const s =
|
|
1804
|
+
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
1805
|
+
const s = o.border?.radius ?? 0;
|
|
1806
|
+
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : s && (e.borderTopLeftRadius = `${s}px`), o.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${o.borderRadiusTopRight}px` : s && (e.borderTopRightRadius = `${s}px`), o.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : s && (e.borderBottomRightRadius = `${s}px`), o.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : s && (e.borderBottomLeftRadius = `${s}px`);
|
|
1807
|
+
} else o.border?.radius !== void 0 && (e.borderRadius = `${o.border.radius}px`);
|
|
1808
|
+
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
1809
|
+
const s = o.border || {}, h = { ...s, ...o.borderTop }, c = { ...s, ...o.borderRight }, d = { ...s, ...o.borderBottom }, l = { ...s, ...o.borderLeft };
|
|
1810
1810
|
e.borderTop = Q(h), e.borderRight = Q(c), e.borderBottom = Q(d), e.borderLeft = Q(l);
|
|
1811
|
-
} else
|
|
1812
|
-
|
|
1813
|
-
const r = xe(
|
|
1814
|
-
if (e.filter = r || "none",
|
|
1815
|
-
const s =
|
|
1816
|
-
e.outline = `${s}px ${h} ${c}`,
|
|
1817
|
-
}
|
|
1818
|
-
if (
|
|
1811
|
+
} else o.border && (e.border = Q(o.border));
|
|
1812
|
+
o.shadow !== void 0 && (e.boxShadow = we(o.shadow));
|
|
1813
|
+
const r = xe(o.filter);
|
|
1814
|
+
if (e.filter = r || "none", o.opacity !== void 0 && (e.opacity = String(o.opacity)), o.cursor !== void 0 && (e.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
1815
|
+
const s = o.outline.width ?? 0, h = o.outline.style ?? "solid", c = o.outline.color ?? "#000000";
|
|
1816
|
+
e.outline = `${s}px ${h} ${c}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
1817
|
+
}
|
|
1818
|
+
if (o.objectFit !== void 0 && (e.objectFit = o.objectFit), o.aspectRatio !== void 0 && (e.aspectRatio = o.aspectRatio), o.clipPath !== void 0) {
|
|
1819
1819
|
let s;
|
|
1820
|
-
const h = typeof
|
|
1820
|
+
const h = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath, c = h ? o.clipPath : void 0;
|
|
1821
1821
|
if (c?.mode === "height-relative" && t)
|
|
1822
1822
|
s = ye(c.shape, t, i);
|
|
1823
1823
|
else {
|
|
1824
|
-
const d = h && c ? c.shape :
|
|
1824
|
+
const d = h && c ? c.shape : o.clipPath;
|
|
1825
1825
|
s = be(d);
|
|
1826
1826
|
}
|
|
1827
1827
|
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
1828
1828
|
}
|
|
1829
1829
|
return e;
|
|
1830
1830
|
}
|
|
1831
|
-
function
|
|
1832
|
-
t.borderRadius !== void 0 && (
|
|
1831
|
+
function Se(o, t) {
|
|
1832
|
+
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), t.clipPath !== void 0 && (o.style.clipPath = t.clipPath), t.overflow !== void 0 && (o.style.overflow = t.overflow);
|
|
1833
1833
|
}
|
|
1834
|
-
function
|
|
1835
|
-
const
|
|
1836
|
-
|
|
1834
|
+
function gt(o, t, i, e) {
|
|
1835
|
+
const n = tt(t, i, e);
|
|
1836
|
+
Se(o, n);
|
|
1837
1837
|
}
|
|
1838
|
-
function zt(
|
|
1839
|
-
return
|
|
1838
|
+
function zt(o) {
|
|
1839
|
+
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
1840
1840
|
}
|
|
1841
|
-
function nt(
|
|
1841
|
+
function nt(o, t) {
|
|
1842
1842
|
const i = zt(t);
|
|
1843
1843
|
i && i.split(" ").forEach((e) => {
|
|
1844
|
-
e.trim() &&
|
|
1844
|
+
e.trim() && o.classList.add(e.trim());
|
|
1845
1845
|
});
|
|
1846
1846
|
}
|
|
1847
|
-
function
|
|
1847
|
+
function mt(o, t) {
|
|
1848
1848
|
const i = zt(t);
|
|
1849
1849
|
i && i.split(" ").forEach((e) => {
|
|
1850
|
-
e.trim() &&
|
|
1850
|
+
e.trim() && o.classList.remove(e.trim());
|
|
1851
1851
|
});
|
|
1852
1852
|
}
|
|
1853
|
-
const
|
|
1853
|
+
const Tt = {
|
|
1854
1854
|
UNFOCUSING: 999,
|
|
1855
1855
|
FOCUSING: 1e3
|
|
1856
1856
|
};
|
|
1857
|
-
class
|
|
1857
|
+
class Ee {
|
|
1858
1858
|
constructor(t, i, e) {
|
|
1859
1859
|
this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = i, this.styling = e, this.focusedClassName = e?.focused?.className;
|
|
1860
1860
|
}
|
|
@@ -1881,9 +1881,9 @@ class Se {
|
|
|
1881
1881
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1882
1882
|
*/
|
|
1883
1883
|
calculateFocusDimensions(t, i, e) {
|
|
1884
|
-
const
|
|
1884
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), a = e.height * n, r = t / i;
|
|
1885
1885
|
let s = a, h = s * r;
|
|
1886
|
-
const c = e.width *
|
|
1886
|
+
const c = e.width * n;
|
|
1887
1887
|
return h > c && (h = c, s = h / r), { width: h, height: s };
|
|
1888
1888
|
}
|
|
1889
1889
|
/**
|
|
@@ -1891,7 +1891,7 @@ class Se {
|
|
|
1891
1891
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1892
1892
|
*/
|
|
1893
1893
|
calculateFocusTransform(t, i) {
|
|
1894
|
-
const e = t.width / 2,
|
|
1894
|
+
const e = t.width / 2, n = t.height / 2, a = e - i.x, r = n - i.y;
|
|
1895
1895
|
return {
|
|
1896
1896
|
x: a,
|
|
1897
1897
|
y: r,
|
|
@@ -1906,8 +1906,8 @@ class Se {
|
|
|
1906
1906
|
buildDimensionZoomTransform(t) {
|
|
1907
1907
|
const i = ["translate(-50%, -50%)"];
|
|
1908
1908
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
1909
|
-
const e = t.x ?? 0,
|
|
1910
|
-
i.push(`translate(${e}px, ${
|
|
1909
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
1910
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
1911
1911
|
}
|
|
1912
1912
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
1913
1913
|
}
|
|
@@ -1915,13 +1915,13 @@ class Se {
|
|
|
1915
1915
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1916
1916
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1917
1917
|
*/
|
|
1918
|
-
animateWithDimensions(t, i, e,
|
|
1918
|
+
animateWithDimensions(t, i, e, n, a, r, s, h) {
|
|
1919
1919
|
const c = this.buildDimensionZoomTransform(i), d = this.buildDimensionZoomTransform(e);
|
|
1920
1920
|
return t.style.transition = "none", t.animate(
|
|
1921
1921
|
[
|
|
1922
1922
|
{
|
|
1923
1923
|
transform: c,
|
|
1924
|
-
width: `${
|
|
1924
|
+
width: `${n}px`,
|
|
1925
1925
|
height: `${a}px`
|
|
1926
1926
|
},
|
|
1927
1927
|
{
|
|
@@ -1939,27 +1939,33 @@ class Se {
|
|
|
1939
1939
|
}
|
|
1940
1940
|
/**
|
|
1941
1941
|
* Apply focused styling to an element
|
|
1942
|
-
* Applies
|
|
1942
|
+
* Applies all focused styling properties, classes, and z-index
|
|
1943
1943
|
*/
|
|
1944
1944
|
applyFocusedStyling(t, i) {
|
|
1945
|
-
t.style.zIndex = String(i), t.classList.add("fbn-ic-focused"), nt(t, this.focusedClassName)
|
|
1945
|
+
if (t.style.zIndex = String(i), t.classList.add("fbn-ic-focused"), nt(t, this.focusedClassName), this.styling?.focused) {
|
|
1946
|
+
const e = tt(this.styling.focused, t.offsetHeight, t.offsetWidth);
|
|
1947
|
+
e.borderRadius !== void 0 && (t.style.borderRadius = e.borderRadius), e.borderTopLeftRadius !== void 0 && (t.style.borderTopLeftRadius = e.borderTopLeftRadius), e.borderTopRightRadius !== void 0 && (t.style.borderTopRightRadius = e.borderTopRightRadius), e.borderBottomRightRadius !== void 0 && (t.style.borderBottomRightRadius = e.borderBottomRightRadius), e.borderBottomLeftRadius !== void 0 && (t.style.borderBottomLeftRadius = e.borderBottomLeftRadius), e.border !== void 0 && (t.style.border = e.border), e.borderTop !== void 0 && (t.style.borderTop = e.borderTop), e.borderRight !== void 0 && (t.style.borderRight = e.borderRight), e.borderBottom !== void 0 && (t.style.borderBottom = e.borderBottom), e.borderLeft !== void 0 && (t.style.borderLeft = e.borderLeft), e.boxShadow !== void 0 && (t.style.boxShadow = e.boxShadow), e.filter !== void 0 && (t.style.filter = e.filter), e.opacity !== void 0 && (t.style.opacity = e.opacity), e.cursor !== void 0 && (t.style.cursor = e.cursor), e.outline !== void 0 && (t.style.outline = e.outline), e.outlineOffset !== void 0 && (t.style.outlineOffset = e.outlineOffset), e.objectFit !== void 0 && (t.style.objectFit = e.objectFit), e.aspectRatio !== void 0 && (t.style.aspectRatio = e.aspectRatio);
|
|
1948
|
+
}
|
|
1946
1949
|
}
|
|
1947
1950
|
/**
|
|
1948
1951
|
* Remove focused styling from an element
|
|
1949
|
-
*
|
|
1952
|
+
* Restores default styling properties, removes classes, and resets z-index
|
|
1950
1953
|
*/
|
|
1951
1954
|
removeFocusedStyling(t, i) {
|
|
1952
|
-
t.style.zIndex = i, t.classList.remove("fbn-ic-focused"),
|
|
1955
|
+
if (t.style.zIndex = i, t.classList.remove("fbn-ic-focused"), mt(t, this.focusedClassName), this.styling?.default) {
|
|
1956
|
+
const e = tt(this.styling.default, t.offsetHeight, t.offsetWidth);
|
|
1957
|
+
e.borderRadius !== void 0 && (t.style.borderRadius = e.borderRadius), e.borderTopLeftRadius !== void 0 && (t.style.borderTopLeftRadius = e.borderTopLeftRadius), e.borderTopRightRadius !== void 0 && (t.style.borderTopRightRadius = e.borderTopRightRadius), e.borderBottomRightRadius !== void 0 && (t.style.borderBottomRightRadius = e.borderBottomRightRadius), e.borderBottomLeftRadius !== void 0 && (t.style.borderBottomLeftRadius = e.borderBottomLeftRadius), e.border !== void 0 && (t.style.border = e.border), e.borderTop !== void 0 && (t.style.borderTop = e.borderTop), e.borderRight !== void 0 && (t.style.borderRight = e.borderRight), e.borderBottom !== void 0 && (t.style.borderBottom = e.borderBottom), e.borderLeft !== void 0 && (t.style.borderLeft = e.borderLeft), e.boxShadow !== void 0 && (t.style.boxShadow = e.boxShadow), e.filter !== void 0 && (t.style.filter = e.filter), e.opacity !== void 0 && (t.style.opacity = e.opacity), e.cursor !== void 0 && (t.style.cursor = e.cursor), e.outline !== void 0 && (t.style.outline = e.outline), e.outlineOffset !== void 0 && (t.style.outlineOffset = e.outlineOffset), e.objectFit !== void 0 && (t.style.objectFit = e.objectFit), e.aspectRatio !== void 0 && (t.style.aspectRatio = e.aspectRatio);
|
|
1958
|
+
}
|
|
1953
1959
|
}
|
|
1954
1960
|
/**
|
|
1955
1961
|
* Continuously update clip-path during animation based on current element dimensions
|
|
1956
1962
|
* This ensures clip-path changes smoothly as width/height animate
|
|
1957
1963
|
*/
|
|
1958
1964
|
startClipPathAnimation(t, i, e) {
|
|
1959
|
-
let
|
|
1960
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
1965
|
+
let n = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
1966
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (n = { ...n, clipPath: void 0 });
|
|
1961
1967
|
const a = () => {
|
|
1962
|
-
const r = t.offsetHeight, s = t.offsetWidth, h =
|
|
1968
|
+
const r = t.offsetHeight, s = t.offsetWidth, h = tt(n, r, s);
|
|
1963
1969
|
h.clipPath !== void 0 ? t.style.clipPath = h.clipPath : t.style.clipPath = "unset", h.overflow !== void 0 && (t.style.overflow = h.overflow), i.animation.playState === "running" && requestAnimationFrame(a);
|
|
1964
1970
|
};
|
|
1965
1971
|
requestAnimationFrame(a);
|
|
@@ -1970,12 +1976,12 @@ class Se {
|
|
|
1970
1976
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1971
1977
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1972
1978
|
*/
|
|
1973
|
-
startFocusAnimation(t, i, e,
|
|
1979
|
+
startFocusAnimation(t, i, e, n, a) {
|
|
1974
1980
|
const r = t.style.zIndex || "", s = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(s, h, i), d = this.calculateFocusTransform(i, e);
|
|
1975
1981
|
this.animationEngine.cancelAllAnimations(t);
|
|
1976
1982
|
const l = this.config.animationDuration ?? 600;
|
|
1977
|
-
this.applyFocusedStyling(t,
|
|
1978
|
-
const u =
|
|
1983
|
+
this.applyFocusedStyling(t, Tt.FOCUSING);
|
|
1984
|
+
const u = n ?? {
|
|
1979
1985
|
x: 0,
|
|
1980
1986
|
y: 0,
|
|
1981
1987
|
rotation: e.rotation,
|
|
@@ -2022,11 +2028,11 @@ class Se {
|
|
|
2022
2028
|
* Animates back to original dimensions for consistent behavior
|
|
2023
2029
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2024
2030
|
*/
|
|
2025
|
-
startUnfocusAnimation(t, i, e,
|
|
2026
|
-
t.style.zIndex = String(
|
|
2031
|
+
startUnfocusAnimation(t, i, e, n) {
|
|
2032
|
+
t.style.zIndex = String(Tt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2027
2033
|
const a = this.config.animationDuration ?? 600;
|
|
2028
|
-
t.classList.remove("fbn-ic-focused"),
|
|
2029
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s =
|
|
2034
|
+
t.classList.remove("fbn-ic-focused"), mt(t, this.focusedClassName);
|
|
2035
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, h = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, c = {
|
|
2030
2036
|
x: 0,
|
|
2031
2037
|
y: 0,
|
|
2032
2038
|
rotation: i.rotation,
|
|
@@ -2074,10 +2080,10 @@ class Se {
|
|
|
2074
2080
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2075
2081
|
*/
|
|
2076
2082
|
captureMidAnimationState(t) {
|
|
2077
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2078
|
-
return t.style.width = `${
|
|
2083
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth, a = t.offsetHeight, r = e.e + n * 0.5, s = e.f + a * 0.5, h = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2084
|
+
return t.style.width = `${n}px`, t.style.height = `${a}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${s}px) rotate(${h}deg)`, t.style.transition = "none", {
|
|
2079
2085
|
transform: { x: r, y: s, rotation: h, scale: 1 },
|
|
2080
|
-
dimensions: { width:
|
|
2086
|
+
dimensions: { width: n, height: a }
|
|
2081
2087
|
};
|
|
2082
2088
|
}
|
|
2083
2089
|
/**
|
|
@@ -2092,10 +2098,10 @@ class Se {
|
|
|
2092
2098
|
/**
|
|
2093
2099
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2094
2100
|
*/
|
|
2095
|
-
resetElementInstantly(t, i, e,
|
|
2101
|
+
resetElementInstantly(t, i, e, n, a) {
|
|
2096
2102
|
this.animationEngine.cancelAllAnimations(t);
|
|
2097
2103
|
const r = ["translate(-50%, -50%)"];
|
|
2098
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2104
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && a !== void 0 && (t.style.width = `${n}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, e);
|
|
2099
2105
|
}
|
|
2100
2106
|
/**
|
|
2101
2107
|
* Focus (zoom) an image to center of container
|
|
@@ -2114,10 +2120,10 @@ class Se {
|
|
|
2114
2120
|
), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE;
|
|
2115
2121
|
return;
|
|
2116
2122
|
}
|
|
2117
|
-
const
|
|
2123
|
+
const n = ++this.focusGeneration;
|
|
2118
2124
|
switch (this.state) {
|
|
2119
2125
|
case I.IDLE:
|
|
2120
|
-
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2126
|
+
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2121
2127
|
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2122
2128
|
break;
|
|
2123
2129
|
case I.FOCUSED:
|
|
@@ -2127,7 +2133,7 @@ class Se {
|
|
|
2127
2133
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2128
2134
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2129
2135
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2130
|
-
]), this.focusGeneration !==
|
|
2136
|
+
]), this.focusGeneration !== n)
|
|
2131
2137
|
return;
|
|
2132
2138
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2133
2139
|
break;
|
|
@@ -2138,14 +2144,14 @@ class Se {
|
|
|
2138
2144
|
this.focusData?.originalZIndex || "",
|
|
2139
2145
|
this.focusData?.originalWidth,
|
|
2140
2146
|
this.focusData?.originalHeight
|
|
2141
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2147
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2142
2148
|
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2143
2149
|
break;
|
|
2144
2150
|
case I.UNFOCUSING:
|
|
2145
2151
|
if (this.state = I.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2146
2152
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2147
2153
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2148
|
-
]), this.focusGeneration !==
|
|
2154
|
+
]), this.focusGeneration !== n) return;
|
|
2149
2155
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2150
2156
|
break;
|
|
2151
2157
|
case I.CROSS_ANIMATING:
|
|
@@ -2166,7 +2172,7 @@ class Se {
|
|
|
2166
2172
|
if (this.incoming = this.startFocusAnimation(t, i, e, a, r), await Promise.all([
|
|
2167
2173
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2168
2174
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2169
|
-
]), this.focusGeneration !==
|
|
2175
|
+
]), this.focusGeneration !== n) return;
|
|
2170
2176
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2171
2177
|
return;
|
|
2172
2178
|
}
|
|
@@ -2188,7 +2194,7 @@ class Se {
|
|
|
2188
2194
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2189
2195
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2190
2196
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2191
|
-
]), this.focusGeneration !==
|
|
2197
|
+
]), this.focusGeneration !== n) return;
|
|
2192
2198
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2193
2199
|
break;
|
|
2194
2200
|
}
|
|
@@ -2230,8 +2236,8 @@ class Se {
|
|
|
2230
2236
|
return;
|
|
2231
2237
|
}
|
|
2232
2238
|
this.state = I.UNFOCUSING;
|
|
2233
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2234
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2239
|
+
const i = this.currentFocus, e = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2240
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE);
|
|
2235
2241
|
}
|
|
2236
2242
|
/**
|
|
2237
2243
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2271,8 +2277,8 @@ class Se {
|
|
|
2271
2277
|
*/
|
|
2272
2278
|
setDragOffset(t) {
|
|
2273
2279
|
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2274
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2275
|
-
|
|
2280
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2281
|
+
n.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && n.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = n.join(" ");
|
|
2276
2282
|
}
|
|
2277
2283
|
/**
|
|
2278
2284
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2281,8 +2287,8 @@ class Se {
|
|
|
2281
2287
|
*/
|
|
2282
2288
|
clearDragOffset(t, i = 150) {
|
|
2283
2289
|
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2284
|
-
const e = this.currentFocus,
|
|
2285
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2290
|
+
const e = this.currentFocus, n = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = n.x ?? 0, s = n.y ?? 0;
|
|
2291
|
+
a.push(`translate(${r}px, ${s}px)`), n.rotation !== void 0 && a.push(`rotate(${n.rotation}deg)`);
|
|
2286
2292
|
const h = a.join(" ");
|
|
2287
2293
|
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = h, setTimeout(() => {
|
|
2288
2294
|
this.currentFocus === e && (e.style.transition = "none");
|
|
@@ -2313,7 +2319,7 @@ class Se {
|
|
|
2313
2319
|
), this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2314
2320
|
}
|
|
2315
2321
|
}
|
|
2316
|
-
const Ie = 50,
|
|
2322
|
+
const Ie = 50, Re = 0.5, Te = 20, Ce = 0.3, Ae = 150, Le = 30, st = class st {
|
|
2317
2323
|
constructor(t, i) {
|
|
2318
2324
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = i, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2319
2325
|
}
|
|
@@ -2340,7 +2346,7 @@ const Ie = 50, Ce = 0.5, Ae = 20, Te = 0.3, Re = 150, Me = 30, ot = class ot {
|
|
|
2340
2346
|
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2341
2347
|
*/
|
|
2342
2348
|
hadRecentTouch() {
|
|
2343
|
-
return Date.now() - this.recentTouchTimestamp <
|
|
2349
|
+
return Date.now() - this.recentTouchTimestamp < st.TOUCH_CLICK_DELAY;
|
|
2344
2350
|
}
|
|
2345
2351
|
handleTouchStart(t) {
|
|
2346
2352
|
if (t.touches.length !== 1) return;
|
|
@@ -2357,31 +2363,31 @@ const Ie = 50, Ce = 0.5, Ae = 20, Te = 0.3, Re = 150, Me = 30, ot = class ot {
|
|
|
2357
2363
|
}
|
|
2358
2364
|
handleTouchMove(t) {
|
|
2359
2365
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2360
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2361
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2362
|
-
const s = Math.atan2(Math.abs(
|
|
2363
|
-
this.touchState.isHorizontalSwipe = s <=
|
|
2366
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, n = i.clientY - this.touchState.startY;
|
|
2367
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + n * n) > 10) {
|
|
2368
|
+
const s = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2369
|
+
this.touchState.isHorizontalSwipe = s <= Le;
|
|
2364
2370
|
}
|
|
2365
2371
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2366
2372
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = i.clientX;
|
|
2367
|
-
const a = e *
|
|
2373
|
+
const a = e * Ce;
|
|
2368
2374
|
this.callbacks.onDragOffset(a);
|
|
2369
2375
|
}
|
|
2370
2376
|
}
|
|
2371
2377
|
handleTouchEnd(t) {
|
|
2372
2378
|
if (!this.touchState) return;
|
|
2373
2379
|
this.recentTouchTimestamp = Date.now();
|
|
2374
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2380
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e, a = Math.abs(i);
|
|
2375
2381
|
let r = !1;
|
|
2376
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Ie ||
|
|
2382
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Ie || n >= Re && a >= Te) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2377
2383
|
}
|
|
2378
2384
|
handleTouchCancel(t) {
|
|
2379
2385
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2380
2386
|
}
|
|
2381
2387
|
};
|
|
2382
|
-
|
|
2383
|
-
let
|
|
2384
|
-
class
|
|
2388
|
+
st.TOUCH_CLICK_DELAY = 300;
|
|
2389
|
+
let pt = st;
|
|
2390
|
+
class Me {
|
|
2385
2391
|
constructor(t) {
|
|
2386
2392
|
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)
|
|
2387
2393
|
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
@@ -2395,7 +2401,7 @@ class Le {
|
|
|
2395
2401
|
for (const i of this.sources)
|
|
2396
2402
|
if ("folders" in i)
|
|
2397
2403
|
for (const e of i.folders) {
|
|
2398
|
-
const
|
|
2404
|
+
const n = i.recursive !== void 0 ? i.recursive : !0, a = await this.loadFromFolder(e, t, n);
|
|
2399
2405
|
this._discoveredUrls.push(...a);
|
|
2400
2406
|
}
|
|
2401
2407
|
else if ("files" in i) {
|
|
@@ -2441,9 +2447,9 @@ class Le {
|
|
|
2441
2447
|
// Alternative format
|
|
2442
2448
|
];
|
|
2443
2449
|
for (const e of i) {
|
|
2444
|
-
const
|
|
2445
|
-
if (
|
|
2446
|
-
return
|
|
2450
|
+
const n = t.match(e);
|
|
2451
|
+
if (n && n[1])
|
|
2452
|
+
return n[1];
|
|
2447
2453
|
}
|
|
2448
2454
|
return null;
|
|
2449
2455
|
}
|
|
@@ -2455,15 +2461,15 @@ class Le {
|
|
|
2455
2461
|
* @returns Promise resolving to array of image URLs
|
|
2456
2462
|
*/
|
|
2457
2463
|
async loadFromFolder(t, i, e = !0) {
|
|
2458
|
-
const
|
|
2459
|
-
if (!
|
|
2464
|
+
const n = this.extractFolderId(t);
|
|
2465
|
+
if (!n)
|
|
2460
2466
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2461
2467
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2462
|
-
return this.loadImagesDirectly(
|
|
2468
|
+
return this.loadImagesDirectly(n, i);
|
|
2463
2469
|
try {
|
|
2464
|
-
return e ? await this.loadImagesRecursively(
|
|
2470
|
+
return e ? await this.loadImagesRecursively(n, i) : await this.loadImagesFromSingleFolder(n, i);
|
|
2465
2471
|
} catch (a) {
|
|
2466
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2472
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(n, i);
|
|
2467
2473
|
}
|
|
2468
2474
|
}
|
|
2469
2475
|
/**
|
|
@@ -2473,7 +2479,7 @@ class Le {
|
|
|
2473
2479
|
* @returns Promise resolving to array of image URLs
|
|
2474
2480
|
*/
|
|
2475
2481
|
async loadImagesFromSingleFolder(t, i) {
|
|
2476
|
-
const e = [],
|
|
2482
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2477
2483
|
if (!s.ok)
|
|
2478
2484
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2479
2485
|
const c = (await s.json()).files.filter(
|
|
@@ -2491,10 +2497,10 @@ class Le {
|
|
|
2491
2497
|
*/
|
|
2492
2498
|
async loadFiles(t, i) {
|
|
2493
2499
|
const e = [];
|
|
2494
|
-
for (const
|
|
2495
|
-
const a = this.extractFileId(
|
|
2500
|
+
for (const n of t) {
|
|
2501
|
+
const a = this.extractFileId(n);
|
|
2496
2502
|
if (!a) {
|
|
2497
|
-
this.log(`Skipping invalid file URL: ${
|
|
2503
|
+
this.log(`Skipping invalid file URL: ${n}`);
|
|
2498
2504
|
continue;
|
|
2499
2505
|
}
|
|
2500
2506
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
@@ -2530,9 +2536,9 @@ class Le {
|
|
|
2530
2536
|
// Generic id parameter
|
|
2531
2537
|
];
|
|
2532
2538
|
for (const e of i) {
|
|
2533
|
-
const
|
|
2534
|
-
if (
|
|
2535
|
-
return
|
|
2539
|
+
const n = t.match(e);
|
|
2540
|
+
if (n && n[1])
|
|
2541
|
+
return n[1];
|
|
2536
2542
|
}
|
|
2537
2543
|
return null;
|
|
2538
2544
|
}
|
|
@@ -2543,7 +2549,7 @@ class Le {
|
|
|
2543
2549
|
* @returns Promise resolving to array of image URLs
|
|
2544
2550
|
*/
|
|
2545
2551
|
async loadImagesRecursively(t, i) {
|
|
2546
|
-
const e = [],
|
|
2552
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2547
2553
|
if (!s.ok)
|
|
2548
2554
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2549
2555
|
const h = await s.json(), c = h.files.filter(
|
|
@@ -2570,10 +2576,10 @@ class Le {
|
|
|
2570
2576
|
*/
|
|
2571
2577
|
async loadImagesDirectly(t, i) {
|
|
2572
2578
|
try {
|
|
2573
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2574
|
-
if (!
|
|
2579
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(e, { mode: "cors" });
|
|
2580
|
+
if (!n.ok)
|
|
2575
2581
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2576
|
-
const a = await
|
|
2582
|
+
const a = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2577
2583
|
return [...new Set(s.map((d) => d[1]))].map(
|
|
2578
2584
|
(d) => `https://drive.google.com/uc?export=view&id=${d}`
|
|
2579
2585
|
);
|
|
@@ -2666,13 +2672,13 @@ class ze {
|
|
|
2666
2672
|
if (!Array.isArray(t))
|
|
2667
2673
|
return console.warn("URLs must be an array:", t), [];
|
|
2668
2674
|
const e = [];
|
|
2669
|
-
for (const
|
|
2670
|
-
const a =
|
|
2675
|
+
for (const n of t) {
|
|
2676
|
+
const a = n.split("/").pop() || n;
|
|
2671
2677
|
if (!i.isAllowed(a)) {
|
|
2672
|
-
this.log(`Skipping filtered URL: ${
|
|
2678
|
+
this.log(`Skipping filtered URL: ${n}`);
|
|
2673
2679
|
continue;
|
|
2674
2680
|
}
|
|
2675
|
-
this.validateUrls ? await this.validateUrl(
|
|
2681
|
+
this.validateUrls ? await this.validateUrl(n) ? e.push(n) : console.warn(`Skipping invalid/missing URL: ${n}`) : e.push(n);
|
|
2676
2682
|
}
|
|
2677
2683
|
return e;
|
|
2678
2684
|
}
|
|
@@ -2686,16 +2692,16 @@ class ze {
|
|
|
2686
2692
|
async processPath(t, i, e) {
|
|
2687
2693
|
if (!Array.isArray(i))
|
|
2688
2694
|
return console.warn("files must be an array:", i), [];
|
|
2689
|
-
const
|
|
2695
|
+
const n = [];
|
|
2690
2696
|
for (const a of i) {
|
|
2691
2697
|
if (!e.isAllowed(a)) {
|
|
2692
2698
|
this.log(`Skipping filtered file: ${a}`);
|
|
2693
2699
|
continue;
|
|
2694
2700
|
}
|
|
2695
2701
|
const r = this.constructUrl(t, a);
|
|
2696
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2702
|
+
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2697
2703
|
}
|
|
2698
|
-
return
|
|
2704
|
+
return n;
|
|
2699
2705
|
}
|
|
2700
2706
|
/**
|
|
2701
2707
|
* Process a JSON endpoint source
|
|
@@ -2706,17 +2712,17 @@ class ze {
|
|
|
2706
2712
|
*/
|
|
2707
2713
|
async processJson(t, i) {
|
|
2708
2714
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2709
|
-
const e = new AbortController(),
|
|
2715
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), 1e4);
|
|
2710
2716
|
try {
|
|
2711
2717
|
const a = await fetch(t, { signal: e.signal });
|
|
2712
|
-
if (clearTimeout(
|
|
2718
|
+
if (clearTimeout(n), !a.ok)
|
|
2713
2719
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
2714
2720
|
const r = await a.json();
|
|
2715
2721
|
if (!r || !Array.isArray(r.images))
|
|
2716
2722
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2717
2723
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
2718
2724
|
} catch (a) {
|
|
2719
|
-
throw clearTimeout(
|
|
2725
|
+
throw clearTimeout(n), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
2720
2726
|
}
|
|
2721
2727
|
}
|
|
2722
2728
|
/**
|
|
@@ -2738,11 +2744,11 @@ class ze {
|
|
|
2738
2744
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2739
2745
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2740
2746
|
try {
|
|
2741
|
-
const e = new AbortController(),
|
|
2747
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout), a = await fetch(t, {
|
|
2742
2748
|
method: "HEAD",
|
|
2743
2749
|
signal: e.signal
|
|
2744
2750
|
});
|
|
2745
|
-
return clearTimeout(
|
|
2751
|
+
return clearTimeout(n), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
2746
2752
|
} catch (e) {
|
|
2747
2753
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
2748
2754
|
}
|
|
@@ -2759,8 +2765,8 @@ class ze {
|
|
|
2759
2765
|
return `${e}/${i}`;
|
|
2760
2766
|
if (typeof window > "u")
|
|
2761
2767
|
return `${e}/${i}`;
|
|
2762
|
-
const
|
|
2763
|
-
return `${
|
|
2768
|
+
const n = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2769
|
+
return `${n}${r}/${i}`;
|
|
2764
2770
|
}
|
|
2765
2771
|
/**
|
|
2766
2772
|
* Check if URL is absolute (contains protocol)
|
|
@@ -2794,16 +2800,16 @@ class Fe {
|
|
|
2794
2800
|
*/
|
|
2795
2801
|
async prepare(t) {
|
|
2796
2802
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2797
|
-
const i = this.loaders.map((e,
|
|
2798
|
-
this.log(`Loader ${
|
|
2803
|
+
const i = this.loaders.map((e, n) => e.prepare(t).then(() => {
|
|
2804
|
+
this.log(`Loader ${n} prepared with ${e.imagesLength()} images`);
|
|
2799
2805
|
}).catch((a) => {
|
|
2800
|
-
console.warn(`Loader ${
|
|
2806
|
+
console.warn(`Loader ${n} failed to prepare:`, a);
|
|
2801
2807
|
}));
|
|
2802
2808
|
await Promise.all(i);
|
|
2803
2809
|
for (const e of this.loaders)
|
|
2804
2810
|
if (e.isPrepared()) {
|
|
2805
|
-
const
|
|
2806
|
-
this._discoveredUrls.push(...
|
|
2811
|
+
const n = e.imageURLs();
|
|
2812
|
+
this._discoveredUrls.push(...n);
|
|
2807
2813
|
}
|
|
2808
2814
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2809
2815
|
}
|
|
@@ -2839,7 +2845,7 @@ class Fe {
|
|
|
2839
2845
|
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2840
2846
|
}
|
|
2841
2847
|
}
|
|
2842
|
-
class
|
|
2848
|
+
class Oe {
|
|
2843
2849
|
/**
|
|
2844
2850
|
* Create a new ImageFilter
|
|
2845
2851
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2876,7 +2882,7 @@ class $e {
|
|
|
2876
2882
|
// isAllowedDate(date: Date): boolean
|
|
2877
2883
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2878
2884
|
}
|
|
2879
|
-
const
|
|
2885
|
+
const $e = `
|
|
2880
2886
|
.fbn-ic-gallery {
|
|
2881
2887
|
position: relative;
|
|
2882
2888
|
width: 100%;
|
|
@@ -2926,21 +2932,21 @@ const De = `
|
|
|
2926
2932
|
display: none !important;
|
|
2927
2933
|
}
|
|
2928
2934
|
`;
|
|
2929
|
-
function
|
|
2935
|
+
function De() {
|
|
2930
2936
|
if (typeof document > "u") return;
|
|
2931
|
-
const
|
|
2932
|
-
if (document.getElementById(
|
|
2937
|
+
const o = "fbn-ic-functional-styles";
|
|
2938
|
+
if (document.getElementById(o)) return;
|
|
2933
2939
|
const t = document.createElement("style");
|
|
2934
|
-
t.id =
|
|
2940
|
+
t.id = o, t.textContent = $e, document.head.appendChild(t);
|
|
2935
2941
|
}
|
|
2936
2942
|
class Pe {
|
|
2937
2943
|
constructor(t = {}) {
|
|
2938
|
-
this.fullConfig = Wt(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
|
|
2944
|
+
this.fullConfig = Wt(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 Yt(this.fullConfig.animation), this.layoutEngine = new me({
|
|
2939
2945
|
layout: this.fullConfig.layout,
|
|
2940
2946
|
image: this.fullConfig.image
|
|
2941
|
-
}), this.zoomEngine = new
|
|
2947
|
+
}), this.zoomEngine = new Ee(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = tt(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
2942
2948
|
const i = this.fullConfig.animation.entry || y.animation.entry;
|
|
2943
|
-
this.entryAnimationEngine = new
|
|
2949
|
+
this.entryAnimationEngine = new ne(
|
|
2944
2950
|
i,
|
|
2945
2951
|
this.fullConfig.layout.algorithm
|
|
2946
2952
|
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
@@ -2950,7 +2956,7 @@ class Pe {
|
|
|
2950
2956
|
*/
|
|
2951
2957
|
createImageFilter() {
|
|
2952
2958
|
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
2953
|
-
return new
|
|
2959
|
+
return new Oe(t);
|
|
2954
2960
|
}
|
|
2955
2961
|
/**
|
|
2956
2962
|
* Create appropriate image loader based on config
|
|
@@ -2960,7 +2966,7 @@ class Pe {
|
|
|
2960
2966
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
2961
2967
|
if (!t || t.length === 0)
|
|
2962
2968
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2963
|
-
const e = t.map((
|
|
2969
|
+
const e = t.map((n) => this.createLoaderFromEntry(n, i));
|
|
2964
2970
|
return e.length === 1 ? e[0] : new Fe({
|
|
2965
2971
|
loaders: e,
|
|
2966
2972
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
@@ -2971,7 +2977,7 @@ class Pe {
|
|
|
2971
2977
|
*/
|
|
2972
2978
|
createLoaderFromEntry(t, i) {
|
|
2973
2979
|
if ("static" in t) {
|
|
2974
|
-
const e = t.static,
|
|
2980
|
+
const e = t.static, n = {
|
|
2975
2981
|
...e,
|
|
2976
2982
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
2977
2983
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -2979,14 +2985,14 @@ class Pe {
|
|
|
2979
2985
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
2980
2986
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2981
2987
|
};
|
|
2982
|
-
return new ze(
|
|
2988
|
+
return new ze(n);
|
|
2983
2989
|
} else if ("googleDrive" in t) {
|
|
2984
|
-
const e = t.googleDrive,
|
|
2990
|
+
const e = t.googleDrive, n = {
|
|
2985
2991
|
...e,
|
|
2986
2992
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
2987
2993
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2988
2994
|
};
|
|
2989
|
-
return new
|
|
2995
|
+
return new Me(n);
|
|
2990
2996
|
} else
|
|
2991
2997
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2992
2998
|
}
|
|
@@ -2995,16 +3001,16 @@ class Pe {
|
|
|
2995
3001
|
*/
|
|
2996
3002
|
async init() {
|
|
2997
3003
|
try {
|
|
2998
|
-
if (
|
|
3004
|
+
if (De(), this.containerRef)
|
|
2999
3005
|
this.containerEl = this.containerRef;
|
|
3000
3006
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3001
3007
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3002
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
3008
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new pt(this.containerEl, {
|
|
3003
3009
|
onNext: () => this.navigateToNextImage(),
|
|
3004
3010
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3005
3011
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3006
3012
|
onDragEnd: (t) => {
|
|
3007
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
3013
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ae);
|
|
3008
3014
|
}
|
|
3009
3015
|
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3010
3016
|
} catch (t) {
|
|
@@ -3047,7 +3053,7 @@ class Pe {
|
|
|
3047
3053
|
navigateToNextImage() {
|
|
3048
3054
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3049
3055
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3050
|
-
(
|
|
3056
|
+
(n) => n.dataset.imageId === String(t)
|
|
3051
3057
|
);
|
|
3052
3058
|
if (!i) return;
|
|
3053
3059
|
const e = this.imageLayouts[t];
|
|
@@ -3059,7 +3065,7 @@ class Pe {
|
|
|
3059
3065
|
navigateToPreviousImage() {
|
|
3060
3066
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3061
3067
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3062
|
-
(
|
|
3068
|
+
(n) => n.dataset.imageId === String(t)
|
|
3063
3069
|
);
|
|
3064
3070
|
if (!i) return;
|
|
3065
3071
|
const e = this.imageLayouts[t];
|
|
@@ -3075,8 +3081,8 @@ class Pe {
|
|
|
3075
3081
|
}, 500));
|
|
3076
3082
|
}
|
|
3077
3083
|
getImageHeight() {
|
|
3078
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3079
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3084
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, n = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3085
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, n) : t <= i.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);
|
|
3080
3086
|
}
|
|
3081
3087
|
/**
|
|
3082
3088
|
* Get container bounds for layout calculations
|
|
@@ -3099,12 +3105,12 @@ class Pe {
|
|
|
3099
3105
|
this.showError("No images found."), this.showLoading(!1);
|
|
3100
3106
|
return;
|
|
3101
3107
|
}
|
|
3102
|
-
const e = this.getContainerBounds(),
|
|
3103
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3108
|
+
const e = this.getContainerBounds(), n = this.getImageHeight(), a = window.innerWidth;
|
|
3109
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3104
3110
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3105
3111
|
e,
|
|
3106
3112
|
t,
|
|
3107
|
-
|
|
3113
|
+
n,
|
|
3108
3114
|
a
|
|
3109
3115
|
);
|
|
3110
3116
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3122,7 +3128,7 @@ class Pe {
|
|
|
3122
3128
|
if (!this.containerEl) return;
|
|
3123
3129
|
const e = this.getContainerBounds();
|
|
3124
3130
|
this.currentImageHeight = i;
|
|
3125
|
-
const
|
|
3131
|
+
const n = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3126
3132
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3127
3133
|
let r = 0;
|
|
3128
3134
|
const s = (c) => {
|
|
@@ -3134,7 +3140,7 @@ class Pe {
|
|
|
3134
3140
|
}, g = {
|
|
3135
3141
|
x: parseFloat(c.dataset.endX),
|
|
3136
3142
|
y: parseFloat(c.dataset.endY)
|
|
3137
|
-
}, p = parseFloat(c.dataset.imageWidth), b = parseFloat(c.dataset.imageHeight), f = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale),
|
|
3143
|
+
}, p = parseFloat(c.dataset.imageWidth), b = parseFloat(c.dataset.imageHeight), f = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale), S = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : f, v = c.dataset.startScale ? parseFloat(c.dataset.startScale) : m, w = this.entryAnimationEngine.getTiming();
|
|
3138
3144
|
ee({
|
|
3139
3145
|
element: c,
|
|
3140
3146
|
startPosition: u,
|
|
@@ -3146,7 +3152,7 @@ class Pe {
|
|
|
3146
3152
|
rotation: f,
|
|
3147
3153
|
scale: m,
|
|
3148
3154
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3149
|
-
startRotation:
|
|
3155
|
+
startRotation: S,
|
|
3150
3156
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3151
3157
|
startScale: v
|
|
3152
3158
|
});
|
|
@@ -3178,7 +3184,7 @@ class Pe {
|
|
|
3178
3184
|
return;
|
|
3179
3185
|
}
|
|
3180
3186
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3181
|
-
if (
|
|
3187
|
+
if (n !== this.loadGeneration) {
|
|
3182
3188
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3183
3189
|
return;
|
|
3184
3190
|
}
|
|
@@ -3210,39 +3216,39 @@ class Pe {
|
|
|
3210
3216
|
l.style.position = "absolute", l.style.width = "auto", l.style.height = `${i}px`, l.style.left = `${u.x}px`, l.style.top = `${u.y}px`, u.zIndex && (l.style.zIndex = String(u.zIndex)), nt(l, this.defaultClassName), l.addEventListener("mouseenter", () => {
|
|
3211
3217
|
if (this.hoveredImage = { element: l, layout: u }, !this.zoomEngine.isInvolved(l)) {
|
|
3212
3218
|
const g = l.cachedRenderedWidth;
|
|
3213
|
-
|
|
3219
|
+
gt(l, this.fullConfig.styling?.hover, i, g), nt(l, this.hoverClassName);
|
|
3214
3220
|
}
|
|
3215
3221
|
}), l.addEventListener("mouseleave", () => {
|
|
3216
3222
|
if (this.hoveredImage = null, !this.zoomEngine.isInvolved(l)) {
|
|
3217
3223
|
const g = l.cachedRenderedWidth;
|
|
3218
|
-
|
|
3224
|
+
gt(l, this.fullConfig.styling?.default, i, g), mt(l, this.hoverClassName), nt(l, this.defaultClassName);
|
|
3219
3225
|
}
|
|
3220
3226
|
}), l.addEventListener("click", (g) => {
|
|
3221
3227
|
g.stopPropagation(), this.handleImageClick(l, u);
|
|
3222
3228
|
}), l.style.opacity = "0", l.style.transition = this.entryAnimationEngine.getTransitionCSS(), l.onload = () => {
|
|
3223
|
-
if (
|
|
3229
|
+
if (n !== this.loadGeneration)
|
|
3224
3230
|
return;
|
|
3225
3231
|
const g = l.naturalWidth / l.naturalHeight, p = i * g;
|
|
3226
|
-
l.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${d}] Called with imageHeight=${i}, renderedWidth=${p}`), l.style.width = `${p}px`, l.cachedRenderedWidth = p, l.aspectRatio = g,
|
|
3232
|
+
l.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${d}] Called with imageHeight=${i}, renderedWidth=${p}`), l.style.width = `${p}px`, l.cachedRenderedWidth = p, l.aspectRatio = g, gt(l, this.fullConfig.styling?.default, i, p);
|
|
3227
3233
|
const b = { x: u.x, y: u.y }, f = { width: p, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3228
3234
|
b,
|
|
3229
3235
|
f,
|
|
3230
3236
|
e,
|
|
3231
3237
|
d,
|
|
3232
3238
|
t.length
|
|
3233
|
-
),
|
|
3239
|
+
), S = this.entryAnimationEngine.calculateStartRotation(u.rotation), v = this.entryAnimationEngine.calculateStartScale(u.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
3234
3240
|
u.rotation,
|
|
3235
3241
|
u.scale,
|
|
3236
3242
|
p,
|
|
3237
3243
|
i
|
|
3238
|
-
),
|
|
3244
|
+
), E = this.entryAnimationEngine.buildStartTransform(
|
|
3239
3245
|
m,
|
|
3240
3246
|
b,
|
|
3241
3247
|
u.rotation,
|
|
3242
3248
|
u.scale,
|
|
3243
3249
|
p,
|
|
3244
3250
|
i,
|
|
3245
|
-
|
|
3251
|
+
S,
|
|
3246
3252
|
v
|
|
3247
3253
|
);
|
|
3248
3254
|
this.fullConfig.config.debug?.enabled && d < 3 && console.log(`Image ${d}:`, {
|
|
@@ -3253,13 +3259,13 @@ class Pe {
|
|
|
3253
3259
|
finalTransform: w,
|
|
3254
3260
|
renderedWidth: p,
|
|
3255
3261
|
renderedHeight: i
|
|
3256
|
-
}), l.style.transform =
|
|
3262
|
+
}), l.style.transform = E, l.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || S !== u.rotation || v !== u.scale) && (l.dataset.startX = String(m.x), l.dataset.startY = String(m.y), l.dataset.endX = String(b.x), l.dataset.endY = String(b.y), l.dataset.imageWidth = String(p), l.dataset.imageHeight = String(i), l.dataset.rotation = String(u.rotation), l.dataset.scale = String(u.scale), l.dataset.startRotation = String(S), l.dataset.startScale = String(v)), this.displayQueue.push(l);
|
|
3257
3263
|
}, l.onerror = () => r++, l.src = c;
|
|
3258
3264
|
});
|
|
3259
3265
|
}
|
|
3260
3266
|
async handleImageClick(t, i) {
|
|
3261
3267
|
if (!this.containerEl) return;
|
|
3262
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3268
|
+
const e = this.zoomEngine.isFocused(t), n = {
|
|
3263
3269
|
width: this.containerEl.offsetWidth,
|
|
3264
3270
|
height: this.containerEl.offsetHeight
|
|
3265
3271
|
};
|
|
@@ -3267,7 +3273,7 @@ class Pe {
|
|
|
3267
3273
|
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter();
|
|
3268
3274
|
else {
|
|
3269
3275
|
const a = t.dataset.imageId;
|
|
3270
|
-
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t,
|
|
3276
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3271
3277
|
}
|
|
3272
3278
|
}
|
|
3273
3279
|
/**
|
|
@@ -3300,10 +3306,10 @@ class Pe {
|
|
|
3300
3306
|
}
|
|
3301
3307
|
function Ue() {
|
|
3302
3308
|
if (typeof document > "u") return;
|
|
3303
|
-
const
|
|
3304
|
-
if (document.getElementById(
|
|
3309
|
+
const o = "fbn-ic-styles";
|
|
3310
|
+
if (document.getElementById(o)) return;
|
|
3305
3311
|
const t = document.createElement("style");
|
|
3306
|
-
t.id =
|
|
3312
|
+
t.id = o, t.textContent = $t, document.head.appendChild(t);
|
|
3307
3313
|
}
|
|
3308
3314
|
Ue();
|
|
3309
3315
|
function _e() {
|
|
@@ -3311,7 +3317,7 @@ function _e() {
|
|
|
3311
3317
|
console.warn("ImageCloud: Document not available (not in browser environment)");
|
|
3312
3318
|
return;
|
|
3313
3319
|
}
|
|
3314
|
-
const
|
|
3320
|
+
const o = () => {
|
|
3315
3321
|
const t = document.querySelectorAll("[data-image-cloud], [data-image-gallery]");
|
|
3316
3322
|
t.length !== 0 && t.forEach((i) => {
|
|
3317
3323
|
const e = i;
|
|
@@ -3319,11 +3325,11 @@ function _e() {
|
|
|
3319
3325
|
console.error("ImageCloud: Container with data-image-cloud must have an id attribute");
|
|
3320
3326
|
return;
|
|
3321
3327
|
}
|
|
3322
|
-
const
|
|
3328
|
+
const n = e.dataset.config || e.dataset.galleryConfig;
|
|
3323
3329
|
let a;
|
|
3324
|
-
if (
|
|
3330
|
+
if (n)
|
|
3325
3331
|
try {
|
|
3326
|
-
const s = JSON.parse(
|
|
3332
|
+
const s = JSON.parse(n);
|
|
3327
3333
|
a = {
|
|
3328
3334
|
container: e.id,
|
|
3329
3335
|
...s
|
|
@@ -3341,7 +3347,7 @@ function _e() {
|
|
|
3341
3347
|
});
|
|
3342
3348
|
});
|
|
3343
3349
|
};
|
|
3344
|
-
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded",
|
|
3350
|
+
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", o) : o();
|
|
3345
3351
|
}
|
|
3346
3352
|
_e();
|
|
3347
3353
|
export {
|