@frybynite/image-cloud 0.9.3 → 0.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/image-cloud-auto-init.js +455 -388
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +1005 -938
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +34 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +16 -2
- package/dist/react.d.ts +16 -2
- package/dist/react.js +913 -846
- package/dist/react.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/vue.d.ts +16 -2
- package/dist/vue.js +994 -927
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +16 -2
- package/dist/web-component.js +740 -673
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/image-cloud.js
CHANGED
|
@@ -8,23 +8,23 @@ const mt = Object.freeze({
|
|
|
8
8
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
9
9
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
10
10
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
11
|
-
}),
|
|
11
|
+
}), At = 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
|
+
}), Rt = 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
|
-
}),
|
|
21
|
+
}), yt = Object.freeze({
|
|
22
22
|
type: "linear"
|
|
23
23
|
}), vt = Object.freeze({
|
|
24
24
|
mode: "none"
|
|
25
|
-
}),
|
|
25
|
+
}), Et = Object.freeze({
|
|
26
26
|
mode: "none"
|
|
27
|
-
}),
|
|
27
|
+
}), Ft = Object.freeze({
|
|
28
28
|
default: Object.freeze({
|
|
29
29
|
border: Object.freeze({
|
|
30
30
|
width: 0,
|
|
@@ -64,7 +64,7 @@ const mt = Object.freeze({
|
|
|
64
64
|
}), kt = Object.freeze({
|
|
65
65
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
66
66
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
67
|
-
}),
|
|
67
|
+
}), Bt = Object.freeze({
|
|
68
68
|
mode: "adaptive",
|
|
69
69
|
// Default to adaptive sizing
|
|
70
70
|
minSize: 50,
|
|
@@ -76,15 +76,15 @@ const mt = Object.freeze({
|
|
|
76
76
|
// No variance by default
|
|
77
77
|
max: 1
|
|
78
78
|
})
|
|
79
|
-
}),
|
|
79
|
+
}), jt = Object.freeze({
|
|
80
80
|
mode: "none",
|
|
81
81
|
range: Object.freeze({
|
|
82
82
|
min: -15,
|
|
83
83
|
max: 15
|
|
84
84
|
})
|
|
85
|
-
}),
|
|
86
|
-
sizing:
|
|
87
|
-
rotation:
|
|
85
|
+
}), Mt = Object.freeze({
|
|
86
|
+
sizing: Bt,
|
|
87
|
+
rotation: jt
|
|
88
88
|
}), zt = Object.freeze({
|
|
89
89
|
validateUrls: !0,
|
|
90
90
|
validationTimeout: 5e3,
|
|
@@ -94,7 +94,7 @@ const mt = Object.freeze({
|
|
|
94
94
|
enabled: !1,
|
|
95
95
|
centers: !1,
|
|
96
96
|
loaders: !1
|
|
97
|
-
}),
|
|
97
|
+
}), Wt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Gt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), qt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Xt = Object.freeze({ speed: 4e3, direction: "clockwise" }), Dt = Object.freeze({ type: "none" }), A = Object.freeze({
|
|
98
98
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
99
99
|
loaders: [],
|
|
100
100
|
// Shared loader settings and debug config
|
|
@@ -103,7 +103,7 @@ const mt = Object.freeze({
|
|
|
103
103
|
debug: Ot
|
|
104
104
|
}),
|
|
105
105
|
// Image sizing and rotation configuration
|
|
106
|
-
image:
|
|
106
|
+
image: Mt,
|
|
107
107
|
// Pattern-based layout configuration
|
|
108
108
|
layout: Object.freeze({
|
|
109
109
|
algorithm: "radial",
|
|
@@ -155,9 +155,9 @@ const mt = Object.freeze({
|
|
|
155
155
|
}),
|
|
156
156
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
157
157
|
// smooth deceleration
|
|
158
|
-
path:
|
|
158
|
+
path: yt,
|
|
159
159
|
rotation: vt,
|
|
160
|
-
scale:
|
|
160
|
+
scale: Et
|
|
161
161
|
}),
|
|
162
162
|
idle: Dt
|
|
163
163
|
}),
|
|
@@ -181,53 +181,55 @@ const mt = Object.freeze({
|
|
|
181
181
|
// UI configuration
|
|
182
182
|
ui: Object.freeze({
|
|
183
183
|
showLoadingSpinner: !1,
|
|
184
|
-
showImageCounter: !1
|
|
184
|
+
showImageCounter: !1,
|
|
185
|
+
showNavButtons: !1,
|
|
186
|
+
showFocusOutline: !1
|
|
185
187
|
}),
|
|
186
188
|
// Image styling
|
|
187
|
-
styling:
|
|
189
|
+
styling: Ft
|
|
188
190
|
});
|
|
189
|
-
function Z(
|
|
190
|
-
if (!
|
|
191
|
-
if (!t) return { ...
|
|
192
|
-
const i = { ...
|
|
193
|
-
return t.border !== void 0 && (i.border = { ...
|
|
194
|
-
}
|
|
195
|
-
function Yt(
|
|
196
|
-
if (!t) return { ...
|
|
197
|
-
const i = Z(
|
|
198
|
-
Z(i,
|
|
191
|
+
function Z(o, t) {
|
|
192
|
+
if (!o) return t || {};
|
|
193
|
+
if (!t) return { ...o };
|
|
194
|
+
const i = { ...o };
|
|
195
|
+
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;
|
|
196
|
+
}
|
|
197
|
+
function Yt(o, t) {
|
|
198
|
+
if (!t) return { ...o };
|
|
199
|
+
const i = Z(o.default, t.default), e = Z(
|
|
200
|
+
Z(i, o.hover),
|
|
199
201
|
t.hover
|
|
200
|
-
),
|
|
201
|
-
Z(i,
|
|
202
|
+
), n = Z(
|
|
203
|
+
Z(i, o.focused),
|
|
202
204
|
t.focused
|
|
203
205
|
);
|
|
204
206
|
return {
|
|
205
207
|
default: i,
|
|
206
208
|
hover: e,
|
|
207
|
-
focused:
|
|
209
|
+
focused: n
|
|
208
210
|
};
|
|
209
211
|
}
|
|
210
|
-
function Vt(
|
|
211
|
-
if (!t) return { ...
|
|
212
|
-
const i = { ...
|
|
212
|
+
function Vt(o, t) {
|
|
213
|
+
if (!t) return { ...o };
|
|
214
|
+
const i = { ...o };
|
|
213
215
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
214
|
-
...
|
|
216
|
+
...o.sizing,
|
|
215
217
|
...t.sizing
|
|
216
218
|
}, t.sizing.variance)) {
|
|
217
|
-
const e = t.sizing.variance,
|
|
218
|
-
i.sizing.variance = { min:
|
|
219
|
+
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1, s = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : o.sizing?.variance?.max ?? 1;
|
|
220
|
+
i.sizing.variance = { min: n, max: s };
|
|
219
221
|
}
|
|
220
222
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
221
|
-
...
|
|
223
|
+
...o.rotation,
|
|
222
224
|
...t.rotation
|
|
223
225
|
}, t.rotation.range)) {
|
|
224
|
-
const e = t.rotation.range,
|
|
225
|
-
i.rotation.range = { min:
|
|
226
|
+
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15, s = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : o.rotation?.range?.max ?? 15;
|
|
227
|
+
i.rotation.range = { min: n, max: s };
|
|
226
228
|
}
|
|
227
229
|
return i;
|
|
228
230
|
}
|
|
229
|
-
function Jt(
|
|
230
|
-
const t =
|
|
231
|
+
function Jt(o) {
|
|
232
|
+
const t = o.layout?.rotation;
|
|
231
233
|
if (t && "enabled" in t)
|
|
232
234
|
return {
|
|
233
235
|
rotation: {
|
|
@@ -236,8 +238,8 @@ function Jt(n) {
|
|
|
236
238
|
}
|
|
237
239
|
};
|
|
238
240
|
}
|
|
239
|
-
function Kt(
|
|
240
|
-
const t =
|
|
241
|
+
function Kt(o) {
|
|
242
|
+
const t = o.layout?.sizing?.variance;
|
|
241
243
|
if (t)
|
|
242
244
|
return {
|
|
243
245
|
sizing: {
|
|
@@ -247,109 +249,109 @@ function Kt(n) {
|
|
|
247
249
|
}
|
|
248
250
|
};
|
|
249
251
|
}
|
|
250
|
-
function Zt(
|
|
251
|
-
const t = Jt(
|
|
252
|
-
let e =
|
|
252
|
+
function Zt(o = {}) {
|
|
253
|
+
const t = Jt(o), i = Kt(o);
|
|
254
|
+
let e = o.image;
|
|
253
255
|
(t || i) && (e = {
|
|
254
256
|
...i || {},
|
|
255
257
|
...t || {},
|
|
256
258
|
...e
|
|
257
|
-
}, e.rotation && t?.rotation &&
|
|
259
|
+
}, e.rotation && t?.rotation && o.image?.rotation && (e.rotation = {
|
|
258
260
|
...t.rotation,
|
|
259
|
-
...
|
|
261
|
+
...o.image.rotation
|
|
260
262
|
}));
|
|
261
|
-
const
|
|
262
|
-
|
|
263
|
+
const n = [...o.loaders ?? []];
|
|
264
|
+
o.images && o.images.length > 0 && n.unshift({
|
|
263
265
|
static: {
|
|
264
|
-
sources: [{ urls:
|
|
266
|
+
sources: [{ urls: o.images }]
|
|
265
267
|
}
|
|
266
268
|
});
|
|
267
269
|
const r = {
|
|
268
270
|
loaders: {
|
|
269
271
|
...zt,
|
|
270
|
-
...
|
|
272
|
+
...o.config?.loaders ?? {}
|
|
271
273
|
}
|
|
272
|
-
},
|
|
273
|
-
loaders:
|
|
274
|
+
}, a = {
|
|
275
|
+
loaders: n,
|
|
274
276
|
config: r,
|
|
275
|
-
image: Vt(
|
|
276
|
-
layout: { ...
|
|
277
|
-
animation: { ...
|
|
278
|
-
interaction: { ...
|
|
279
|
-
ui: { ...
|
|
280
|
-
styling: Yt(
|
|
277
|
+
image: Vt(Mt, e),
|
|
278
|
+
layout: { ...A.layout },
|
|
279
|
+
animation: { ...A.animation },
|
|
280
|
+
interaction: { ...A.interaction },
|
|
281
|
+
ui: { ...A.ui },
|
|
282
|
+
styling: Yt(Ft, o.styling)
|
|
281
283
|
};
|
|
282
|
-
|
|
283
|
-
...
|
|
284
|
-
...
|
|
285
|
-
},
|
|
286
|
-
...
|
|
287
|
-
mobile:
|
|
288
|
-
tablet:
|
|
289
|
-
}),
|
|
290
|
-
...
|
|
291
|
-
...
|
|
292
|
-
})),
|
|
293
|
-
...
|
|
294
|
-
...
|
|
295
|
-
},
|
|
296
|
-
...
|
|
297
|
-
...
|
|
298
|
-
}),
|
|
299
|
-
...
|
|
300
|
-
...
|
|
301
|
-
}),
|
|
302
|
-
...
|
|
303
|
-
...
|
|
304
|
-
start:
|
|
305
|
-
...
|
|
306
|
-
...
|
|
307
|
-
circular:
|
|
308
|
-
} :
|
|
309
|
-
timing:
|
|
310
|
-
path:
|
|
311
|
-
rotation:
|
|
312
|
-
scale:
|
|
313
|
-
}),
|
|
284
|
+
o.layout && (a.layout = {
|
|
285
|
+
...A.layout,
|
|
286
|
+
...o.layout
|
|
287
|
+
}, o.layout.responsive && (a.layout.responsive = {
|
|
288
|
+
...A.layout.responsive,
|
|
289
|
+
mobile: o.layout.responsive.mobile ? { ...A.layout.responsive.mobile, ...o.layout.responsive.mobile } : A.layout.responsive.mobile,
|
|
290
|
+
tablet: o.layout.responsive.tablet ? { ...A.layout.responsive.tablet, ...o.layout.responsive.tablet } : A.layout.responsive.tablet
|
|
291
|
+
}), o.layout.spacing && (a.layout.spacing = {
|
|
292
|
+
...A.layout.spacing,
|
|
293
|
+
...o.layout.spacing
|
|
294
|
+
})), o.animation && (a.animation = {
|
|
295
|
+
...A.animation,
|
|
296
|
+
...o.animation
|
|
297
|
+
}, o.animation.easing && (a.animation.easing = {
|
|
298
|
+
...A.animation.easing,
|
|
299
|
+
...o.animation.easing
|
|
300
|
+
}), o.animation.queue && (a.animation.queue = {
|
|
301
|
+
...A.animation.queue,
|
|
302
|
+
...o.animation.queue
|
|
303
|
+
}), o.animation.entry && (a.animation.entry = {
|
|
304
|
+
...A.animation.entry,
|
|
305
|
+
...o.animation.entry,
|
|
306
|
+
start: o.animation.entry.start ? {
|
|
307
|
+
...A.animation.entry.start,
|
|
308
|
+
...o.animation.entry.start,
|
|
309
|
+
circular: o.animation.entry.start.circular ? { ...A.animation.entry.start.circular, ...o.animation.entry.start.circular } : A.animation.entry.start.circular
|
|
310
|
+
} : A.animation.entry.start,
|
|
311
|
+
timing: o.animation.entry.timing ? { ...A.animation.entry.timing, ...o.animation.entry.timing } : A.animation.entry.timing,
|
|
312
|
+
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : A.animation.entry.path,
|
|
313
|
+
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : A.animation.entry.rotation,
|
|
314
|
+
scale: o.animation.entry.scale ? { ...Et, ...o.animation.entry.scale } : A.animation.entry.scale
|
|
315
|
+
}), o.animation.idle && (a.animation.idle = {
|
|
314
316
|
...Dt,
|
|
315
|
-
...
|
|
316
|
-
})),
|
|
317
|
-
...
|
|
318
|
-
...
|
|
319
|
-
},
|
|
320
|
-
...
|
|
321
|
-
...
|
|
322
|
-
}),
|
|
323
|
-
...
|
|
324
|
-
...
|
|
317
|
+
...o.animation.idle
|
|
318
|
+
})), o.interaction && (a.interaction = {
|
|
319
|
+
...A.interaction,
|
|
320
|
+
...o.interaction
|
|
321
|
+
}, o.interaction.focus && (a.interaction.focus = {
|
|
322
|
+
...A.interaction.focus,
|
|
323
|
+
...o.interaction.focus
|
|
324
|
+
}), o.interaction.navigation && (a.interaction.navigation = {
|
|
325
|
+
...A.interaction.navigation,
|
|
326
|
+
...o.interaction.navigation
|
|
325
327
|
}));
|
|
326
|
-
const
|
|
327
|
-
if (
|
|
328
|
-
...
|
|
329
|
-
...
|
|
330
|
-
...
|
|
331
|
-
},
|
|
328
|
+
const c = o.rendering?.ui;
|
|
329
|
+
if (c && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), a.ui = {
|
|
330
|
+
...A.ui,
|
|
331
|
+
...c,
|
|
332
|
+
...o.ui
|
|
333
|
+
}, a.config.debug = {
|
|
332
334
|
...Ot,
|
|
333
|
-
...
|
|
334
|
-
},
|
|
335
|
-
const
|
|
336
|
-
|
|
337
|
-
...
|
|
338
|
-
default: { ...
|
|
339
|
-
hover: { ...
|
|
335
|
+
...o.config?.debug ?? {}
|
|
336
|
+
}, a.layout.algorithm === "honeycomb" && a.styling) {
|
|
337
|
+
const l = { shape: "hexagon", mode: "height-relative" };
|
|
338
|
+
a.styling = {
|
|
339
|
+
...a.styling,
|
|
340
|
+
default: { ...a.styling.default, clipPath: l },
|
|
341
|
+
hover: { ...a.styling.hover, clipPath: l }
|
|
340
342
|
// focused: untouched — user config respected
|
|
341
343
|
};
|
|
342
344
|
}
|
|
343
|
-
return
|
|
345
|
+
return a;
|
|
344
346
|
}
|
|
345
|
-
function Qt(
|
|
346
|
-
return { ...
|
|
347
|
+
function Qt(o, t) {
|
|
348
|
+
return { ...o ? It[o] : It.playful, ...t };
|
|
347
349
|
}
|
|
348
|
-
function te(
|
|
349
|
-
return { ...
|
|
350
|
+
function te(o, t) {
|
|
351
|
+
return { ...o ? At[o] : At.gentle, ...t };
|
|
350
352
|
}
|
|
351
|
-
function ee(
|
|
352
|
-
return { ...
|
|
353
|
+
function ee(o, t) {
|
|
354
|
+
return { ...o ? Rt[o] : Rt.gentle, ...t };
|
|
353
355
|
}
|
|
354
356
|
class ie {
|
|
355
357
|
constructor(t) {
|
|
@@ -362,8 +364,8 @@ class ie {
|
|
|
362
364
|
buildTransformString(t) {
|
|
363
365
|
const i = ["translate(-50%, -50%)"];
|
|
364
366
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
365
|
-
const e = t.x ?? 0,
|
|
366
|
-
i.push(`translate(${e}px, ${
|
|
367
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
368
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
367
369
|
}
|
|
368
370
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
369
371
|
}
|
|
@@ -376,18 +378,18 @@ class ie {
|
|
|
376
378
|
* @param easing - CSS easing function (optional)
|
|
377
379
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
378
380
|
*/
|
|
379
|
-
animateTransformCancellable(t, i, e,
|
|
381
|
+
animateTransformCancellable(t, i, e, n = null, s = null) {
|
|
380
382
|
this.cancelAllAnimations(t);
|
|
381
|
-
const r =
|
|
383
|
+
const r = n ?? this.config.duration, a = s ?? this.config.easing.default, c = this.buildTransformString(i), l = this.buildTransformString(e);
|
|
382
384
|
t.style.transition = "none";
|
|
383
385
|
const u = t.animate(
|
|
384
386
|
[
|
|
385
|
-
{ transform:
|
|
386
|
-
{ transform:
|
|
387
|
+
{ transform: c },
|
|
388
|
+
{ transform: l }
|
|
387
389
|
],
|
|
388
390
|
{
|
|
389
391
|
duration: r,
|
|
390
|
-
easing:
|
|
392
|
+
easing: a,
|
|
391
393
|
fill: "forwards"
|
|
392
394
|
// Keep final state after animation
|
|
393
395
|
}
|
|
@@ -401,7 +403,7 @@ class ie {
|
|
|
401
403
|
duration: r
|
|
402
404
|
};
|
|
403
405
|
return this.activeAnimations.set(t, h), u.finished.then(() => {
|
|
404
|
-
t.style.transform =
|
|
406
|
+
t.style.transform = l, this.activeAnimations.delete(t);
|
|
405
407
|
}).catch(() => {
|
|
406
408
|
this.activeAnimations.delete(t);
|
|
407
409
|
}), h;
|
|
@@ -415,13 +417,13 @@ class ie {
|
|
|
415
417
|
cancelAnimation(t, i = !0) {
|
|
416
418
|
const e = this.getCurrentTransform(t.element);
|
|
417
419
|
if (t.animation.cancel(), i) {
|
|
418
|
-
const
|
|
420
|
+
const n = this.buildTransformString({
|
|
419
421
|
x: e.x,
|
|
420
422
|
y: e.y,
|
|
421
423
|
rotation: e.rotation,
|
|
422
424
|
scale: e.scale
|
|
423
425
|
});
|
|
424
|
-
t.element.style.transform =
|
|
426
|
+
t.element.style.transform = n;
|
|
425
427
|
}
|
|
426
428
|
return this.activeAnimations.delete(t.element), e;
|
|
427
429
|
}
|
|
@@ -434,8 +436,8 @@ class ie {
|
|
|
434
436
|
const i = this.activeAnimations.get(t);
|
|
435
437
|
i && this.cancelAnimation(i, !1);
|
|
436
438
|
const e = t.getAnimations();
|
|
437
|
-
for (const
|
|
438
|
-
|
|
439
|
+
for (const n of e)
|
|
440
|
+
n.cancel();
|
|
439
441
|
}
|
|
440
442
|
/**
|
|
441
443
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -447,8 +449,8 @@ class ie {
|
|
|
447
449
|
const e = getComputedStyle(t).transform;
|
|
448
450
|
if (e === "none" || !e)
|
|
449
451
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
450
|
-
const
|
|
451
|
-
return { x:
|
|
452
|
+
const n = new DOMMatrix(e), s = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), a = n.e, c = n.f;
|
|
453
|
+
return { x: a, y: c, rotation: r, scale: s };
|
|
452
454
|
}
|
|
453
455
|
/**
|
|
454
456
|
* Check if an element has an active animation
|
|
@@ -474,11 +476,11 @@ class ie {
|
|
|
474
476
|
* @param easing - CSS easing function (optional)
|
|
475
477
|
* @returns Promise that resolves when animation completes
|
|
476
478
|
*/
|
|
477
|
-
animateTransform(t, i, e = null,
|
|
478
|
-
return new Promise((
|
|
479
|
-
const r = e ?? this.config.duration,
|
|
480
|
-
t.style.transition = `transform ${r}ms ${
|
|
481
|
-
|
|
479
|
+
animateTransform(t, i, e = null, n = null) {
|
|
480
|
+
return new Promise((s) => {
|
|
481
|
+
const r = e ?? this.config.duration, a = n ?? this.config.easing.default;
|
|
482
|
+
t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
483
|
+
s();
|
|
482
484
|
}, r);
|
|
483
485
|
});
|
|
484
486
|
}
|
|
@@ -507,159 +509,159 @@ class ie {
|
|
|
507
509
|
return new Promise((i) => setTimeout(i, t));
|
|
508
510
|
}
|
|
509
511
|
}
|
|
510
|
-
function J(
|
|
511
|
-
return
|
|
512
|
+
function J(o, t, i) {
|
|
513
|
+
return o + (t - o) * i;
|
|
512
514
|
}
|
|
513
|
-
function
|
|
514
|
-
const { overshoot:
|
|
515
|
-
let u = 0, h = 0, d = 1,
|
|
516
|
-
for (let
|
|
517
|
-
if (
|
|
518
|
-
h =
|
|
515
|
+
function ne(o, t, i, e) {
|
|
516
|
+
const { overshoot: n, bounces: s, decayRatio: r } = e, a = i.x - t.x, c = i.y - t.y, l = oe(s, r);
|
|
517
|
+
let u = 0, h = 0, d = 1, g = n, b = !1;
|
|
518
|
+
for (let f = 0; f < l.length; f++)
|
|
519
|
+
if (o <= l[f].time) {
|
|
520
|
+
h = f === 0 ? 0 : l[f - 1].time, d = l[f].time, g = l[f].overshoot, b = l[f].isOvershoot;
|
|
519
521
|
break;
|
|
520
522
|
}
|
|
521
|
-
const p = (
|
|
522
|
-
if (
|
|
523
|
-
u = 1 +
|
|
523
|
+
const p = (o - h) / (d - h);
|
|
524
|
+
if (b)
|
|
525
|
+
u = 1 + g * at(p);
|
|
524
526
|
else if (h === 0)
|
|
525
|
-
u =
|
|
527
|
+
u = at(p);
|
|
526
528
|
else {
|
|
527
|
-
const m = 1 + (
|
|
528
|
-
(
|
|
529
|
-
)?.overshoot ||
|
|
530
|
-
u = J(m, 1,
|
|
529
|
+
const m = 1 + (l.find(
|
|
530
|
+
(y, E) => y.time > h && E > 0 && l[E - 1].isOvershoot
|
|
531
|
+
)?.overshoot || g);
|
|
532
|
+
u = J(m, 1, at(p));
|
|
531
533
|
}
|
|
532
534
|
return {
|
|
533
|
-
x: t.x +
|
|
534
|
-
y: t.y +
|
|
535
|
+
x: t.x + a * u,
|
|
536
|
+
y: t.y + c * u
|
|
535
537
|
};
|
|
536
538
|
}
|
|
537
|
-
function
|
|
539
|
+
function oe(o, t) {
|
|
538
540
|
const i = [];
|
|
539
541
|
let e = 0.6;
|
|
540
542
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
541
|
-
let
|
|
542
|
-
const r = 0.4 / (
|
|
543
|
-
for (let
|
|
544
|
-
e += r, i.push({ time: e, overshoot:
|
|
543
|
+
let n = 0.15;
|
|
544
|
+
const r = 0.4 / (o * 2);
|
|
545
|
+
for (let a = 0; a < o; a++)
|
|
546
|
+
e += r, i.push({ time: e, overshoot: n, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
545
547
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
546
548
|
}
|
|
547
|
-
function se(
|
|
548
|
-
const { stiffness:
|
|
549
|
+
function se(o, t, i, e) {
|
|
550
|
+
const { stiffness: n, damping: s, mass: r, oscillations: a } = e, c = i.x - t.x, l = i.y - t.y, u = Math.sqrt(n / r), h = s / (2 * Math.sqrt(n * r));
|
|
549
551
|
let d;
|
|
550
552
|
if (h < 1) {
|
|
551
|
-
const
|
|
552
|
-
d = 1 -
|
|
553
|
+
const g = u * Math.sqrt(1 - h * h), b = Math.exp(-h * u * o * 3), p = Math.cos(g * o * a * Math.PI);
|
|
554
|
+
d = 1 - b * p;
|
|
553
555
|
} else
|
|
554
|
-
d = 1 - Math.exp(-u *
|
|
556
|
+
d = 1 - Math.exp(-u * o * 3);
|
|
555
557
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
556
|
-
x: t.x +
|
|
557
|
-
y: t.y +
|
|
558
|
+
x: t.x + c * d,
|
|
559
|
+
y: t.y + l * d
|
|
558
560
|
};
|
|
559
561
|
}
|
|
560
|
-
function ae(
|
|
561
|
-
const { amplitude:
|
|
562
|
+
function ae(o, t, i, e) {
|
|
563
|
+
const { amplitude: n, frequency: s, decay: r, decayRate: a, phase: c } = e, l = i.x - t.x, u = i.y - t.y, h = Math.sqrt(l * l + u * u), d = h > 0 ? -u / h : 0, g = h > 0 ? l / h : 1, b = s * Math.PI * 2 * o + c, p = r ? Math.pow(1 - o, a) : 1, f = n * Math.sin(b) * p, m = re(o);
|
|
562
564
|
return {
|
|
563
|
-
x: J(t.x, i.x, m) +
|
|
564
|
-
y: J(t.y, i.y, m) +
|
|
565
|
+
x: J(t.x, i.x, m) + f * d,
|
|
566
|
+
y: J(t.y, i.y, m) + f * g
|
|
565
567
|
};
|
|
566
568
|
}
|
|
567
|
-
function
|
|
568
|
-
return 1 - (1 -
|
|
569
|
+
function at(o) {
|
|
570
|
+
return 1 - (1 - o) * (1 - o);
|
|
569
571
|
}
|
|
570
|
-
function re(
|
|
571
|
-
return 1 - Math.pow(1 -
|
|
572
|
+
function re(o) {
|
|
573
|
+
return 1 - Math.pow(1 - o, 3);
|
|
572
574
|
}
|
|
573
|
-
function ce(
|
|
574
|
-
const { amplitude: e, frequency:
|
|
575
|
-
return t +
|
|
575
|
+
function ce(o, t, i) {
|
|
576
|
+
const { amplitude: e, frequency: n, decay: s } = i, r = Math.sin(o * n * Math.PI * 2), a = s ? Math.pow(1 - o, 2) : 1, c = e * r * a;
|
|
577
|
+
return t + c;
|
|
576
578
|
}
|
|
577
|
-
function le(
|
|
578
|
-
const { overshoot: e, bounces:
|
|
579
|
-
|
|
579
|
+
function le(o, t, i) {
|
|
580
|
+
const { overshoot: e, bounces: n } = i, s = [];
|
|
581
|
+
s.push({ time: 0.5, scale: e });
|
|
580
582
|
let r = e;
|
|
581
|
-
const
|
|
583
|
+
const a = 0.5, l = 0.5 / (n * 2);
|
|
582
584
|
let u = 0.5;
|
|
583
|
-
for (let d = 0; d <
|
|
584
|
-
const
|
|
585
|
-
u +=
|
|
585
|
+
for (let d = 0; d < n; d++) {
|
|
586
|
+
const g = 1 - (r - 1) * a;
|
|
587
|
+
u += l, s.push({ time: u, scale: g }), r = 1 + (r - 1) * a * a, u += l, d < n - 1 && s.push({ time: u, scale: r });
|
|
586
588
|
}
|
|
587
|
-
|
|
589
|
+
s.push({ time: 1, scale: 1 });
|
|
588
590
|
let h = 1;
|
|
589
|
-
for (let d = 0; d <
|
|
590
|
-
if (
|
|
591
|
-
const
|
|
592
|
-
h =
|
|
591
|
+
for (let d = 0; d < s.length; d++)
|
|
592
|
+
if (o <= s[d].time) {
|
|
593
|
+
const g = d === 0 ? 0 : s[d - 1].time, b = d === 0 ? 1 : s[d - 1].scale, p = (o - g) / (s[d].time - g), f = at(p);
|
|
594
|
+
h = b + (s[d].scale - b) * f;
|
|
593
595
|
break;
|
|
594
596
|
}
|
|
595
597
|
return h * t;
|
|
596
598
|
}
|
|
597
|
-
function he(
|
|
599
|
+
function he(o) {
|
|
598
600
|
const {
|
|
599
601
|
element: t,
|
|
600
602
|
startPosition: i,
|
|
601
603
|
endPosition: e,
|
|
602
|
-
pathConfig:
|
|
603
|
-
duration:
|
|
604
|
+
pathConfig: n,
|
|
605
|
+
duration: s,
|
|
604
606
|
imageWidth: r,
|
|
605
|
-
imageHeight:
|
|
606
|
-
rotation:
|
|
607
|
-
scale:
|
|
607
|
+
imageHeight: a,
|
|
608
|
+
rotation: c,
|
|
609
|
+
scale: l,
|
|
608
610
|
onComplete: u,
|
|
609
611
|
rotationConfig: h,
|
|
610
612
|
startRotation: d,
|
|
611
|
-
scaleConfig:
|
|
612
|
-
startScale:
|
|
613
|
-
} =
|
|
614
|
-
if ((p === "linear" || p === "arc") && !
|
|
613
|
+
scaleConfig: g,
|
|
614
|
+
startScale: b
|
|
615
|
+
} = o, p = n.type, f = d !== void 0 && d !== c, m = h?.mode === "wobble", y = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, E = f || m, v = b !== void 0 && b !== l, S = g?.mode === "pop", w = g?.pop || { overshoot: 1.2, bounces: 1 };
|
|
616
|
+
if ((p === "linear" || p === "arc") && !E && !(v || S)) {
|
|
615
617
|
u && u();
|
|
616
618
|
return;
|
|
617
619
|
}
|
|
618
|
-
const z = performance.now(), L = -r / 2, _ = -
|
|
620
|
+
const z = performance.now(), L = -r / 2, _ = -a / 2;
|
|
619
621
|
function O(H) {
|
|
620
|
-
const N = H - z,
|
|
622
|
+
const N = H - z, R = Math.min(N / s, 1);
|
|
621
623
|
let D;
|
|
622
624
|
switch (p) {
|
|
623
625
|
case "bounce": {
|
|
624
626
|
const k = Qt(
|
|
625
|
-
|
|
626
|
-
|
|
627
|
+
n.bouncePreset,
|
|
628
|
+
n.bounce
|
|
627
629
|
);
|
|
628
|
-
D =
|
|
630
|
+
D = ne(R, i, e, k);
|
|
629
631
|
break;
|
|
630
632
|
}
|
|
631
633
|
case "elastic": {
|
|
632
634
|
const k = te(
|
|
633
|
-
|
|
634
|
-
|
|
635
|
+
n.elasticPreset,
|
|
636
|
+
n.elastic
|
|
635
637
|
);
|
|
636
|
-
D = se(
|
|
638
|
+
D = se(R, i, e, k);
|
|
637
639
|
break;
|
|
638
640
|
}
|
|
639
641
|
case "wave": {
|
|
640
642
|
const k = ee(
|
|
641
|
-
|
|
642
|
-
|
|
643
|
+
n.wavePreset,
|
|
644
|
+
n.wave
|
|
643
645
|
);
|
|
644
|
-
D = ae(
|
|
646
|
+
D = ae(R, i, e, k);
|
|
645
647
|
break;
|
|
646
648
|
}
|
|
647
649
|
default:
|
|
648
650
|
D = {
|
|
649
|
-
x: J(i.x, e.x,
|
|
650
|
-
y: J(i.y, e.y,
|
|
651
|
+
x: J(i.x, e.x, R),
|
|
652
|
+
y: J(i.y, e.y, R)
|
|
651
653
|
};
|
|
652
654
|
}
|
|
653
|
-
const
|
|
654
|
-
let
|
|
655
|
-
m ?
|
|
656
|
-
let
|
|
657
|
-
S ?
|
|
655
|
+
const W = D.x - e.x, U = D.y - e.y;
|
|
656
|
+
let F;
|
|
657
|
+
m ? F = ce(R, c, y) : f ? F = J(d, c, R) : F = c;
|
|
658
|
+
let C;
|
|
659
|
+
S ? C = le(R, l, w) : v ? C = J(b, l, R) : C = l, t.style.transform = `translate(${L}px, ${_}px) translate(${W}px, ${U}px) rotate(${F}deg) scale(${C})`, R < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
|
|
658
660
|
}
|
|
659
661
|
requestAnimationFrame(O);
|
|
660
662
|
}
|
|
661
|
-
function de(
|
|
662
|
-
return
|
|
663
|
+
function de(o) {
|
|
664
|
+
return o === "bounce" || o === "elastic" || o === "wave";
|
|
663
665
|
}
|
|
664
666
|
const ue = {
|
|
665
667
|
radial: "center",
|
|
@@ -670,9 +672,9 @@ const ue = {
|
|
|
670
672
|
wave: "left",
|
|
671
673
|
honeycomb: "center"
|
|
672
674
|
};
|
|
673
|
-
class
|
|
675
|
+
class fe {
|
|
674
676
|
constructor(t, i) {
|
|
675
|
-
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
677
|
+
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || Et;
|
|
676
678
|
}
|
|
677
679
|
/**
|
|
678
680
|
* Get the effective start position, considering layout-aware defaults
|
|
@@ -683,72 +685,72 @@ class ge {
|
|
|
683
685
|
/**
|
|
684
686
|
* Calculate the starting position for an image's entry animation
|
|
685
687
|
*/
|
|
686
|
-
calculateStartPosition(t, i, e,
|
|
687
|
-
const r = this.resolvedStartPosition,
|
|
688
|
+
calculateStartPosition(t, i, e, n, s) {
|
|
689
|
+
const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
|
|
688
690
|
switch (r) {
|
|
689
691
|
case "nearest-edge":
|
|
690
|
-
return this.calculateNearestEdge(t, i, e,
|
|
692
|
+
return this.calculateNearestEdge(t, i, e, a);
|
|
691
693
|
case "top":
|
|
692
|
-
return this.calculateEdgePosition("top", t, i, e,
|
|
694
|
+
return this.calculateEdgePosition("top", t, i, e, a);
|
|
693
695
|
case "bottom":
|
|
694
|
-
return this.calculateEdgePosition("bottom", t, i, e,
|
|
696
|
+
return this.calculateEdgePosition("bottom", t, i, e, a);
|
|
695
697
|
case "left":
|
|
696
|
-
return this.calculateEdgePosition("left", t, i, e,
|
|
698
|
+
return this.calculateEdgePosition("left", t, i, e, a);
|
|
697
699
|
case "right":
|
|
698
|
-
return this.calculateEdgePosition("right", t, i, e,
|
|
700
|
+
return this.calculateEdgePosition("right", t, i, e, a);
|
|
699
701
|
case "center":
|
|
700
702
|
return this.calculateCenterPosition(e, t, i);
|
|
701
703
|
case "random-edge":
|
|
702
|
-
return this.calculateRandomEdge(t, i, e,
|
|
704
|
+
return this.calculateRandomEdge(t, i, e, a);
|
|
703
705
|
case "circular":
|
|
704
706
|
return this.calculateCircularPosition(
|
|
705
707
|
t,
|
|
706
708
|
i,
|
|
707
709
|
e,
|
|
708
|
-
|
|
709
|
-
|
|
710
|
+
n,
|
|
711
|
+
s
|
|
710
712
|
);
|
|
711
713
|
default:
|
|
712
|
-
return this.calculateNearestEdge(t, i, e,
|
|
714
|
+
return this.calculateNearestEdge(t, i, e, a);
|
|
713
715
|
}
|
|
714
716
|
}
|
|
715
717
|
/**
|
|
716
718
|
* Calculate start position from the nearest edge (current default behavior)
|
|
717
719
|
*/
|
|
718
|
-
calculateNearestEdge(t, i, e,
|
|
719
|
-
const
|
|
720
|
-
let d = t.x,
|
|
721
|
-
return h ===
|
|
720
|
+
calculateNearestEdge(t, i, e, n) {
|
|
721
|
+
const s = t.x, r = t.y, a = s, c = e.width - s, l = r, u = e.height - r, h = Math.min(a, c, l, u);
|
|
722
|
+
let d = t.x, g = t.y;
|
|
723
|
+
return h === a ? d = -(i.width + n) : h === c ? d = e.width + n : h === l ? g = -(i.height + n) : g = e.height + n, { x: d, y: g };
|
|
722
724
|
}
|
|
723
725
|
/**
|
|
724
726
|
* Calculate start position from a specific edge
|
|
725
727
|
*/
|
|
726
|
-
calculateEdgePosition(t, i, e,
|
|
727
|
-
let r = i.x,
|
|
728
|
+
calculateEdgePosition(t, i, e, n, s) {
|
|
729
|
+
let r = i.x, a = i.y;
|
|
728
730
|
switch (t) {
|
|
729
731
|
case "top":
|
|
730
|
-
|
|
732
|
+
a = -(e.height + s);
|
|
731
733
|
break;
|
|
732
734
|
case "bottom":
|
|
733
|
-
|
|
735
|
+
a = n.height + s;
|
|
734
736
|
break;
|
|
735
737
|
case "left":
|
|
736
|
-
r = -(e.width +
|
|
738
|
+
r = -(e.width + s);
|
|
737
739
|
break;
|
|
738
740
|
case "right":
|
|
739
|
-
r =
|
|
741
|
+
r = n.width + s;
|
|
740
742
|
break;
|
|
741
743
|
}
|
|
742
|
-
return { x: r, y:
|
|
744
|
+
return { x: r, y: a };
|
|
743
745
|
}
|
|
744
746
|
/**
|
|
745
747
|
* Calculate start position from center with scale animation
|
|
746
748
|
*/
|
|
747
749
|
calculateCenterPosition(t, i, e) {
|
|
748
|
-
const
|
|
750
|
+
const n = t.width / 2, s = t.height / 2;
|
|
749
751
|
return {
|
|
750
|
-
x:
|
|
751
|
-
y:
|
|
752
|
+
x: n,
|
|
753
|
+
y: s,
|
|
752
754
|
useScale: !0
|
|
753
755
|
// Signal to use scale animation from 0
|
|
754
756
|
};
|
|
@@ -756,28 +758,28 @@ class ge {
|
|
|
756
758
|
/**
|
|
757
759
|
* Calculate start position from a random edge
|
|
758
760
|
*/
|
|
759
|
-
calculateRandomEdge(t, i, e,
|
|
760
|
-
const
|
|
761
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
761
|
+
calculateRandomEdge(t, i, e, n) {
|
|
762
|
+
const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
|
|
763
|
+
return this.calculateEdgePosition(r, t, i, e, n);
|
|
762
764
|
}
|
|
763
765
|
/**
|
|
764
766
|
* Calculate start position on a circle around the container
|
|
765
767
|
*/
|
|
766
|
-
calculateCircularPosition(t, i, e,
|
|
767
|
-
const r = this.config.start.circular || {},
|
|
768
|
-
let
|
|
769
|
-
const
|
|
770
|
-
if (typeof
|
|
771
|
-
const p = parseFloat(
|
|
772
|
-
|
|
768
|
+
calculateCircularPosition(t, i, e, n, s) {
|
|
769
|
+
const r = this.config.start.circular || {}, a = r.distribution || "even";
|
|
770
|
+
let c;
|
|
771
|
+
const l = r.radius || "120%";
|
|
772
|
+
if (typeof l == "string" && l.endsWith("%")) {
|
|
773
|
+
const p = parseFloat(l) / 100;
|
|
774
|
+
c = Math.sqrt(
|
|
773
775
|
e.width ** 2 + e.height ** 2
|
|
774
776
|
) * p / 2;
|
|
775
777
|
} else
|
|
776
|
-
|
|
778
|
+
c = typeof l == "number" ? l : 500;
|
|
777
779
|
let u;
|
|
778
|
-
|
|
779
|
-
const h = e.width / 2, d = e.height / 2,
|
|
780
|
-
return { x:
|
|
780
|
+
a === "even" ? u = n / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
781
|
+
const h = e.width / 2, d = e.height / 2, g = h + Math.cos(u) * c, b = d + Math.sin(u) * c;
|
|
782
|
+
return { x: g, y: b };
|
|
781
783
|
}
|
|
782
784
|
/**
|
|
783
785
|
* Get animation parameters for an image
|
|
@@ -796,18 +798,18 @@ class ge {
|
|
|
796
798
|
* Build a CSS transform string for the start position
|
|
797
799
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
798
800
|
*/
|
|
799
|
-
buildStartTransform(t, i, e,
|
|
800
|
-
const
|
|
801
|
-
return t.useScale ? `${p} translate(${
|
|
801
|
+
buildStartTransform(t, i, e, n, s, r, a, c) {
|
|
802
|
+
const l = t.x - i.x, u = t.y - i.y, h = a !== void 0 ? a : e, d = c !== void 0 ? c : n, g = s !== void 0 ? -s / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = s !== void 0 ? `translate(${g}px, ${b}px)` : "translate(-50%, -50%)";
|
|
803
|
+
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${h}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
802
804
|
}
|
|
803
805
|
/**
|
|
804
806
|
* Build the final CSS transform string
|
|
805
807
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
806
808
|
*/
|
|
807
|
-
buildFinalTransform(t, i, e,
|
|
808
|
-
if (e !== void 0 &&
|
|
809
|
-
const
|
|
810
|
-
return `translate(${
|
|
809
|
+
buildFinalTransform(t, i, e, n) {
|
|
810
|
+
if (e !== void 0 && n !== void 0) {
|
|
811
|
+
const s = -e / 2, r = -n / 2;
|
|
812
|
+
return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
811
813
|
}
|
|
812
814
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
813
815
|
}
|
|
@@ -872,12 +874,12 @@ class ge {
|
|
|
872
874
|
return t + (Math.random() - 0.5) * 60;
|
|
873
875
|
if (typeof e == "number")
|
|
874
876
|
return e;
|
|
875
|
-
const
|
|
876
|
-
return e.min + Math.random() *
|
|
877
|
+
const n = e.max - e.min;
|
|
878
|
+
return e.min + Math.random() * n;
|
|
877
879
|
}
|
|
878
880
|
case "spin": {
|
|
879
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
880
|
-
return t + e * 360 *
|
|
881
|
+
const e = this.rotationConfig.spinCount ?? 1, n = this.resolveSpinDirection(t);
|
|
882
|
+
return t + e * 360 * n;
|
|
881
883
|
}
|
|
882
884
|
case "random":
|
|
883
885
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -925,8 +927,8 @@ class ge {
|
|
|
925
927
|
amplitude: 15,
|
|
926
928
|
frequency: 3,
|
|
927
929
|
decay: !0
|
|
928
|
-
}, { amplitude:
|
|
929
|
-
return i +
|
|
930
|
+
}, { amplitude: n, frequency: s, decay: r } = e, a = Math.sin(t * s * Math.PI * 2), c = r ? Math.pow(1 - t, 2) : 1, l = n * a * c;
|
|
931
|
+
return i + l;
|
|
930
932
|
}
|
|
931
933
|
/**
|
|
932
934
|
* Get the scale configuration
|
|
@@ -982,15 +984,15 @@ class ge {
|
|
|
982
984
|
const e = this.scaleConfig.pop || {
|
|
983
985
|
overshoot: 1.2,
|
|
984
986
|
bounces: 1
|
|
985
|
-
}, { overshoot:
|
|
986
|
-
let
|
|
987
|
-
for (let
|
|
988
|
-
if (t <= r[
|
|
989
|
-
const
|
|
990
|
-
|
|
987
|
+
}, { overshoot: n, bounces: s } = e, r = this.generateScaleBounceKeyframes(s, n);
|
|
988
|
+
let a = i;
|
|
989
|
+
for (let c = 0; c < r.length; c++)
|
|
990
|
+
if (t <= r[c].time) {
|
|
991
|
+
const l = c === 0 ? 0 : r[c - 1].time, u = c === 0 ? i : r[c - 1].scale, h = (t - l) / (r[c].time - l), d = this.easeOutQuad(h);
|
|
992
|
+
a = u + (r[c].scale - u) * d;
|
|
991
993
|
break;
|
|
992
994
|
}
|
|
993
|
-
return
|
|
995
|
+
return a * i;
|
|
994
996
|
}
|
|
995
997
|
/**
|
|
996
998
|
* Generate keyframes for scale bounce animation
|
|
@@ -998,12 +1000,12 @@ class ge {
|
|
|
998
1000
|
generateScaleBounceKeyframes(t, i) {
|
|
999
1001
|
const e = [];
|
|
1000
1002
|
e.push({ time: 0.5, scale: i });
|
|
1001
|
-
let
|
|
1002
|
-
const
|
|
1003
|
-
let
|
|
1004
|
-
for (let
|
|
1005
|
-
const u = 1 - (
|
|
1006
|
-
|
|
1003
|
+
let n = i;
|
|
1004
|
+
const s = 0.5, a = 0.5 / (t * 2);
|
|
1005
|
+
let c = 0.5;
|
|
1006
|
+
for (let l = 0; l < t; l++) {
|
|
1007
|
+
const u = 1 - (n - 1) * s;
|
|
1008
|
+
c += a, e.push({ time: c, scale: u }), n = 1 + (n - 1) * s * s, c += a, l < t - 1 && e.push({ time: c, scale: n });
|
|
1007
1009
|
}
|
|
1008
1010
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1009
1011
|
}
|
|
@@ -1014,7 +1016,7 @@ class ge {
|
|
|
1014
1016
|
return 1 - (1 - t) * (1 - t);
|
|
1015
1017
|
}
|
|
1016
1018
|
}
|
|
1017
|
-
class
|
|
1019
|
+
class ge {
|
|
1018
1020
|
constructor(t, i = 600) {
|
|
1019
1021
|
this.entries = /* @__PURE__ */ new Map(), this.togetherRafId = null, this.togetherSpeed = 0, this.config = t, this.entryDurationMs = i;
|
|
1020
1022
|
}
|
|
@@ -1022,9 +1024,9 @@ class fe {
|
|
|
1022
1024
|
* Register an image element for idle animation.
|
|
1023
1025
|
* Starts animation after entry duration completes.
|
|
1024
1026
|
*/
|
|
1025
|
-
register(t, i, e,
|
|
1027
|
+
register(t, i, e, n) {
|
|
1026
1028
|
if (this.entries.has(t)) return;
|
|
1027
|
-
const
|
|
1029
|
+
const s = n ?? this.entryDurationMs, r = this.config.startDelay ?? s, a = {
|
|
1028
1030
|
element: t,
|
|
1029
1031
|
index: i,
|
|
1030
1032
|
totalImages: e,
|
|
@@ -1035,8 +1037,8 @@ class fe {
|
|
|
1035
1037
|
stopped: !1,
|
|
1036
1038
|
startTimer: null
|
|
1037
1039
|
};
|
|
1038
|
-
this.entries.set(t,
|
|
1039
|
-
|
|
1040
|
+
this.entries.set(t, a), a.startTimer = setTimeout(() => {
|
|
1041
|
+
a.startTimer = null, !a.stopped && !a.paused && this._startAnimation(a);
|
|
1040
1042
|
}, r);
|
|
1041
1043
|
}
|
|
1042
1044
|
/**
|
|
@@ -1099,7 +1101,7 @@ class fe {
|
|
|
1099
1101
|
}
|
|
1100
1102
|
}
|
|
1101
1103
|
_startWiggle(t) {
|
|
1102
|
-
const i = { ...
|
|
1104
|
+
const i = { ...Wt, ...this.config.wiggle }, e = [
|
|
1103
1105
|
{ transform: "rotate(0deg)", offset: 0 },
|
|
1104
1106
|
{ transform: `rotate(${i.maxAngle}deg)`, offset: 0.25 },
|
|
1105
1107
|
{ transform: "rotate(0deg)", offset: 0.5 },
|
|
@@ -1119,7 +1121,7 @@ class fe {
|
|
|
1119
1121
|
});
|
|
1120
1122
|
}
|
|
1121
1123
|
_startPulse(t) {
|
|
1122
|
-
const i = { ...
|
|
1124
|
+
const i = { ...Gt, ...this.config.pulse }, e = [
|
|
1123
1125
|
{ transform: "scale(1)", offset: 0 },
|
|
1124
1126
|
{ transform: `scale(${i.maxScale})`, offset: 0.25 },
|
|
1125
1127
|
{ transform: "scale(1)", offset: 0.5 },
|
|
@@ -1139,28 +1141,28 @@ class fe {
|
|
|
1139
1141
|
});
|
|
1140
1142
|
}
|
|
1141
1143
|
_startBlink(t) {
|
|
1142
|
-
const i = { ...
|
|
1143
|
-
let
|
|
1144
|
-
i.style === "fade" ? (
|
|
1145
|
-
{ opacity:
|
|
1144
|
+
const i = { ...qt, ...this.config.blink }, e = -(Math.random() * i.speed), n = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1145
|
+
let s, r;
|
|
1146
|
+
i.style === "fade" ? (s = [
|
|
1147
|
+
{ opacity: n, offset: 0 },
|
|
1146
1148
|
{ opacity: 0, offset: 0.5 },
|
|
1147
|
-
{ opacity:
|
|
1149
|
+
{ opacity: n, offset: 1 }
|
|
1148
1150
|
], r = {
|
|
1149
1151
|
duration: i.speed,
|
|
1150
1152
|
delay: e,
|
|
1151
1153
|
iterations: 1 / 0,
|
|
1152
1154
|
easing: "ease-in-out"
|
|
1153
|
-
}) : (
|
|
1154
|
-
{ opacity:
|
|
1155
|
-
{ opacity:
|
|
1155
|
+
}) : (s = [
|
|
1156
|
+
{ opacity: n, offset: 0 },
|
|
1157
|
+
{ opacity: n, offset: i.onRatio },
|
|
1156
1158
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
1157
1159
|
{ opacity: 0, offset: 0.99 },
|
|
1158
|
-
{ opacity:
|
|
1160
|
+
{ opacity: n, offset: 1 }
|
|
1159
1161
|
], r = {
|
|
1160
1162
|
duration: i.speed,
|
|
1161
1163
|
delay: e,
|
|
1162
1164
|
iterations: 1 / 0
|
|
1163
|
-
}), t.blinkAnimation = t.element.animate(
|
|
1165
|
+
}), t.blinkAnimation = t.element.animate(s, r);
|
|
1164
1166
|
}
|
|
1165
1167
|
_startSpin(t) {
|
|
1166
1168
|
const i = { ...Xt, ...this.config.spin }, e = i.direction === "clockwise" ? 360 : -360;
|
|
@@ -1184,8 +1186,8 @@ class fe {
|
|
|
1184
1186
|
if (this.togetherSpeed = t, this.togetherRafId !== null) return;
|
|
1185
1187
|
const i = () => {
|
|
1186
1188
|
const e = performance.now() % this.togetherSpeed;
|
|
1187
|
-
for (const
|
|
1188
|
-
!
|
|
1189
|
+
for (const n of this.entries.values())
|
|
1190
|
+
!n.stopped && !n.paused && n.animation && (n.animation.currentTime = e);
|
|
1189
1191
|
this.togetherRafId = requestAnimationFrame(i);
|
|
1190
1192
|
};
|
|
1191
1193
|
this.togetherRafId = requestAnimationFrame(i);
|
|
@@ -1212,19 +1214,19 @@ class me {
|
|
|
1212
1214
|
* @returns Array of layout objects with position, rotation, scale
|
|
1213
1215
|
*/
|
|
1214
1216
|
generate(t, i, e = {}) {
|
|
1215
|
-
const
|
|
1216
|
-
for (let
|
|
1217
|
-
const I = this.random(v,
|
|
1218
|
-
id:
|
|
1217
|
+
const n = [], { width: s, height: r } = i, a = this.config.spacing.padding, c = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || g !== 1, f = c * 1.5 / 2, m = c / 2, y = s - a - f, E = r - a - m, v = a + f, S = a + m;
|
|
1218
|
+
for (let w = 0; w < t; w++) {
|
|
1219
|
+
const I = this.random(v, y), z = this.random(S, E), L = l === "random" ? this.random(u, h) : 0, _ = b ? this.random(d, g) : 1, O = c * _, H = {
|
|
1220
|
+
id: w,
|
|
1219
1221
|
x: I,
|
|
1220
1222
|
y: z,
|
|
1221
1223
|
rotation: L,
|
|
1222
1224
|
scale: _,
|
|
1223
1225
|
baseSize: O
|
|
1224
1226
|
};
|
|
1225
|
-
|
|
1227
|
+
n.push(H);
|
|
1226
1228
|
}
|
|
1227
|
-
return
|
|
1229
|
+
return n;
|
|
1228
1230
|
}
|
|
1229
1231
|
/**
|
|
1230
1232
|
* Utility: Generate random number between min and max
|
|
@@ -1248,20 +1250,20 @@ class pe {
|
|
|
1248
1250
|
* @returns Array of layout objects with position, rotation, scale
|
|
1249
1251
|
*/
|
|
1250
1252
|
generate(t, i, e = {}) {
|
|
1251
|
-
const
|
|
1253
|
+
const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, g = h !== 1 || d !== 1, b = this.config.scaleDecay ?? 0, p = {
|
|
1252
1254
|
...Ut,
|
|
1253
1255
|
...this.config.radial
|
|
1254
|
-
},
|
|
1255
|
-
m - v -
|
|
1256
|
-
|
|
1256
|
+
}, f = e.fixedHeight ?? a, m = s / 2, y = r / 2, E = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, S = Math.max(f * 0.8, Math.min(
|
|
1257
|
+
m - v - f / 2,
|
|
1258
|
+
y - v - f / 2
|
|
1257
1259
|
));
|
|
1258
1260
|
if (t > 0) {
|
|
1259
|
-
const z =
|
|
1260
|
-
|
|
1261
|
+
const z = g ? this.random(h, d) : 1, L = f * z;
|
|
1262
|
+
n.push({
|
|
1261
1263
|
id: 0,
|
|
1262
1264
|
x: m,
|
|
1263
|
-
y
|
|
1264
|
-
rotation:
|
|
1265
|
+
y,
|
|
1266
|
+
rotation: c === "random" ? this.random(l * 0.33, u * 0.33) : 0,
|
|
1265
1267
|
// Less rotation for center
|
|
1266
1268
|
scale: z,
|
|
1267
1269
|
baseSize: L,
|
|
@@ -1269,34 +1271,34 @@ class pe {
|
|
|
1269
1271
|
// Center image is highest
|
|
1270
1272
|
});
|
|
1271
1273
|
}
|
|
1272
|
-
let
|
|
1273
|
-
for (;
|
|
1274
|
-
const z = I /
|
|
1274
|
+
let w = 1, I = 1;
|
|
1275
|
+
for (; w < t; ) {
|
|
1276
|
+
const z = I / E, L = b > 0 ? 1 - z * b * 0.5 : 1, _ = Math.max(f * 0.8, S / E * 1.5 / p.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), R = this.estimateWidth(f), D = Math.floor(N / (R * 0.7));
|
|
1275
1277
|
if (D === 0) {
|
|
1276
1278
|
I++;
|
|
1277
1279
|
continue;
|
|
1278
1280
|
}
|
|
1279
|
-
const
|
|
1280
|
-
for (let
|
|
1281
|
-
const
|
|
1282
|
-
let $ = m + Math.cos(
|
|
1283
|
-
const P =
|
|
1284
|
-
$ - P < v ? $ = v + P : $ + P >
|
|
1285
|
-
const Y =
|
|
1286
|
-
|
|
1287
|
-
id:
|
|
1281
|
+
const W = 2 * Math.PI / D, U = I * (20 * Math.PI / 180);
|
|
1282
|
+
for (let F = 0; F < D && w < t; F++) {
|
|
1283
|
+
const C = F * W + U, k = g ? this.random(h, d) : 1, q = L * k, T = f * q;
|
|
1284
|
+
let $ = m + Math.cos(C) * H, M = y + Math.sin(C) * O;
|
|
1285
|
+
const P = T * 1.5 / 2, B = T / 2;
|
|
1286
|
+
$ - P < v ? $ = v + P : $ + P > s - v && ($ = s - v - P), M - B < v ? M = v + B : M + B > r - v && (M = r - v - B);
|
|
1287
|
+
const Y = c === "random" ? this.random(l, u) : 0;
|
|
1288
|
+
n.push({
|
|
1289
|
+
id: w,
|
|
1288
1290
|
x: $,
|
|
1289
|
-
y:
|
|
1291
|
+
y: M,
|
|
1290
1292
|
rotation: Y,
|
|
1291
|
-
scale:
|
|
1292
|
-
baseSize:
|
|
1293
|
+
scale: q,
|
|
1294
|
+
baseSize: T,
|
|
1293
1295
|
zIndex: Math.max(1, 100 - I)
|
|
1294
1296
|
// Outer rings have lower z-index
|
|
1295
|
-
}),
|
|
1297
|
+
}), w++;
|
|
1296
1298
|
}
|
|
1297
1299
|
I++;
|
|
1298
1300
|
}
|
|
1299
|
-
return
|
|
1301
|
+
return n;
|
|
1300
1302
|
}
|
|
1301
1303
|
/**
|
|
1302
1304
|
* Estimate image width based on height
|
|
@@ -1317,7 +1319,7 @@ class pe {
|
|
|
1317
1319
|
return Math.random() * (i - t) + t;
|
|
1318
1320
|
}
|
|
1319
1321
|
}
|
|
1320
|
-
const
|
|
1322
|
+
const be = {
|
|
1321
1323
|
columns: "auto",
|
|
1322
1324
|
rows: "auto",
|
|
1323
1325
|
stagger: "none",
|
|
@@ -1327,7 +1329,7 @@ const ye = {
|
|
|
1327
1329
|
alignment: "center",
|
|
1328
1330
|
gap: 10,
|
|
1329
1331
|
overflowOffset: 0.25
|
|
1330
|
-
},
|
|
1332
|
+
}, Ct = [
|
|
1331
1333
|
{ x: 1, y: 1 },
|
|
1332
1334
|
// bottom-right
|
|
1333
1335
|
{ x: -1, y: -1 },
|
|
@@ -1345,7 +1347,7 @@ const ye = {
|
|
|
1345
1347
|
{ x: 0, y: 1 }
|
|
1346
1348
|
// down
|
|
1347
1349
|
];
|
|
1348
|
-
class
|
|
1350
|
+
class ye {
|
|
1349
1351
|
constructor(t, i = {}) {
|
|
1350
1352
|
this.config = t, this.imageConfig = i;
|
|
1351
1353
|
}
|
|
@@ -1357,86 +1359,86 @@ class be {
|
|
|
1357
1359
|
* @returns Array of layout objects with position, rotation, scale
|
|
1358
1360
|
*/
|
|
1359
1361
|
generate(t, i, e = {}) {
|
|
1360
|
-
const
|
|
1362
|
+
const n = [], { width: s, height: r } = i, a = { ...be, ...this.config.grid }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, g = h !== 1 || d !== 1, b = s - 2 * c, p = r - 2 * c, { columns: f, rows: m } = this.calculateGridDimensions(
|
|
1361
1363
|
t,
|
|
1362
|
-
|
|
1364
|
+
b,
|
|
1363
1365
|
p,
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
),
|
|
1366
|
+
l,
|
|
1367
|
+
a
|
|
1368
|
+
), y = a.stagger === "row", E = a.stagger === "column", v = y ? f + 0.5 : f, S = E ? m + 0.5 : m, w = (b - a.gap * (f - 1)) / v, I = (p - a.gap * (m - 1)) / S, z = y ? w / 2 : 0, L = E ? I / 2 : 0, _ = 1 + a.overlap, O = Math.min(w, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = f * w + (f - 1) * a.gap + z, R = m * I + (m - 1) * a.gap + L, D = c + (b - N) / 2, W = c + (p - R) / 2, U = f * m, F = a.columns !== "auto" && a.rows !== "auto", C = F && t > U;
|
|
1367
1369
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1368
|
-
gridConfigColumns:
|
|
1369
|
-
gridConfigRows:
|
|
1370
|
-
columns:
|
|
1370
|
+
gridConfigColumns: a.columns,
|
|
1371
|
+
gridConfigRows: a.rows,
|
|
1372
|
+
columns: f,
|
|
1371
1373
|
rows: m,
|
|
1372
1374
|
cellCount: U,
|
|
1373
|
-
hasFixedGrid:
|
|
1375
|
+
hasFixedGrid: F,
|
|
1374
1376
|
imageCount: t,
|
|
1375
|
-
isOverflowMode:
|
|
1377
|
+
isOverflowMode: C
|
|
1376
1378
|
});
|
|
1377
|
-
const k =
|
|
1378
|
-
for (let
|
|
1379
|
-
let $,
|
|
1380
|
-
if (
|
|
1381
|
-
const
|
|
1382
|
-
X = Math.floor(
|
|
1379
|
+
const k = C ? new Array(U).fill(0) : [], q = Math.min(w, I) * a.overflowOffset;
|
|
1380
|
+
for (let T = 0; T < t; T++) {
|
|
1381
|
+
let $, M, X = 0;
|
|
1382
|
+
if (C && T >= U) {
|
|
1383
|
+
const G = T - U, j = G % U;
|
|
1384
|
+
X = Math.floor(G / U) + 1, k[j]++, a.fillDirection === "row" ? ($ = j % f, M = Math.floor(j / f)) : (M = j % m, $ = Math.floor(j / m));
|
|
1383
1385
|
} else
|
|
1384
|
-
|
|
1385
|
-
let P = D + $ * (
|
|
1386
|
-
if (
|
|
1387
|
-
const
|
|
1388
|
-
P +=
|
|
1386
|
+
a.fillDirection === "row" ? ($ = T % f, M = Math.floor(T / f)) : (M = T % m, $ = Math.floor(T / m));
|
|
1387
|
+
let P = D + $ * (w + a.gap) + w / 2, B = W + M * (I + a.gap) + I / 2;
|
|
1388
|
+
if (a.stagger === "row" && M % 2 === 1 ? P += w / 2 : a.stagger === "column" && $ % 2 === 1 && (B += I / 2), X > 0) {
|
|
1389
|
+
const G = (X - 1) % Ct.length, j = Ct[G];
|
|
1390
|
+
P += j.x * q, B += j.y * q;
|
|
1389
1391
|
}
|
|
1390
|
-
if (
|
|
1391
|
-
const
|
|
1392
|
-
P += this.random(-
|
|
1392
|
+
if (a.jitter > 0) {
|
|
1393
|
+
const G = w / 2 * a.jitter, j = I / 2 * a.jitter;
|
|
1394
|
+
P += this.random(-G, G), B += this.random(-j, j);
|
|
1393
1395
|
}
|
|
1394
|
-
let Y = P, V =
|
|
1395
|
-
if (!
|
|
1396
|
-
const
|
|
1397
|
-
if (
|
|
1398
|
-
const St =
|
|
1396
|
+
let Y = P, V = B;
|
|
1397
|
+
if (!C && a.fillDirection === "row") {
|
|
1398
|
+
const G = t % f || f;
|
|
1399
|
+
if (M === Math.floor((t - 1) / f) && G < f) {
|
|
1400
|
+
const St = G * w + (G - 1) * a.gap;
|
|
1399
1401
|
let gt = 0;
|
|
1400
|
-
|
|
1402
|
+
a.alignment === "center" ? gt = (N - St) / 2 : a.alignment === "end" && (gt = N - St), Y += gt;
|
|
1401
1403
|
}
|
|
1402
1404
|
}
|
|
1403
|
-
const
|
|
1404
|
-
Y = Math.max(
|
|
1405
|
-
let
|
|
1405
|
+
const ct = g ? this.random(h, d) : 1, K = H * ct, nt = K * 1.5 / 2, ot = K / 2, ht = c + nt, dt = s - c - nt, Pt = c + ot, _t = r - c - ot;
|
|
1406
|
+
Y = Math.max(ht, Math.min(Y, dt)), V = Math.max(Pt, Math.min(V, _t));
|
|
1407
|
+
let ut = 0;
|
|
1406
1408
|
if (u === "random") {
|
|
1407
|
-
const
|
|
1408
|
-
|
|
1409
|
+
const G = this.imageConfig.rotation?.range?.min ?? -15, j = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1410
|
+
a.jitter > 0 ? ut = this.random(G * a.jitter, j * a.jitter) : ut = this.random(G, j);
|
|
1409
1411
|
}
|
|
1410
|
-
let
|
|
1411
|
-
|
|
1412
|
-
id:
|
|
1412
|
+
let ft;
|
|
1413
|
+
C && X > 0 ? ft = 50 - X : ft = C ? 100 + T : T + 1, n.push({
|
|
1414
|
+
id: T,
|
|
1413
1415
|
x: Y,
|
|
1414
1416
|
y: V,
|
|
1415
|
-
rotation:
|
|
1416
|
-
scale:
|
|
1417
|
+
rotation: ut,
|
|
1418
|
+
scale: ct,
|
|
1417
1419
|
baseSize: K,
|
|
1418
|
-
zIndex:
|
|
1420
|
+
zIndex: ft
|
|
1419
1421
|
});
|
|
1420
1422
|
}
|
|
1421
|
-
return
|
|
1423
|
+
return n;
|
|
1422
1424
|
}
|
|
1423
1425
|
/**
|
|
1424
1426
|
* Calculate optimal grid dimensions based on image count and container
|
|
1425
1427
|
*/
|
|
1426
|
-
calculateGridDimensions(t, i, e,
|
|
1427
|
-
let r,
|
|
1428
|
-
if (
|
|
1429
|
-
r =
|
|
1430
|
-
else if (
|
|
1431
|
-
r =
|
|
1432
|
-
else if (
|
|
1433
|
-
|
|
1428
|
+
calculateGridDimensions(t, i, e, n, s) {
|
|
1429
|
+
let r, a;
|
|
1430
|
+
if (s.columns !== "auto" && s.rows !== "auto")
|
|
1431
|
+
r = s.columns, a = s.rows;
|
|
1432
|
+
else if (s.columns !== "auto")
|
|
1433
|
+
r = s.columns, a = Math.ceil(t / r);
|
|
1434
|
+
else if (s.rows !== "auto")
|
|
1435
|
+
a = s.rows, r = Math.ceil(t / a);
|
|
1434
1436
|
else {
|
|
1435
|
-
const
|
|
1436
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t *
|
|
1437
|
+
const c = i / e;
|
|
1438
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * c / 1.4))), a = Math.ceil(t / r); r > 1 && (r - 1) * a >= t; )
|
|
1437
1439
|
r--;
|
|
1438
1440
|
}
|
|
1439
|
-
return { columns: Math.max(1, r), rows: Math.max(1,
|
|
1441
|
+
return { columns: Math.max(1, r), rows: Math.max(1, a) };
|
|
1440
1442
|
}
|
|
1441
1443
|
/**
|
|
1442
1444
|
* Utility: Generate random number between min and max
|
|
@@ -1445,14 +1447,14 @@ class be {
|
|
|
1445
1447
|
return Math.random() * (i - t) + t;
|
|
1446
1448
|
}
|
|
1447
1449
|
}
|
|
1448
|
-
const ve = Math.PI * (3 - Math.sqrt(5)),
|
|
1450
|
+
const ve = Math.PI * (3 - Math.sqrt(5)), Ee = {
|
|
1449
1451
|
spiralType: "golden",
|
|
1450
1452
|
direction: "counterclockwise",
|
|
1451
1453
|
tightness: 1,
|
|
1452
1454
|
scaleDecay: 0,
|
|
1453
1455
|
startAngle: 0
|
|
1454
1456
|
};
|
|
1455
|
-
class
|
|
1457
|
+
class we {
|
|
1456
1458
|
constructor(t, i = {}) {
|
|
1457
1459
|
this.config = t, this.imageConfig = i;
|
|
1458
1460
|
}
|
|
@@ -1464,80 +1466,80 @@ class xe {
|
|
|
1464
1466
|
* @returns Array of layout objects with position, rotation, scale
|
|
1465
1467
|
*/
|
|
1466
1468
|
generate(t, i, e = {}) {
|
|
1467
|
-
const
|
|
1468
|
-
m -
|
|
1469
|
-
|
|
1470
|
-
), v =
|
|
1469
|
+
const n = [], { width: s, height: r } = i, a = { ...Ee, ...this.config.spiral }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = g !== 1 || b !== 1, f = this.config.scaleDecay ?? a.scaleDecay, m = s / 2, y = r / 2, E = Math.min(
|
|
1470
|
+
m - c - l / 2,
|
|
1471
|
+
y - c - l / 2
|
|
1472
|
+
), v = a.direction === "clockwise" ? -1 : 1;
|
|
1471
1473
|
for (let S = 0; S < t; S++) {
|
|
1472
|
-
let
|
|
1473
|
-
if (
|
|
1474
|
-
|
|
1475
|
-
else if (
|
|
1476
|
-
const P = S * 0.5 *
|
|
1477
|
-
|
|
1474
|
+
let w, I;
|
|
1475
|
+
if (a.spiralType === "golden")
|
|
1476
|
+
w = S * ve * v + a.startAngle, I = this.calculateGoldenRadius(S, t, E, a.tightness);
|
|
1477
|
+
else if (a.spiralType === "archimedean") {
|
|
1478
|
+
const P = S * 0.5 * a.tightness;
|
|
1479
|
+
w = P * v + a.startAngle, I = this.calculateArchimedeanRadius(P, t, E, a.tightness);
|
|
1478
1480
|
} else {
|
|
1479
|
-
const P = S * 0.3 *
|
|
1480
|
-
|
|
1481
|
+
const P = S * 0.3 * a.tightness;
|
|
1482
|
+
w = P * v + a.startAngle, I = this.calculateLogarithmicRadius(P, t, E, a.tightness);
|
|
1481
1483
|
}
|
|
1482
|
-
const z = m + Math.cos(
|
|
1483
|
-
let
|
|
1484
|
+
const z = m + Math.cos(w) * I, L = y + Math.sin(w) * I, _ = I / E, O = f > 0 ? 1 - _ * f * 0.5 : 1, H = p ? this.random(g, b) : 1, N = O * H, R = l * N, W = R * 1.5 / 2, U = R / 2, F = c + W, C = s - c - W, k = c + U, q = r - c - U, T = Math.max(F, Math.min(z, C)), $ = Math.max(k, Math.min(L, q));
|
|
1485
|
+
let M = 0;
|
|
1484
1486
|
if (u === "random") {
|
|
1485
|
-
const P =
|
|
1486
|
-
|
|
1487
|
-
} else u === "tangent" && (
|
|
1487
|
+
const P = w * 180 / Math.PI % 360, B = this.random(h, d);
|
|
1488
|
+
M = a.spiralType === "golden" ? B : P * 0.1 + B * 0.9;
|
|
1489
|
+
} else u === "tangent" && (M = this.calculateSpiralTangent(w, I, a));
|
|
1488
1490
|
const X = t - S;
|
|
1489
|
-
|
|
1491
|
+
n.push({
|
|
1490
1492
|
id: S,
|
|
1491
|
-
x:
|
|
1493
|
+
x: T,
|
|
1492
1494
|
y: $,
|
|
1493
|
-
rotation:
|
|
1495
|
+
rotation: M,
|
|
1494
1496
|
scale: N,
|
|
1495
|
-
baseSize:
|
|
1497
|
+
baseSize: R,
|
|
1496
1498
|
zIndex: X
|
|
1497
1499
|
});
|
|
1498
1500
|
}
|
|
1499
|
-
return
|
|
1501
|
+
return n;
|
|
1500
1502
|
}
|
|
1501
1503
|
/**
|
|
1502
1504
|
* Calculate tangent angle for spiral curve at given position
|
|
1503
1505
|
* This aligns the image along the spiral's direction of travel
|
|
1504
1506
|
*/
|
|
1505
1507
|
calculateSpiralTangent(t, i, e) {
|
|
1506
|
-
let
|
|
1508
|
+
let n;
|
|
1507
1509
|
if (e.spiralType === "golden")
|
|
1508
|
-
|
|
1510
|
+
n = t + Math.PI / 2;
|
|
1509
1511
|
else if (e.spiralType === "archimedean") {
|
|
1510
|
-
const r = 1 / e.tightness,
|
|
1511
|
-
|
|
1512
|
+
const r = 1 / e.tightness, a = Math.atan(i / r);
|
|
1513
|
+
n = t + a;
|
|
1512
1514
|
} else {
|
|
1513
|
-
const r = 0.15 / e.tightness,
|
|
1514
|
-
|
|
1515
|
+
const r = 0.15 / e.tightness, a = Math.atan(1 / r);
|
|
1516
|
+
n = t + a;
|
|
1515
1517
|
}
|
|
1516
|
-
return
|
|
1518
|
+
return n * 180 / Math.PI % 360 - 90;
|
|
1517
1519
|
}
|
|
1518
1520
|
/**
|
|
1519
1521
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1520
1522
|
* Creates even distribution like sunflower seeds
|
|
1521
1523
|
*/
|
|
1522
|
-
calculateGoldenRadius(t, i, e,
|
|
1523
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1524
|
+
calculateGoldenRadius(t, i, e, n) {
|
|
1525
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / n;
|
|
1524
1526
|
return Math.min(r, e);
|
|
1525
1527
|
}
|
|
1526
1528
|
/**
|
|
1527
1529
|
* Calculate radius for Archimedean spiral
|
|
1528
1530
|
* r = a + b*θ (constant spacing between arms)
|
|
1529
1531
|
*/
|
|
1530
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1531
|
-
const
|
|
1532
|
-
return t /
|
|
1532
|
+
calculateArchimedeanRadius(t, i, e, n) {
|
|
1533
|
+
const s = i * 0.5 * n;
|
|
1534
|
+
return t / s * e;
|
|
1533
1535
|
}
|
|
1534
1536
|
/**
|
|
1535
1537
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1536
1538
|
* r = a * e^(b*θ)
|
|
1537
1539
|
*/
|
|
1538
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1539
|
-
const
|
|
1540
|
-
return
|
|
1540
|
+
calculateLogarithmicRadius(t, i, e, n) {
|
|
1541
|
+
const s = e * 0.05, r = 0.15 / n, a = s * Math.exp(r * t), c = i * 0.3 * n, l = s * Math.exp(r * c);
|
|
1542
|
+
return a / l * e;
|
|
1541
1543
|
}
|
|
1542
1544
|
/**
|
|
1543
1545
|
* Utility: Generate random number between min and max
|
|
@@ -1546,7 +1548,7 @@ class xe {
|
|
|
1546
1548
|
return Math.random() * (i - t) + t;
|
|
1547
1549
|
}
|
|
1548
1550
|
}
|
|
1549
|
-
const
|
|
1551
|
+
const xe = {
|
|
1550
1552
|
clusterCount: "auto",
|
|
1551
1553
|
clusterSpread: 150,
|
|
1552
1554
|
clusterSpacing: 200,
|
|
@@ -1566,85 +1568,85 @@ class Se {
|
|
|
1566
1568
|
* @returns Array of layout objects with position, rotation, scale
|
|
1567
1569
|
*/
|
|
1568
1570
|
generate(t, i, e = {}) {
|
|
1569
|
-
const
|
|
1571
|
+
const n = [], { width: s, height: r } = i, a = { ...xe, ...this.config.cluster }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = g !== 1 || b !== 1, f = this.calculateClusterCount(
|
|
1570
1572
|
t,
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
+
a.clusterCount,
|
|
1574
|
+
s,
|
|
1573
1575
|
r,
|
|
1574
|
-
|
|
1576
|
+
a.clusterSpacing
|
|
1575
1577
|
), m = this.generateClusterCenters(
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
+
f,
|
|
1579
|
+
s,
|
|
1578
1580
|
r,
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
),
|
|
1581
|
+
c,
|
|
1582
|
+
a
|
|
1583
|
+
), y = new Array(f).fill(0);
|
|
1582
1584
|
for (let v = 0; v < t; v++)
|
|
1583
|
-
|
|
1584
|
-
let
|
|
1585
|
-
for (let v = 0; v <
|
|
1586
|
-
const S = m[v],
|
|
1587
|
-
for (let I = 0; I <
|
|
1585
|
+
y[v % f]++;
|
|
1586
|
+
let E = 0;
|
|
1587
|
+
for (let v = 0; v < f; v++) {
|
|
1588
|
+
const S = m[v], w = y[v];
|
|
1589
|
+
for (let I = 0; I < w; I++) {
|
|
1588
1590
|
let z, L;
|
|
1589
|
-
if (
|
|
1591
|
+
if (a.distribution === "gaussian")
|
|
1590
1592
|
z = this.gaussianRandom() * S.spread, L = this.gaussianRandom() * S.spread;
|
|
1591
1593
|
else {
|
|
1592
|
-
const
|
|
1593
|
-
z = Math.cos(
|
|
1594
|
+
const M = this.random(0, Math.PI * 2), X = this.random(0, S.spread);
|
|
1595
|
+
z = Math.cos(M) * X, L = Math.sin(M) * X;
|
|
1594
1596
|
}
|
|
1595
|
-
const _ = 1 +
|
|
1597
|
+
const _ = 1 + a.overlap * 0.5, O = 1 + a.overlap * 0.3;
|
|
1596
1598
|
z /= _, L /= _;
|
|
1597
|
-
const H = p ? this.random(
|
|
1598
|
-
let D = S.x + z,
|
|
1599
|
-
const
|
|
1600
|
-
D = Math.max(
|
|
1601
|
-
const k = u === "random" ? this.random(h, d) : 0,
|
|
1602
|
-
|
|
1603
|
-
id:
|
|
1599
|
+
const H = p ? this.random(g, b) : 1, N = O * H, R = l * N;
|
|
1600
|
+
let D = S.x + z, W = S.y + L;
|
|
1601
|
+
const F = R * 1.5 / 2, C = R / 2;
|
|
1602
|
+
D = Math.max(c + F, Math.min(D, s - c - F)), W = Math.max(c + C, Math.min(W, r - c - C));
|
|
1603
|
+
const k = u === "random" ? this.random(h, d) : 0, T = Math.sqrt(z * z + L * L) / S.spread, $ = Math.round((1 - T) * 50) + 1;
|
|
1604
|
+
n.push({
|
|
1605
|
+
id: E,
|
|
1604
1606
|
x: D,
|
|
1605
|
-
y:
|
|
1607
|
+
y: W,
|
|
1606
1608
|
rotation: k,
|
|
1607
1609
|
scale: N,
|
|
1608
|
-
baseSize:
|
|
1610
|
+
baseSize: R,
|
|
1609
1611
|
zIndex: $
|
|
1610
|
-
}),
|
|
1612
|
+
}), E++;
|
|
1611
1613
|
}
|
|
1612
1614
|
}
|
|
1613
|
-
return
|
|
1615
|
+
return n;
|
|
1614
1616
|
}
|
|
1615
1617
|
/**
|
|
1616
1618
|
* Calculate optimal number of clusters based on image count and container
|
|
1617
1619
|
*/
|
|
1618
|
-
calculateClusterCount(t, i, e,
|
|
1620
|
+
calculateClusterCount(t, i, e, n, s) {
|
|
1619
1621
|
if (i !== "auto")
|
|
1620
1622
|
return Math.max(1, Math.min(i, t));
|
|
1621
|
-
const
|
|
1622
|
-
e /
|
|
1623
|
+
const a = Math.max(1, Math.ceil(t / 8)), c = Math.floor(
|
|
1624
|
+
e / s * (n / s) * 0.6
|
|
1623
1625
|
);
|
|
1624
|
-
return Math.max(1, Math.min(
|
|
1626
|
+
return Math.max(1, Math.min(a, c, 10));
|
|
1625
1627
|
}
|
|
1626
1628
|
/**
|
|
1627
1629
|
* Generate cluster center positions with spacing constraints
|
|
1628
1630
|
*/
|
|
1629
|
-
generateClusterCenters(t, i, e,
|
|
1630
|
-
const r = [],
|
|
1631
|
+
generateClusterCenters(t, i, e, n, s) {
|
|
1632
|
+
const r = [], c = n + s.clusterSpread, l = i - n - s.clusterSpread, u = n + s.clusterSpread, h = e - n - s.clusterSpread;
|
|
1631
1633
|
for (let d = 0; d < t; d++) {
|
|
1632
|
-
let
|
|
1634
|
+
let g = null, b = -1;
|
|
1633
1635
|
for (let p = 0; p < 100; p++) {
|
|
1634
|
-
const
|
|
1635
|
-
x: this.random(
|
|
1636
|
+
const f = {
|
|
1637
|
+
x: this.random(c, l),
|
|
1636
1638
|
y: this.random(u, h),
|
|
1637
|
-
spread: this.calculateClusterSpread(
|
|
1639
|
+
spread: this.calculateClusterSpread(s)
|
|
1638
1640
|
};
|
|
1639
1641
|
let m = 1 / 0;
|
|
1640
|
-
for (const
|
|
1641
|
-
const
|
|
1642
|
+
for (const y of r) {
|
|
1643
|
+
const E = f.x - y.x, v = f.y - y.y, S = Math.sqrt(E * E + v * v);
|
|
1642
1644
|
m = Math.min(m, S);
|
|
1643
1645
|
}
|
|
1644
|
-
if ((r.length === 0 || m >
|
|
1646
|
+
if ((r.length === 0 || m > b) && (g = f, b = m), m >= s.clusterSpacing)
|
|
1645
1647
|
break;
|
|
1646
1648
|
}
|
|
1647
|
-
|
|
1649
|
+
g && r.push(g);
|
|
1648
1650
|
}
|
|
1649
1651
|
return r;
|
|
1650
1652
|
}
|
|
@@ -1684,32 +1686,32 @@ class Ie {
|
|
|
1684
1686
|
* @returns Array of layout objects with position, rotation, scale
|
|
1685
1687
|
*/
|
|
1686
1688
|
generate(t, i, e = {}) {
|
|
1687
|
-
const
|
|
1689
|
+
const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || g !== 1, p = e.fixedHeight ?? a, f = {
|
|
1688
1690
|
...Ht,
|
|
1689
1691
|
...this.config.wave
|
|
1690
|
-
}, { rows: m, amplitude:
|
|
1691
|
-
let
|
|
1692
|
-
for (let
|
|
1693
|
-
const k = m === 1 ? (
|
|
1694
|
-
let
|
|
1695
|
-
S === "offset" ?
|
|
1696
|
-
for (let
|
|
1697
|
-
const $ =
|
|
1692
|
+
}, { rows: m, amplitude: y, frequency: E, phaseShift: v, synchronization: S } = f, w = Math.ceil(t / m), L = p * 1.5 / 2, _ = c + L, O = s - c - L, H = O - _, N = w > 1 ? H / (w - 1) : 0, R = c + y + p / 2, D = r - c - y - p / 2, W = D - R, U = m > 1 ? W / (m - 1) : 0;
|
|
1693
|
+
let F = 0;
|
|
1694
|
+
for (let C = 0; C < m && F < t; C++) {
|
|
1695
|
+
const k = m === 1 ? (R + D) / 2 : R + C * U;
|
|
1696
|
+
let q = 0;
|
|
1697
|
+
S === "offset" ? q = C * v : S === "alternating" && (q = C * Math.PI);
|
|
1698
|
+
for (let T = 0; T < w && F < t; T++) {
|
|
1699
|
+
const $ = w === 1 ? (_ + O) / 2 : _ + T * N, M = this.calculateWaveY($, s, y, E, q), X = $, P = k + M, B = b ? this.random(d, g) : 1, Y = p * B;
|
|
1698
1700
|
let V = 0;
|
|
1699
|
-
|
|
1700
|
-
const K = Y * 1.5 / 2,
|
|
1701
|
-
|
|
1702
|
-
id:
|
|
1703
|
-
x: Math.max(
|
|
1704
|
-
y: Math.max(
|
|
1701
|
+
l === "tangent" ? V = this.calculateRotation($, s, y, E, q) : l === "random" && (V = this.random(u, h));
|
|
1702
|
+
const K = Y * 1.5 / 2, lt = Y / 2, nt = c + K, ot = s - c - K, ht = c + lt, dt = r - c - lt;
|
|
1703
|
+
n.push({
|
|
1704
|
+
id: F,
|
|
1705
|
+
x: Math.max(nt, Math.min(X, ot)),
|
|
1706
|
+
y: Math.max(ht, Math.min(P, dt)),
|
|
1705
1707
|
rotation: V,
|
|
1706
|
-
scale:
|
|
1708
|
+
scale: B,
|
|
1707
1709
|
baseSize: Y,
|
|
1708
|
-
zIndex:
|
|
1709
|
-
}),
|
|
1710
|
+
zIndex: F + 1
|
|
1711
|
+
}), F++;
|
|
1710
1712
|
}
|
|
1711
1713
|
}
|
|
1712
|
-
return
|
|
1714
|
+
return n;
|
|
1713
1715
|
}
|
|
1714
1716
|
/**
|
|
1715
1717
|
* Calculate Y position displacement on wave curve
|
|
@@ -1720,9 +1722,9 @@ class Ie {
|
|
|
1720
1722
|
* @param phase - Phase offset
|
|
1721
1723
|
* @returns Y displacement from baseline
|
|
1722
1724
|
*/
|
|
1723
|
-
calculateWaveY(t, i, e,
|
|
1725
|
+
calculateWaveY(t, i, e, n, s) {
|
|
1724
1726
|
const r = t / i;
|
|
1725
|
-
return e * Math.sin(
|
|
1727
|
+
return e * Math.sin(n * r * 2 * Math.PI + s);
|
|
1726
1728
|
}
|
|
1727
1729
|
/**
|
|
1728
1730
|
* Calculate rotation based on wave tangent
|
|
@@ -1733,9 +1735,9 @@ class Ie {
|
|
|
1733
1735
|
* @param phase - Phase offset
|
|
1734
1736
|
* @returns Rotation angle in degrees
|
|
1735
1737
|
*/
|
|
1736
|
-
calculateRotation(t, i, e,
|
|
1737
|
-
const r = t / i,
|
|
1738
|
-
return Math.atan(
|
|
1738
|
+
calculateRotation(t, i, e, n, s) {
|
|
1739
|
+
const r = t / i, a = e * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + s) / i;
|
|
1740
|
+
return Math.atan(a) * (180 / Math.PI);
|
|
1739
1741
|
}
|
|
1740
1742
|
/**
|
|
1741
1743
|
* Estimate image width based on height
|
|
@@ -1749,7 +1751,7 @@ class Ie {
|
|
|
1749
1751
|
return Math.random() * (i - t) + t;
|
|
1750
1752
|
}
|
|
1751
1753
|
}
|
|
1752
|
-
const
|
|
1754
|
+
const wt = 100, Q = 100 / Math.sqrt(3), xt = [
|
|
1753
1755
|
[Q / 2, 0],
|
|
1754
1756
|
// upper-left
|
|
1755
1757
|
[3 * Q / 2, 0],
|
|
@@ -1762,18 +1764,18 @@ const xt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1762
1764
|
// lower-left
|
|
1763
1765
|
[0, 50]
|
|
1764
1766
|
// left
|
|
1765
|
-
],
|
|
1766
|
-
function
|
|
1767
|
+
], Ae = xt[1][0] / wt, Re = xt[2][1] / wt;
|
|
1768
|
+
function Ce(o) {
|
|
1767
1769
|
return {
|
|
1768
|
-
colStep:
|
|
1769
|
-
rowOffset:
|
|
1770
|
+
colStep: Ae * o,
|
|
1771
|
+
rowOffset: Re * o
|
|
1770
1772
|
};
|
|
1771
1773
|
}
|
|
1772
|
-
function
|
|
1773
|
-
const { colStep: r } =
|
|
1774
|
+
function Te(o, t, i, e, n, s) {
|
|
1775
|
+
const { colStep: r } = Ce(s);
|
|
1774
1776
|
return {
|
|
1775
|
-
px: e + r *
|
|
1776
|
-
py:
|
|
1777
|
+
px: e + r * o,
|
|
1778
|
+
py: n + s * (t + o / 2)
|
|
1777
1779
|
};
|
|
1778
1780
|
}
|
|
1779
1781
|
const Le = [
|
|
@@ -1784,46 +1786,46 @@ const Le = [
|
|
|
1784
1786
|
[0, -1, 1],
|
|
1785
1787
|
[1, -1, 0]
|
|
1786
1788
|
];
|
|
1787
|
-
function
|
|
1788
|
-
if (
|
|
1789
|
+
function Fe(o) {
|
|
1790
|
+
if (o === 0) return [[0, 0, 0]];
|
|
1789
1791
|
const t = [];
|
|
1790
|
-
let [i, e,
|
|
1791
|
-
for (const [
|
|
1792
|
-
for (let
|
|
1793
|
-
t.push([i, e,
|
|
1792
|
+
let [i, e, n] = [0, -o, o];
|
|
1793
|
+
for (const [s, r, a] of Le)
|
|
1794
|
+
for (let c = 0; c < o; c++)
|
|
1795
|
+
t.push([i, e, n]), i += s, e += r, n += a;
|
|
1794
1796
|
return t;
|
|
1795
1797
|
}
|
|
1796
|
-
class
|
|
1798
|
+
class Me {
|
|
1797
1799
|
// imageConfig intentionally not stored — honeycomb forces uniform sizing (rotation/variance
|
|
1798
1800
|
// would break hex tiling). Kept as parameter for interface compatibility.
|
|
1799
1801
|
constructor(t, i = {}) {
|
|
1800
1802
|
this.config = t;
|
|
1801
1803
|
}
|
|
1802
1804
|
generate(t, i, e = {}) {
|
|
1803
|
-
const
|
|
1805
|
+
const n = [], { width: s, height: r } = i, a = s / 2, c = r / 2, l = e.fixedHeight ?? 200, h = {
|
|
1804
1806
|
...Nt,
|
|
1805
1807
|
...this.config.honeycomb
|
|
1806
|
-
}.spacing ?? 0, d =
|
|
1807
|
-
let
|
|
1808
|
-
for (;
|
|
1809
|
-
const p =
|
|
1810
|
-
for (const [
|
|
1811
|
-
if (
|
|
1812
|
-
const { px:
|
|
1813
|
-
|
|
1814
|
-
id:
|
|
1815
|
-
x:
|
|
1808
|
+
}.spacing ?? 0, d = l + h;
|
|
1809
|
+
let g = 0, b = 0;
|
|
1810
|
+
for (; g < t; ) {
|
|
1811
|
+
const p = Fe(b);
|
|
1812
|
+
for (const [f, m, y] of p) {
|
|
1813
|
+
if (g >= t) break;
|
|
1814
|
+
const { px: E, py: v } = Te(f, m, y, a, c, d);
|
|
1815
|
+
n.push({
|
|
1816
|
+
id: g,
|
|
1817
|
+
x: E,
|
|
1816
1818
|
y: v,
|
|
1817
1819
|
rotation: 0,
|
|
1818
1820
|
scale: 1,
|
|
1819
|
-
baseSize:
|
|
1821
|
+
baseSize: l,
|
|
1820
1822
|
// Inner rings render above outer rings
|
|
1821
|
-
zIndex: Math.max(1, 100 -
|
|
1822
|
-
}),
|
|
1823
|
+
zIndex: Math.max(1, 100 - b)
|
|
1824
|
+
}), g++;
|
|
1823
1825
|
}
|
|
1824
|
-
|
|
1826
|
+
b++;
|
|
1825
1827
|
}
|
|
1826
|
-
return
|
|
1828
|
+
return n;
|
|
1827
1829
|
}
|
|
1828
1830
|
}
|
|
1829
1831
|
class ze {
|
|
@@ -1839,15 +1841,15 @@ class ze {
|
|
|
1839
1841
|
case "radial":
|
|
1840
1842
|
return new pe(this.config, this.imageConfig);
|
|
1841
1843
|
case "grid":
|
|
1842
|
-
return new
|
|
1844
|
+
return new ye(this.config, this.imageConfig);
|
|
1843
1845
|
case "spiral":
|
|
1844
|
-
return new
|
|
1846
|
+
return new we(this.config, this.imageConfig);
|
|
1845
1847
|
case "cluster":
|
|
1846
1848
|
return new Se(this.config, this.imageConfig);
|
|
1847
1849
|
case "wave":
|
|
1848
1850
|
return new Ie(this.config, this.imageConfig);
|
|
1849
1851
|
case "honeycomb":
|
|
1850
|
-
return new
|
|
1852
|
+
return new Me(this.config, this.imageConfig);
|
|
1851
1853
|
default:
|
|
1852
1854
|
return new me(this.config, this.imageConfig);
|
|
1853
1855
|
}
|
|
@@ -1860,10 +1862,10 @@ class ze {
|
|
|
1860
1862
|
* @returns Array of layout objects with position, rotation, scale
|
|
1861
1863
|
*/
|
|
1862
1864
|
generateLayout(t, i, e = {}) {
|
|
1863
|
-
const
|
|
1864
|
-
return
|
|
1865
|
-
this.layouts.set(
|
|
1866
|
-
}),
|
|
1865
|
+
const n = this.placementLayout.generate(t, i, e);
|
|
1866
|
+
return n.forEach((s) => {
|
|
1867
|
+
this.layouts.set(s.id, s);
|
|
1868
|
+
}), n;
|
|
1867
1869
|
}
|
|
1868
1870
|
/**
|
|
1869
1871
|
* Get the original layout state for an image
|
|
@@ -1916,8 +1918,8 @@ class ze {
|
|
|
1916
1918
|
return;
|
|
1917
1919
|
if (typeof e == "number")
|
|
1918
1920
|
return e;
|
|
1919
|
-
const
|
|
1920
|
-
return
|
|
1921
|
+
const n = e, s = this.resolveBreakpoint(t);
|
|
1922
|
+
return s === "mobile" ? n.mobile ?? n.tablet ?? n.screen : s === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1921
1923
|
}
|
|
1922
1924
|
/**
|
|
1923
1925
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1927,19 +1929,19 @@ class ze {
|
|
|
1927
1929
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1928
1930
|
* @returns Calculated sizing result with height
|
|
1929
1931
|
*/
|
|
1930
|
-
calculateAdaptiveSize(t, i, e,
|
|
1931
|
-
const
|
|
1932
|
+
calculateAdaptiveSize(t, i, e, n) {
|
|
1933
|
+
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1932
1934
|
if (r !== void 0)
|
|
1933
1935
|
return { height: r };
|
|
1934
|
-
const
|
|
1936
|
+
const a = s?.minSize ?? 50, c = s?.maxSize ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, p = h * d * l / i;
|
|
1935
1937
|
let m = Math.sqrt(p / 1.4);
|
|
1936
1938
|
m *= u, m = Math.min(m, e);
|
|
1937
|
-
let
|
|
1938
|
-
if (
|
|
1939
|
-
const
|
|
1940
|
-
|
|
1939
|
+
let y = this.clamp(m, a, c);
|
|
1940
|
+
if (y === a && m < a) {
|
|
1941
|
+
const E = Math.max(a * 0.05, 20);
|
|
1942
|
+
y = Math.max(E, m);
|
|
1941
1943
|
}
|
|
1942
|
-
return this.config.algorithm === "honeycomb" && (
|
|
1944
|
+
return this.config.algorithm === "honeycomb" && (y = Math.min(y, this.honeycombMaxImageHeight(i, t))), { height: y };
|
|
1943
1945
|
}
|
|
1944
1946
|
/**
|
|
1945
1947
|
* Returns the largest image height at which all honeycomb rings fit within the container.
|
|
@@ -1948,10 +1950,10 @@ class ze {
|
|
|
1948
1950
|
*/
|
|
1949
1951
|
honeycombMaxImageHeight(t, i) {
|
|
1950
1952
|
if (t <= 1) return 1 / 0;
|
|
1951
|
-
let e = 0,
|
|
1952
|
-
for (;
|
|
1953
|
-
e++,
|
|
1954
|
-
const
|
|
1953
|
+
let e = 0, n = 1;
|
|
1954
|
+
for (; n < t; )
|
|
1955
|
+
e++, n += 6 * e;
|
|
1956
|
+
const s = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, a = i.width / 2, c = i.height / 2, l = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), h = (c - s - r * e) / (e + 0.5), d = (a - s - l * r * e) / (l * e + u);
|
|
1955
1957
|
return Math.max(10, Math.min(h, d));
|
|
1956
1958
|
}
|
|
1957
1959
|
/**
|
|
@@ -1961,8 +1963,8 @@ class ze {
|
|
|
1961
1963
|
return Math.max(i, Math.min(e, t));
|
|
1962
1964
|
}
|
|
1963
1965
|
}
|
|
1964
|
-
var
|
|
1965
|
-
const
|
|
1966
|
+
var x = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(x || {});
|
|
1967
|
+
const Tt = {
|
|
1966
1968
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1967
1969
|
circle: "circle(50%)",
|
|
1968
1970
|
square: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
|
|
@@ -1995,8 +1997,8 @@ const Ct = {
|
|
|
1995
1997
|
},
|
|
1996
1998
|
// Hexagon - regular hexagon (reference points imported from hexagonGeometry)
|
|
1997
1999
|
hexagon: {
|
|
1998
|
-
refHeight:
|
|
1999
|
-
points:
|
|
2000
|
+
refHeight: wt,
|
|
2001
|
+
points: xt
|
|
2000
2002
|
},
|
|
2001
2003
|
// Octagon - regular octagon
|
|
2002
2004
|
octagon: {
|
|
@@ -2009,96 +2011,96 @@ const Ct = {
|
|
|
2009
2011
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
2010
2012
|
}
|
|
2011
2013
|
};
|
|
2012
|
-
function De(
|
|
2013
|
-
if (
|
|
2014
|
-
return
|
|
2014
|
+
function De(o) {
|
|
2015
|
+
if (o)
|
|
2016
|
+
return o in Tt ? Tt[o] : o;
|
|
2015
2017
|
}
|
|
2016
|
-
function $e(
|
|
2017
|
-
const e = Oe[
|
|
2018
|
+
function $e(o, t, i) {
|
|
2019
|
+
const e = Oe[o];
|
|
2018
2020
|
if (!e) return "";
|
|
2019
|
-
const
|
|
2020
|
-
if (
|
|
2021
|
-
return `circle(${Math.round(50 *
|
|
2022
|
-
const
|
|
2023
|
-
return `polygon(${e.points.map(([p,
|
|
2024
|
-
const m = Math.round((p *
|
|
2025
|
-
return `${m}px ${
|
|
2021
|
+
const n = t / e.refHeight;
|
|
2022
|
+
if (o === "circle")
|
|
2023
|
+
return `circle(${Math.round(50 * n * 100) / 100}px)`;
|
|
2024
|
+
const s = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), a = (Math.min(...s) + Math.max(...s)) / 2 * n, c = (Math.min(...r) + Math.max(...r)) / 2 * n, l = (Math.max(...s) - Math.min(...s)) * n, u = (i ?? l) / 2, h = t / 2, d = u - a, g = h - c;
|
|
2025
|
+
return `polygon(${e.points.map(([p, f]) => {
|
|
2026
|
+
const m = Math.round((p * n + d) * 100) / 100, y = Math.round((f * n + g) * 100) / 100;
|
|
2027
|
+
return `${m}px ${y}px`;
|
|
2026
2028
|
}).join(", ")})`;
|
|
2027
2029
|
}
|
|
2028
|
-
function Pe(
|
|
2029
|
-
return
|
|
2030
|
+
function Pe(o) {
|
|
2031
|
+
return o in mt;
|
|
2030
2032
|
}
|
|
2031
|
-
function _e(
|
|
2032
|
-
return
|
|
2033
|
+
function _e(o) {
|
|
2034
|
+
return o ? Pe(o) ? mt[o] : o : mt.md;
|
|
2033
2035
|
}
|
|
2034
|
-
function Ue(
|
|
2035
|
-
if (!
|
|
2036
|
+
function Ue(o) {
|
|
2037
|
+
if (!o) return "";
|
|
2036
2038
|
const t = [];
|
|
2037
|
-
if (
|
|
2038
|
-
if (typeof
|
|
2039
|
-
t.push(`drop-shadow(${
|
|
2039
|
+
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)
|
|
2040
|
+
if (typeof o.dropShadow == "string")
|
|
2041
|
+
t.push(`drop-shadow(${o.dropShadow})`);
|
|
2040
2042
|
else {
|
|
2041
|
-
const i =
|
|
2043
|
+
const i = o.dropShadow;
|
|
2042
2044
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
2043
2045
|
}
|
|
2044
2046
|
return t.join(" ");
|
|
2045
2047
|
}
|
|
2046
|
-
function tt(
|
|
2047
|
-
if (!
|
|
2048
|
+
function tt(o) {
|
|
2049
|
+
if (!o || o.style === "none" || o.width === 0)
|
|
2048
2050
|
return "none";
|
|
2049
|
-
const t =
|
|
2051
|
+
const t = o.width ?? 0, i = o.style ?? "solid", e = o.color ?? "#000000";
|
|
2050
2052
|
return `${t}px ${i} ${e}`;
|
|
2051
2053
|
}
|
|
2052
|
-
function
|
|
2053
|
-
if (!
|
|
2054
|
+
function it(o, t, i) {
|
|
2055
|
+
if (!o) return {};
|
|
2054
2056
|
const e = {};
|
|
2055
|
-
if (
|
|
2056
|
-
const
|
|
2057
|
-
|
|
2058
|
-
} else
|
|
2059
|
-
if (
|
|
2060
|
-
const
|
|
2061
|
-
e.borderTop = tt(
|
|
2062
|
-
} else
|
|
2063
|
-
|
|
2064
|
-
const r = Ue(
|
|
2065
|
-
if (e.filter = r || "none",
|
|
2066
|
-
const
|
|
2067
|
-
e.outline = `${
|
|
2068
|
-
}
|
|
2069
|
-
if (
|
|
2070
|
-
let
|
|
2071
|
-
const
|
|
2072
|
-
if (
|
|
2073
|
-
|
|
2057
|
+
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
2058
|
+
const a = o.border?.radius ?? 0;
|
|
2059
|
+
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : a && (e.borderTopLeftRadius = `${a}px`), o.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${o.borderRadiusTopRight}px` : a && (e.borderTopRightRadius = `${a}px`), o.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : a && (e.borderBottomRightRadius = `${a}px`), o.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : a && (e.borderBottomLeftRadius = `${a}px`);
|
|
2060
|
+
} else o.border?.radius !== void 0 && (e.borderRadius = `${o.border.radius}px`);
|
|
2061
|
+
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
2062
|
+
const a = o.border || {}, c = { ...a, ...o.borderTop }, l = { ...a, ...o.borderRight }, u = { ...a, ...o.borderBottom }, h = { ...a, ...o.borderLeft };
|
|
2063
|
+
e.borderTop = tt(c), e.borderRight = tt(l), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
2064
|
+
} else o.border && (e.border = tt(o.border));
|
|
2065
|
+
o.shadow !== void 0 && (e.boxShadow = _e(o.shadow));
|
|
2066
|
+
const r = Ue(o.filter);
|
|
2067
|
+
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) {
|
|
2068
|
+
const a = o.outline.width ?? 0, c = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
2069
|
+
e.outline = `${a}px ${c} ${l}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
2070
|
+
}
|
|
2071
|
+
if (o.objectFit !== void 0 && (e.objectFit = o.objectFit), o.aspectRatio !== void 0 && (e.aspectRatio = o.aspectRatio), o.clipPath !== void 0) {
|
|
2072
|
+
let a;
|
|
2073
|
+
const c = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath, l = c ? o.clipPath : void 0;
|
|
2074
|
+
if (l?.mode === "height-relative" && t)
|
|
2075
|
+
a = $e(l.shape, t, i);
|
|
2074
2076
|
else {
|
|
2075
|
-
const u =
|
|
2076
|
-
|
|
2077
|
+
const u = c && l ? l.shape : o.clipPath;
|
|
2078
|
+
a = De(u);
|
|
2077
2079
|
}
|
|
2078
|
-
|
|
2080
|
+
a && (a === "none" ? e.clipPath = "unset" : (e.clipPath = a, e.overflow = "hidden"));
|
|
2079
2081
|
}
|
|
2080
2082
|
return e;
|
|
2081
2083
|
}
|
|
2082
|
-
function He(
|
|
2083
|
-
t.borderRadius !== void 0 && (
|
|
2084
|
+
function He(o, t) {
|
|
2085
|
+
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);
|
|
2084
2086
|
}
|
|
2085
|
-
function
|
|
2086
|
-
const
|
|
2087
|
-
He(
|
|
2087
|
+
function st(o, t, i, e) {
|
|
2088
|
+
const n = it(t, i, e);
|
|
2089
|
+
He(o, n);
|
|
2088
2090
|
}
|
|
2089
|
-
function $t(
|
|
2090
|
-
return
|
|
2091
|
+
function $t(o) {
|
|
2092
|
+
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
2091
2093
|
}
|
|
2092
|
-
function
|
|
2094
|
+
function et(o, t) {
|
|
2093
2095
|
const i = $t(t);
|
|
2094
2096
|
i && i.split(" ").forEach((e) => {
|
|
2095
|
-
e.trim() &&
|
|
2097
|
+
e.trim() && o.classList.add(e.trim());
|
|
2096
2098
|
});
|
|
2097
2099
|
}
|
|
2098
|
-
function pt(
|
|
2100
|
+
function pt(o, t) {
|
|
2099
2101
|
const i = $t(t);
|
|
2100
2102
|
i && i.split(" ").forEach((e) => {
|
|
2101
|
-
e.trim() &&
|
|
2103
|
+
e.trim() && o.classList.remove(e.trim());
|
|
2102
2104
|
});
|
|
2103
2105
|
}
|
|
2104
2106
|
const Lt = {
|
|
@@ -2107,7 +2109,7 @@ const Lt = {
|
|
|
2107
2109
|
};
|
|
2108
2110
|
class Ne {
|
|
2109
2111
|
constructor(t, i, e) {
|
|
2110
|
-
this.state =
|
|
2112
|
+
this.state = x.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.onUnfocusComplete = null, this.config = t, this.animationEngine = i, this.styling = e, this.focusedClassName = e?.focused?.className;
|
|
2111
2113
|
}
|
|
2112
2114
|
/**
|
|
2113
2115
|
* Set callback to be fired when an unfocus animation fully completes.
|
|
@@ -2125,7 +2127,7 @@ class Ne {
|
|
|
2125
2127
|
* Check if any animation is in progress
|
|
2126
2128
|
*/
|
|
2127
2129
|
isAnimating() {
|
|
2128
|
-
return this.state !==
|
|
2130
|
+
return this.state !== x.IDLE && this.state !== x.FOCUSED;
|
|
2129
2131
|
}
|
|
2130
2132
|
/**
|
|
2131
2133
|
* Normalize scalePercent value
|
|
@@ -2138,19 +2140,19 @@ class Ne {
|
|
|
2138
2140
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2139
2141
|
*/
|
|
2140
2142
|
calculateFocusDimensions(t, i, e) {
|
|
2141
|
-
const
|
|
2142
|
-
let
|
|
2143
|
-
const
|
|
2144
|
-
return
|
|
2143
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), s = e.height * n, r = t / i;
|
|
2144
|
+
let a = s, c = a * r;
|
|
2145
|
+
const l = e.width * n;
|
|
2146
|
+
return c > l && (c = l, a = c / r), { width: c, height: a };
|
|
2145
2147
|
}
|
|
2146
2148
|
/**
|
|
2147
2149
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
2148
2150
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2149
2151
|
*/
|
|
2150
2152
|
calculateFocusTransform(t, i) {
|
|
2151
|
-
const e = t.width / 2,
|
|
2153
|
+
const e = t.width / 2, n = t.height / 2, s = e - i.x, r = n - i.y;
|
|
2152
2154
|
return {
|
|
2153
|
-
x:
|
|
2155
|
+
x: s,
|
|
2154
2156
|
y: r,
|
|
2155
2157
|
rotation: 0,
|
|
2156
2158
|
scale: 1
|
|
@@ -2163,8 +2165,8 @@ class Ne {
|
|
|
2163
2165
|
buildDimensionZoomTransform(t) {
|
|
2164
2166
|
const i = ["translate(-50%, -50%)"];
|
|
2165
2167
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
2166
|
-
const e = t.x ?? 0,
|
|
2167
|
-
i.push(`translate(${e}px, ${
|
|
2168
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
2169
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
2168
2170
|
}
|
|
2169
2171
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
2170
2172
|
}
|
|
@@ -2172,23 +2174,23 @@ class Ne {
|
|
|
2172
2174
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2173
2175
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2174
2176
|
*/
|
|
2175
|
-
animateWithDimensions(t, i, e,
|
|
2176
|
-
const
|
|
2177
|
+
animateWithDimensions(t, i, e, n, s, r, a, c) {
|
|
2178
|
+
const l = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2177
2179
|
return t.style.transition = "none", t.animate(
|
|
2178
2180
|
[
|
|
2179
2181
|
{
|
|
2180
|
-
transform:
|
|
2181
|
-
width: `${
|
|
2182
|
-
height: `${
|
|
2182
|
+
transform: l,
|
|
2183
|
+
width: `${n}px`,
|
|
2184
|
+
height: `${s}px`
|
|
2183
2185
|
},
|
|
2184
2186
|
{
|
|
2185
2187
|
transform: u,
|
|
2186
2188
|
width: `${r}px`,
|
|
2187
|
-
height: `${
|
|
2189
|
+
height: `${a}px`
|
|
2188
2190
|
}
|
|
2189
2191
|
],
|
|
2190
2192
|
{
|
|
2191
|
-
duration:
|
|
2193
|
+
duration: c,
|
|
2192
2194
|
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2193
2195
|
fill: "forwards"
|
|
2194
2196
|
}
|
|
@@ -2199,8 +2201,8 @@ class Ne {
|
|
|
2199
2201
|
* Applies all focused styling properties, classes, and z-index
|
|
2200
2202
|
*/
|
|
2201
2203
|
applyFocusedStyling(t, i) {
|
|
2202
|
-
if (t.style.zIndex = String(i), t.classList.add("fbn-ic-focused"),
|
|
2203
|
-
const e =
|
|
2204
|
+
if (t.style.zIndex = String(i), t.classList.add("fbn-ic-focused"), et(t, this.focusedClassName), this.styling?.focused) {
|
|
2205
|
+
const e = it(this.styling.focused, t.offsetHeight, t.offsetWidth);
|
|
2204
2206
|
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);
|
|
2205
2207
|
}
|
|
2206
2208
|
}
|
|
@@ -2210,7 +2212,7 @@ class Ne {
|
|
|
2210
2212
|
*/
|
|
2211
2213
|
removeFocusedStyling(t, i) {
|
|
2212
2214
|
if (t.style.zIndex = i, t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName), this.styling?.default) {
|
|
2213
|
-
const e =
|
|
2215
|
+
const e = it(this.styling.default, t.offsetHeight, t.offsetWidth);
|
|
2214
2216
|
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);
|
|
2215
2217
|
}
|
|
2216
2218
|
}
|
|
@@ -2219,13 +2221,13 @@ class Ne {
|
|
|
2219
2221
|
* This ensures clip-path changes smoothly as width/height animate
|
|
2220
2222
|
*/
|
|
2221
2223
|
startClipPathAnimation(t, i, e) {
|
|
2222
|
-
let
|
|
2223
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
2224
|
-
const
|
|
2225
|
-
const r = t.offsetHeight,
|
|
2226
|
-
|
|
2224
|
+
let n = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2225
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (n = { ...n, clipPath: void 0 });
|
|
2226
|
+
const s = () => {
|
|
2227
|
+
const r = t.offsetHeight, a = t.offsetWidth, c = it(n, r, a);
|
|
2228
|
+
c.clipPath !== void 0 ? t.style.clipPath = c.clipPath : t.style.clipPath = "unset", c.overflow !== void 0 && (t.style.overflow = c.overflow), i.animation.playState === "running" && requestAnimationFrame(s);
|
|
2227
2229
|
};
|
|
2228
|
-
requestAnimationFrame(
|
|
2230
|
+
requestAnimationFrame(s);
|
|
2229
2231
|
}
|
|
2230
2232
|
/**
|
|
2231
2233
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -2233,27 +2235,27 @@ class Ne {
|
|
|
2233
2235
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2234
2236
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2235
2237
|
*/
|
|
2236
|
-
startFocusAnimation(t, i, e,
|
|
2237
|
-
const r = t.style.zIndex || "",
|
|
2238
|
+
startFocusAnimation(t, i, e, n, s) {
|
|
2239
|
+
const r = t.style.zIndex || "", a = t.offsetWidth, c = t.offsetHeight, l = this.calculateFocusDimensions(a, c, i), u = this.calculateFocusTransform(i, e);
|
|
2238
2240
|
this.animationEngine.cancelAllAnimations(t);
|
|
2239
2241
|
const h = this.config.animationDuration ?? 600;
|
|
2240
2242
|
this.applyFocusedStyling(t, Lt.FOCUSING);
|
|
2241
|
-
const d =
|
|
2243
|
+
const d = n ?? {
|
|
2242
2244
|
x: 0,
|
|
2243
2245
|
y: 0,
|
|
2244
2246
|
rotation: e.rotation,
|
|
2245
2247
|
scale: 1
|
|
2246
2248
|
// No scale - using dimensions
|
|
2247
|
-
},
|
|
2249
|
+
}, g = s?.width ?? a, b = s?.height ?? c, p = this.animateWithDimensions(
|
|
2248
2250
|
t,
|
|
2249
2251
|
d,
|
|
2250
2252
|
u,
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2253
|
+
g,
|
|
2254
|
+
b,
|
|
2255
|
+
l.width,
|
|
2256
|
+
l.height,
|
|
2255
2257
|
h
|
|
2256
|
-
),
|
|
2258
|
+
), f = {
|
|
2257
2259
|
id: `focus-${Date.now()}`,
|
|
2258
2260
|
element: t,
|
|
2259
2261
|
animation: p,
|
|
@@ -2267,17 +2269,17 @@ class Ne {
|
|
|
2267
2269
|
originalState: e,
|
|
2268
2270
|
focusTransform: u,
|
|
2269
2271
|
originalZIndex: r,
|
|
2270
|
-
originalWidth:
|
|
2271
|
-
originalHeight:
|
|
2272
|
-
focusWidth:
|
|
2273
|
-
focusHeight:
|
|
2274
|
-
}, this.startClipPathAnimation(t,
|
|
2272
|
+
originalWidth: a,
|
|
2273
|
+
originalHeight: c,
|
|
2274
|
+
focusWidth: l.width,
|
|
2275
|
+
focusHeight: l.height
|
|
2276
|
+
}, this.startClipPathAnimation(t, f, !0), {
|
|
2275
2277
|
element: t,
|
|
2276
2278
|
originalState: e,
|
|
2277
|
-
animationHandle:
|
|
2279
|
+
animationHandle: f,
|
|
2278
2280
|
direction: "in",
|
|
2279
|
-
originalWidth:
|
|
2280
|
-
originalHeight:
|
|
2281
|
+
originalWidth: a,
|
|
2282
|
+
originalHeight: c
|
|
2281
2283
|
};
|
|
2282
2284
|
}
|
|
2283
2285
|
/**
|
|
@@ -2285,11 +2287,11 @@ class Ne {
|
|
|
2285
2287
|
* Animates back to original dimensions for consistent behavior
|
|
2286
2288
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2287
2289
|
*/
|
|
2288
|
-
startUnfocusAnimation(t, i, e,
|
|
2290
|
+
startUnfocusAnimation(t, i, e, n) {
|
|
2289
2291
|
t.style.zIndex = String(Lt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2290
|
-
const
|
|
2292
|
+
const s = this.config.animationDuration ?? 600;
|
|
2291
2293
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2292
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 },
|
|
2294
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, a = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, c = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, l = {
|
|
2293
2295
|
x: 0,
|
|
2294
2296
|
y: 0,
|
|
2295
2297
|
rotation: i.rotation,
|
|
@@ -2298,25 +2300,25 @@ class Ne {
|
|
|
2298
2300
|
}, u = this.focusData?.originalWidth ?? t.offsetWidth, h = this.focusData?.originalHeight ?? t.offsetHeight, d = this.animateWithDimensions(
|
|
2299
2301
|
t,
|
|
2300
2302
|
r,
|
|
2301
|
-
c,
|
|
2302
|
-
s,
|
|
2303
2303
|
l,
|
|
2304
|
+
a,
|
|
2305
|
+
c,
|
|
2304
2306
|
u,
|
|
2305
2307
|
h,
|
|
2306
|
-
|
|
2307
|
-
),
|
|
2308
|
+
s
|
|
2309
|
+
), g = {
|
|
2308
2310
|
id: `unfocus-${Date.now()}`,
|
|
2309
2311
|
element: t,
|
|
2310
2312
|
animation: d,
|
|
2311
2313
|
fromState: r,
|
|
2312
|
-
toState:
|
|
2314
|
+
toState: l,
|
|
2313
2315
|
startTime: performance.now(),
|
|
2314
|
-
duration:
|
|
2316
|
+
duration: s
|
|
2315
2317
|
};
|
|
2316
|
-
return this.startClipPathAnimation(t,
|
|
2318
|
+
return this.startClipPathAnimation(t, g, !1), {
|
|
2317
2319
|
element: t,
|
|
2318
2320
|
originalState: i,
|
|
2319
|
-
animationHandle:
|
|
2321
|
+
animationHandle: g,
|
|
2320
2322
|
direction: "out",
|
|
2321
2323
|
originalWidth: u,
|
|
2322
2324
|
originalHeight: h
|
|
@@ -2337,10 +2339,10 @@ class Ne {
|
|
|
2337
2339
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2338
2340
|
*/
|
|
2339
2341
|
captureMidAnimationState(t) {
|
|
2340
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2341
|
-
return t.style.width = `${
|
|
2342
|
-
transform: { x: r, y:
|
|
2343
|
-
dimensions: { width:
|
|
2342
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth, s = t.offsetHeight, r = e.e + n * 0.5, a = e.f + s * 0.5, c = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2343
|
+
return t.style.width = `${n}px`, t.style.height = `${s}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${a}px) rotate(${c}deg)`, t.style.transition = "none", {
|
|
2344
|
+
transform: { x: r, y: a, rotation: c, scale: 1 },
|
|
2345
|
+
dimensions: { width: n, height: s }
|
|
2344
2346
|
};
|
|
2345
2347
|
}
|
|
2346
2348
|
/**
|
|
@@ -2355,94 +2357,94 @@ class Ne {
|
|
|
2355
2357
|
/**
|
|
2356
2358
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2357
2359
|
*/
|
|
2358
|
-
resetElementInstantly(t, i, e,
|
|
2360
|
+
resetElementInstantly(t, i, e, n, s) {
|
|
2359
2361
|
this.animationEngine.cancelAllAnimations(t);
|
|
2360
2362
|
const r = ["translate(-50%, -50%)"];
|
|
2361
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2363
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && s !== void 0 && (t.style.width = `${n}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, e);
|
|
2362
2364
|
}
|
|
2363
2365
|
/**
|
|
2364
2366
|
* Focus (zoom) an image to center of container
|
|
2365
2367
|
* Implements cross-animation when swapping focus
|
|
2366
2368
|
*/
|
|
2367
2369
|
async focusImage(t, i, e) {
|
|
2368
|
-
if (this.currentFocus === t && this.state ===
|
|
2370
|
+
if (this.currentFocus === t && this.state === x.FOCUSED)
|
|
2369
2371
|
return this.unfocusImage();
|
|
2370
|
-
if (this.incoming?.element === t && this.state ===
|
|
2371
|
-
const { transform:
|
|
2372
|
+
if (this.incoming?.element === t && this.state === x.FOCUSING) {
|
|
2373
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
|
|
2372
2374
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2373
2375
|
t,
|
|
2374
2376
|
this.incoming.originalState,
|
|
2375
|
-
|
|
2377
|
+
s,
|
|
2376
2378
|
r
|
|
2377
|
-
), this.incoming = null, this.state =
|
|
2379
|
+
), this.incoming = null, this.state = x.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 = x.IDLE;
|
|
2378
2380
|
return;
|
|
2379
2381
|
}
|
|
2380
|
-
const
|
|
2382
|
+
const n = ++this.focusGeneration;
|
|
2381
2383
|
switch (this.state) {
|
|
2382
|
-
case
|
|
2383
|
-
if (this.state =
|
|
2384
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2384
|
+
case x.IDLE:
|
|
2385
|
+
if (this.state = x.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2386
|
+
this.currentFocus = t, this.incoming = null, this.state = x.FOCUSED;
|
|
2385
2387
|
break;
|
|
2386
|
-
case
|
|
2387
|
-
if (this.state =
|
|
2388
|
+
case x.FOCUSED:
|
|
2389
|
+
if (this.state = x.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2388
2390
|
this.currentFocus,
|
|
2389
2391
|
this.focusData.originalState
|
|
2390
2392
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2391
2393
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2392
2394
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2393
|
-
]), this.focusGeneration !==
|
|
2395
|
+
]), this.focusGeneration !== n)
|
|
2394
2396
|
return;
|
|
2395
2397
|
if (this.outgoing) {
|
|
2396
|
-
const
|
|
2397
|
-
this.removeFocusedStyling(
|
|
2398
|
+
const s = this.outgoing.element;
|
|
2399
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2398
2400
|
}
|
|
2399
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2401
|
+
this.currentFocus = t, this.incoming = null, this.state = x.FOCUSED;
|
|
2400
2402
|
break;
|
|
2401
|
-
case
|
|
2403
|
+
case x.FOCUSING:
|
|
2402
2404
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2403
2405
|
this.incoming.element,
|
|
2404
2406
|
this.incoming.originalState,
|
|
2405
2407
|
this.focusData?.originalZIndex || "",
|
|
2406
2408
|
this.focusData?.originalWidth,
|
|
2407
2409
|
this.focusData?.originalHeight
|
|
2408
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2409
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2410
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2411
|
+
this.currentFocus = t, this.incoming = null, this.state = x.FOCUSED;
|
|
2410
2412
|
break;
|
|
2411
|
-
case
|
|
2412
|
-
if (this.state =
|
|
2413
|
+
case x.UNFOCUSING:
|
|
2414
|
+
if (this.state = x.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2413
2415
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2414
2416
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2415
|
-
]), this.focusGeneration !==
|
|
2417
|
+
]), this.focusGeneration !== n) return;
|
|
2416
2418
|
if (this.outgoing) {
|
|
2417
|
-
const
|
|
2418
|
-
this.removeFocusedStyling(
|
|
2419
|
+
const s = this.outgoing.element;
|
|
2420
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2419
2421
|
}
|
|
2420
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2422
|
+
this.currentFocus = t, this.incoming = null, this.state = x.FOCUSED;
|
|
2421
2423
|
break;
|
|
2422
|
-
case
|
|
2424
|
+
case x.CROSS_ANIMATING:
|
|
2423
2425
|
if (this.incoming?.element === t)
|
|
2424
2426
|
return;
|
|
2425
2427
|
if (this.outgoing?.element === t) {
|
|
2426
|
-
const { transform:
|
|
2428
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
|
|
2427
2429
|
if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
|
|
2428
|
-
const { transform:
|
|
2430
|
+
const { transform: a, dimensions: c } = this.captureMidAnimationState(this.incoming.element);
|
|
2429
2431
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2430
2432
|
this.incoming.element,
|
|
2431
2433
|
this.incoming.originalState,
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
+
a,
|
|
2435
|
+
c
|
|
2434
2436
|
);
|
|
2435
2437
|
} else
|
|
2436
2438
|
this.outgoing = null;
|
|
2437
|
-
if (this.incoming = this.startFocusAnimation(t, i, e,
|
|
2439
|
+
if (this.incoming = this.startFocusAnimation(t, i, e, s, r), await Promise.all([
|
|
2438
2440
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2439
2441
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2440
|
-
]), this.focusGeneration !==
|
|
2442
|
+
]), this.focusGeneration !== n) return;
|
|
2441
2443
|
if (this.outgoing) {
|
|
2442
|
-
const
|
|
2443
|
-
this.removeFocusedStyling(
|
|
2444
|
+
const a = this.outgoing.element;
|
|
2445
|
+
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2444
2446
|
}
|
|
2445
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2447
|
+
this.currentFocus = t, this.incoming = null, this.state = x.FOCUSED;
|
|
2446
2448
|
return;
|
|
2447
2449
|
}
|
|
2448
2450
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2452,23 +2454,23 @@ class Ne {
|
|
|
2452
2454
|
this.outgoing.originalWidth,
|
|
2453
2455
|
this.outgoing.originalHeight
|
|
2454
2456
|
), this.outgoing = null), this.incoming) {
|
|
2455
|
-
const { transform:
|
|
2457
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2456
2458
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2457
2459
|
this.incoming.element,
|
|
2458
2460
|
this.incoming.originalState,
|
|
2459
|
-
|
|
2461
|
+
s,
|
|
2460
2462
|
r
|
|
2461
2463
|
);
|
|
2462
2464
|
}
|
|
2463
2465
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2464
2466
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2465
2467
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2466
|
-
]), this.focusGeneration !==
|
|
2468
|
+
]), this.focusGeneration !== n) return;
|
|
2467
2469
|
if (this.outgoing) {
|
|
2468
|
-
const
|
|
2469
|
-
this.removeFocusedStyling(
|
|
2470
|
+
const s = this.outgoing.element;
|
|
2471
|
+
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2470
2472
|
}
|
|
2471
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2473
|
+
this.currentFocus = t, this.incoming = null, this.state = x.FOCUSED;
|
|
2472
2474
|
break;
|
|
2473
2475
|
}
|
|
2474
2476
|
}
|
|
@@ -2476,45 +2478,45 @@ class Ne {
|
|
|
2476
2478
|
* Unfocus current image, returning it to original position
|
|
2477
2479
|
*/
|
|
2478
2480
|
async unfocusImage() {
|
|
2479
|
-
if (this.state ===
|
|
2481
|
+
if (this.state === x.UNFOCUSING)
|
|
2480
2482
|
return;
|
|
2481
2483
|
const t = ++this.focusGeneration;
|
|
2482
2484
|
if (!this.currentFocus || !this.focusData) {
|
|
2483
|
-
if (this.incoming && this.state ===
|
|
2484
|
-
const { transform:
|
|
2485
|
+
if (this.incoming && this.state === x.FOCUSING) {
|
|
2486
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2485
2487
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2486
2488
|
this.incoming.element,
|
|
2487
2489
|
this.incoming.originalState,
|
|
2488
|
-
|
|
2490
|
+
s,
|
|
2489
2491
|
r
|
|
2490
|
-
), this.incoming = null, this.state =
|
|
2491
|
-
const
|
|
2492
|
-
this.removeFocusedStyling(
|
|
2492
|
+
), this.incoming = null, this.state = x.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2493
|
+
const a = this.outgoing.element;
|
|
2494
|
+
this.removeFocusedStyling(a, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = x.IDLE, this.onUnfocusComplete?.(a);
|
|
2493
2495
|
}
|
|
2494
2496
|
return;
|
|
2495
2497
|
}
|
|
2496
|
-
if (this.state ===
|
|
2497
|
-
const { transform:
|
|
2498
|
+
if (this.state === x.CROSS_ANIMATING && this.incoming) {
|
|
2499
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2498
2500
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2499
|
-
const
|
|
2501
|
+
const a = this.startUnfocusAnimation(
|
|
2500
2502
|
this.incoming.element,
|
|
2501
2503
|
this.incoming.originalState,
|
|
2502
|
-
|
|
2504
|
+
s,
|
|
2503
2505
|
r
|
|
2504
2506
|
);
|
|
2505
2507
|
if (await Promise.all([
|
|
2506
2508
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2507
|
-
this.waitForAnimation(
|
|
2509
|
+
this.waitForAnimation(a.animationHandle)
|
|
2508
2510
|
]), this.focusGeneration !== t) return;
|
|
2509
|
-
let
|
|
2510
|
-
this.outgoing && (
|
|
2511
|
-
const
|
|
2512
|
-
this.removeFocusedStyling(
|
|
2511
|
+
let c = null;
|
|
2512
|
+
this.outgoing && (c = this.outgoing.element, this.removeFocusedStyling(c, this.outgoing.originalState.zIndex?.toString() || ""));
|
|
2513
|
+
const l = a.element;
|
|
2514
|
+
this.removeFocusedStyling(l, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = x.IDLE, c && this.onUnfocusComplete?.(c), this.onUnfocusComplete?.(l);
|
|
2513
2515
|
return;
|
|
2514
2516
|
}
|
|
2515
|
-
this.state =
|
|
2516
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2517
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2517
|
+
this.state = x.UNFOCUSING;
|
|
2518
|
+
const i = this.currentFocus, e = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2519
|
+
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 = x.IDLE, this.onUnfocusComplete?.(i));
|
|
2518
2520
|
}
|
|
2519
2521
|
/**
|
|
2520
2522
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2532,7 +2534,7 @@ class Ne {
|
|
|
2532
2534
|
* Check if an image is currently focused (stable state)
|
|
2533
2535
|
*/
|
|
2534
2536
|
isFocused(t) {
|
|
2535
|
-
return this.currentFocus === t && this.state ===
|
|
2537
|
+
return this.currentFocus === t && this.state === x.FOCUSED;
|
|
2536
2538
|
}
|
|
2537
2539
|
/**
|
|
2538
2540
|
* Check if an image is the target of current focus animation
|
|
@@ -2553,9 +2555,9 @@ class Ne {
|
|
|
2553
2555
|
* Used during swipe gestures for visual feedback
|
|
2554
2556
|
*/
|
|
2555
2557
|
setDragOffset(t) {
|
|
2556
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2557
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2558
|
-
|
|
2558
|
+
if (!this.currentFocus || !this.focusData || this.state !== x.FOCUSED) return;
|
|
2559
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], s = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2560
|
+
n.push(`translate(${s}px, ${r}px)`), e.rotation !== void 0 && n.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = n.join(" ");
|
|
2559
2561
|
}
|
|
2560
2562
|
/**
|
|
2561
2563
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2563,13 +2565,13 @@ class Ne {
|
|
|
2563
2565
|
* @param duration - Animation duration in ms (default 150)
|
|
2564
2566
|
*/
|
|
2565
2567
|
clearDragOffset(t, i = 150) {
|
|
2566
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2567
|
-
const e = this.currentFocus,
|
|
2568
|
-
|
|
2569
|
-
const
|
|
2570
|
-
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform =
|
|
2568
|
+
if (!this.currentFocus || !this.focusData || this.state !== x.FOCUSED) return;
|
|
2569
|
+
const e = this.currentFocus, n = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = n.x ?? 0, a = n.y ?? 0;
|
|
2570
|
+
s.push(`translate(${r}px, ${a}px)`), n.rotation !== void 0 && s.push(`rotate(${n.rotation}deg)`);
|
|
2571
|
+
const c = s.join(" ");
|
|
2572
|
+
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = c, setTimeout(() => {
|
|
2571
2573
|
this.currentFocus === e && (e.style.transition = "none");
|
|
2572
|
-
}, i)) : (e.style.transition = "none", e.style.transform =
|
|
2574
|
+
}, i)) : (e.style.transition = "none", e.style.transform = c);
|
|
2573
2575
|
}
|
|
2574
2576
|
/**
|
|
2575
2577
|
* Reset zoom state (cancels all animations)
|
|
@@ -2593,10 +2595,10 @@ class Ne {
|
|
|
2593
2595
|
this.focusData.originalZIndex,
|
|
2594
2596
|
this.focusData.originalWidth,
|
|
2595
2597
|
this.focusData.originalHeight
|
|
2596
|
-
), this.state =
|
|
2598
|
+
), this.state = x.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2597
2599
|
}
|
|
2598
2600
|
}
|
|
2599
|
-
const ke = 50,
|
|
2601
|
+
const ke = 50, Be = 0.5, je = 20, We = 0.3, Ge = 150, qe = 30, rt = class rt {
|
|
2600
2602
|
constructor(t, i) {
|
|
2601
2603
|
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);
|
|
2602
2604
|
}
|
|
@@ -2623,7 +2625,7 @@ const ke = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Be = 30, at = class at {
|
|
|
2623
2625
|
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2624
2626
|
*/
|
|
2625
2627
|
hadRecentTouch() {
|
|
2626
|
-
return Date.now() - this.recentTouchTimestamp <
|
|
2628
|
+
return Date.now() - this.recentTouchTimestamp < rt.TOUCH_CLICK_DELAY;
|
|
2627
2629
|
}
|
|
2628
2630
|
handleTouchStart(t) {
|
|
2629
2631
|
if (t.touches.length !== 1) return;
|
|
@@ -2640,30 +2642,30 @@ const ke = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Be = 30, at = class at {
|
|
|
2640
2642
|
}
|
|
2641
2643
|
handleTouchMove(t) {
|
|
2642
2644
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2643
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2644
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2645
|
-
const
|
|
2646
|
-
this.touchState.isHorizontalSwipe =
|
|
2645
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, n = i.clientY - this.touchState.startY;
|
|
2646
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + n * n) > 10) {
|
|
2647
|
+
const a = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2648
|
+
this.touchState.isHorizontalSwipe = a <= qe;
|
|
2647
2649
|
}
|
|
2648
2650
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2649
2651
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = i.clientX;
|
|
2650
|
-
const
|
|
2651
|
-
this.callbacks.onDragOffset(
|
|
2652
|
+
const s = e * We;
|
|
2653
|
+
this.callbacks.onDragOffset(s);
|
|
2652
2654
|
}
|
|
2653
2655
|
}
|
|
2654
2656
|
handleTouchEnd(t) {
|
|
2655
2657
|
if (!this.touchState) return;
|
|
2656
2658
|
this.recentTouchTimestamp = Date.now();
|
|
2657
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2659
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e, s = Math.abs(i);
|
|
2658
2660
|
let r = !1;
|
|
2659
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (
|
|
2661
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= ke || n >= Be && s >= je) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2660
2662
|
}
|
|
2661
2663
|
handleTouchCancel(t) {
|
|
2662
2664
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2663
2665
|
}
|
|
2664
2666
|
};
|
|
2665
|
-
|
|
2666
|
-
let
|
|
2667
|
+
rt.TOUCH_CLICK_DELAY = 300;
|
|
2668
|
+
let bt = rt;
|
|
2667
2669
|
class Xe {
|
|
2668
2670
|
constructor(t) {
|
|
2669
2671
|
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)
|
|
@@ -2678,8 +2680,8 @@ class Xe {
|
|
|
2678
2680
|
for (const i of this.sources)
|
|
2679
2681
|
if ("folders" in i)
|
|
2680
2682
|
for (const e of i.folders) {
|
|
2681
|
-
const
|
|
2682
|
-
this._discoveredUrls.push(...
|
|
2683
|
+
const n = i.recursive !== void 0 ? i.recursive : !0, s = await this.loadFromFolder(e, t, n);
|
|
2684
|
+
this._discoveredUrls.push(...s);
|
|
2683
2685
|
}
|
|
2684
2686
|
else if ("files" in i) {
|
|
2685
2687
|
const e = await this.loadFiles(i.files, t);
|
|
@@ -2724,9 +2726,9 @@ class Xe {
|
|
|
2724
2726
|
// Alternative format
|
|
2725
2727
|
];
|
|
2726
2728
|
for (const e of i) {
|
|
2727
|
-
const
|
|
2728
|
-
if (
|
|
2729
|
-
return
|
|
2729
|
+
const n = t.match(e);
|
|
2730
|
+
if (n && n[1])
|
|
2731
|
+
return n[1];
|
|
2730
2732
|
}
|
|
2731
2733
|
return null;
|
|
2732
2734
|
}
|
|
@@ -2738,15 +2740,15 @@ class Xe {
|
|
|
2738
2740
|
* @returns Promise resolving to array of image URLs
|
|
2739
2741
|
*/
|
|
2740
2742
|
async loadFromFolder(t, i, e = !0) {
|
|
2741
|
-
const
|
|
2742
|
-
if (!
|
|
2743
|
+
const n = this.extractFolderId(t);
|
|
2744
|
+
if (!n)
|
|
2743
2745
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2744
2746
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2745
|
-
return this.loadImagesDirectly(
|
|
2747
|
+
return this.loadImagesDirectly(n, i);
|
|
2746
2748
|
try {
|
|
2747
|
-
return e ? await this.loadImagesRecursively(
|
|
2748
|
-
} catch (
|
|
2749
|
-
return console.error("Error loading from Google Drive API:",
|
|
2749
|
+
return e ? await this.loadImagesRecursively(n, i) : await this.loadImagesFromSingleFolder(n, i);
|
|
2750
|
+
} catch (s) {
|
|
2751
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(n, i);
|
|
2750
2752
|
}
|
|
2751
2753
|
}
|
|
2752
2754
|
/**
|
|
@@ -2756,13 +2758,13 @@ class Xe {
|
|
|
2756
2758
|
* @returns Promise resolving to array of image URLs
|
|
2757
2759
|
*/
|
|
2758
2760
|
async loadImagesFromSingleFolder(t, i) {
|
|
2759
|
-
const e = [],
|
|
2760
|
-
if (!
|
|
2761
|
-
throw new Error(`API request failed: ${
|
|
2762
|
-
const
|
|
2761
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2762
|
+
if (!a.ok)
|
|
2763
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2764
|
+
const l = (await a.json()).files.filter(
|
|
2763
2765
|
(u) => u.mimeType.startsWith("image/") && i.isAllowed(u.name)
|
|
2764
2766
|
);
|
|
2765
|
-
return this.log(`Found ${
|
|
2767
|
+
return this.log(`Found ${l.length} images in folder ${t} (non-recursive)`), l.forEach((u) => {
|
|
2766
2768
|
e.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2767
2769
|
}), e;
|
|
2768
2770
|
}
|
|
@@ -2774,25 +2776,25 @@ class Xe {
|
|
|
2774
2776
|
*/
|
|
2775
2777
|
async loadFiles(t, i) {
|
|
2776
2778
|
const e = [];
|
|
2777
|
-
for (const
|
|
2778
|
-
const
|
|
2779
|
-
if (!
|
|
2780
|
-
this.log(`Skipping invalid file URL: ${
|
|
2779
|
+
for (const n of t) {
|
|
2780
|
+
const s = this.extractFileId(n);
|
|
2781
|
+
if (!s) {
|
|
2782
|
+
this.log(`Skipping invalid file URL: ${n}`);
|
|
2781
2783
|
continue;
|
|
2782
2784
|
}
|
|
2783
2785
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2784
2786
|
try {
|
|
2785
|
-
const r = `${this.apiEndpoint}/${
|
|
2786
|
-
if (
|
|
2787
|
-
const
|
|
2788
|
-
|
|
2787
|
+
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2788
|
+
if (a.ok) {
|
|
2789
|
+
const c = await a.json();
|
|
2790
|
+
c.mimeType.startsWith("image/") && i.isAllowed(c.name) ? (e.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${c.name}`)) : this.log(`Skipping non-image file: ${c.name} (${c.mimeType})`);
|
|
2789
2791
|
} else
|
|
2790
|
-
this.log(`Failed to fetch metadata for file ${
|
|
2792
|
+
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2791
2793
|
} catch (r) {
|
|
2792
|
-
this.log(`Error fetching metadata for file ${
|
|
2794
|
+
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2793
2795
|
}
|
|
2794
2796
|
else
|
|
2795
|
-
e.push(`https://lh3.googleusercontent.com/d/${
|
|
2797
|
+
e.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
|
|
2796
2798
|
}
|
|
2797
2799
|
return e;
|
|
2798
2800
|
}
|
|
@@ -2813,9 +2815,9 @@ class Xe {
|
|
|
2813
2815
|
// Generic id parameter
|
|
2814
2816
|
];
|
|
2815
2817
|
for (const e of i) {
|
|
2816
|
-
const
|
|
2817
|
-
if (
|
|
2818
|
-
return
|
|
2818
|
+
const n = t.match(e);
|
|
2819
|
+
if (n && n[1])
|
|
2820
|
+
return n[1];
|
|
2819
2821
|
}
|
|
2820
2822
|
return null;
|
|
2821
2823
|
}
|
|
@@ -2826,15 +2828,15 @@ class Xe {
|
|
|
2826
2828
|
* @returns Promise resolving to array of image URLs
|
|
2827
2829
|
*/
|
|
2828
2830
|
async loadImagesRecursively(t, i) {
|
|
2829
|
-
const e = [],
|
|
2830
|
-
if (!
|
|
2831
|
-
throw new Error(`API request failed: ${
|
|
2832
|
-
const
|
|
2831
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2832
|
+
if (!a.ok)
|
|
2833
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2834
|
+
const c = await a.json(), l = c.files.filter(
|
|
2833
2835
|
(h) => h.mimeType.startsWith("image/") && i.isAllowed(h.name)
|
|
2834
|
-
), u =
|
|
2836
|
+
), u = c.files.filter(
|
|
2835
2837
|
(h) => h.mimeType === "application/vnd.google-apps.folder"
|
|
2836
2838
|
);
|
|
2837
|
-
this.log(`Found ${
|
|
2839
|
+
this.log(`Found ${c.files.length} total items in folder ${t}`), c.files.forEach((h) => this.log(` - File: ${h.name} (${h.mimeType})`)), this.log(`- ${l.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), l.forEach((h) => {
|
|
2838
2840
|
e.push(`https://lh3.googleusercontent.com/d/${h.id}=s1600`), this.log(`Added file: ${h.name}`);
|
|
2839
2841
|
});
|
|
2840
2842
|
for (const h of u) {
|
|
@@ -2853,11 +2855,11 @@ class Xe {
|
|
|
2853
2855
|
*/
|
|
2854
2856
|
async loadImagesDirectly(t, i) {
|
|
2855
2857
|
try {
|
|
2856
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2857
|
-
if (!
|
|
2858
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(e, { mode: "cors" });
|
|
2859
|
+
if (!n.ok)
|
|
2858
2860
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2859
|
-
const
|
|
2860
|
-
return [...new Set(
|
|
2861
|
+
const s = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2862
|
+
return [...new Set(a.map((u) => u[1]))].map(
|
|
2861
2863
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2862
2864
|
);
|
|
2863
2865
|
} catch (e) {
|
|
@@ -2949,13 +2951,13 @@ class Ye {
|
|
|
2949
2951
|
if (!Array.isArray(t))
|
|
2950
2952
|
return console.warn("URLs must be an array:", t), [];
|
|
2951
2953
|
const e = [];
|
|
2952
|
-
for (const
|
|
2953
|
-
const
|
|
2954
|
-
if (!i.isAllowed(
|
|
2955
|
-
this.log(`Skipping filtered URL: ${
|
|
2954
|
+
for (const n of t) {
|
|
2955
|
+
const s = n.split("/").pop() || n;
|
|
2956
|
+
if (!i.isAllowed(s)) {
|
|
2957
|
+
this.log(`Skipping filtered URL: ${n}`);
|
|
2956
2958
|
continue;
|
|
2957
2959
|
}
|
|
2958
|
-
this.validateUrls ? await this.validateUrl(
|
|
2960
|
+
this.validateUrls ? await this.validateUrl(n) ? e.push(n) : console.warn(`Skipping invalid/missing URL: ${n}`) : e.push(n);
|
|
2959
2961
|
}
|
|
2960
2962
|
return e;
|
|
2961
2963
|
}
|
|
@@ -2969,16 +2971,16 @@ class Ye {
|
|
|
2969
2971
|
async processPath(t, i, e) {
|
|
2970
2972
|
if (!Array.isArray(i))
|
|
2971
2973
|
return console.warn("files must be an array:", i), [];
|
|
2972
|
-
const
|
|
2973
|
-
for (const
|
|
2974
|
-
if (!e.isAllowed(
|
|
2975
|
-
this.log(`Skipping filtered file: ${
|
|
2974
|
+
const n = [];
|
|
2975
|
+
for (const s of i) {
|
|
2976
|
+
if (!e.isAllowed(s)) {
|
|
2977
|
+
this.log(`Skipping filtered file: ${s}`);
|
|
2976
2978
|
continue;
|
|
2977
2979
|
}
|
|
2978
|
-
const r = this.constructUrl(t,
|
|
2979
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2980
|
+
const r = this.constructUrl(t, s);
|
|
2981
|
+
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2980
2982
|
}
|
|
2981
|
-
return
|
|
2983
|
+
return n;
|
|
2982
2984
|
}
|
|
2983
2985
|
/**
|
|
2984
2986
|
* Process a JSON endpoint source
|
|
@@ -2989,17 +2991,17 @@ class Ye {
|
|
|
2989
2991
|
*/
|
|
2990
2992
|
async processJson(t, i) {
|
|
2991
2993
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2992
|
-
const e = new AbortController(),
|
|
2994
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), 1e4);
|
|
2993
2995
|
try {
|
|
2994
|
-
const
|
|
2995
|
-
if (clearTimeout(
|
|
2996
|
-
throw new Error(`HTTP ${
|
|
2997
|
-
const r = await
|
|
2996
|
+
const s = await fetch(t, { signal: e.signal });
|
|
2997
|
+
if (clearTimeout(n), !s.ok)
|
|
2998
|
+
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2999
|
+
const r = await s.json();
|
|
2998
3000
|
if (!r || !Array.isArray(r.images))
|
|
2999
3001
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3000
3002
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
3001
|
-
} catch (
|
|
3002
|
-
throw clearTimeout(
|
|
3003
|
+
} catch (s) {
|
|
3004
|
+
throw clearTimeout(n), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
3003
3005
|
}
|
|
3004
3006
|
}
|
|
3005
3007
|
/**
|
|
@@ -3021,11 +3023,11 @@ class Ye {
|
|
|
3021
3023
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3022
3024
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3023
3025
|
try {
|
|
3024
|
-
const e = new AbortController(),
|
|
3026
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout), s = await fetch(t, {
|
|
3025
3027
|
method: "HEAD",
|
|
3026
3028
|
signal: e.signal
|
|
3027
3029
|
});
|
|
3028
|
-
return clearTimeout(
|
|
3030
|
+
return clearTimeout(n), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
3029
3031
|
} catch (e) {
|
|
3030
3032
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3031
3033
|
}
|
|
@@ -3042,8 +3044,8 @@ class Ye {
|
|
|
3042
3044
|
return `${e}/${i}`;
|
|
3043
3045
|
if (typeof window > "u")
|
|
3044
3046
|
return `${e}/${i}`;
|
|
3045
|
-
const
|
|
3046
|
-
return `${
|
|
3047
|
+
const n = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
3048
|
+
return `${n}${r}/${i}`;
|
|
3047
3049
|
}
|
|
3048
3050
|
/**
|
|
3049
3051
|
* Check if URL is absolute (contains protocol)
|
|
@@ -3077,16 +3079,16 @@ class Ve {
|
|
|
3077
3079
|
*/
|
|
3078
3080
|
async prepare(t) {
|
|
3079
3081
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3080
|
-
const i = this.loaders.map((e,
|
|
3081
|
-
this.log(`Loader ${
|
|
3082
|
-
}).catch((
|
|
3083
|
-
console.warn(`Loader ${
|
|
3082
|
+
const i = this.loaders.map((e, n) => e.prepare(t).then(() => {
|
|
3083
|
+
this.log(`Loader ${n} prepared with ${e.imagesLength()} images`);
|
|
3084
|
+
}).catch((s) => {
|
|
3085
|
+
console.warn(`Loader ${n} failed to prepare:`, s);
|
|
3084
3086
|
}));
|
|
3085
3087
|
await Promise.all(i);
|
|
3086
3088
|
for (const e of this.loaders)
|
|
3087
3089
|
if (e.isPrepared()) {
|
|
3088
|
-
const
|
|
3089
|
-
this._discoveredUrls.push(...
|
|
3090
|
+
const n = e.imageURLs();
|
|
3091
|
+
this._discoveredUrls.push(...n);
|
|
3090
3092
|
}
|
|
3091
3093
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
3092
3094
|
}
|
|
@@ -3205,34 +3207,75 @@ const Ke = `
|
|
|
3205
3207
|
pointer-events: none;
|
|
3206
3208
|
}
|
|
3207
3209
|
|
|
3210
|
+
.fbn-ic-gallery:focus,
|
|
3211
|
+
.fbn-ic-gallery.fbn-ic-has-focus {
|
|
3212
|
+
outline: 2px solid rgba(147, 197, 253, 0.8);
|
|
3213
|
+
outline-offset: -4px;
|
|
3214
|
+
}
|
|
3215
|
+
.fbn-ic-gallery.fbn-ic-suppress-outline:focus {
|
|
3216
|
+
outline: none;
|
|
3217
|
+
}
|
|
3218
|
+
.fbn-ic-gallery.fbn-ic-suppress-outline.fbn-ic-has-focus {
|
|
3219
|
+
outline: 2px solid rgba(99, 102, 241, 0.6);
|
|
3220
|
+
outline-offset: -4px;
|
|
3221
|
+
}
|
|
3222
|
+
|
|
3223
|
+
.fbn-ic-nav-btn {
|
|
3224
|
+
position: absolute;
|
|
3225
|
+
top: 50%;
|
|
3226
|
+
transform: translateY(-50%);
|
|
3227
|
+
z-index: 10001;
|
|
3228
|
+
cursor: pointer;
|
|
3229
|
+
border: none;
|
|
3230
|
+
background: none;
|
|
3231
|
+
padding: 0;
|
|
3232
|
+
line-height: 1;
|
|
3233
|
+
}
|
|
3234
|
+
.fbn-ic-nav-btn-prev {
|
|
3235
|
+
left: 12px;
|
|
3236
|
+
}
|
|
3237
|
+
.fbn-ic-nav-btn-next {
|
|
3238
|
+
right: 12px;
|
|
3239
|
+
}
|
|
3240
|
+
|
|
3208
3241
|
.fbn-ic-hidden {
|
|
3209
3242
|
display: none !important;
|
|
3210
3243
|
}
|
|
3211
3244
|
`;
|
|
3212
3245
|
function Ze() {
|
|
3213
3246
|
if (typeof document > "u") return;
|
|
3214
|
-
const
|
|
3215
|
-
if (document.getElementById(
|
|
3247
|
+
const o = "fbn-ic-functional-styles";
|
|
3248
|
+
if (document.getElementById(o)) return;
|
|
3216
3249
|
const t = document.createElement("style");
|
|
3217
|
-
t.id =
|
|
3250
|
+
t.id = o, t.textContent = Ke, document.head.appendChild(t);
|
|
3218
3251
|
}
|
|
3219
3252
|
class Qe {
|
|
3220
3253
|
constructor(t = {}) {
|
|
3221
|
-
this.fullConfig = Zt(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 ie(this.fullConfig.animation), this.layoutEngine = new ze({
|
|
3254
|
+
this.fullConfig = Zt(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.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new ie(this.fullConfig.animation), this.layoutEngine = new ze({
|
|
3222
3255
|
layout: this.fullConfig.layout,
|
|
3223
3256
|
image: this.fullConfig.image
|
|
3224
|
-
}), this.zoomEngine = new Ne(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles =
|
|
3225
|
-
const i = this.fullConfig.animation.entry ||
|
|
3226
|
-
this.entryAnimationEngine = new
|
|
3257
|
+
}), this.zoomEngine = new Ne(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = it(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3258
|
+
const i = this.fullConfig.animation.entry || A.animation.entry;
|
|
3259
|
+
this.entryAnimationEngine = new fe(
|
|
3227
3260
|
i,
|
|
3228
3261
|
this.fullConfig.layout.algorithm
|
|
3229
3262
|
);
|
|
3230
3263
|
const e = this.fullConfig.animation.idle;
|
|
3231
|
-
e && e.type !== "none" ? this.idleAnimationEngine = new
|
|
3264
|
+
e && e.type !== "none" ? this.idleAnimationEngine = new ge(
|
|
3232
3265
|
e,
|
|
3233
3266
|
i.timing?.duration ?? 600
|
|
3234
|
-
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((
|
|
3235
|
-
this.idleAnimationEngine?.resumeForImage(
|
|
3267
|
+
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((n) => {
|
|
3268
|
+
this.idleAnimationEngine?.resumeForImage(n);
|
|
3269
|
+
const s = n;
|
|
3270
|
+
requestAnimationFrame(() => {
|
|
3271
|
+
if (s.matches(":hover") && this.fullConfig.styling?.hover) {
|
|
3272
|
+
const r = this.imageElements.indexOf(s);
|
|
3273
|
+
if (r !== -1) {
|
|
3274
|
+
const a = s.offsetHeight, c = s.cachedRenderedWidth;
|
|
3275
|
+
st(s, this.fullConfig.styling.hover, a, c), et(s, this.hoverClassName), this.hoveredImage = { element: s, layout: this.imageLayouts[r] };
|
|
3276
|
+
}
|
|
3277
|
+
}
|
|
3278
|
+
});
|
|
3236
3279
|
}), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
3237
3280
|
}
|
|
3238
3281
|
/**
|
|
@@ -3250,7 +3293,7 @@ class Qe {
|
|
|
3250
3293
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
3251
3294
|
if (!t || t.length === 0)
|
|
3252
3295
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
3253
|
-
const e = t.map((
|
|
3296
|
+
const e = t.map((n) => this.createLoaderFromEntry(n, i));
|
|
3254
3297
|
return e.length === 1 ? e[0] : new Ve({
|
|
3255
3298
|
loaders: e,
|
|
3256
3299
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
@@ -3261,7 +3304,7 @@ class Qe {
|
|
|
3261
3304
|
*/
|
|
3262
3305
|
createLoaderFromEntry(t, i) {
|
|
3263
3306
|
if ("static" in t) {
|
|
3264
|
-
const e = t.static,
|
|
3307
|
+
const e = t.static, n = {
|
|
3265
3308
|
...e,
|
|
3266
3309
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
3267
3310
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -3269,14 +3312,14 @@ class Qe {
|
|
|
3269
3312
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3270
3313
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3271
3314
|
};
|
|
3272
|
-
return new Ye(
|
|
3315
|
+
return new Ye(n);
|
|
3273
3316
|
} else if ("googleDrive" in t) {
|
|
3274
|
-
const e = t.googleDrive,
|
|
3317
|
+
const e = t.googleDrive, n = {
|
|
3275
3318
|
...e,
|
|
3276
3319
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3277
3320
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3278
3321
|
};
|
|
3279
|
-
return new Xe(
|
|
3322
|
+
return new Xe(n);
|
|
3280
3323
|
} else
|
|
3281
3324
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3282
3325
|
}
|
|
@@ -3289,12 +3332,12 @@ class Qe {
|
|
|
3289
3332
|
this.containerEl = this.containerRef;
|
|
3290
3333
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3291
3334
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3292
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new
|
|
3335
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
|
|
3293
3336
|
onNext: () => this.navigateToNextImage(),
|
|
3294
3337
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3295
3338
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3296
3339
|
onDragEnd: (t) => {
|
|
3297
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
3340
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ge);
|
|
3298
3341
|
}
|
|
3299
3342
|
})), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3300
3343
|
} catch (t) {
|
|
@@ -3303,7 +3346,11 @@ class Qe {
|
|
|
3303
3346
|
}
|
|
3304
3347
|
setupUI() {
|
|
3305
3348
|
const t = this.fullConfig.ui;
|
|
3306
|
-
t.showLoadingSpinner && (t.loadingElement ? (this.loadingEl = this.resolveElement(t.loadingElement), this.loadingElAutoCreated = !1) : (this.loadingEl = this.createDefaultLoadingElement(), this.loadingElAutoCreated = !0)), t.errorElement ? (this.errorEl = this.resolveElement(t.errorElement), this.errorElAutoCreated = !1) : (this.errorEl = this.createDefaultErrorElement(), this.errorElAutoCreated = !0), t.showImageCounter && (t.counterElement ? (this.counterEl = this.resolveElement(t.counterElement), this.counterElAutoCreated = !1) : (this.counterEl = this.createDefaultCounterElement(), this.counterElAutoCreated = !0))
|
|
3349
|
+
t.showFocusOutline ? this.containerEl?.classList.remove("fbn-ic-suppress-outline") : this.containerEl?.classList.add("fbn-ic-suppress-outline"), t.showLoadingSpinner && (t.loadingElement ? (this.loadingEl = this.resolveElement(t.loadingElement), this.loadingElAutoCreated = !1) : (this.loadingEl = this.createDefaultLoadingElement(), this.loadingElAutoCreated = !0)), t.errorElement ? (this.errorEl = this.resolveElement(t.errorElement), this.errorElAutoCreated = !1) : (this.errorEl = this.createDefaultErrorElement(), this.errorElAutoCreated = !0), t.showImageCounter && (t.counterElement ? (this.counterEl = this.resolveElement(t.counterElement), this.counterElAutoCreated = !1) : (this.counterEl = this.createDefaultCounterElement(), this.counterElAutoCreated = !0)), t.showNavButtons && (t.prevButtonElement ? (this.prevButtonEl = this.resolveElement(t.prevButtonElement), this.prevButtonElAutoCreated = !1) : (this.prevButtonEl = this.createDefaultPrevButtonElement(), this.prevButtonElAutoCreated = !0), t.nextButtonElement ? (this.nextButtonEl = this.resolveElement(t.nextButtonElement), this.nextButtonElAutoCreated = !1) : (this.nextButtonEl = this.createDefaultNextButtonElement(), this.nextButtonElAutoCreated = !0), this.prevButtonEl?.addEventListener("click", (i) => {
|
|
3350
|
+
i.stopPropagation(), this.navigateToPreviousImage();
|
|
3351
|
+
}), this.nextButtonEl?.addEventListener("click", (i) => {
|
|
3352
|
+
i.stopPropagation(), this.navigateToNextImage();
|
|
3353
|
+
}));
|
|
3307
3354
|
}
|
|
3308
3355
|
resolveElement(t) {
|
|
3309
3356
|
return t instanceof HTMLElement ? t : document.getElementById(t);
|
|
@@ -3324,11 +3371,19 @@ class Qe {
|
|
|
3324
3371
|
const t = document.createElement("div");
|
|
3325
3372
|
return t.className = "fbn-ic-counter fbn-ic-hidden", this.containerEl.appendChild(t), t;
|
|
3326
3373
|
}
|
|
3374
|
+
createDefaultPrevButtonElement() {
|
|
3375
|
+
const t = document.createElement("button");
|
|
3376
|
+
return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"), t.setAttribute("tabindex", "-1"), this.containerEl.appendChild(t), t;
|
|
3377
|
+
}
|
|
3378
|
+
createDefaultNextButtonElement() {
|
|
3379
|
+
const t = document.createElement("button");
|
|
3380
|
+
return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"), t.setAttribute("tabindex", "-1"), this.containerEl.appendChild(t), t;
|
|
3381
|
+
}
|
|
3327
3382
|
setupEventListeners() {
|
|
3328
3383
|
this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
|
|
3329
|
-
t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
|
|
3384
|
+
t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
|
|
3330
3385
|
}), document.addEventListener("click", (t) => {
|
|
3331
|
-
this.swipeEngine?.hadRecentTouch() || t.target.closest(".fbn-ic-image")
|
|
3386
|
+
this.swipeEngine?.hadRecentTouch() || !t.target.closest(".fbn-ic-image") && !t.target.closest(".fbn-ic-nav-btn") && (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator());
|
|
3332
3387
|
}), window.addEventListener("resize", () => this.handleResize());
|
|
3333
3388
|
}
|
|
3334
3389
|
/**
|
|
@@ -3337,11 +3392,11 @@ class Qe {
|
|
|
3337
3392
|
navigateToNextImage() {
|
|
3338
3393
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3339
3394
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3340
|
-
(
|
|
3395
|
+
(n) => n.dataset.imageId === String(t)
|
|
3341
3396
|
);
|
|
3342
3397
|
if (!i) return;
|
|
3343
3398
|
const e = this.imageLayouts[t];
|
|
3344
|
-
e && (this.currentFocusIndex = t, this.handleImageClick(i, e), this.updateCounter(t));
|
|
3399
|
+
e && (this.currentFocusIndex = t, this.handleImageClick(i, e), this.updateCounter(t), this.showNavButtons(), this.showFocusIndicator());
|
|
3345
3400
|
}
|
|
3346
3401
|
/**
|
|
3347
3402
|
* Navigate to the previous image (Left arrow)
|
|
@@ -3349,11 +3404,11 @@ class Qe {
|
|
|
3349
3404
|
navigateToPreviousImage() {
|
|
3350
3405
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3351
3406
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3352
|
-
(
|
|
3407
|
+
(n) => n.dataset.imageId === String(t)
|
|
3353
3408
|
);
|
|
3354
3409
|
if (!i) return;
|
|
3355
3410
|
const e = this.imageLayouts[t];
|
|
3356
|
-
e && (this.currentFocusIndex = t, this.handleImageClick(i, e), this.updateCounter(t));
|
|
3411
|
+
e && (this.currentFocusIndex = t, this.handleImageClick(i, e), this.updateCounter(t), this.showNavButtons(), this.showFocusIndicator());
|
|
3357
3412
|
}
|
|
3358
3413
|
/**
|
|
3359
3414
|
* Navigate to a specific image by index
|
|
@@ -3365,8 +3420,8 @@ class Qe {
|
|
|
3365
3420
|
}, 500));
|
|
3366
3421
|
}
|
|
3367
3422
|
getImageHeight() {
|
|
3368
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3369
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3423
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, n = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3424
|
+
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);
|
|
3370
3425
|
}
|
|
3371
3426
|
/**
|
|
3372
3427
|
* Get container bounds for layout calculations
|
|
@@ -3389,13 +3444,13 @@ class Qe {
|
|
|
3389
3444
|
this.showError("No images found."), this.showLoading(!1);
|
|
3390
3445
|
return;
|
|
3391
3446
|
}
|
|
3392
|
-
const e = this.getContainerBounds(),
|
|
3393
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3447
|
+
const e = this.getContainerBounds(), n = this.getImageHeight(), s = window.innerWidth;
|
|
3448
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3394
3449
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3395
3450
|
e,
|
|
3396
3451
|
t,
|
|
3397
|
-
|
|
3398
|
-
|
|
3452
|
+
n,
|
|
3453
|
+
s
|
|
3399
3454
|
);
|
|
3400
3455
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
3401
3456
|
} catch (t) {
|
|
@@ -3412,164 +3467,164 @@ class Qe {
|
|
|
3412
3467
|
if (!this.containerEl) return;
|
|
3413
3468
|
const e = this.getContainerBounds();
|
|
3414
3469
|
this.currentImageHeight = i;
|
|
3415
|
-
const
|
|
3416
|
-
this.imageLayouts =
|
|
3470
|
+
const n = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3471
|
+
this.imageLayouts = s, this.displayQueue = [];
|
|
3417
3472
|
let r = 0;
|
|
3418
|
-
const
|
|
3419
|
-
this.containerEl && (this.containerEl.appendChild(
|
|
3420
|
-
if (
|
|
3473
|
+
const a = (l) => {
|
|
3474
|
+
this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(() => {
|
|
3475
|
+
if (l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1", l.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || l.dataset.startRotation !== l.dataset.rotation || l.dataset.startScale !== l.dataset.scale)) {
|
|
3421
3476
|
const d = {
|
|
3422
|
-
x: parseFloat(
|
|
3423
|
-
y: parseFloat(
|
|
3424
|
-
},
|
|
3425
|
-
x: parseFloat(
|
|
3426
|
-
y: parseFloat(
|
|
3427
|
-
},
|
|
3477
|
+
x: parseFloat(l.dataset.startX),
|
|
3478
|
+
y: parseFloat(l.dataset.startY)
|
|
3479
|
+
}, g = {
|
|
3480
|
+
x: parseFloat(l.dataset.endX),
|
|
3481
|
+
y: parseFloat(l.dataset.endY)
|
|
3482
|
+
}, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), f = parseFloat(l.dataset.rotation), m = parseFloat(l.dataset.scale), y = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : f, E = l.dataset.startScale ? parseFloat(l.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3428
3483
|
he({
|
|
3429
|
-
element:
|
|
3484
|
+
element: l,
|
|
3430
3485
|
startPosition: d,
|
|
3431
|
-
endPosition:
|
|
3486
|
+
endPosition: g,
|
|
3432
3487
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3433
3488
|
duration: v.duration,
|
|
3434
|
-
imageWidth:
|
|
3489
|
+
imageWidth: b,
|
|
3435
3490
|
imageHeight: p,
|
|
3436
|
-
rotation:
|
|
3491
|
+
rotation: f,
|
|
3437
3492
|
scale: m,
|
|
3438
3493
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3439
|
-
startRotation:
|
|
3494
|
+
startRotation: y,
|
|
3440
3495
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3441
|
-
startScale:
|
|
3496
|
+
startScale: E
|
|
3442
3497
|
});
|
|
3443
3498
|
} else {
|
|
3444
|
-
const d =
|
|
3445
|
-
|
|
3499
|
+
const d = l.dataset.finalTransform || "";
|
|
3500
|
+
l.style.transform = d;
|
|
3446
3501
|
}
|
|
3447
|
-
const h = parseInt(
|
|
3502
|
+
const h = parseInt(l.dataset.imageId || "0");
|
|
3448
3503
|
if (this.fullConfig.config.debug?.enabled && h < 3) {
|
|
3449
|
-
const d =
|
|
3504
|
+
const d = l.dataset.finalTransform || "";
|
|
3450
3505
|
console.log(`Image ${h} final state:`, {
|
|
3451
|
-
left:
|
|
3452
|
-
top:
|
|
3453
|
-
width:
|
|
3454
|
-
height:
|
|
3455
|
-
computedWidth:
|
|
3456
|
-
computedHeight:
|
|
3506
|
+
left: l.style.left,
|
|
3507
|
+
top: l.style.top,
|
|
3508
|
+
width: l.style.width,
|
|
3509
|
+
height: l.style.height,
|
|
3510
|
+
computedWidth: l.offsetWidth,
|
|
3511
|
+
computedHeight: l.offsetHeight,
|
|
3457
3512
|
transform: d,
|
|
3458
3513
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3459
3514
|
});
|
|
3460
3515
|
}
|
|
3461
3516
|
if (this.idleAnimationEngine) {
|
|
3462
3517
|
const d = this.entryAnimationEngine.getTiming().duration;
|
|
3463
|
-
this.idleAnimationEngine.register(
|
|
3518
|
+
this.idleAnimationEngine.register(l, h, this.imageElements.length, d);
|
|
3464
3519
|
}
|
|
3465
3520
|
}), r++);
|
|
3466
|
-
},
|
|
3521
|
+
}, c = () => {
|
|
3467
3522
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3468
3523
|
for (; this.displayQueue.length > 0; ) {
|
|
3469
|
-
const
|
|
3470
|
-
|
|
3524
|
+
const l = this.displayQueue.shift();
|
|
3525
|
+
l && a(l);
|
|
3471
3526
|
}
|
|
3472
3527
|
return;
|
|
3473
3528
|
}
|
|
3474
3529
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3475
|
-
if (
|
|
3530
|
+
if (n !== this.loadGeneration) {
|
|
3476
3531
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3477
3532
|
return;
|
|
3478
3533
|
}
|
|
3479
3534
|
if (this.displayQueue.length > 0) {
|
|
3480
|
-
const
|
|
3481
|
-
|
|
3535
|
+
const l = this.displayQueue.shift();
|
|
3536
|
+
l && a(l);
|
|
3482
3537
|
}
|
|
3483
3538
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3484
3539
|
}, this.fullConfig.animation.queue.interval);
|
|
3485
3540
|
};
|
|
3486
3541
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3487
|
-
const
|
|
3542
|
+
const l = new IntersectionObserver((u) => {
|
|
3488
3543
|
u.forEach((h) => {
|
|
3489
|
-
h.isIntersecting && (
|
|
3544
|
+
h.isIntersecting && (c(), l.disconnect());
|
|
3490
3545
|
});
|
|
3491
3546
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3492
|
-
|
|
3547
|
+
l.observe(this.containerEl);
|
|
3493
3548
|
} else
|
|
3494
|
-
|
|
3495
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((
|
|
3549
|
+
c();
|
|
3550
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), s.forEach((l, u) => {
|
|
3496
3551
|
const h = document.createElement("div");
|
|
3497
3552
|
h.className = "fbn-ic-debug-center", h.style.position = "absolute", h.style.width = "12px", h.style.height = "12px", h.style.borderRadius = "50%", h.style.backgroundColor = "red", h.style.border = "2px solid yellow", h.style.zIndex = "9999", h.style.pointerEvents = "none";
|
|
3498
|
-
const d =
|
|
3499
|
-
h.style.left = `${d - 6}px`, h.style.top = `${
|
|
3500
|
-
})), t.forEach((
|
|
3553
|
+
const d = l.x, g = l.y;
|
|
3554
|
+
h.style.left = `${d - 6}px`, h.style.top = `${g - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(g)})`, this.containerEl.appendChild(h);
|
|
3555
|
+
})), t.forEach((l, u) => {
|
|
3501
3556
|
const h = document.createElement("img");
|
|
3502
3557
|
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
|
|
3503
|
-
const d =
|
|
3504
|
-
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)),
|
|
3558
|
+
const d = s[u];
|
|
3559
|
+
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)), et(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3505
3560
|
if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {
|
|
3506
|
-
const
|
|
3507
|
-
|
|
3561
|
+
const g = h.cachedRenderedWidth;
|
|
3562
|
+
st(h, this.fullConfig.styling?.hover, i, g), et(h, this.hoverClassName);
|
|
3508
3563
|
}
|
|
3509
3564
|
}), h.addEventListener("mouseleave", () => {
|
|
3510
3565
|
if (this.hoveredImage = null, !this.zoomEngine.isInvolved(h)) {
|
|
3511
|
-
const
|
|
3512
|
-
|
|
3566
|
+
const g = h.cachedRenderedWidth;
|
|
3567
|
+
st(h, this.fullConfig.styling?.default, i, g), pt(h, this.hoverClassName), et(h, this.defaultClassName);
|
|
3513
3568
|
}
|
|
3514
|
-
}), h.addEventListener("click", (
|
|
3515
|
-
|
|
3569
|
+
}), h.addEventListener("click", (g) => {
|
|
3570
|
+
g.stopPropagation(), this.handleImageClick(h, d);
|
|
3516
3571
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3517
|
-
if (
|
|
3572
|
+
if (n !== this.loadGeneration)
|
|
3518
3573
|
return;
|
|
3519
|
-
const
|
|
3520
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${
|
|
3521
|
-
const p = { x: d.x, y: d.y },
|
|
3574
|
+
const g = h.naturalWidth / h.naturalHeight, b = i * g;
|
|
3575
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${b}`), h.style.width = `${b}px`, h.cachedRenderedWidth = b, h.aspectRatio = g, st(h, this.fullConfig.styling?.default, i, b);
|
|
3576
|
+
const p = { x: d.x, y: d.y }, f = { width: b, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3522
3577
|
p,
|
|
3523
|
-
|
|
3578
|
+
f,
|
|
3524
3579
|
e,
|
|
3525
3580
|
u,
|
|
3526
3581
|
t.length
|
|
3527
|
-
),
|
|
3582
|
+
), y = this.entryAnimationEngine.calculateStartRotation(d.rotation), E = this.entryAnimationEngine.calculateStartScale(d.scale), v = this.entryAnimationEngine.buildFinalTransform(
|
|
3528
3583
|
d.rotation,
|
|
3529
3584
|
d.scale,
|
|
3530
|
-
|
|
3585
|
+
b,
|
|
3531
3586
|
i
|
|
3532
3587
|
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3533
3588
|
m,
|
|
3534
3589
|
p,
|
|
3535
3590
|
d.rotation,
|
|
3536
3591
|
d.scale,
|
|
3537
|
-
y,
|
|
3538
|
-
i,
|
|
3539
3592
|
b,
|
|
3540
|
-
|
|
3593
|
+
i,
|
|
3594
|
+
y,
|
|
3595
|
+
E
|
|
3541
3596
|
);
|
|
3542
3597
|
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
3543
3598
|
finalPosition: p,
|
|
3544
|
-
imageSize:
|
|
3599
|
+
imageSize: f,
|
|
3545
3600
|
left: d.x,
|
|
3546
3601
|
top: d.y,
|
|
3547
3602
|
finalTransform: v,
|
|
3548
|
-
renderedWidth:
|
|
3603
|
+
renderedWidth: b,
|
|
3549
3604
|
renderedHeight: i
|
|
3550
|
-
}), h.style.transform = S, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() ||
|
|
3551
|
-
}, h.onerror = () => r++, h.src =
|
|
3605
|
+
}), h.style.transform = S, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || y !== d.rotation || E !== d.scale) && (h.dataset.startX = String(m.x), h.dataset.startY = String(m.y), h.dataset.endX = String(p.x), h.dataset.endY = String(p.y), h.dataset.imageWidth = String(b), h.dataset.imageHeight = String(i), h.dataset.rotation = String(d.rotation), h.dataset.scale = String(d.scale), h.dataset.startRotation = String(y), h.dataset.startScale = String(E)), this.displayQueue.push(h);
|
|
3606
|
+
}, h.onerror = () => r++, h.src = l;
|
|
3552
3607
|
});
|
|
3553
3608
|
}
|
|
3554
3609
|
async handleImageClick(t, i) {
|
|
3555
3610
|
if (!this.containerEl) return;
|
|
3556
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3611
|
+
const e = this.zoomEngine.isFocused(t), n = {
|
|
3557
3612
|
width: this.containerEl.offsetWidth,
|
|
3558
3613
|
height: this.containerEl.offsetHeight
|
|
3559
3614
|
};
|
|
3560
3615
|
if (e)
|
|
3561
|
-
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter();
|
|
3616
|
+
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator();
|
|
3562
3617
|
else {
|
|
3563
3618
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3564
|
-
const
|
|
3565
|
-
this.currentFocusIndex =
|
|
3619
|
+
const s = t.dataset.imageId;
|
|
3620
|
+
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.showFocusIndicator();
|
|
3566
3621
|
}
|
|
3567
3622
|
}
|
|
3568
3623
|
/**
|
|
3569
3624
|
* Clear the image cloud and reset state
|
|
3570
3625
|
*/
|
|
3571
3626
|
clearImageCloud() {
|
|
3572
|
-
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null), this.loadGeneration++, this.displayQueue = [], this.containerEl && this.containerEl.querySelectorAll(".fbn-ic-image, .fbn-ic-debug-center").forEach((t) => t.remove()), this.imageElements = [], this.imageLayouts = [], this.currentFocusIndex = null, this.hoveredImage = null, this.layoutEngine.reset(), this.zoomEngine.reset(), this.idleAnimationEngine?.stopAll(), this.imagesLoaded = !1;
|
|
3627
|
+
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null), this.loadGeneration++, this.displayQueue = [], this.hideFocusIndicator(), this.containerEl && this.containerEl.querySelectorAll(".fbn-ic-image, .fbn-ic-debug-center").forEach((t) => t.remove()), this.imageElements = [], this.imageLayouts = [], this.currentFocusIndex = null, this.hoveredImage = null, this.layoutEngine.reset(), this.zoomEngine.reset(), this.idleAnimationEngine?.stopAll(), this.imagesLoaded = !1;
|
|
3573
3628
|
}
|
|
3574
3629
|
showLoading(t) {
|
|
3575
3630
|
!this.fullConfig.ui.showLoadingSpinner || !this.loadingEl || (t ? this.loadingEl.classList.remove("fbn-ic-hidden") : this.loadingEl.classList.add("fbn-ic-hidden"));
|
|
@@ -3586,11 +3641,23 @@ class Qe {
|
|
|
3586
3641
|
hideCounter() {
|
|
3587
3642
|
this.counterEl && this.counterEl.classList.add("fbn-ic-hidden");
|
|
3588
3643
|
}
|
|
3644
|
+
showFocusIndicator() {
|
|
3645
|
+
this.containerEl?.classList.add("fbn-ic-has-focus");
|
|
3646
|
+
}
|
|
3647
|
+
hideFocusIndicator() {
|
|
3648
|
+
this.containerEl?.classList.remove("fbn-ic-has-focus");
|
|
3649
|
+
}
|
|
3650
|
+
showNavButtons() {
|
|
3651
|
+
this.prevButtonEl?.classList.remove("fbn-ic-hidden"), this.nextButtonEl?.classList.remove("fbn-ic-hidden");
|
|
3652
|
+
}
|
|
3653
|
+
hideNavButtons() {
|
|
3654
|
+
this.prevButtonEl?.classList.add("fbn-ic-hidden"), this.nextButtonEl?.classList.add("fbn-ic-hidden");
|
|
3655
|
+
}
|
|
3589
3656
|
/**
|
|
3590
3657
|
* Destroy the gallery and clean up resources
|
|
3591
3658
|
*/
|
|
3592
3659
|
destroy() {
|
|
3593
|
-
this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy(), this.idleAnimationEngine?.stopAll(), this.idleAnimationEngine = null;
|
|
3660
|
+
this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.prevButtonElAutoCreated && this.prevButtonEl && (this.prevButtonEl.remove(), this.prevButtonEl = null), this.nextButtonElAutoCreated && this.nextButtonEl && (this.nextButtonEl.remove(), this.nextButtonEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy(), this.idleAnimationEngine?.stopAll(), this.idleAnimationEngine = null;
|
|
3594
3661
|
}
|
|
3595
3662
|
}
|
|
3596
3663
|
export {
|
|
@@ -3598,23 +3665,23 @@ export {
|
|
|
3598
3665
|
It as BOUNCE_PRESETS,
|
|
3599
3666
|
Se as ClusterPlacementLayout,
|
|
3600
3667
|
Ve as CompositeLoader,
|
|
3601
|
-
|
|
3668
|
+
A as DEFAULT_CONFIG,
|
|
3602
3669
|
zt as DEFAULT_SHARED_LOADER_CONFIG,
|
|
3603
|
-
|
|
3604
|
-
|
|
3670
|
+
At as ELASTIC_PRESETS,
|
|
3671
|
+
fe as EntryAnimationEngine,
|
|
3605
3672
|
Ke as FUNCTIONAL_CSS,
|
|
3606
3673
|
Xe as GoogleDriveLoader,
|
|
3607
|
-
|
|
3608
|
-
|
|
3674
|
+
ye as GridPlacementLayout,
|
|
3675
|
+
Me as HoneycombPlacementLayout,
|
|
3609
3676
|
Qe as ImageCloud,
|
|
3610
3677
|
Je as ImageFilter,
|
|
3611
3678
|
Qe as ImageGallery,
|
|
3612
3679
|
ze as LayoutEngine,
|
|
3613
3680
|
pe as RadialPlacementLayout,
|
|
3614
3681
|
me as RandomPlacementLayout,
|
|
3615
|
-
|
|
3682
|
+
we as SpiralPlacementLayout,
|
|
3616
3683
|
Ye as StaticImageLoader,
|
|
3617
|
-
|
|
3684
|
+
Rt as WAVE_PATH_PRESETS,
|
|
3618
3685
|
Ie as WavePlacementLayout,
|
|
3619
3686
|
Ne as ZoomEngine,
|
|
3620
3687
|
he as animatePath,
|