@frybynite/image-cloud 0.9.2 → 0.9.3
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 +298 -315
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +671 -688
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +2 -2
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +7 -17
- package/dist/react.d.ts +7 -17
- package/dist/react.js +565 -582
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +7 -17
- package/dist/vue.js +675 -692
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +7 -17
- package/dist/web-component.js +363 -380
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/image-cloud.js
CHANGED
|
@@ -18,7 +18,7 @@ const mt = Object.freeze({
|
|
|
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
|
+
}), bt = Object.freeze({
|
|
22
22
|
type: "linear"
|
|
23
23
|
}), vt = Object.freeze({
|
|
24
24
|
mode: "none"
|
|
@@ -59,9 +59,9 @@ const mt = Object.freeze({
|
|
|
59
59
|
phaseShift: 0,
|
|
60
60
|
synchronization: "offset"
|
|
61
61
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
62
|
-
}), kt = Object.freeze({
|
|
63
|
-
spacing: 0
|
|
64
62
|
}), Nt = Object.freeze({
|
|
63
|
+
spacing: 0
|
|
64
|
+
}), kt = Object.freeze({
|
|
65
65
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
66
66
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
67
67
|
}), jt = Object.freeze({
|
|
@@ -94,7 +94,7 @@ const mt = Object.freeze({
|
|
|
94
94
|
enabled: !1,
|
|
95
95
|
centers: !1,
|
|
96
96
|
loaders: !1
|
|
97
|
-
}), Gt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), qt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Bt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Xt = Object.freeze({ speed: 4e3, direction: "clockwise" }), Dt = Object.freeze({ type: "none" }),
|
|
97
|
+
}), Gt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), qt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Bt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Xt = Object.freeze({ speed: 4e3, direction: "clockwise" }), Dt = Object.freeze({ type: "none" }), R = Object.freeze({
|
|
98
98
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
99
99
|
loaders: [],
|
|
100
100
|
// Shared loader settings and debug config
|
|
@@ -109,7 +109,7 @@ const mt = Object.freeze({
|
|
|
109
109
|
algorithm: "radial",
|
|
110
110
|
scaleDecay: 0,
|
|
111
111
|
// No decay by default (0-1 for radial/spiral)
|
|
112
|
-
responsive:
|
|
112
|
+
responsive: kt,
|
|
113
113
|
targetCoverage: 0.6,
|
|
114
114
|
// Target 60% of container area
|
|
115
115
|
densityFactor: 1,
|
|
@@ -155,7 +155,7 @@ 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: bt,
|
|
159
159
|
rotation: vt,
|
|
160
160
|
scale: wt
|
|
161
161
|
}),
|
|
@@ -178,68 +178,56 @@ const mt = Object.freeze({
|
|
|
178
178
|
}),
|
|
179
179
|
dragging: !0
|
|
180
180
|
}),
|
|
181
|
-
//
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
mobile: 768,
|
|
186
|
-
tablet: void 0,
|
|
187
|
-
// STUB: Not implemented yet
|
|
188
|
-
desktop: void 0
|
|
189
|
-
// STUB: Not implemented yet
|
|
190
|
-
}),
|
|
191
|
-
mobileDetection: () => typeof window > "u" ? !1 : window.innerWidth <= 768
|
|
192
|
-
}),
|
|
193
|
-
ui: Object.freeze({
|
|
194
|
-
showLoadingSpinner: !1,
|
|
195
|
-
showImageCounter: !1
|
|
196
|
-
})
|
|
181
|
+
// UI configuration
|
|
182
|
+
ui: Object.freeze({
|
|
183
|
+
showLoadingSpinner: !1,
|
|
184
|
+
showImageCounter: !1
|
|
197
185
|
}),
|
|
198
186
|
// Image styling
|
|
199
187
|
styling: Mt
|
|
200
188
|
});
|
|
201
|
-
function Z(
|
|
202
|
-
if (!
|
|
203
|
-
if (!t) return { ...
|
|
204
|
-
const i = { ...
|
|
205
|
-
return t.border !== void 0 && (i.border = { ...
|
|
189
|
+
function Z(n, t) {
|
|
190
|
+
if (!n) return t || {};
|
|
191
|
+
if (!t) return { ...n };
|
|
192
|
+
const i = { ...n };
|
|
193
|
+
return t.border !== void 0 && (i.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...n.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;
|
|
206
194
|
}
|
|
207
|
-
function Yt(
|
|
208
|
-
if (!t) return { ...
|
|
209
|
-
const i = Z(
|
|
210
|
-
Z(i,
|
|
195
|
+
function Yt(n, t) {
|
|
196
|
+
if (!t) return { ...n };
|
|
197
|
+
const i = Z(n.default, t.default), e = Z(
|
|
198
|
+
Z(i, n.hover),
|
|
211
199
|
t.hover
|
|
212
|
-
),
|
|
213
|
-
Z(i,
|
|
200
|
+
), o = Z(
|
|
201
|
+
Z(i, n.focused),
|
|
214
202
|
t.focused
|
|
215
203
|
);
|
|
216
204
|
return {
|
|
217
205
|
default: i,
|
|
218
206
|
hover: e,
|
|
219
|
-
focused:
|
|
207
|
+
focused: o
|
|
220
208
|
};
|
|
221
209
|
}
|
|
222
|
-
function Vt(
|
|
223
|
-
if (!t) return { ...
|
|
224
|
-
const i = { ...
|
|
210
|
+
function Vt(n, t) {
|
|
211
|
+
if (!t) return { ...n };
|
|
212
|
+
const i = { ...n };
|
|
225
213
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
226
|
-
...
|
|
214
|
+
...n.sizing,
|
|
227
215
|
...t.sizing
|
|
228
216
|
}, t.sizing.variance)) {
|
|
229
|
-
const e = t.sizing.variance,
|
|
230
|
-
i.sizing.variance = { min:
|
|
217
|
+
const e = t.sizing.variance, o = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : n.sizing?.variance?.min ?? 1, a = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : n.sizing?.variance?.max ?? 1;
|
|
218
|
+
i.sizing.variance = { min: o, max: a };
|
|
231
219
|
}
|
|
232
220
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
233
|
-
...
|
|
221
|
+
...n.rotation,
|
|
234
222
|
...t.rotation
|
|
235
223
|
}, t.rotation.range)) {
|
|
236
|
-
const e = t.rotation.range,
|
|
237
|
-
i.rotation.range = { min:
|
|
224
|
+
const e = t.rotation.range, o = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : n.rotation?.range?.min ?? -15, a = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : n.rotation?.range?.max ?? 15;
|
|
225
|
+
i.rotation.range = { min: o, max: a };
|
|
238
226
|
}
|
|
239
227
|
return i;
|
|
240
228
|
}
|
|
241
|
-
function Jt(
|
|
242
|
-
const t =
|
|
229
|
+
function Jt(n) {
|
|
230
|
+
const t = n.layout?.rotation;
|
|
243
231
|
if (t && "enabled" in t)
|
|
244
232
|
return {
|
|
245
233
|
rotation: {
|
|
@@ -248,8 +236,8 @@ function Jt(o) {
|
|
|
248
236
|
}
|
|
249
237
|
};
|
|
250
238
|
}
|
|
251
|
-
function Kt(
|
|
252
|
-
const t =
|
|
239
|
+
function Kt(n) {
|
|
240
|
+
const t = n.layout?.sizing?.variance;
|
|
253
241
|
if (t)
|
|
254
242
|
return {
|
|
255
243
|
sizing: {
|
|
@@ -259,95 +247,90 @@ function Kt(o) {
|
|
|
259
247
|
}
|
|
260
248
|
};
|
|
261
249
|
}
|
|
262
|
-
function Zt(
|
|
263
|
-
const t = Jt(
|
|
264
|
-
let e =
|
|
250
|
+
function Zt(n = {}) {
|
|
251
|
+
const t = Jt(n), i = Kt(n);
|
|
252
|
+
let e = n.image;
|
|
265
253
|
(t || i) && (e = {
|
|
266
254
|
...i || {},
|
|
267
255
|
...t || {},
|
|
268
256
|
...e
|
|
269
|
-
}, e.rotation && t?.rotation &&
|
|
257
|
+
}, e.rotation && t?.rotation && n.image?.rotation && (e.rotation = {
|
|
270
258
|
...t.rotation,
|
|
271
|
-
...
|
|
259
|
+
...n.image.rotation
|
|
272
260
|
}));
|
|
273
|
-
const
|
|
274
|
-
|
|
261
|
+
const o = [...n.loaders ?? []];
|
|
262
|
+
n.images && n.images.length > 0 && o.unshift({
|
|
275
263
|
static: {
|
|
276
|
-
sources: [{ urls:
|
|
264
|
+
sources: [{ urls: n.images }]
|
|
277
265
|
}
|
|
278
266
|
});
|
|
279
267
|
const r = {
|
|
280
268
|
loaders: {
|
|
281
269
|
...zt,
|
|
282
|
-
...
|
|
270
|
+
...n.config?.loaders ?? {}
|
|
283
271
|
}
|
|
284
272
|
}, s = {
|
|
285
|
-
loaders:
|
|
273
|
+
loaders: o,
|
|
286
274
|
config: r,
|
|
287
275
|
image: Vt(Ft, e),
|
|
288
|
-
layout: { ...
|
|
289
|
-
animation: { ...
|
|
290
|
-
interaction: { ...
|
|
291
|
-
|
|
292
|
-
styling: Yt(Mt,
|
|
276
|
+
layout: { ...R.layout },
|
|
277
|
+
animation: { ...R.animation },
|
|
278
|
+
interaction: { ...R.interaction },
|
|
279
|
+
ui: { ...R.ui },
|
|
280
|
+
styling: Yt(Mt, n.styling)
|
|
293
281
|
};
|
|
294
|
-
|
|
295
|
-
...
|
|
296
|
-
...
|
|
297
|
-
},
|
|
298
|
-
...
|
|
299
|
-
mobile:
|
|
300
|
-
tablet:
|
|
301
|
-
}),
|
|
302
|
-
...
|
|
303
|
-
...
|
|
304
|
-
})),
|
|
305
|
-
...
|
|
306
|
-
...
|
|
307
|
-
},
|
|
308
|
-
...
|
|
309
|
-
...
|
|
310
|
-
}),
|
|
311
|
-
...
|
|
312
|
-
...
|
|
313
|
-
}),
|
|
314
|
-
...
|
|
315
|
-
...
|
|
316
|
-
start:
|
|
317
|
-
...
|
|
318
|
-
...
|
|
319
|
-
circular:
|
|
320
|
-
} :
|
|
321
|
-
timing:
|
|
322
|
-
path:
|
|
323
|
-
rotation:
|
|
324
|
-
scale:
|
|
325
|
-
}),
|
|
282
|
+
n.layout && (s.layout = {
|
|
283
|
+
...R.layout,
|
|
284
|
+
...n.layout
|
|
285
|
+
}, n.layout.responsive && (s.layout.responsive = {
|
|
286
|
+
...R.layout.responsive,
|
|
287
|
+
mobile: n.layout.responsive.mobile ? { ...R.layout.responsive.mobile, ...n.layout.responsive.mobile } : R.layout.responsive.mobile,
|
|
288
|
+
tablet: n.layout.responsive.tablet ? { ...R.layout.responsive.tablet, ...n.layout.responsive.tablet } : R.layout.responsive.tablet
|
|
289
|
+
}), n.layout.spacing && (s.layout.spacing = {
|
|
290
|
+
...R.layout.spacing,
|
|
291
|
+
...n.layout.spacing
|
|
292
|
+
})), n.animation && (s.animation = {
|
|
293
|
+
...R.animation,
|
|
294
|
+
...n.animation
|
|
295
|
+
}, n.animation.easing && (s.animation.easing = {
|
|
296
|
+
...R.animation.easing,
|
|
297
|
+
...n.animation.easing
|
|
298
|
+
}), n.animation.queue && (s.animation.queue = {
|
|
299
|
+
...R.animation.queue,
|
|
300
|
+
...n.animation.queue
|
|
301
|
+
}), n.animation.entry && (s.animation.entry = {
|
|
302
|
+
...R.animation.entry,
|
|
303
|
+
...n.animation.entry,
|
|
304
|
+
start: n.animation.entry.start ? {
|
|
305
|
+
...R.animation.entry.start,
|
|
306
|
+
...n.animation.entry.start,
|
|
307
|
+
circular: n.animation.entry.start.circular ? { ...R.animation.entry.start.circular, ...n.animation.entry.start.circular } : R.animation.entry.start.circular
|
|
308
|
+
} : R.animation.entry.start,
|
|
309
|
+
timing: n.animation.entry.timing ? { ...R.animation.entry.timing, ...n.animation.entry.timing } : R.animation.entry.timing,
|
|
310
|
+
path: n.animation.entry.path ? { ...bt, ...n.animation.entry.path } : R.animation.entry.path,
|
|
311
|
+
rotation: n.animation.entry.rotation ? { ...vt, ...n.animation.entry.rotation } : R.animation.entry.rotation,
|
|
312
|
+
scale: n.animation.entry.scale ? { ...wt, ...n.animation.entry.scale } : R.animation.entry.scale
|
|
313
|
+
}), n.animation.idle && (s.animation.idle = {
|
|
326
314
|
...Dt,
|
|
327
|
-
...
|
|
328
|
-
})),
|
|
329
|
-
...
|
|
330
|
-
...
|
|
331
|
-
},
|
|
332
|
-
...
|
|
333
|
-
...
|
|
334
|
-
}),
|
|
335
|
-
...
|
|
336
|
-
...
|
|
337
|
-
}))
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
...
|
|
342
|
-
...
|
|
343
|
-
|
|
344
|
-
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : E.rendering.responsive.mobileDetection
|
|
345
|
-
}), o.rendering.ui && (s.rendering.ui = {
|
|
346
|
-
...E.rendering.ui,
|
|
347
|
-
...o.rendering.ui
|
|
348
|
-
})), s.config.debug = {
|
|
315
|
+
...n.animation.idle
|
|
316
|
+
})), n.interaction && (s.interaction = {
|
|
317
|
+
...R.interaction,
|
|
318
|
+
...n.interaction
|
|
319
|
+
}, n.interaction.focus && (s.interaction.focus = {
|
|
320
|
+
...R.interaction.focus,
|
|
321
|
+
...n.interaction.focus
|
|
322
|
+
}), n.interaction.navigation && (s.interaction.navigation = {
|
|
323
|
+
...R.interaction.navigation,
|
|
324
|
+
...n.interaction.navigation
|
|
325
|
+
}));
|
|
326
|
+
const l = n.rendering?.ui;
|
|
327
|
+
if (l && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), s.ui = {
|
|
328
|
+
...R.ui,
|
|
329
|
+
...l,
|
|
330
|
+
...n.ui
|
|
331
|
+
}, s.config.debug = {
|
|
349
332
|
...Ot,
|
|
350
|
-
...
|
|
333
|
+
...n.config?.debug ?? {}
|
|
351
334
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
352
335
|
const c = { shape: "hexagon", mode: "height-relative" };
|
|
353
336
|
s.styling = {
|
|
@@ -359,14 +342,14 @@ function Zt(o = {}) {
|
|
|
359
342
|
}
|
|
360
343
|
return s;
|
|
361
344
|
}
|
|
362
|
-
function Qt(
|
|
363
|
-
return { ...
|
|
345
|
+
function Qt(n, t) {
|
|
346
|
+
return { ...n ? It[n] : It.playful, ...t };
|
|
364
347
|
}
|
|
365
|
-
function te(
|
|
366
|
-
return { ...
|
|
348
|
+
function te(n, t) {
|
|
349
|
+
return { ...n ? Rt[n] : Rt.gentle, ...t };
|
|
367
350
|
}
|
|
368
|
-
function ee(
|
|
369
|
-
return { ...
|
|
351
|
+
function ee(n, t) {
|
|
352
|
+
return { ...n ? Tt[n] : Tt.gentle, ...t };
|
|
370
353
|
}
|
|
371
354
|
class ie {
|
|
372
355
|
constructor(t) {
|
|
@@ -379,8 +362,8 @@ class ie {
|
|
|
379
362
|
buildTransformString(t) {
|
|
380
363
|
const i = ["translate(-50%, -50%)"];
|
|
381
364
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
382
|
-
const e = t.x ?? 0,
|
|
383
|
-
i.push(`translate(${e}px, ${
|
|
365
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
366
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
384
367
|
}
|
|
385
368
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
386
369
|
}
|
|
@@ -393,14 +376,14 @@ class ie {
|
|
|
393
376
|
* @param easing - CSS easing function (optional)
|
|
394
377
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
395
378
|
*/
|
|
396
|
-
animateTransformCancellable(t, i, e,
|
|
379
|
+
animateTransformCancellable(t, i, e, o = null, a = null) {
|
|
397
380
|
this.cancelAllAnimations(t);
|
|
398
|
-
const r =
|
|
381
|
+
const r = o ?? this.config.duration, s = a ?? this.config.easing.default, l = this.buildTransformString(i), c = this.buildTransformString(e);
|
|
399
382
|
t.style.transition = "none";
|
|
400
383
|
const u = t.animate(
|
|
401
384
|
[
|
|
402
|
-
{ transform:
|
|
403
|
-
{ transform:
|
|
385
|
+
{ transform: l },
|
|
386
|
+
{ transform: c }
|
|
404
387
|
],
|
|
405
388
|
{
|
|
406
389
|
duration: r,
|
|
@@ -418,7 +401,7 @@ class ie {
|
|
|
418
401
|
duration: r
|
|
419
402
|
};
|
|
420
403
|
return this.activeAnimations.set(t, h), u.finished.then(() => {
|
|
421
|
-
t.style.transform =
|
|
404
|
+
t.style.transform = c, this.activeAnimations.delete(t);
|
|
422
405
|
}).catch(() => {
|
|
423
406
|
this.activeAnimations.delete(t);
|
|
424
407
|
}), h;
|
|
@@ -432,13 +415,13 @@ class ie {
|
|
|
432
415
|
cancelAnimation(t, i = !0) {
|
|
433
416
|
const e = this.getCurrentTransform(t.element);
|
|
434
417
|
if (t.animation.cancel(), i) {
|
|
435
|
-
const
|
|
418
|
+
const o = this.buildTransformString({
|
|
436
419
|
x: e.x,
|
|
437
420
|
y: e.y,
|
|
438
421
|
rotation: e.rotation,
|
|
439
422
|
scale: e.scale
|
|
440
423
|
});
|
|
441
|
-
t.element.style.transform =
|
|
424
|
+
t.element.style.transform = o;
|
|
442
425
|
}
|
|
443
426
|
return this.activeAnimations.delete(t.element), e;
|
|
444
427
|
}
|
|
@@ -451,8 +434,8 @@ class ie {
|
|
|
451
434
|
const i = this.activeAnimations.get(t);
|
|
452
435
|
i && this.cancelAnimation(i, !1);
|
|
453
436
|
const e = t.getAnimations();
|
|
454
|
-
for (const
|
|
455
|
-
|
|
437
|
+
for (const o of e)
|
|
438
|
+
o.cancel();
|
|
456
439
|
}
|
|
457
440
|
/**
|
|
458
441
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -464,8 +447,8 @@ class ie {
|
|
|
464
447
|
const e = getComputedStyle(t).transform;
|
|
465
448
|
if (e === "none" || !e)
|
|
466
449
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
467
|
-
const
|
|
468
|
-
return { x: s, y:
|
|
450
|
+
const o = new DOMMatrix(e), a = Math.sqrt(o.a * o.a + o.b * o.b), r = Math.atan2(o.b, o.a) * (180 / Math.PI), s = o.e, l = o.f;
|
|
451
|
+
return { x: s, y: l, rotation: r, scale: a };
|
|
469
452
|
}
|
|
470
453
|
/**
|
|
471
454
|
* Check if an element has an active animation
|
|
@@ -491,9 +474,9 @@ class ie {
|
|
|
491
474
|
* @param easing - CSS easing function (optional)
|
|
492
475
|
* @returns Promise that resolves when animation completes
|
|
493
476
|
*/
|
|
494
|
-
animateTransform(t, i, e = null,
|
|
477
|
+
animateTransform(t, i, e = null, o = null) {
|
|
495
478
|
return new Promise((a) => {
|
|
496
|
-
const r = e ?? this.config.duration, s =
|
|
479
|
+
const r = e ?? this.config.duration, s = o ?? this.config.easing.default;
|
|
497
480
|
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
498
481
|
a();
|
|
499
482
|
}, r);
|
|
@@ -524,141 +507,141 @@ class ie {
|
|
|
524
507
|
return new Promise((i) => setTimeout(i, t));
|
|
525
508
|
}
|
|
526
509
|
}
|
|
527
|
-
function J(
|
|
528
|
-
return
|
|
510
|
+
function J(n, t, i) {
|
|
511
|
+
return n + (t - n) * i;
|
|
529
512
|
}
|
|
530
|
-
function
|
|
531
|
-
const { overshoot:
|
|
532
|
-
let u = 0, h = 0, d = 1, f =
|
|
533
|
-
for (let g = 0; g <
|
|
534
|
-
if (
|
|
535
|
-
h = g === 0 ? 0 :
|
|
513
|
+
function oe(n, t, i, e) {
|
|
514
|
+
const { overshoot: o, bounces: a, decayRatio: r } = e, s = i.x - t.x, l = i.y - t.y, c = ne(a, r);
|
|
515
|
+
let u = 0, h = 0, d = 1, f = o, y = !1;
|
|
516
|
+
for (let g = 0; g < c.length; g++)
|
|
517
|
+
if (n <= c[g].time) {
|
|
518
|
+
h = g === 0 ? 0 : c[g - 1].time, d = c[g].time, f = c[g].overshoot, y = c[g].isOvershoot;
|
|
536
519
|
break;
|
|
537
520
|
}
|
|
538
|
-
const p = (
|
|
539
|
-
if (
|
|
540
|
-
u = 1 + f *
|
|
521
|
+
const p = (n - h) / (d - h);
|
|
522
|
+
if (y)
|
|
523
|
+
u = 1 + f * nt(p);
|
|
541
524
|
else if (h === 0)
|
|
542
|
-
u =
|
|
525
|
+
u = nt(p);
|
|
543
526
|
else {
|
|
544
|
-
const m = 1 + (
|
|
545
|
-
(
|
|
527
|
+
const m = 1 + (c.find(
|
|
528
|
+
(b, w) => b.time > h && w > 0 && c[w - 1].isOvershoot
|
|
546
529
|
)?.overshoot || f);
|
|
547
|
-
u = J(m, 1,
|
|
530
|
+
u = J(m, 1, nt(p));
|
|
548
531
|
}
|
|
549
532
|
return {
|
|
550
533
|
x: t.x + s * u,
|
|
551
|
-
y: t.y +
|
|
534
|
+
y: t.y + l * u
|
|
552
535
|
};
|
|
553
536
|
}
|
|
554
|
-
function
|
|
537
|
+
function ne(n, t) {
|
|
555
538
|
const i = [];
|
|
556
539
|
let e = 0.6;
|
|
557
540
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
558
|
-
let
|
|
559
|
-
const r = 0.4 / (
|
|
560
|
-
for (let s = 0; s <
|
|
561
|
-
e += r, i.push({ time: e, overshoot:
|
|
541
|
+
let o = 0.15;
|
|
542
|
+
const r = 0.4 / (n * 2);
|
|
543
|
+
for (let s = 0; s < n; s++)
|
|
544
|
+
e += r, i.push({ time: e, overshoot: o, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
562
545
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
563
546
|
}
|
|
564
|
-
function se(
|
|
565
|
-
const { stiffness:
|
|
547
|
+
function se(n, t, i, e) {
|
|
548
|
+
const { stiffness: o, damping: a, mass: r, oscillations: s } = e, l = i.x - t.x, c = i.y - t.y, u = Math.sqrt(o / r), h = a / (2 * Math.sqrt(o * r));
|
|
566
549
|
let d;
|
|
567
550
|
if (h < 1) {
|
|
568
|
-
const f = u * Math.sqrt(1 - h * h),
|
|
569
|
-
d = 1 -
|
|
551
|
+
const f = u * Math.sqrt(1 - h * h), y = Math.exp(-h * u * n * 3), p = Math.cos(f * n * s * Math.PI);
|
|
552
|
+
d = 1 - y * p;
|
|
570
553
|
} else
|
|
571
|
-
d = 1 - Math.exp(-u *
|
|
554
|
+
d = 1 - Math.exp(-u * n * 3);
|
|
572
555
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
573
|
-
x: t.x +
|
|
574
|
-
y: t.y +
|
|
556
|
+
x: t.x + l * d,
|
|
557
|
+
y: t.y + c * d
|
|
575
558
|
};
|
|
576
559
|
}
|
|
577
|
-
function ae(
|
|
578
|
-
const { amplitude:
|
|
560
|
+
function ae(n, t, i, e) {
|
|
561
|
+
const { amplitude: o, frequency: a, decay: r, decayRate: s, phase: l } = e, c = i.x - t.x, u = i.y - t.y, h = Math.sqrt(c * c + u * u), d = h > 0 ? -u / h : 0, f = h > 0 ? c / h : 1, y = a * Math.PI * 2 * n + l, p = r ? Math.pow(1 - n, s) : 1, g = o * Math.sin(y) * p, m = re(n);
|
|
579
562
|
return {
|
|
580
563
|
x: J(t.x, i.x, m) + g * d,
|
|
581
564
|
y: J(t.y, i.y, m) + g * f
|
|
582
565
|
};
|
|
583
566
|
}
|
|
584
|
-
function
|
|
585
|
-
return 1 - (1 -
|
|
567
|
+
function nt(n) {
|
|
568
|
+
return 1 - (1 - n) * (1 - n);
|
|
586
569
|
}
|
|
587
|
-
function re(
|
|
588
|
-
return 1 - Math.pow(1 -
|
|
570
|
+
function re(n) {
|
|
571
|
+
return 1 - Math.pow(1 - n, 3);
|
|
589
572
|
}
|
|
590
|
-
function ce(
|
|
591
|
-
const { amplitude: e, frequency:
|
|
592
|
-
return t +
|
|
573
|
+
function ce(n, t, i) {
|
|
574
|
+
const { amplitude: e, frequency: o, decay: a } = i, r = Math.sin(n * o * Math.PI * 2), s = a ? Math.pow(1 - n, 2) : 1, l = e * r * s;
|
|
575
|
+
return t + l;
|
|
593
576
|
}
|
|
594
|
-
function le(
|
|
595
|
-
const { overshoot: e, bounces:
|
|
577
|
+
function le(n, t, i) {
|
|
578
|
+
const { overshoot: e, bounces: o } = i, a = [];
|
|
596
579
|
a.push({ time: 0.5, scale: e });
|
|
597
580
|
let r = e;
|
|
598
|
-
const s = 0.5,
|
|
581
|
+
const s = 0.5, c = 0.5 / (o * 2);
|
|
599
582
|
let u = 0.5;
|
|
600
|
-
for (let d = 0; d <
|
|
583
|
+
for (let d = 0; d < o; d++) {
|
|
601
584
|
const f = 1 - (r - 1) * s;
|
|
602
|
-
u +=
|
|
585
|
+
u += c, a.push({ time: u, scale: f }), r = 1 + (r - 1) * s * s, u += c, d < o - 1 && a.push({ time: u, scale: r });
|
|
603
586
|
}
|
|
604
587
|
a.push({ time: 1, scale: 1 });
|
|
605
588
|
let h = 1;
|
|
606
589
|
for (let d = 0; d < a.length; d++)
|
|
607
|
-
if (
|
|
608
|
-
const f = d === 0 ? 0 : a[d - 1].time,
|
|
609
|
-
h =
|
|
590
|
+
if (n <= a[d].time) {
|
|
591
|
+
const f = d === 0 ? 0 : a[d - 1].time, y = d === 0 ? 1 : a[d - 1].scale, p = (n - f) / (a[d].time - f), g = nt(p);
|
|
592
|
+
h = y + (a[d].scale - y) * g;
|
|
610
593
|
break;
|
|
611
594
|
}
|
|
612
595
|
return h * t;
|
|
613
596
|
}
|
|
614
|
-
function he(
|
|
597
|
+
function he(n) {
|
|
615
598
|
const {
|
|
616
599
|
element: t,
|
|
617
600
|
startPosition: i,
|
|
618
601
|
endPosition: e,
|
|
619
|
-
pathConfig:
|
|
602
|
+
pathConfig: o,
|
|
620
603
|
duration: a,
|
|
621
604
|
imageWidth: r,
|
|
622
605
|
imageHeight: s,
|
|
623
|
-
rotation:
|
|
624
|
-
scale:
|
|
606
|
+
rotation: l,
|
|
607
|
+
scale: c,
|
|
625
608
|
onComplete: u,
|
|
626
609
|
rotationConfig: h,
|
|
627
610
|
startRotation: d,
|
|
628
611
|
scaleConfig: f,
|
|
629
|
-
startScale:
|
|
630
|
-
} =
|
|
631
|
-
if ((p === "linear" || p === "arc") && !w && !(v ||
|
|
612
|
+
startScale: y
|
|
613
|
+
} = n, p = o.type, g = d !== void 0 && d !== l, m = h?.mode === "wobble", b = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, w = g || m, v = y !== void 0 && y !== c, S = f?.mode === "pop", x = f?.pop || { overshoot: 1.2, bounces: 1 };
|
|
614
|
+
if ((p === "linear" || p === "arc") && !w && !(v || S)) {
|
|
632
615
|
u && u();
|
|
633
616
|
return;
|
|
634
617
|
}
|
|
635
618
|
const z = performance.now(), L = -r / 2, _ = -s / 2;
|
|
636
619
|
function O(H) {
|
|
637
|
-
const
|
|
620
|
+
const N = H - z, T = Math.min(N / a, 1);
|
|
638
621
|
let D;
|
|
639
622
|
switch (p) {
|
|
640
623
|
case "bounce": {
|
|
641
|
-
const
|
|
642
|
-
|
|
643
|
-
|
|
624
|
+
const k = Qt(
|
|
625
|
+
o.bouncePreset,
|
|
626
|
+
o.bounce
|
|
644
627
|
);
|
|
645
|
-
D =
|
|
628
|
+
D = oe(T, i, e, k);
|
|
646
629
|
break;
|
|
647
630
|
}
|
|
648
631
|
case "elastic": {
|
|
649
|
-
const
|
|
650
|
-
|
|
651
|
-
|
|
632
|
+
const k = te(
|
|
633
|
+
o.elasticPreset,
|
|
634
|
+
o.elastic
|
|
652
635
|
);
|
|
653
|
-
D = se(T, i, e,
|
|
636
|
+
D = se(T, i, e, k);
|
|
654
637
|
break;
|
|
655
638
|
}
|
|
656
639
|
case "wave": {
|
|
657
|
-
const
|
|
658
|
-
|
|
659
|
-
|
|
640
|
+
const k = ee(
|
|
641
|
+
o.wavePreset,
|
|
642
|
+
o.wave
|
|
660
643
|
);
|
|
661
|
-
D = ae(T, i, e,
|
|
644
|
+
D = ae(T, i, e, k);
|
|
662
645
|
break;
|
|
663
646
|
}
|
|
664
647
|
default:
|
|
@@ -669,14 +652,14 @@ function he(o) {
|
|
|
669
652
|
}
|
|
670
653
|
const G = D.x - e.x, U = D.y - e.y;
|
|
671
654
|
let M;
|
|
672
|
-
m ? M = ce(T,
|
|
655
|
+
m ? M = ce(T, l, b) : g ? M = J(d, l, T) : M = l;
|
|
673
656
|
let A;
|
|
674
|
-
|
|
657
|
+
S ? A = le(T, c, x) : v ? A = J(y, c, T) : A = c, t.style.transform = `translate(${L}px, ${_}px) translate(${G}px, ${U}px) rotate(${M}deg) scale(${A})`, T < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${l}deg) scale(${c})`, u && u());
|
|
675
658
|
}
|
|
676
659
|
requestAnimationFrame(O);
|
|
677
660
|
}
|
|
678
|
-
function de(
|
|
679
|
-
return
|
|
661
|
+
function de(n) {
|
|
662
|
+
return n === "bounce" || n === "elastic" || n === "wave";
|
|
680
663
|
}
|
|
681
664
|
const ue = {
|
|
682
665
|
radial: "center",
|
|
@@ -689,7 +672,7 @@ const ue = {
|
|
|
689
672
|
};
|
|
690
673
|
class ge {
|
|
691
674
|
constructor(t, i) {
|
|
692
|
-
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
675
|
+
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || bt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || wt;
|
|
693
676
|
}
|
|
694
677
|
/**
|
|
695
678
|
* Get the effective start position, considering layout-aware defaults
|
|
@@ -700,7 +683,7 @@ class ge {
|
|
|
700
683
|
/**
|
|
701
684
|
* Calculate the starting position for an image's entry animation
|
|
702
685
|
*/
|
|
703
|
-
calculateStartPosition(t, i, e,
|
|
686
|
+
calculateStartPosition(t, i, e, o, a) {
|
|
704
687
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
705
688
|
switch (r) {
|
|
706
689
|
case "nearest-edge":
|
|
@@ -722,7 +705,7 @@ class ge {
|
|
|
722
705
|
t,
|
|
723
706
|
i,
|
|
724
707
|
e,
|
|
725
|
-
|
|
708
|
+
o,
|
|
726
709
|
a
|
|
727
710
|
);
|
|
728
711
|
default:
|
|
@@ -732,28 +715,28 @@ class ge {
|
|
|
732
715
|
/**
|
|
733
716
|
* Calculate start position from the nearest edge (current default behavior)
|
|
734
717
|
*/
|
|
735
|
-
calculateNearestEdge(t, i, e,
|
|
736
|
-
const a = t.x, r = t.y, s = a,
|
|
718
|
+
calculateNearestEdge(t, i, e, o) {
|
|
719
|
+
const a = t.x, r = t.y, s = a, l = e.width - a, c = r, u = e.height - r, h = Math.min(s, l, c, u);
|
|
737
720
|
let d = t.x, f = t.y;
|
|
738
|
-
return h === s ? d = -(i.width +
|
|
721
|
+
return h === s ? d = -(i.width + o) : h === l ? d = e.width + o : h === c ? f = -(i.height + o) : f = e.height + o, { x: d, y: f };
|
|
739
722
|
}
|
|
740
723
|
/**
|
|
741
724
|
* Calculate start position from a specific edge
|
|
742
725
|
*/
|
|
743
|
-
calculateEdgePosition(t, i, e,
|
|
726
|
+
calculateEdgePosition(t, i, e, o, a) {
|
|
744
727
|
let r = i.x, s = i.y;
|
|
745
728
|
switch (t) {
|
|
746
729
|
case "top":
|
|
747
730
|
s = -(e.height + a);
|
|
748
731
|
break;
|
|
749
732
|
case "bottom":
|
|
750
|
-
s =
|
|
733
|
+
s = o.height + a;
|
|
751
734
|
break;
|
|
752
735
|
case "left":
|
|
753
736
|
r = -(e.width + a);
|
|
754
737
|
break;
|
|
755
738
|
case "right":
|
|
756
|
-
r =
|
|
739
|
+
r = o.width + a;
|
|
757
740
|
break;
|
|
758
741
|
}
|
|
759
742
|
return { x: r, y: s };
|
|
@@ -762,9 +745,9 @@ class ge {
|
|
|
762
745
|
* Calculate start position from center with scale animation
|
|
763
746
|
*/
|
|
764
747
|
calculateCenterPosition(t, i, e) {
|
|
765
|
-
const
|
|
748
|
+
const o = t.width / 2, a = t.height / 2;
|
|
766
749
|
return {
|
|
767
|
-
x:
|
|
750
|
+
x: o,
|
|
768
751
|
y: a,
|
|
769
752
|
useScale: !0
|
|
770
753
|
// Signal to use scale animation from 0
|
|
@@ -773,28 +756,28 @@ class ge {
|
|
|
773
756
|
/**
|
|
774
757
|
* Calculate start position from a random edge
|
|
775
758
|
*/
|
|
776
|
-
calculateRandomEdge(t, i, e,
|
|
759
|
+
calculateRandomEdge(t, i, e, o) {
|
|
777
760
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
778
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
761
|
+
return this.calculateEdgePosition(r, t, i, e, o);
|
|
779
762
|
}
|
|
780
763
|
/**
|
|
781
764
|
* Calculate start position on a circle around the container
|
|
782
765
|
*/
|
|
783
|
-
calculateCircularPosition(t, i, e,
|
|
766
|
+
calculateCircularPosition(t, i, e, o, a) {
|
|
784
767
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
785
|
-
let
|
|
786
|
-
const
|
|
787
|
-
if (typeof
|
|
788
|
-
const p = parseFloat(
|
|
789
|
-
|
|
768
|
+
let l;
|
|
769
|
+
const c = r.radius || "120%";
|
|
770
|
+
if (typeof c == "string" && c.endsWith("%")) {
|
|
771
|
+
const p = parseFloat(c) / 100;
|
|
772
|
+
l = Math.sqrt(
|
|
790
773
|
e.width ** 2 + e.height ** 2
|
|
791
774
|
) * p / 2;
|
|
792
775
|
} else
|
|
793
|
-
|
|
776
|
+
l = typeof c == "number" ? c : 500;
|
|
794
777
|
let u;
|
|
795
|
-
s === "even" ? u =
|
|
796
|
-
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) *
|
|
797
|
-
return { x: f, y
|
|
778
|
+
s === "even" ? u = o / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
779
|
+
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) * l, y = d + Math.sin(u) * l;
|
|
780
|
+
return { x: f, y };
|
|
798
781
|
}
|
|
799
782
|
/**
|
|
800
783
|
* Get animation parameters for an image
|
|
@@ -813,17 +796,17 @@ class ge {
|
|
|
813
796
|
* Build a CSS transform string for the start position
|
|
814
797
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
815
798
|
*/
|
|
816
|
-
buildStartTransform(t, i, e,
|
|
817
|
-
const
|
|
818
|
-
return t.useScale ? `${p} translate(${
|
|
799
|
+
buildStartTransform(t, i, e, o, a, r, s, l) {
|
|
800
|
+
const c = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = l !== void 0 ? l : o, f = a !== void 0 ? -a / 2 : 0, y = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${f}px, ${y}px)` : "translate(-50%, -50%)";
|
|
801
|
+
return t.useScale ? `${p} translate(${c}px, ${u}px) rotate(${h}deg) scale(0)` : `${p} translate(${c}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
819
802
|
}
|
|
820
803
|
/**
|
|
821
804
|
* Build the final CSS transform string
|
|
822
805
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
823
806
|
*/
|
|
824
|
-
buildFinalTransform(t, i, e,
|
|
825
|
-
if (e !== void 0 &&
|
|
826
|
-
const a = -e / 2, r = -
|
|
807
|
+
buildFinalTransform(t, i, e, o) {
|
|
808
|
+
if (e !== void 0 && o !== void 0) {
|
|
809
|
+
const a = -e / 2, r = -o / 2;
|
|
827
810
|
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
828
811
|
}
|
|
829
812
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
@@ -889,12 +872,12 @@ class ge {
|
|
|
889
872
|
return t + (Math.random() - 0.5) * 60;
|
|
890
873
|
if (typeof e == "number")
|
|
891
874
|
return e;
|
|
892
|
-
const
|
|
893
|
-
return e.min + Math.random() *
|
|
875
|
+
const o = e.max - e.min;
|
|
876
|
+
return e.min + Math.random() * o;
|
|
894
877
|
}
|
|
895
878
|
case "spin": {
|
|
896
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
897
|
-
return t + e * 360 *
|
|
879
|
+
const e = this.rotationConfig.spinCount ?? 1, o = this.resolveSpinDirection(t);
|
|
880
|
+
return t + e * 360 * o;
|
|
898
881
|
}
|
|
899
882
|
case "random":
|
|
900
883
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -942,8 +925,8 @@ class ge {
|
|
|
942
925
|
amplitude: 15,
|
|
943
926
|
frequency: 3,
|
|
944
927
|
decay: !0
|
|
945
|
-
}, { amplitude:
|
|
946
|
-
return i +
|
|
928
|
+
}, { amplitude: o, frequency: a, decay: r } = e, s = Math.sin(t * a * Math.PI * 2), l = r ? Math.pow(1 - t, 2) : 1, c = o * s * l;
|
|
929
|
+
return i + c;
|
|
947
930
|
}
|
|
948
931
|
/**
|
|
949
932
|
* Get the scale configuration
|
|
@@ -999,12 +982,12 @@ class ge {
|
|
|
999
982
|
const e = this.scaleConfig.pop || {
|
|
1000
983
|
overshoot: 1.2,
|
|
1001
984
|
bounces: 1
|
|
1002
|
-
}, { overshoot:
|
|
985
|
+
}, { overshoot: o, bounces: a } = e, r = this.generateScaleBounceKeyframes(a, o);
|
|
1003
986
|
let s = i;
|
|
1004
|
-
for (let
|
|
1005
|
-
if (t <= r[
|
|
1006
|
-
const
|
|
1007
|
-
s = u + (r[
|
|
987
|
+
for (let l = 0; l < r.length; l++)
|
|
988
|
+
if (t <= r[l].time) {
|
|
989
|
+
const c = l === 0 ? 0 : r[l - 1].time, u = l === 0 ? i : r[l - 1].scale, h = (t - c) / (r[l].time - c), d = this.easeOutQuad(h);
|
|
990
|
+
s = u + (r[l].scale - u) * d;
|
|
1008
991
|
break;
|
|
1009
992
|
}
|
|
1010
993
|
return s * i;
|
|
@@ -1015,12 +998,12 @@ class ge {
|
|
|
1015
998
|
generateScaleBounceKeyframes(t, i) {
|
|
1016
999
|
const e = [];
|
|
1017
1000
|
e.push({ time: 0.5, scale: i });
|
|
1018
|
-
let
|
|
1001
|
+
let o = i;
|
|
1019
1002
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1020
|
-
let
|
|
1021
|
-
for (let
|
|
1022
|
-
const u = 1 - (
|
|
1023
|
-
|
|
1003
|
+
let l = 0.5;
|
|
1004
|
+
for (let c = 0; c < t; c++) {
|
|
1005
|
+
const u = 1 - (o - 1) * a;
|
|
1006
|
+
l += s, e.push({ time: l, scale: u }), o = 1 + (o - 1) * a * a, l += s, c < t - 1 && e.push({ time: l, scale: o });
|
|
1024
1007
|
}
|
|
1025
1008
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1026
1009
|
}
|
|
@@ -1039,9 +1022,9 @@ class fe {
|
|
|
1039
1022
|
* Register an image element for idle animation.
|
|
1040
1023
|
* Starts animation after entry duration completes.
|
|
1041
1024
|
*/
|
|
1042
|
-
register(t, i, e,
|
|
1025
|
+
register(t, i, e, o) {
|
|
1043
1026
|
if (this.entries.has(t)) return;
|
|
1044
|
-
const a =
|
|
1027
|
+
const a = o ?? this.entryDurationMs, r = this.config.startDelay ?? a, s = {
|
|
1045
1028
|
element: t,
|
|
1046
1029
|
index: i,
|
|
1047
1030
|
totalImages: e,
|
|
@@ -1156,23 +1139,23 @@ class fe {
|
|
|
1156
1139
|
});
|
|
1157
1140
|
}
|
|
1158
1141
|
_startBlink(t) {
|
|
1159
|
-
const i = { ...Bt, ...this.config.blink }, e = -(Math.random() * i.speed),
|
|
1142
|
+
const i = { ...Bt, ...this.config.blink }, e = -(Math.random() * i.speed), o = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1160
1143
|
let a, r;
|
|
1161
1144
|
i.style === "fade" ? (a = [
|
|
1162
|
-
{ opacity:
|
|
1145
|
+
{ opacity: o, offset: 0 },
|
|
1163
1146
|
{ opacity: 0, offset: 0.5 },
|
|
1164
|
-
{ opacity:
|
|
1147
|
+
{ opacity: o, offset: 1 }
|
|
1165
1148
|
], r = {
|
|
1166
1149
|
duration: i.speed,
|
|
1167
1150
|
delay: e,
|
|
1168
1151
|
iterations: 1 / 0,
|
|
1169
1152
|
easing: "ease-in-out"
|
|
1170
1153
|
}) : (a = [
|
|
1171
|
-
{ opacity:
|
|
1172
|
-
{ opacity:
|
|
1154
|
+
{ opacity: o, offset: 0 },
|
|
1155
|
+
{ opacity: o, offset: i.onRatio },
|
|
1173
1156
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
1174
1157
|
{ opacity: 0, offset: 0.99 },
|
|
1175
|
-
{ opacity:
|
|
1158
|
+
{ opacity: o, offset: 1 }
|
|
1176
1159
|
], r = {
|
|
1177
1160
|
duration: i.speed,
|
|
1178
1161
|
delay: e,
|
|
@@ -1201,8 +1184,8 @@ class fe {
|
|
|
1201
1184
|
if (this.togetherSpeed = t, this.togetherRafId !== null) return;
|
|
1202
1185
|
const i = () => {
|
|
1203
1186
|
const e = performance.now() % this.togetherSpeed;
|
|
1204
|
-
for (const
|
|
1205
|
-
!
|
|
1187
|
+
for (const o of this.entries.values())
|
|
1188
|
+
!o.stopped && !o.paused && o.animation && (o.animation.currentTime = e);
|
|
1206
1189
|
this.togetherRafId = requestAnimationFrame(i);
|
|
1207
1190
|
};
|
|
1208
1191
|
this.togetherRafId = requestAnimationFrame(i);
|
|
@@ -1229,19 +1212,19 @@ class me {
|
|
|
1229
1212
|
* @returns Array of layout objects with position, rotation, scale
|
|
1230
1213
|
*/
|
|
1231
1214
|
generate(t, i, e = {}) {
|
|
1232
|
-
const
|
|
1215
|
+
const o = [], { width: a, height: r } = i, s = this.config.spacing.padding, l = e.fixedHeight ?? 200, c = 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, f = this.imageConfig.sizing?.variance?.max ?? 1, y = d !== 1 || f !== 1, g = l * 1.5 / 2, m = l / 2, b = a - s - g, w = r - s - m, v = s + g, S = s + m;
|
|
1233
1216
|
for (let x = 0; x < t; x++) {
|
|
1234
|
-
const
|
|
1217
|
+
const I = this.random(v, b), z = this.random(S, w), L = c === "random" ? this.random(u, h) : 0, _ = y ? this.random(d, f) : 1, O = l * _, H = {
|
|
1235
1218
|
id: x,
|
|
1236
|
-
x:
|
|
1219
|
+
x: I,
|
|
1237
1220
|
y: z,
|
|
1238
1221
|
rotation: L,
|
|
1239
1222
|
scale: _,
|
|
1240
1223
|
baseSize: O
|
|
1241
1224
|
};
|
|
1242
|
-
|
|
1225
|
+
o.push(H);
|
|
1243
1226
|
}
|
|
1244
|
-
return
|
|
1227
|
+
return o;
|
|
1245
1228
|
}
|
|
1246
1229
|
/**
|
|
1247
1230
|
* Utility: Generate random number between min and max
|
|
@@ -1265,20 +1248,20 @@ class pe {
|
|
|
1265
1248
|
* @returns Array of layout objects with position, rotation, scale
|
|
1266
1249
|
*/
|
|
1267
1250
|
generate(t, i, e = {}) {
|
|
1268
|
-
const
|
|
1251
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", c = 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, f = h !== 1 || d !== 1, y = this.config.scaleDecay ?? 0, p = {
|
|
1269
1252
|
...Ut,
|
|
1270
1253
|
...this.config.radial
|
|
1271
|
-
}, g = e.fixedHeight ?? s, m = a / 2,
|
|
1254
|
+
}, g = e.fixedHeight ?? s, m = a / 2, b = r / 2, w = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, S = Math.max(g * 0.8, Math.min(
|
|
1272
1255
|
m - v - g / 2,
|
|
1273
|
-
|
|
1256
|
+
b - v - g / 2
|
|
1274
1257
|
));
|
|
1275
1258
|
if (t > 0) {
|
|
1276
1259
|
const z = f ? this.random(h, d) : 1, L = g * z;
|
|
1277
|
-
|
|
1260
|
+
o.push({
|
|
1278
1261
|
id: 0,
|
|
1279
1262
|
x: m,
|
|
1280
|
-
y,
|
|
1281
|
-
rotation:
|
|
1263
|
+
y: b,
|
|
1264
|
+
rotation: l === "random" ? this.random(c * 0.33, u * 0.33) : 0,
|
|
1282
1265
|
// Less rotation for center
|
|
1283
1266
|
scale: z,
|
|
1284
1267
|
baseSize: L,
|
|
@@ -1286,34 +1269,34 @@ class pe {
|
|
|
1286
1269
|
// Center image is highest
|
|
1287
1270
|
});
|
|
1288
1271
|
}
|
|
1289
|
-
let x = 1,
|
|
1272
|
+
let x = 1, I = 1;
|
|
1290
1273
|
for (; x < t; ) {
|
|
1291
|
-
const z =
|
|
1274
|
+
const z = I / w, L = y > 0 ? 1 - z * y * 0.5 : 1, _ = Math.max(g * 0.8, S / w * 1.5 / p.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), T = this.estimateWidth(g), D = Math.floor(N / (T * 0.7));
|
|
1292
1275
|
if (D === 0) {
|
|
1293
|
-
|
|
1276
|
+
I++;
|
|
1294
1277
|
continue;
|
|
1295
1278
|
}
|
|
1296
|
-
const G = 2 * Math.PI / D, U =
|
|
1279
|
+
const G = 2 * Math.PI / D, U = I * (20 * Math.PI / 180);
|
|
1297
1280
|
for (let M = 0; M < D && x < t; M++) {
|
|
1298
|
-
const A = M * G + U,
|
|
1299
|
-
let $ = m + Math.cos(A) * H, F =
|
|
1281
|
+
const A = M * G + U, k = f ? this.random(h, d) : 1, B = L * k, C = g * B;
|
|
1282
|
+
let $ = m + Math.cos(A) * H, F = b + Math.sin(A) * O;
|
|
1300
1283
|
const P = C * 1.5 / 2, j = C / 2;
|
|
1301
1284
|
$ - P < v ? $ = v + P : $ + P > a - v && ($ = a - v - P), F - j < v ? F = v + j : F + j > r - v && (F = r - v - j);
|
|
1302
|
-
const Y =
|
|
1303
|
-
|
|
1285
|
+
const Y = l === "random" ? this.random(c, u) : 0;
|
|
1286
|
+
o.push({
|
|
1304
1287
|
id: x,
|
|
1305
1288
|
x: $,
|
|
1306
1289
|
y: F,
|
|
1307
1290
|
rotation: Y,
|
|
1308
1291
|
scale: B,
|
|
1309
1292
|
baseSize: C,
|
|
1310
|
-
zIndex: Math.max(1, 100 -
|
|
1293
|
+
zIndex: Math.max(1, 100 - I)
|
|
1311
1294
|
// Outer rings have lower z-index
|
|
1312
1295
|
}), x++;
|
|
1313
1296
|
}
|
|
1314
|
-
|
|
1297
|
+
I++;
|
|
1315
1298
|
}
|
|
1316
|
-
return
|
|
1299
|
+
return o;
|
|
1317
1300
|
}
|
|
1318
1301
|
/**
|
|
1319
1302
|
* Estimate image width based on height
|
|
@@ -1334,7 +1317,7 @@ class pe {
|
|
|
1334
1317
|
return Math.random() * (i - t) + t;
|
|
1335
1318
|
}
|
|
1336
1319
|
}
|
|
1337
|
-
const
|
|
1320
|
+
const ye = {
|
|
1338
1321
|
columns: "auto",
|
|
1339
1322
|
rows: "auto",
|
|
1340
1323
|
stagger: "none",
|
|
@@ -1362,7 +1345,7 @@ const be = {
|
|
|
1362
1345
|
{ x: 0, y: 1 }
|
|
1363
1346
|
// down
|
|
1364
1347
|
];
|
|
1365
|
-
class
|
|
1348
|
+
class be {
|
|
1366
1349
|
constructor(t, i = {}) {
|
|
1367
1350
|
this.config = t, this.imageConfig = i;
|
|
1368
1351
|
}
|
|
@@ -1374,13 +1357,13 @@ class ye {
|
|
|
1374
1357
|
* @returns Array of layout objects with position, rotation, scale
|
|
1375
1358
|
*/
|
|
1376
1359
|
generate(t, i, e = {}) {
|
|
1377
|
-
const
|
|
1360
|
+
const o = [], { width: a, height: r } = i, s = { ...ye, ...this.config.grid }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, y = a - 2 * l, p = r - 2 * l, { columns: g, rows: m } = this.calculateGridDimensions(
|
|
1378
1361
|
t,
|
|
1379
|
-
|
|
1362
|
+
y,
|
|
1380
1363
|
p,
|
|
1381
|
-
|
|
1364
|
+
c,
|
|
1382
1365
|
s
|
|
1383
|
-
),
|
|
1366
|
+
), b = s.stagger === "row", w = s.stagger === "column", v = b ? g + 0.5 : g, S = w ? m + 0.5 : m, x = (y - s.gap * (g - 1)) / v, I = (p - s.gap * (m - 1)) / S, z = b ? x / 2 : 0, L = w ? I / 2 : 0, _ = 1 + s.overlap, O = Math.min(x, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = g * x + (g - 1) * s.gap + z, T = m * I + (m - 1) * s.gap + L, D = l + (y - N) / 2, G = l + (p - T) / 2, U = g * m, M = s.columns !== "auto" && s.rows !== "auto", A = M && t > U;
|
|
1384
1367
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1385
1368
|
gridConfigColumns: s.columns,
|
|
1386
1369
|
gridConfigRows: s.rows,
|
|
@@ -1391,21 +1374,21 @@ class ye {
|
|
|
1391
1374
|
imageCount: t,
|
|
1392
1375
|
isOverflowMode: A
|
|
1393
1376
|
});
|
|
1394
|
-
const
|
|
1377
|
+
const k = A ? new Array(U).fill(0) : [], B = Math.min(x, I) * s.overflowOffset;
|
|
1395
1378
|
for (let C = 0; C < t; C++) {
|
|
1396
1379
|
let $, F, X = 0;
|
|
1397
1380
|
if (A && C >= U) {
|
|
1398
1381
|
const q = C - U, W = q % U;
|
|
1399
|
-
X = Math.floor(q / U) + 1,
|
|
1382
|
+
X = Math.floor(q / U) + 1, k[W]++, s.fillDirection === "row" ? ($ = W % g, F = Math.floor(W / g)) : (F = W % m, $ = Math.floor(W / m));
|
|
1400
1383
|
} else
|
|
1401
1384
|
s.fillDirection === "row" ? ($ = C % g, F = Math.floor(C / g)) : (F = C % m, $ = Math.floor(C / m));
|
|
1402
|
-
let P = D + $ * (x + s.gap) + x / 2, j = G + F * (
|
|
1403
|
-
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (j +=
|
|
1385
|
+
let P = D + $ * (x + s.gap) + x / 2, j = G + F * (I + s.gap) + I / 2;
|
|
1386
|
+
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (j += I / 2), X > 0) {
|
|
1404
1387
|
const q = (X - 1) % At.length, W = At[q];
|
|
1405
1388
|
P += W.x * B, j += W.y * B;
|
|
1406
1389
|
}
|
|
1407
1390
|
if (s.jitter > 0) {
|
|
1408
|
-
const q = x / 2 * s.jitter, W =
|
|
1391
|
+
const q = x / 2 * s.jitter, W = I / 2 * s.jitter;
|
|
1409
1392
|
P += this.random(-q, q), j += this.random(-W, W);
|
|
1410
1393
|
}
|
|
1411
1394
|
let Y = P, V = j;
|
|
@@ -1414,10 +1397,10 @@ class ye {
|
|
|
1414
1397
|
if (F === Math.floor((t - 1) / g) && q < g) {
|
|
1415
1398
|
const St = q * x + (q - 1) * s.gap;
|
|
1416
1399
|
let gt = 0;
|
|
1417
|
-
s.alignment === "center" ? gt = (
|
|
1400
|
+
s.alignment === "center" ? gt = (N - St) / 2 : s.alignment === "end" && (gt = N - St), Y += gt;
|
|
1418
1401
|
}
|
|
1419
1402
|
}
|
|
1420
|
-
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2,
|
|
1403
|
+
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2, ot = K / 2, lt = l + it, ht = a - l - it, Pt = l + ot, _t = r - l - ot;
|
|
1421
1404
|
Y = Math.max(lt, Math.min(Y, ht)), V = Math.max(Pt, Math.min(V, _t));
|
|
1422
1405
|
let dt = 0;
|
|
1423
1406
|
if (u === "random") {
|
|
@@ -1425,7 +1408,7 @@ class ye {
|
|
|
1425
1408
|
s.jitter > 0 ? dt = this.random(q * s.jitter, W * s.jitter) : dt = this.random(q, W);
|
|
1426
1409
|
}
|
|
1427
1410
|
let ut;
|
|
1428
|
-
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1,
|
|
1411
|
+
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1, o.push({
|
|
1429
1412
|
id: C,
|
|
1430
1413
|
x: Y,
|
|
1431
1414
|
y: V,
|
|
@@ -1435,12 +1418,12 @@ class ye {
|
|
|
1435
1418
|
zIndex: ut
|
|
1436
1419
|
});
|
|
1437
1420
|
}
|
|
1438
|
-
return
|
|
1421
|
+
return o;
|
|
1439
1422
|
}
|
|
1440
1423
|
/**
|
|
1441
1424
|
* Calculate optimal grid dimensions based on image count and container
|
|
1442
1425
|
*/
|
|
1443
|
-
calculateGridDimensions(t, i, e,
|
|
1426
|
+
calculateGridDimensions(t, i, e, o, a) {
|
|
1444
1427
|
let r, s;
|
|
1445
1428
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1446
1429
|
r = a.columns, s = a.rows;
|
|
@@ -1449,8 +1432,8 @@ class ye {
|
|
|
1449
1432
|
else if (a.rows !== "auto")
|
|
1450
1433
|
s = a.rows, r = Math.ceil(t / s);
|
|
1451
1434
|
else {
|
|
1452
|
-
const
|
|
1453
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t *
|
|
1435
|
+
const l = i / e;
|
|
1436
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * l / 1.4))), s = Math.ceil(t / r); r > 1 && (r - 1) * s >= t; )
|
|
1454
1437
|
r--;
|
|
1455
1438
|
}
|
|
1456
1439
|
return { columns: Math.max(1, r), rows: Math.max(1, s) };
|
|
@@ -1481,80 +1464,80 @@ class xe {
|
|
|
1481
1464
|
* @returns Array of layout objects with position, rotation, scale
|
|
1482
1465
|
*/
|
|
1483
1466
|
generate(t, i, e = {}) {
|
|
1484
|
-
const
|
|
1485
|
-
m -
|
|
1486
|
-
|
|
1467
|
+
const o = [], { width: a, height: r } = i, s = { ...we, ...this.config.spiral }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, y = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || y !== 1, g = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, b = r / 2, w = Math.min(
|
|
1468
|
+
m - l - c / 2,
|
|
1469
|
+
b - l - c / 2
|
|
1487
1470
|
), v = s.direction === "clockwise" ? -1 : 1;
|
|
1488
|
-
for (let
|
|
1489
|
-
let x,
|
|
1471
|
+
for (let S = 0; S < t; S++) {
|
|
1472
|
+
let x, I;
|
|
1490
1473
|
if (s.spiralType === "golden")
|
|
1491
|
-
x =
|
|
1474
|
+
x = S * ve * v + s.startAngle, I = this.calculateGoldenRadius(S, t, w, s.tightness);
|
|
1492
1475
|
else if (s.spiralType === "archimedean") {
|
|
1493
|
-
const P =
|
|
1494
|
-
x = P * v + s.startAngle,
|
|
1476
|
+
const P = S * 0.5 * s.tightness;
|
|
1477
|
+
x = P * v + s.startAngle, I = this.calculateArchimedeanRadius(P, t, w, s.tightness);
|
|
1495
1478
|
} else {
|
|
1496
|
-
const P =
|
|
1497
|
-
x = P * v + s.startAngle,
|
|
1479
|
+
const P = S * 0.3 * s.tightness;
|
|
1480
|
+
x = P * v + s.startAngle, I = this.calculateLogarithmicRadius(P, t, w, s.tightness);
|
|
1498
1481
|
}
|
|
1499
|
-
const z = m + Math.cos(x) *
|
|
1482
|
+
const z = m + Math.cos(x) * I, L = b + Math.sin(x) * I, _ = I / w, O = g > 0 ? 1 - _ * g * 0.5 : 1, H = p ? this.random(f, y) : 1, N = O * H, T = c * N, G = T * 1.5 / 2, U = T / 2, M = l + G, A = a - l - G, k = l + U, B = r - l - U, C = Math.max(M, Math.min(z, A)), $ = Math.max(k, Math.min(L, B));
|
|
1500
1483
|
let F = 0;
|
|
1501
1484
|
if (u === "random") {
|
|
1502
1485
|
const P = x * 180 / Math.PI % 360, j = this.random(h, d);
|
|
1503
1486
|
F = s.spiralType === "golden" ? j : P * 0.1 + j * 0.9;
|
|
1504
|
-
} else u === "tangent" && (F = this.calculateSpiralTangent(x,
|
|
1505
|
-
const X = t -
|
|
1506
|
-
|
|
1507
|
-
id:
|
|
1487
|
+
} else u === "tangent" && (F = this.calculateSpiralTangent(x, I, s));
|
|
1488
|
+
const X = t - S;
|
|
1489
|
+
o.push({
|
|
1490
|
+
id: S,
|
|
1508
1491
|
x: C,
|
|
1509
1492
|
y: $,
|
|
1510
1493
|
rotation: F,
|
|
1511
|
-
scale:
|
|
1494
|
+
scale: N,
|
|
1512
1495
|
baseSize: T,
|
|
1513
1496
|
zIndex: X
|
|
1514
1497
|
});
|
|
1515
1498
|
}
|
|
1516
|
-
return
|
|
1499
|
+
return o;
|
|
1517
1500
|
}
|
|
1518
1501
|
/**
|
|
1519
1502
|
* Calculate tangent angle for spiral curve at given position
|
|
1520
1503
|
* This aligns the image along the spiral's direction of travel
|
|
1521
1504
|
*/
|
|
1522
1505
|
calculateSpiralTangent(t, i, e) {
|
|
1523
|
-
let
|
|
1506
|
+
let o;
|
|
1524
1507
|
if (e.spiralType === "golden")
|
|
1525
|
-
|
|
1508
|
+
o = t + Math.PI / 2;
|
|
1526
1509
|
else if (e.spiralType === "archimedean") {
|
|
1527
1510
|
const r = 1 / e.tightness, s = Math.atan(i / r);
|
|
1528
|
-
|
|
1511
|
+
o = t + s;
|
|
1529
1512
|
} else {
|
|
1530
1513
|
const r = 0.15 / e.tightness, s = Math.atan(1 / r);
|
|
1531
|
-
|
|
1514
|
+
o = t + s;
|
|
1532
1515
|
}
|
|
1533
|
-
return
|
|
1516
|
+
return o * 180 / Math.PI % 360 - 90;
|
|
1534
1517
|
}
|
|
1535
1518
|
/**
|
|
1536
1519
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1537
1520
|
* Creates even distribution like sunflower seeds
|
|
1538
1521
|
*/
|
|
1539
|
-
calculateGoldenRadius(t, i, e,
|
|
1540
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1522
|
+
calculateGoldenRadius(t, i, e, o) {
|
|
1523
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / o;
|
|
1541
1524
|
return Math.min(r, e);
|
|
1542
1525
|
}
|
|
1543
1526
|
/**
|
|
1544
1527
|
* Calculate radius for Archimedean spiral
|
|
1545
1528
|
* r = a + b*θ (constant spacing between arms)
|
|
1546
1529
|
*/
|
|
1547
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1548
|
-
const a = i * 0.5 *
|
|
1530
|
+
calculateArchimedeanRadius(t, i, e, o) {
|
|
1531
|
+
const a = i * 0.5 * o;
|
|
1549
1532
|
return t / a * e;
|
|
1550
1533
|
}
|
|
1551
1534
|
/**
|
|
1552
1535
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1553
1536
|
* r = a * e^(b*θ)
|
|
1554
1537
|
*/
|
|
1555
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1556
|
-
const a = e * 0.05, r = 0.15 /
|
|
1557
|
-
return s /
|
|
1538
|
+
calculateLogarithmicRadius(t, i, e, o) {
|
|
1539
|
+
const a = e * 0.05, r = 0.15 / o, s = a * Math.exp(r * t), l = i * 0.3 * o, c = a * Math.exp(r * l);
|
|
1540
|
+
return s / c * e;
|
|
1558
1541
|
}
|
|
1559
1542
|
/**
|
|
1560
1543
|
* Utility: Generate random number between min and max
|
|
@@ -1583,7 +1566,7 @@ class Se {
|
|
|
1583
1566
|
* @returns Array of layout objects with position, rotation, scale
|
|
1584
1567
|
*/
|
|
1585
1568
|
generate(t, i, e = {}) {
|
|
1586
|
-
const
|
|
1569
|
+
const o = [], { width: a, height: r } = i, s = { ...Ee, ...this.config.cluster }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, y = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || y !== 1, g = this.calculateClusterCount(
|
|
1587
1570
|
t,
|
|
1588
1571
|
s.clusterCount,
|
|
1589
1572
|
a,
|
|
@@ -1593,72 +1576,72 @@ class Se {
|
|
|
1593
1576
|
g,
|
|
1594
1577
|
a,
|
|
1595
1578
|
r,
|
|
1596
|
-
|
|
1579
|
+
l,
|
|
1597
1580
|
s
|
|
1598
|
-
),
|
|
1581
|
+
), b = new Array(g).fill(0);
|
|
1599
1582
|
for (let v = 0; v < t; v++)
|
|
1600
|
-
|
|
1583
|
+
b[v % g]++;
|
|
1601
1584
|
let w = 0;
|
|
1602
1585
|
for (let v = 0; v < g; v++) {
|
|
1603
|
-
const
|
|
1604
|
-
for (let
|
|
1586
|
+
const S = m[v], x = b[v];
|
|
1587
|
+
for (let I = 0; I < x; I++) {
|
|
1605
1588
|
let z, L;
|
|
1606
1589
|
if (s.distribution === "gaussian")
|
|
1607
|
-
z = this.gaussianRandom() *
|
|
1590
|
+
z = this.gaussianRandom() * S.spread, L = this.gaussianRandom() * S.spread;
|
|
1608
1591
|
else {
|
|
1609
|
-
const F = this.random(0, Math.PI * 2), X = this.random(0,
|
|
1592
|
+
const F = this.random(0, Math.PI * 2), X = this.random(0, S.spread);
|
|
1610
1593
|
z = Math.cos(F) * X, L = Math.sin(F) * X;
|
|
1611
1594
|
}
|
|
1612
1595
|
const _ = 1 + s.overlap * 0.5, O = 1 + s.overlap * 0.3;
|
|
1613
1596
|
z /= _, L /= _;
|
|
1614
|
-
const H = p ? this.random(f,
|
|
1615
|
-
let D =
|
|
1597
|
+
const H = p ? this.random(f, y) : 1, N = O * H, T = c * N;
|
|
1598
|
+
let D = S.x + z, G = S.y + L;
|
|
1616
1599
|
const M = T * 1.5 / 2, A = T / 2;
|
|
1617
|
-
D = Math.max(
|
|
1618
|
-
const
|
|
1619
|
-
|
|
1600
|
+
D = Math.max(l + M, Math.min(D, a - l - M)), G = Math.max(l + A, Math.min(G, r - l - A));
|
|
1601
|
+
const k = u === "random" ? this.random(h, d) : 0, C = Math.sqrt(z * z + L * L) / S.spread, $ = Math.round((1 - C) * 50) + 1;
|
|
1602
|
+
o.push({
|
|
1620
1603
|
id: w,
|
|
1621
1604
|
x: D,
|
|
1622
1605
|
y: G,
|
|
1623
|
-
rotation:
|
|
1624
|
-
scale:
|
|
1606
|
+
rotation: k,
|
|
1607
|
+
scale: N,
|
|
1625
1608
|
baseSize: T,
|
|
1626
1609
|
zIndex: $
|
|
1627
1610
|
}), w++;
|
|
1628
1611
|
}
|
|
1629
1612
|
}
|
|
1630
|
-
return
|
|
1613
|
+
return o;
|
|
1631
1614
|
}
|
|
1632
1615
|
/**
|
|
1633
1616
|
* Calculate optimal number of clusters based on image count and container
|
|
1634
1617
|
*/
|
|
1635
|
-
calculateClusterCount(t, i, e,
|
|
1618
|
+
calculateClusterCount(t, i, e, o, a) {
|
|
1636
1619
|
if (i !== "auto")
|
|
1637
1620
|
return Math.max(1, Math.min(i, t));
|
|
1638
|
-
const s = Math.max(1, Math.ceil(t / 8)),
|
|
1639
|
-
e / a * (
|
|
1621
|
+
const s = Math.max(1, Math.ceil(t / 8)), l = Math.floor(
|
|
1622
|
+
e / a * (o / a) * 0.6
|
|
1640
1623
|
);
|
|
1641
|
-
return Math.max(1, Math.min(s,
|
|
1624
|
+
return Math.max(1, Math.min(s, l, 10));
|
|
1642
1625
|
}
|
|
1643
1626
|
/**
|
|
1644
1627
|
* Generate cluster center positions with spacing constraints
|
|
1645
1628
|
*/
|
|
1646
|
-
generateClusterCenters(t, i, e,
|
|
1647
|
-
const r = [],
|
|
1629
|
+
generateClusterCenters(t, i, e, o, a) {
|
|
1630
|
+
const r = [], l = o + a.clusterSpread, c = i - o - a.clusterSpread, u = o + a.clusterSpread, h = e - o - a.clusterSpread;
|
|
1648
1631
|
for (let d = 0; d < t; d++) {
|
|
1649
|
-
let f = null,
|
|
1632
|
+
let f = null, y = -1;
|
|
1650
1633
|
for (let p = 0; p < 100; p++) {
|
|
1651
1634
|
const g = {
|
|
1652
|
-
x: this.random(
|
|
1635
|
+
x: this.random(l, c),
|
|
1653
1636
|
y: this.random(u, h),
|
|
1654
1637
|
spread: this.calculateClusterSpread(a)
|
|
1655
1638
|
};
|
|
1656
1639
|
let m = 1 / 0;
|
|
1657
|
-
for (const
|
|
1658
|
-
const w = g.x -
|
|
1659
|
-
m = Math.min(m,
|
|
1640
|
+
for (const b of r) {
|
|
1641
|
+
const w = g.x - b.x, v = g.y - b.y, S = Math.sqrt(w * w + v * v);
|
|
1642
|
+
m = Math.min(m, S);
|
|
1660
1643
|
}
|
|
1661
|
-
if ((r.length === 0 || m >
|
|
1644
|
+
if ((r.length === 0 || m > y) && (f = g, y = m), m >= a.clusterSpacing)
|
|
1662
1645
|
break;
|
|
1663
1646
|
}
|
|
1664
1647
|
f && r.push(f);
|
|
@@ -1701,23 +1684,23 @@ class Ie {
|
|
|
1701
1684
|
* @returns Array of layout objects with position, rotation, scale
|
|
1702
1685
|
*/
|
|
1703
1686
|
generate(t, i, e = {}) {
|
|
1704
|
-
const
|
|
1687
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, l = this.config.spacing.padding ?? 50, c = 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, f = this.imageConfig.sizing?.variance?.max ?? 1, y = d !== 1 || f !== 1, p = e.fixedHeight ?? s, g = {
|
|
1705
1688
|
...Ht,
|
|
1706
1689
|
...this.config.wave
|
|
1707
|
-
}, { rows: m, amplitude:
|
|
1690
|
+
}, { rows: m, amplitude: b, frequency: w, phaseShift: v, synchronization: S } = g, x = Math.ceil(t / m), L = p * 1.5 / 2, _ = l + L, O = a - l - L, H = O - _, N = x > 1 ? H / (x - 1) : 0, T = l + b + p / 2, D = r - l - b - p / 2, G = D - T, U = m > 1 ? G / (m - 1) : 0;
|
|
1708
1691
|
let M = 0;
|
|
1709
1692
|
for (let A = 0; A < m && M < t; A++) {
|
|
1710
|
-
const
|
|
1693
|
+
const k = m === 1 ? (T + D) / 2 : T + A * U;
|
|
1711
1694
|
let B = 0;
|
|
1712
|
-
|
|
1695
|
+
S === "offset" ? B = A * v : S === "alternating" && (B = A * Math.PI);
|
|
1713
1696
|
for (let C = 0; C < x && M < t; C++) {
|
|
1714
|
-
const $ = x === 1 ? (_ + O) / 2 : _ + C *
|
|
1697
|
+
const $ = x === 1 ? (_ + O) / 2 : _ + C * N, F = this.calculateWaveY($, a, b, w, B), X = $, P = k + F, j = y ? this.random(d, f) : 1, Y = p * j;
|
|
1715
1698
|
let V = 0;
|
|
1716
|
-
|
|
1717
|
-
const K = Y * 1.5 / 2, ct = Y / 2, it =
|
|
1718
|
-
|
|
1699
|
+
c === "tangent" ? V = this.calculateRotation($, a, b, w, B) : c === "random" && (V = this.random(u, h));
|
|
1700
|
+
const K = Y * 1.5 / 2, ct = Y / 2, it = l + K, ot = a - l - K, lt = l + ct, ht = r - l - ct;
|
|
1701
|
+
o.push({
|
|
1719
1702
|
id: M,
|
|
1720
|
-
x: Math.max(it, Math.min(X,
|
|
1703
|
+
x: Math.max(it, Math.min(X, ot)),
|
|
1721
1704
|
y: Math.max(lt, Math.min(P, ht)),
|
|
1722
1705
|
rotation: V,
|
|
1723
1706
|
scale: j,
|
|
@@ -1726,7 +1709,7 @@ class Ie {
|
|
|
1726
1709
|
}), M++;
|
|
1727
1710
|
}
|
|
1728
1711
|
}
|
|
1729
|
-
return
|
|
1712
|
+
return o;
|
|
1730
1713
|
}
|
|
1731
1714
|
/**
|
|
1732
1715
|
* Calculate Y position displacement on wave curve
|
|
@@ -1737,9 +1720,9 @@ class Ie {
|
|
|
1737
1720
|
* @param phase - Phase offset
|
|
1738
1721
|
* @returns Y displacement from baseline
|
|
1739
1722
|
*/
|
|
1740
|
-
calculateWaveY(t, i, e,
|
|
1723
|
+
calculateWaveY(t, i, e, o, a) {
|
|
1741
1724
|
const r = t / i;
|
|
1742
|
-
return e * Math.sin(
|
|
1725
|
+
return e * Math.sin(o * r * 2 * Math.PI + a);
|
|
1743
1726
|
}
|
|
1744
1727
|
/**
|
|
1745
1728
|
* Calculate rotation based on wave tangent
|
|
@@ -1750,8 +1733,8 @@ class Ie {
|
|
|
1750
1733
|
* @param phase - Phase offset
|
|
1751
1734
|
* @returns Rotation angle in degrees
|
|
1752
1735
|
*/
|
|
1753
|
-
calculateRotation(t, i, e,
|
|
1754
|
-
const r = t / i, s = e *
|
|
1736
|
+
calculateRotation(t, i, e, o, a) {
|
|
1737
|
+
const r = t / i, s = e * o * 2 * Math.PI * Math.cos(o * r * 2 * Math.PI + a) / i;
|
|
1755
1738
|
return Math.atan(s) * (180 / Math.PI);
|
|
1756
1739
|
}
|
|
1757
1740
|
/**
|
|
@@ -1780,17 +1763,17 @@ const xt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1780
1763
|
[0, 50]
|
|
1781
1764
|
// left
|
|
1782
1765
|
], Re = Et[1][0] / xt, Te = Et[2][1] / xt;
|
|
1783
|
-
function Ae(
|
|
1766
|
+
function Ae(n) {
|
|
1784
1767
|
return {
|
|
1785
|
-
colStep: Re *
|
|
1786
|
-
rowOffset: Te *
|
|
1768
|
+
colStep: Re * n,
|
|
1769
|
+
rowOffset: Te * n
|
|
1787
1770
|
};
|
|
1788
1771
|
}
|
|
1789
|
-
function Ce(
|
|
1772
|
+
function Ce(n, t, i, e, o, a) {
|
|
1790
1773
|
const { colStep: r } = Ae(a);
|
|
1791
1774
|
return {
|
|
1792
|
-
px: e + r *
|
|
1793
|
-
py:
|
|
1775
|
+
px: e + r * n,
|
|
1776
|
+
py: o + a * (t + n / 2)
|
|
1794
1777
|
};
|
|
1795
1778
|
}
|
|
1796
1779
|
const Le = [
|
|
@@ -1801,13 +1784,13 @@ const Le = [
|
|
|
1801
1784
|
[0, -1, 1],
|
|
1802
1785
|
[1, -1, 0]
|
|
1803
1786
|
];
|
|
1804
|
-
function Me(
|
|
1805
|
-
if (
|
|
1787
|
+
function Me(n) {
|
|
1788
|
+
if (n === 0) return [[0, 0, 0]];
|
|
1806
1789
|
const t = [];
|
|
1807
|
-
let [i, e,
|
|
1790
|
+
let [i, e, o] = [0, -n, n];
|
|
1808
1791
|
for (const [a, r, s] of Le)
|
|
1809
|
-
for (let
|
|
1810
|
-
t.push([i, e,
|
|
1792
|
+
for (let l = 0; l < n; l++)
|
|
1793
|
+
t.push([i, e, o]), i += a, e += r, o += s;
|
|
1811
1794
|
return t;
|
|
1812
1795
|
}
|
|
1813
1796
|
class Fe {
|
|
@@ -1817,30 +1800,30 @@ class Fe {
|
|
|
1817
1800
|
this.config = t;
|
|
1818
1801
|
}
|
|
1819
1802
|
generate(t, i, e = {}) {
|
|
1820
|
-
const
|
|
1821
|
-
...
|
|
1803
|
+
const o = [], { width: a, height: r } = i, s = a / 2, l = r / 2, c = e.fixedHeight ?? 200, h = {
|
|
1804
|
+
...Nt,
|
|
1822
1805
|
...this.config.honeycomb
|
|
1823
|
-
}.spacing ?? 0, d =
|
|
1824
|
-
let f = 0,
|
|
1806
|
+
}.spacing ?? 0, d = c + h;
|
|
1807
|
+
let f = 0, y = 0;
|
|
1825
1808
|
for (; f < t; ) {
|
|
1826
|
-
const p = Me(
|
|
1827
|
-
for (const [g, m,
|
|
1809
|
+
const p = Me(y);
|
|
1810
|
+
for (const [g, m, b] of p) {
|
|
1828
1811
|
if (f >= t) break;
|
|
1829
|
-
const { px: w, py: v } = Ce(g, m,
|
|
1830
|
-
|
|
1812
|
+
const { px: w, py: v } = Ce(g, m, b, s, l, d);
|
|
1813
|
+
o.push({
|
|
1831
1814
|
id: f,
|
|
1832
1815
|
x: w,
|
|
1833
1816
|
y: v,
|
|
1834
1817
|
rotation: 0,
|
|
1835
1818
|
scale: 1,
|
|
1836
|
-
baseSize:
|
|
1819
|
+
baseSize: c,
|
|
1837
1820
|
// Inner rings render above outer rings
|
|
1838
|
-
zIndex: Math.max(1, 100 -
|
|
1821
|
+
zIndex: Math.max(1, 100 - y)
|
|
1839
1822
|
}), f++;
|
|
1840
1823
|
}
|
|
1841
|
-
|
|
1824
|
+
y++;
|
|
1842
1825
|
}
|
|
1843
|
-
return
|
|
1826
|
+
return o;
|
|
1844
1827
|
}
|
|
1845
1828
|
}
|
|
1846
1829
|
class ze {
|
|
@@ -1856,7 +1839,7 @@ class ze {
|
|
|
1856
1839
|
case "radial":
|
|
1857
1840
|
return new pe(this.config, this.imageConfig);
|
|
1858
1841
|
case "grid":
|
|
1859
|
-
return new
|
|
1842
|
+
return new be(this.config, this.imageConfig);
|
|
1860
1843
|
case "spiral":
|
|
1861
1844
|
return new xe(this.config, this.imageConfig);
|
|
1862
1845
|
case "cluster":
|
|
@@ -1877,10 +1860,10 @@ class ze {
|
|
|
1877
1860
|
* @returns Array of layout objects with position, rotation, scale
|
|
1878
1861
|
*/
|
|
1879
1862
|
generateLayout(t, i, e = {}) {
|
|
1880
|
-
const
|
|
1881
|
-
return
|
|
1863
|
+
const o = this.placementLayout.generate(t, i, e);
|
|
1864
|
+
return o.forEach((a) => {
|
|
1882
1865
|
this.layouts.set(a.id, a);
|
|
1883
|
-
}),
|
|
1866
|
+
}), o;
|
|
1884
1867
|
}
|
|
1885
1868
|
/**
|
|
1886
1869
|
* Get the original layout state for an image
|
|
@@ -1933,8 +1916,8 @@ class ze {
|
|
|
1933
1916
|
return;
|
|
1934
1917
|
if (typeof e == "number")
|
|
1935
1918
|
return e;
|
|
1936
|
-
const
|
|
1937
|
-
return a === "mobile" ?
|
|
1919
|
+
const o = e, a = this.resolveBreakpoint(t);
|
|
1920
|
+
return a === "mobile" ? o.mobile ?? o.tablet ?? o.screen : a === "tablet" ? o.tablet ?? o.screen ?? o.mobile : o.screen ?? o.tablet ?? o.mobile;
|
|
1938
1921
|
}
|
|
1939
1922
|
/**
|
|
1940
1923
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1944,19 +1927,19 @@ class ze {
|
|
|
1944
1927
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1945
1928
|
* @returns Calculated sizing result with height
|
|
1946
1929
|
*/
|
|
1947
|
-
calculateAdaptiveSize(t, i, e,
|
|
1948
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1930
|
+
calculateAdaptiveSize(t, i, e, o) {
|
|
1931
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1949
1932
|
if (r !== void 0)
|
|
1950
1933
|
return { height: r };
|
|
1951
|
-
const s = a?.minSize ?? 50,
|
|
1934
|
+
const s = a?.minSize ?? 50, l = a?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, p = h * d * c / i;
|
|
1952
1935
|
let m = Math.sqrt(p / 1.4);
|
|
1953
1936
|
m *= u, m = Math.min(m, e);
|
|
1954
|
-
let
|
|
1955
|
-
if (
|
|
1937
|
+
let b = this.clamp(m, s, l);
|
|
1938
|
+
if (b === s && m < s) {
|
|
1956
1939
|
const w = Math.max(s * 0.05, 20);
|
|
1957
|
-
|
|
1940
|
+
b = Math.max(w, m);
|
|
1958
1941
|
}
|
|
1959
|
-
return this.config.algorithm === "honeycomb" && (
|
|
1942
|
+
return this.config.algorithm === "honeycomb" && (b = Math.min(b, this.honeycombMaxImageHeight(i, t))), { height: b };
|
|
1960
1943
|
}
|
|
1961
1944
|
/**
|
|
1962
1945
|
* Returns the largest image height at which all honeycomb rings fit within the container.
|
|
@@ -1965,10 +1948,10 @@ class ze {
|
|
|
1965
1948
|
*/
|
|
1966
1949
|
honeycombMaxImageHeight(t, i) {
|
|
1967
1950
|
if (t <= 1) return 1 / 0;
|
|
1968
|
-
let e = 0,
|
|
1969
|
-
for (;
|
|
1970
|
-
e++,
|
|
1971
|
-
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2,
|
|
1951
|
+
let e = 0, o = 1;
|
|
1952
|
+
for (; o < t; )
|
|
1953
|
+
e++, o += 6 * e;
|
|
1954
|
+
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2, l = i.height / 2, c = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), h = (l - a - r * e) / (e + 0.5), d = (s - a - c * r * e) / (c * e + u);
|
|
1972
1955
|
return Math.max(10, Math.min(h, d));
|
|
1973
1956
|
}
|
|
1974
1957
|
/**
|
|
@@ -1978,7 +1961,7 @@ class ze {
|
|
|
1978
1961
|
return Math.max(i, Math.min(e, t));
|
|
1979
1962
|
}
|
|
1980
1963
|
}
|
|
1981
|
-
var
|
|
1964
|
+
var E = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(E || {});
|
|
1982
1965
|
const Ct = {
|
|
1983
1966
|
// Geometric shapes - uses percentages for responsive sizing
|
|
1984
1967
|
circle: "circle(50%)",
|
|
@@ -2026,105 +2009,105 @@ const Ct = {
|
|
|
2026
2009
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
2027
2010
|
}
|
|
2028
2011
|
};
|
|
2029
|
-
function De(
|
|
2030
|
-
if (
|
|
2031
|
-
return
|
|
2012
|
+
function De(n) {
|
|
2013
|
+
if (n)
|
|
2014
|
+
return n in Ct ? Ct[n] : n;
|
|
2032
2015
|
}
|
|
2033
|
-
function $e(
|
|
2034
|
-
const e = Oe[
|
|
2016
|
+
function $e(n, t, i) {
|
|
2017
|
+
const e = Oe[n];
|
|
2035
2018
|
if (!e) return "";
|
|
2036
|
-
const
|
|
2037
|
-
if (
|
|
2038
|
-
return `circle(${Math.round(50 *
|
|
2039
|
-
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 *
|
|
2019
|
+
const o = t / e.refHeight;
|
|
2020
|
+
if (n === "circle")
|
|
2021
|
+
return `circle(${Math.round(50 * o * 100) / 100}px)`;
|
|
2022
|
+
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 * o, l = (Math.min(...r) + Math.max(...r)) / 2 * o, c = (Math.max(...a) - Math.min(...a)) * o, u = (i ?? c) / 2, h = t / 2, d = u - s, f = h - l;
|
|
2040
2023
|
return `polygon(${e.points.map(([p, g]) => {
|
|
2041
|
-
const m = Math.round((p *
|
|
2042
|
-
return `${m}px ${
|
|
2024
|
+
const m = Math.round((p * o + d) * 100) / 100, b = Math.round((g * o + f) * 100) / 100;
|
|
2025
|
+
return `${m}px ${b}px`;
|
|
2043
2026
|
}).join(", ")})`;
|
|
2044
2027
|
}
|
|
2045
|
-
function Pe(
|
|
2046
|
-
return
|
|
2028
|
+
function Pe(n) {
|
|
2029
|
+
return n in mt;
|
|
2047
2030
|
}
|
|
2048
|
-
function _e(
|
|
2049
|
-
return
|
|
2031
|
+
function _e(n) {
|
|
2032
|
+
return n ? Pe(n) ? mt[n] : n : mt.md;
|
|
2050
2033
|
}
|
|
2051
|
-
function Ue(
|
|
2052
|
-
if (!
|
|
2034
|
+
function Ue(n) {
|
|
2035
|
+
if (!n) return "";
|
|
2053
2036
|
const t = [];
|
|
2054
|
-
if (
|
|
2055
|
-
if (typeof
|
|
2056
|
-
t.push(`drop-shadow(${
|
|
2037
|
+
if (n.grayscale !== void 0 && t.push(`grayscale(${n.grayscale})`), n.blur !== void 0 && t.push(`blur(${n.blur}px)`), n.brightness !== void 0 && t.push(`brightness(${n.brightness})`), n.contrast !== void 0 && t.push(`contrast(${n.contrast})`), n.saturate !== void 0 && t.push(`saturate(${n.saturate})`), n.opacity !== void 0 && t.push(`opacity(${n.opacity})`), n.sepia !== void 0 && t.push(`sepia(${n.sepia})`), n.hueRotate !== void 0 && t.push(`hue-rotate(${n.hueRotate}deg)`), n.invert !== void 0 && t.push(`invert(${n.invert})`), n.dropShadow !== void 0)
|
|
2038
|
+
if (typeof n.dropShadow == "string")
|
|
2039
|
+
t.push(`drop-shadow(${n.dropShadow})`);
|
|
2057
2040
|
else {
|
|
2058
|
-
const i =
|
|
2041
|
+
const i = n.dropShadow;
|
|
2059
2042
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
2060
2043
|
}
|
|
2061
2044
|
return t.join(" ");
|
|
2062
2045
|
}
|
|
2063
|
-
function tt(
|
|
2064
|
-
if (!
|
|
2046
|
+
function tt(n) {
|
|
2047
|
+
if (!n || n.style === "none" || n.width === 0)
|
|
2065
2048
|
return "none";
|
|
2066
|
-
const t =
|
|
2049
|
+
const t = n.width ?? 0, i = n.style ?? "solid", e = n.color ?? "#000000";
|
|
2067
2050
|
return `${t}px ${i} ${e}`;
|
|
2068
2051
|
}
|
|
2069
|
-
function et(
|
|
2070
|
-
if (!
|
|
2052
|
+
function et(n, t, i) {
|
|
2053
|
+
if (!n) return {};
|
|
2071
2054
|
const e = {};
|
|
2072
|
-
if (
|
|
2073
|
-
const s =
|
|
2074
|
-
|
|
2075
|
-
} else
|
|
2076
|
-
if (
|
|
2077
|
-
const s =
|
|
2078
|
-
e.borderTop = tt(
|
|
2079
|
-
} else
|
|
2080
|
-
|
|
2081
|
-
const r = Ue(
|
|
2082
|
-
if (e.filter = r || "none",
|
|
2083
|
-
const s =
|
|
2084
|
-
e.outline = `${s}px ${
|
|
2085
|
-
}
|
|
2086
|
-
if (
|
|
2055
|
+
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
2056
|
+
const s = n.border?.radius ?? 0;
|
|
2057
|
+
n.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${n.borderRadiusTopLeft}px` : s && (e.borderTopLeftRadius = `${s}px`), n.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${n.borderRadiusTopRight}px` : s && (e.borderTopRightRadius = `${s}px`), n.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${n.borderRadiusBottomRight}px` : s && (e.borderBottomRightRadius = `${s}px`), n.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${n.borderRadiusBottomLeft}px` : s && (e.borderBottomLeftRadius = `${s}px`);
|
|
2058
|
+
} else n.border?.radius !== void 0 && (e.borderRadius = `${n.border.radius}px`);
|
|
2059
|
+
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
2060
|
+
const s = n.border || {}, l = { ...s, ...n.borderTop }, c = { ...s, ...n.borderRight }, u = { ...s, ...n.borderBottom }, h = { ...s, ...n.borderLeft };
|
|
2061
|
+
e.borderTop = tt(l), e.borderRight = tt(c), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
2062
|
+
} else n.border && (e.border = tt(n.border));
|
|
2063
|
+
n.shadow !== void 0 && (e.boxShadow = _e(n.shadow));
|
|
2064
|
+
const r = Ue(n.filter);
|
|
2065
|
+
if (e.filter = r || "none", n.opacity !== void 0 && (e.opacity = String(n.opacity)), n.cursor !== void 0 && (e.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
2066
|
+
const s = n.outline.width ?? 0, l = n.outline.style ?? "solid", c = n.outline.color ?? "#000000";
|
|
2067
|
+
e.outline = `${s}px ${l} ${c}`, n.outline.offset !== void 0 && (e.outlineOffset = `${n.outline.offset}px`);
|
|
2068
|
+
}
|
|
2069
|
+
if (n.objectFit !== void 0 && (e.objectFit = n.objectFit), n.aspectRatio !== void 0 && (e.aspectRatio = n.aspectRatio), n.clipPath !== void 0) {
|
|
2087
2070
|
let s;
|
|
2088
|
-
const
|
|
2089
|
-
if (
|
|
2090
|
-
s = $e(
|
|
2071
|
+
const l = typeof n.clipPath == "object" && n.clipPath !== null && "shape" in n.clipPath, c = l ? n.clipPath : void 0;
|
|
2072
|
+
if (c?.mode === "height-relative" && t)
|
|
2073
|
+
s = $e(c.shape, t, i);
|
|
2091
2074
|
else {
|
|
2092
|
-
const u =
|
|
2075
|
+
const u = l && c ? c.shape : n.clipPath;
|
|
2093
2076
|
s = De(u);
|
|
2094
2077
|
}
|
|
2095
2078
|
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
2096
2079
|
}
|
|
2097
2080
|
return e;
|
|
2098
2081
|
}
|
|
2099
|
-
function He(
|
|
2100
|
-
t.borderRadius !== void 0 && (
|
|
2082
|
+
function He(n, t) {
|
|
2083
|
+
t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (n.style.clipPath = t.clipPath), t.overflow !== void 0 && (n.style.overflow = t.overflow);
|
|
2101
2084
|
}
|
|
2102
|
-
function ft(
|
|
2103
|
-
const
|
|
2104
|
-
He(
|
|
2085
|
+
function ft(n, t, i, e) {
|
|
2086
|
+
const o = et(t, i, e);
|
|
2087
|
+
He(n, o);
|
|
2105
2088
|
}
|
|
2106
|
-
function $t(
|
|
2107
|
-
return
|
|
2089
|
+
function $t(n) {
|
|
2090
|
+
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
2108
2091
|
}
|
|
2109
|
-
function st(
|
|
2092
|
+
function st(n, t) {
|
|
2110
2093
|
const i = $t(t);
|
|
2111
2094
|
i && i.split(" ").forEach((e) => {
|
|
2112
|
-
e.trim() &&
|
|
2095
|
+
e.trim() && n.classList.add(e.trim());
|
|
2113
2096
|
});
|
|
2114
2097
|
}
|
|
2115
|
-
function pt(
|
|
2098
|
+
function pt(n, t) {
|
|
2116
2099
|
const i = $t(t);
|
|
2117
2100
|
i && i.split(" ").forEach((e) => {
|
|
2118
|
-
e.trim() &&
|
|
2101
|
+
e.trim() && n.classList.remove(e.trim());
|
|
2119
2102
|
});
|
|
2120
2103
|
}
|
|
2121
2104
|
const Lt = {
|
|
2122
2105
|
UNFOCUSING: 999,
|
|
2123
2106
|
FOCUSING: 1e3
|
|
2124
2107
|
};
|
|
2125
|
-
class
|
|
2108
|
+
class Ne {
|
|
2126
2109
|
constructor(t, i, e) {
|
|
2127
|
-
this.state =
|
|
2110
|
+
this.state = E.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;
|
|
2128
2111
|
}
|
|
2129
2112
|
/**
|
|
2130
2113
|
* Set callback to be fired when an unfocus animation fully completes.
|
|
@@ -2142,7 +2125,7 @@ class ke {
|
|
|
2142
2125
|
* Check if any animation is in progress
|
|
2143
2126
|
*/
|
|
2144
2127
|
isAnimating() {
|
|
2145
|
-
return this.state !==
|
|
2128
|
+
return this.state !== E.IDLE && this.state !== E.FOCUSED;
|
|
2146
2129
|
}
|
|
2147
2130
|
/**
|
|
2148
2131
|
* Normalize scalePercent value
|
|
@@ -2155,17 +2138,17 @@ class ke {
|
|
|
2155
2138
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2156
2139
|
*/
|
|
2157
2140
|
calculateFocusDimensions(t, i, e) {
|
|
2158
|
-
const
|
|
2159
|
-
let s = a,
|
|
2160
|
-
const
|
|
2161
|
-
return
|
|
2141
|
+
const o = this.normalizeScalePercent(this.config.scalePercent), a = e.height * o, r = t / i;
|
|
2142
|
+
let s = a, l = s * r;
|
|
2143
|
+
const c = e.width * o;
|
|
2144
|
+
return l > c && (l = c, s = l / r), { width: l, height: s };
|
|
2162
2145
|
}
|
|
2163
2146
|
/**
|
|
2164
2147
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
2165
2148
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2166
2149
|
*/
|
|
2167
2150
|
calculateFocusTransform(t, i) {
|
|
2168
|
-
const e = t.width / 2,
|
|
2151
|
+
const e = t.width / 2, o = t.height / 2, a = e - i.x, r = o - i.y;
|
|
2169
2152
|
return {
|
|
2170
2153
|
x: a,
|
|
2171
2154
|
y: r,
|
|
@@ -2180,8 +2163,8 @@ class ke {
|
|
|
2180
2163
|
buildDimensionZoomTransform(t) {
|
|
2181
2164
|
const i = ["translate(-50%, -50%)"];
|
|
2182
2165
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
2183
|
-
const e = t.x ?? 0,
|
|
2184
|
-
i.push(`translate(${e}px, ${
|
|
2166
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
2167
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
2185
2168
|
}
|
|
2186
2169
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
2187
2170
|
}
|
|
@@ -2189,13 +2172,13 @@ class ke {
|
|
|
2189
2172
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2190
2173
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2191
2174
|
*/
|
|
2192
|
-
animateWithDimensions(t, i, e,
|
|
2193
|
-
const
|
|
2175
|
+
animateWithDimensions(t, i, e, o, a, r, s, l) {
|
|
2176
|
+
const c = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2194
2177
|
return t.style.transition = "none", t.animate(
|
|
2195
2178
|
[
|
|
2196
2179
|
{
|
|
2197
|
-
transform:
|
|
2198
|
-
width: `${
|
|
2180
|
+
transform: c,
|
|
2181
|
+
width: `${o}px`,
|
|
2199
2182
|
height: `${a}px`
|
|
2200
2183
|
},
|
|
2201
2184
|
{
|
|
@@ -2205,7 +2188,7 @@ class ke {
|
|
|
2205
2188
|
}
|
|
2206
2189
|
],
|
|
2207
2190
|
{
|
|
2208
|
-
duration:
|
|
2191
|
+
duration: l,
|
|
2209
2192
|
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2210
2193
|
fill: "forwards"
|
|
2211
2194
|
}
|
|
@@ -2236,11 +2219,11 @@ class ke {
|
|
|
2236
2219
|
* This ensures clip-path changes smoothly as width/height animate
|
|
2237
2220
|
*/
|
|
2238
2221
|
startClipPathAnimation(t, i, e) {
|
|
2239
|
-
let
|
|
2240
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
2222
|
+
let o = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2223
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (o = { ...o, clipPath: void 0 });
|
|
2241
2224
|
const a = () => {
|
|
2242
|
-
const r = t.offsetHeight, s = t.offsetWidth,
|
|
2243
|
-
|
|
2225
|
+
const r = t.offsetHeight, s = t.offsetWidth, l = et(o, r, s);
|
|
2226
|
+
l.clipPath !== void 0 ? t.style.clipPath = l.clipPath : t.style.clipPath = "unset", l.overflow !== void 0 && (t.style.overflow = l.overflow), i.animation.playState === "running" && requestAnimationFrame(a);
|
|
2244
2227
|
};
|
|
2245
2228
|
requestAnimationFrame(a);
|
|
2246
2229
|
}
|
|
@@ -2250,25 +2233,25 @@ class ke {
|
|
|
2250
2233
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2251
2234
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2252
2235
|
*/
|
|
2253
|
-
startFocusAnimation(t, i, e,
|
|
2254
|
-
const r = t.style.zIndex || "", s = t.offsetWidth,
|
|
2236
|
+
startFocusAnimation(t, i, e, o, a) {
|
|
2237
|
+
const r = t.style.zIndex || "", s = t.offsetWidth, l = t.offsetHeight, c = this.calculateFocusDimensions(s, l, i), u = this.calculateFocusTransform(i, e);
|
|
2255
2238
|
this.animationEngine.cancelAllAnimations(t);
|
|
2256
2239
|
const h = this.config.animationDuration ?? 600;
|
|
2257
2240
|
this.applyFocusedStyling(t, Lt.FOCUSING);
|
|
2258
|
-
const d =
|
|
2241
|
+
const d = o ?? {
|
|
2259
2242
|
x: 0,
|
|
2260
2243
|
y: 0,
|
|
2261
2244
|
rotation: e.rotation,
|
|
2262
2245
|
scale: 1
|
|
2263
2246
|
// No scale - using dimensions
|
|
2264
|
-
}, f = a?.width ?? s,
|
|
2247
|
+
}, f = a?.width ?? s, y = a?.height ?? l, p = this.animateWithDimensions(
|
|
2265
2248
|
t,
|
|
2266
2249
|
d,
|
|
2267
2250
|
u,
|
|
2268
2251
|
f,
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2252
|
+
y,
|
|
2253
|
+
c.width,
|
|
2254
|
+
c.height,
|
|
2272
2255
|
h
|
|
2273
2256
|
), g = {
|
|
2274
2257
|
id: `focus-${Date.now()}`,
|
|
@@ -2285,16 +2268,16 @@ class ke {
|
|
|
2285
2268
|
focusTransform: u,
|
|
2286
2269
|
originalZIndex: r,
|
|
2287
2270
|
originalWidth: s,
|
|
2288
|
-
originalHeight:
|
|
2289
|
-
focusWidth:
|
|
2290
|
-
focusHeight:
|
|
2271
|
+
originalHeight: l,
|
|
2272
|
+
focusWidth: c.width,
|
|
2273
|
+
focusHeight: c.height
|
|
2291
2274
|
}, this.startClipPathAnimation(t, g, !0), {
|
|
2292
2275
|
element: t,
|
|
2293
2276
|
originalState: e,
|
|
2294
2277
|
animationHandle: g,
|
|
2295
2278
|
direction: "in",
|
|
2296
2279
|
originalWidth: s,
|
|
2297
|
-
originalHeight:
|
|
2280
|
+
originalHeight: l
|
|
2298
2281
|
};
|
|
2299
2282
|
}
|
|
2300
2283
|
/**
|
|
@@ -2302,11 +2285,11 @@ class ke {
|
|
|
2302
2285
|
* Animates back to original dimensions for consistent behavior
|
|
2303
2286
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2304
2287
|
*/
|
|
2305
|
-
startUnfocusAnimation(t, i, e,
|
|
2288
|
+
startUnfocusAnimation(t, i, e, o) {
|
|
2306
2289
|
t.style.zIndex = String(Lt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2307
2290
|
const a = this.config.animationDuration ?? 600;
|
|
2308
2291
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2309
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s =
|
|
2292
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, l = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, c = {
|
|
2310
2293
|
x: 0,
|
|
2311
2294
|
y: 0,
|
|
2312
2295
|
rotation: i.rotation,
|
|
@@ -2315,9 +2298,9 @@ class ke {
|
|
|
2315
2298
|
}, u = this.focusData?.originalWidth ?? t.offsetWidth, h = this.focusData?.originalHeight ?? t.offsetHeight, d = this.animateWithDimensions(
|
|
2316
2299
|
t,
|
|
2317
2300
|
r,
|
|
2318
|
-
l,
|
|
2319
|
-
s,
|
|
2320
2301
|
c,
|
|
2302
|
+
s,
|
|
2303
|
+
l,
|
|
2321
2304
|
u,
|
|
2322
2305
|
h,
|
|
2323
2306
|
a
|
|
@@ -2326,7 +2309,7 @@ class ke {
|
|
|
2326
2309
|
element: t,
|
|
2327
2310
|
animation: d,
|
|
2328
2311
|
fromState: r,
|
|
2329
|
-
toState:
|
|
2312
|
+
toState: c,
|
|
2330
2313
|
startTime: performance.now(),
|
|
2331
2314
|
duration: a
|
|
2332
2315
|
};
|
|
@@ -2354,10 +2337,10 @@ class ke {
|
|
|
2354
2337
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2355
2338
|
*/
|
|
2356
2339
|
captureMidAnimationState(t) {
|
|
2357
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2358
|
-
return t.style.width = `${
|
|
2359
|
-
transform: { x: r, y: s, rotation:
|
|
2360
|
-
dimensions: { width:
|
|
2340
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), o = t.offsetWidth, a = t.offsetHeight, r = e.e + o * 0.5, s = e.f + a * 0.5, l = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2341
|
+
return t.style.width = `${o}px`, t.style.height = `${a}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${s}px) rotate(${l}deg)`, t.style.transition = "none", {
|
|
2342
|
+
transform: { x: r, y: s, rotation: l, scale: 1 },
|
|
2343
|
+
dimensions: { width: o, height: a }
|
|
2361
2344
|
};
|
|
2362
2345
|
}
|
|
2363
2346
|
/**
|
|
@@ -2372,94 +2355,94 @@ class ke {
|
|
|
2372
2355
|
/**
|
|
2373
2356
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2374
2357
|
*/
|
|
2375
|
-
resetElementInstantly(t, i, e,
|
|
2358
|
+
resetElementInstantly(t, i, e, o, a) {
|
|
2376
2359
|
this.animationEngine.cancelAllAnimations(t);
|
|
2377
2360
|
const r = ["translate(-50%, -50%)"];
|
|
2378
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2361
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), o !== void 0 && a !== void 0 && (t.style.width = `${o}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, e);
|
|
2379
2362
|
}
|
|
2380
2363
|
/**
|
|
2381
2364
|
* Focus (zoom) an image to center of container
|
|
2382
2365
|
* Implements cross-animation when swapping focus
|
|
2383
2366
|
*/
|
|
2384
2367
|
async focusImage(t, i, e) {
|
|
2385
|
-
if (this.currentFocus === t && this.state ===
|
|
2368
|
+
if (this.currentFocus === t && this.state === E.FOCUSED)
|
|
2386
2369
|
return this.unfocusImage();
|
|
2387
|
-
if (this.incoming?.element === t && this.state ===
|
|
2370
|
+
if (this.incoming?.element === t && this.state === E.FOCUSING) {
|
|
2388
2371
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2389
2372
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2390
2373
|
t,
|
|
2391
2374
|
this.incoming.originalState,
|
|
2392
2375
|
a,
|
|
2393
2376
|
r
|
|
2394
|
-
), this.incoming = null, this.state =
|
|
2377
|
+
), this.incoming = null, this.state = E.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 = E.IDLE;
|
|
2395
2378
|
return;
|
|
2396
2379
|
}
|
|
2397
|
-
const
|
|
2380
|
+
const o = ++this.focusGeneration;
|
|
2398
2381
|
switch (this.state) {
|
|
2399
|
-
case
|
|
2400
|
-
if (this.state =
|
|
2401
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2382
|
+
case E.IDLE:
|
|
2383
|
+
if (this.state = E.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2384
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2402
2385
|
break;
|
|
2403
|
-
case
|
|
2404
|
-
if (this.state =
|
|
2386
|
+
case E.FOCUSED:
|
|
2387
|
+
if (this.state = E.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2405
2388
|
this.currentFocus,
|
|
2406
2389
|
this.focusData.originalState
|
|
2407
2390
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2408
2391
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2409
2392
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2410
|
-
]), this.focusGeneration !==
|
|
2393
|
+
]), this.focusGeneration !== o)
|
|
2411
2394
|
return;
|
|
2412
2395
|
if (this.outgoing) {
|
|
2413
2396
|
const a = this.outgoing.element;
|
|
2414
2397
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2415
2398
|
}
|
|
2416
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2399
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2417
2400
|
break;
|
|
2418
|
-
case
|
|
2401
|
+
case E.FOCUSING:
|
|
2419
2402
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2420
2403
|
this.incoming.element,
|
|
2421
2404
|
this.incoming.originalState,
|
|
2422
2405
|
this.focusData?.originalZIndex || "",
|
|
2423
2406
|
this.focusData?.originalWidth,
|
|
2424
2407
|
this.focusData?.originalHeight
|
|
2425
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2426
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2408
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2409
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2427
2410
|
break;
|
|
2428
|
-
case
|
|
2429
|
-
if (this.state =
|
|
2411
|
+
case E.UNFOCUSING:
|
|
2412
|
+
if (this.state = E.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2430
2413
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2431
2414
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2432
|
-
]), this.focusGeneration !==
|
|
2415
|
+
]), this.focusGeneration !== o) return;
|
|
2433
2416
|
if (this.outgoing) {
|
|
2434
2417
|
const a = this.outgoing.element;
|
|
2435
2418
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2436
2419
|
}
|
|
2437
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2420
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2438
2421
|
break;
|
|
2439
|
-
case
|
|
2422
|
+
case E.CROSS_ANIMATING:
|
|
2440
2423
|
if (this.incoming?.element === t)
|
|
2441
2424
|
return;
|
|
2442
2425
|
if (this.outgoing?.element === t) {
|
|
2443
2426
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2444
2427
|
if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
|
|
2445
|
-
const { transform: s, dimensions:
|
|
2428
|
+
const { transform: s, dimensions: l } = this.captureMidAnimationState(this.incoming.element);
|
|
2446
2429
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2447
2430
|
this.incoming.element,
|
|
2448
2431
|
this.incoming.originalState,
|
|
2449
2432
|
s,
|
|
2450
|
-
|
|
2433
|
+
l
|
|
2451
2434
|
);
|
|
2452
2435
|
} else
|
|
2453
2436
|
this.outgoing = null;
|
|
2454
2437
|
if (this.incoming = this.startFocusAnimation(t, i, e, a, r), await Promise.all([
|
|
2455
2438
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2456
2439
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2457
|
-
]), this.focusGeneration !==
|
|
2440
|
+
]), this.focusGeneration !== o) return;
|
|
2458
2441
|
if (this.outgoing) {
|
|
2459
2442
|
const s = this.outgoing.element;
|
|
2460
2443
|
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2461
2444
|
}
|
|
2462
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2445
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2463
2446
|
return;
|
|
2464
2447
|
}
|
|
2465
2448
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2480,12 +2463,12 @@ class ke {
|
|
|
2480
2463
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2481
2464
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2482
2465
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2483
|
-
]), this.focusGeneration !==
|
|
2466
|
+
]), this.focusGeneration !== o) return;
|
|
2484
2467
|
if (this.outgoing) {
|
|
2485
2468
|
const a = this.outgoing.element;
|
|
2486
2469
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2487
2470
|
}
|
|
2488
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2471
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2489
2472
|
break;
|
|
2490
2473
|
}
|
|
2491
2474
|
}
|
|
@@ -2493,24 +2476,24 @@ class ke {
|
|
|
2493
2476
|
* Unfocus current image, returning it to original position
|
|
2494
2477
|
*/
|
|
2495
2478
|
async unfocusImage() {
|
|
2496
|
-
if (this.state ===
|
|
2479
|
+
if (this.state === E.UNFOCUSING)
|
|
2497
2480
|
return;
|
|
2498
2481
|
const t = ++this.focusGeneration;
|
|
2499
2482
|
if (!this.currentFocus || !this.focusData) {
|
|
2500
|
-
if (this.incoming && this.state ===
|
|
2483
|
+
if (this.incoming && this.state === E.FOCUSING) {
|
|
2501
2484
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2502
2485
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2503
2486
|
this.incoming.element,
|
|
2504
2487
|
this.incoming.originalState,
|
|
2505
2488
|
a,
|
|
2506
2489
|
r
|
|
2507
|
-
), this.incoming = null, this.state =
|
|
2490
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2508
2491
|
const s = this.outgoing.element;
|
|
2509
|
-
this.removeFocusedStyling(s, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state =
|
|
2492
|
+
this.removeFocusedStyling(s, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(s);
|
|
2510
2493
|
}
|
|
2511
2494
|
return;
|
|
2512
2495
|
}
|
|
2513
|
-
if (this.state ===
|
|
2496
|
+
if (this.state === E.CROSS_ANIMATING && this.incoming) {
|
|
2514
2497
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2515
2498
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2516
2499
|
const s = this.startUnfocusAnimation(
|
|
@@ -2523,15 +2506,15 @@ class ke {
|
|
|
2523
2506
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2524
2507
|
this.waitForAnimation(s.animationHandle)
|
|
2525
2508
|
]), this.focusGeneration !== t) return;
|
|
2526
|
-
let
|
|
2527
|
-
this.outgoing && (
|
|
2528
|
-
const
|
|
2529
|
-
this.removeFocusedStyling(
|
|
2509
|
+
let l = null;
|
|
2510
|
+
this.outgoing && (l = this.outgoing.element, this.removeFocusedStyling(l, this.outgoing.originalState.zIndex?.toString() || ""));
|
|
2511
|
+
const c = s.element;
|
|
2512
|
+
this.removeFocusedStyling(c, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, l && this.onUnfocusComplete?.(l), this.onUnfocusComplete?.(c);
|
|
2530
2513
|
return;
|
|
2531
2514
|
}
|
|
2532
|
-
this.state =
|
|
2533
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2534
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2515
|
+
this.state = E.UNFOCUSING;
|
|
2516
|
+
const i = this.currentFocus, e = this.focusData.originalState, o = this.focusData.originalZIndex;
|
|
2517
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, o), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(i));
|
|
2535
2518
|
}
|
|
2536
2519
|
/**
|
|
2537
2520
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2549,7 +2532,7 @@ class ke {
|
|
|
2549
2532
|
* Check if an image is currently focused (stable state)
|
|
2550
2533
|
*/
|
|
2551
2534
|
isFocused(t) {
|
|
2552
|
-
return this.currentFocus === t && this.state ===
|
|
2535
|
+
return this.currentFocus === t && this.state === E.FOCUSED;
|
|
2553
2536
|
}
|
|
2554
2537
|
/**
|
|
2555
2538
|
* Check if an image is the target of current focus animation
|
|
@@ -2570,9 +2553,9 @@ class ke {
|
|
|
2570
2553
|
* Used during swipe gestures for visual feedback
|
|
2571
2554
|
*/
|
|
2572
2555
|
setDragOffset(t) {
|
|
2573
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2574
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2575
|
-
|
|
2556
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2557
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, o = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2558
|
+
o.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && o.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = o.join(" ");
|
|
2576
2559
|
}
|
|
2577
2560
|
/**
|
|
2578
2561
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2580,13 +2563,13 @@ class ke {
|
|
|
2580
2563
|
* @param duration - Animation duration in ms (default 150)
|
|
2581
2564
|
*/
|
|
2582
2565
|
clearDragOffset(t, i = 150) {
|
|
2583
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2584
|
-
const e = this.currentFocus,
|
|
2585
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2586
|
-
const
|
|
2587
|
-
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform =
|
|
2566
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2567
|
+
const e = this.currentFocus, o = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = o.x ?? 0, s = o.y ?? 0;
|
|
2568
|
+
a.push(`translate(${r}px, ${s}px)`), o.rotation !== void 0 && a.push(`rotate(${o.rotation}deg)`);
|
|
2569
|
+
const l = a.join(" ");
|
|
2570
|
+
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = l, setTimeout(() => {
|
|
2588
2571
|
this.currentFocus === e && (e.style.transition = "none");
|
|
2589
|
-
}, i)) : (e.style.transition = "none", e.style.transform =
|
|
2572
|
+
}, i)) : (e.style.transition = "none", e.style.transform = l);
|
|
2590
2573
|
}
|
|
2591
2574
|
/**
|
|
2592
2575
|
* Reset zoom state (cancels all animations)
|
|
@@ -2610,10 +2593,10 @@ class ke {
|
|
|
2610
2593
|
this.focusData.originalZIndex,
|
|
2611
2594
|
this.focusData.originalWidth,
|
|
2612
2595
|
this.focusData.originalHeight
|
|
2613
|
-
), this.state =
|
|
2596
|
+
), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2614
2597
|
}
|
|
2615
2598
|
}
|
|
2616
|
-
const
|
|
2599
|
+
const ke = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Be = 30, at = class at {
|
|
2617
2600
|
constructor(t, i) {
|
|
2618
2601
|
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);
|
|
2619
2602
|
}
|
|
@@ -2657,9 +2640,9 @@ const Ne = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Be = 30, at = class at {
|
|
|
2657
2640
|
}
|
|
2658
2641
|
handleTouchMove(t) {
|
|
2659
2642
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2660
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2661
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2662
|
-
const s = Math.atan2(Math.abs(
|
|
2643
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, o = i.clientY - this.touchState.startY;
|
|
2644
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + o * o) > 10) {
|
|
2645
|
+
const s = Math.atan2(Math.abs(o), Math.abs(e)) * (180 / Math.PI);
|
|
2663
2646
|
this.touchState.isHorizontalSwipe = s <= Be;
|
|
2664
2647
|
}
|
|
2665
2648
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
@@ -2671,16 +2654,16 @@ const Ne = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Be = 30, at = class at {
|
|
|
2671
2654
|
handleTouchEnd(t) {
|
|
2672
2655
|
if (!this.touchState) return;
|
|
2673
2656
|
this.recentTouchTimestamp = Date.now();
|
|
2674
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2657
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, o = Math.abs(i) / e, a = Math.abs(i);
|
|
2675
2658
|
let r = !1;
|
|
2676
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >=
|
|
2659
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= ke || o >= je && a >= We) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2677
2660
|
}
|
|
2678
2661
|
handleTouchCancel(t) {
|
|
2679
2662
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2680
2663
|
}
|
|
2681
2664
|
};
|
|
2682
2665
|
at.TOUCH_CLICK_DELAY = 300;
|
|
2683
|
-
let
|
|
2666
|
+
let yt = at;
|
|
2684
2667
|
class Xe {
|
|
2685
2668
|
constructor(t) {
|
|
2686
2669
|
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)
|
|
@@ -2695,7 +2678,7 @@ class Xe {
|
|
|
2695
2678
|
for (const i of this.sources)
|
|
2696
2679
|
if ("folders" in i)
|
|
2697
2680
|
for (const e of i.folders) {
|
|
2698
|
-
const
|
|
2681
|
+
const o = i.recursive !== void 0 ? i.recursive : !0, a = await this.loadFromFolder(e, t, o);
|
|
2699
2682
|
this._discoveredUrls.push(...a);
|
|
2700
2683
|
}
|
|
2701
2684
|
else if ("files" in i) {
|
|
@@ -2741,9 +2724,9 @@ class Xe {
|
|
|
2741
2724
|
// Alternative format
|
|
2742
2725
|
];
|
|
2743
2726
|
for (const e of i) {
|
|
2744
|
-
const
|
|
2745
|
-
if (
|
|
2746
|
-
return
|
|
2727
|
+
const o = t.match(e);
|
|
2728
|
+
if (o && o[1])
|
|
2729
|
+
return o[1];
|
|
2747
2730
|
}
|
|
2748
2731
|
return null;
|
|
2749
2732
|
}
|
|
@@ -2755,15 +2738,15 @@ class Xe {
|
|
|
2755
2738
|
* @returns Promise resolving to array of image URLs
|
|
2756
2739
|
*/
|
|
2757
2740
|
async loadFromFolder(t, i, e = !0) {
|
|
2758
|
-
const
|
|
2759
|
-
if (!
|
|
2741
|
+
const o = this.extractFolderId(t);
|
|
2742
|
+
if (!o)
|
|
2760
2743
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2761
2744
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2762
|
-
return this.loadImagesDirectly(
|
|
2745
|
+
return this.loadImagesDirectly(o, i);
|
|
2763
2746
|
try {
|
|
2764
|
-
return e ? await this.loadImagesRecursively(
|
|
2747
|
+
return e ? await this.loadImagesRecursively(o, i) : await this.loadImagesFromSingleFolder(o, i);
|
|
2765
2748
|
} catch (a) {
|
|
2766
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2749
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(o, i);
|
|
2767
2750
|
}
|
|
2768
2751
|
}
|
|
2769
2752
|
/**
|
|
@@ -2773,13 +2756,13 @@ class Xe {
|
|
|
2773
2756
|
* @returns Promise resolving to array of image URLs
|
|
2774
2757
|
*/
|
|
2775
2758
|
async loadImagesFromSingleFolder(t, i) {
|
|
2776
|
-
const e = [],
|
|
2759
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2777
2760
|
if (!s.ok)
|
|
2778
2761
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2779
|
-
const
|
|
2762
|
+
const c = (await s.json()).files.filter(
|
|
2780
2763
|
(u) => u.mimeType.startsWith("image/") && i.isAllowed(u.name)
|
|
2781
2764
|
);
|
|
2782
|
-
return this.log(`Found ${
|
|
2765
|
+
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
|
|
2783
2766
|
e.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2784
2767
|
}), e;
|
|
2785
2768
|
}
|
|
@@ -2791,18 +2774,18 @@ class Xe {
|
|
|
2791
2774
|
*/
|
|
2792
2775
|
async loadFiles(t, i) {
|
|
2793
2776
|
const e = [];
|
|
2794
|
-
for (const
|
|
2795
|
-
const a = this.extractFileId(
|
|
2777
|
+
for (const o of t) {
|
|
2778
|
+
const a = this.extractFileId(o);
|
|
2796
2779
|
if (!a) {
|
|
2797
|
-
this.log(`Skipping invalid file URL: ${
|
|
2780
|
+
this.log(`Skipping invalid file URL: ${o}`);
|
|
2798
2781
|
continue;
|
|
2799
2782
|
}
|
|
2800
2783
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2801
2784
|
try {
|
|
2802
2785
|
const r = `${this.apiEndpoint}/${a}?fields=name,mimeType&key=${this.apiKey}`, s = await fetch(r);
|
|
2803
2786
|
if (s.ok) {
|
|
2804
|
-
const
|
|
2805
|
-
|
|
2787
|
+
const l = await s.json();
|
|
2788
|
+
l.mimeType.startsWith("image/") && i.isAllowed(l.name) ? (e.push(`https://lh3.googleusercontent.com/d/${a}=s1600`), this.log(`Added file: ${l.name}`)) : this.log(`Skipping non-image file: ${l.name} (${l.mimeType})`);
|
|
2806
2789
|
} else
|
|
2807
2790
|
this.log(`Failed to fetch metadata for file ${a}: ${s.status}`);
|
|
2808
2791
|
} catch (r) {
|
|
@@ -2830,9 +2813,9 @@ class Xe {
|
|
|
2830
2813
|
// Generic id parameter
|
|
2831
2814
|
];
|
|
2832
2815
|
for (const e of i) {
|
|
2833
|
-
const
|
|
2834
|
-
if (
|
|
2835
|
-
return
|
|
2816
|
+
const o = t.match(e);
|
|
2817
|
+
if (o && o[1])
|
|
2818
|
+
return o[1];
|
|
2836
2819
|
}
|
|
2837
2820
|
return null;
|
|
2838
2821
|
}
|
|
@@ -2843,15 +2826,15 @@ class Xe {
|
|
|
2843
2826
|
* @returns Promise resolving to array of image URLs
|
|
2844
2827
|
*/
|
|
2845
2828
|
async loadImagesRecursively(t, i) {
|
|
2846
|
-
const e = [],
|
|
2829
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2847
2830
|
if (!s.ok)
|
|
2848
2831
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2849
|
-
const
|
|
2832
|
+
const l = await s.json(), c = l.files.filter(
|
|
2850
2833
|
(h) => h.mimeType.startsWith("image/") && i.isAllowed(h.name)
|
|
2851
|
-
), u =
|
|
2834
|
+
), u = l.files.filter(
|
|
2852
2835
|
(h) => h.mimeType === "application/vnd.google-apps.folder"
|
|
2853
2836
|
);
|
|
2854
|
-
this.log(`Found ${
|
|
2837
|
+
this.log(`Found ${l.files.length} total items in folder ${t}`), l.files.forEach((h) => this.log(` - File: ${h.name} (${h.mimeType})`)), this.log(`- ${c.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), c.forEach((h) => {
|
|
2855
2838
|
e.push(`https://lh3.googleusercontent.com/d/${h.id}=s1600`), this.log(`Added file: ${h.name}`);
|
|
2856
2839
|
});
|
|
2857
2840
|
for (const h of u) {
|
|
@@ -2870,10 +2853,10 @@ class Xe {
|
|
|
2870
2853
|
*/
|
|
2871
2854
|
async loadImagesDirectly(t, i) {
|
|
2872
2855
|
try {
|
|
2873
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2874
|
-
if (!
|
|
2856
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(e, { mode: "cors" });
|
|
2857
|
+
if (!o.ok)
|
|
2875
2858
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2876
|
-
const a = await
|
|
2859
|
+
const a = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2877
2860
|
return [...new Set(s.map((u) => u[1]))].map(
|
|
2878
2861
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2879
2862
|
);
|
|
@@ -2966,13 +2949,13 @@ class Ye {
|
|
|
2966
2949
|
if (!Array.isArray(t))
|
|
2967
2950
|
return console.warn("URLs must be an array:", t), [];
|
|
2968
2951
|
const e = [];
|
|
2969
|
-
for (const
|
|
2970
|
-
const a =
|
|
2952
|
+
for (const o of t) {
|
|
2953
|
+
const a = o.split("/").pop() || o;
|
|
2971
2954
|
if (!i.isAllowed(a)) {
|
|
2972
|
-
this.log(`Skipping filtered URL: ${
|
|
2955
|
+
this.log(`Skipping filtered URL: ${o}`);
|
|
2973
2956
|
continue;
|
|
2974
2957
|
}
|
|
2975
|
-
this.validateUrls ? await this.validateUrl(
|
|
2958
|
+
this.validateUrls ? await this.validateUrl(o) ? e.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : e.push(o);
|
|
2976
2959
|
}
|
|
2977
2960
|
return e;
|
|
2978
2961
|
}
|
|
@@ -2986,16 +2969,16 @@ class Ye {
|
|
|
2986
2969
|
async processPath(t, i, e) {
|
|
2987
2970
|
if (!Array.isArray(i))
|
|
2988
2971
|
return console.warn("files must be an array:", i), [];
|
|
2989
|
-
const
|
|
2972
|
+
const o = [];
|
|
2990
2973
|
for (const a of i) {
|
|
2991
2974
|
if (!e.isAllowed(a)) {
|
|
2992
2975
|
this.log(`Skipping filtered file: ${a}`);
|
|
2993
2976
|
continue;
|
|
2994
2977
|
}
|
|
2995
2978
|
const r = this.constructUrl(t, a);
|
|
2996
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2979
|
+
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
2997
2980
|
}
|
|
2998
|
-
return
|
|
2981
|
+
return o;
|
|
2999
2982
|
}
|
|
3000
2983
|
/**
|
|
3001
2984
|
* Process a JSON endpoint source
|
|
@@ -3006,17 +2989,17 @@ class Ye {
|
|
|
3006
2989
|
*/
|
|
3007
2990
|
async processJson(t, i) {
|
|
3008
2991
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
3009
|
-
const e = new AbortController(),
|
|
2992
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), 1e4);
|
|
3010
2993
|
try {
|
|
3011
2994
|
const a = await fetch(t, { signal: e.signal });
|
|
3012
|
-
if (clearTimeout(
|
|
2995
|
+
if (clearTimeout(o), !a.ok)
|
|
3013
2996
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
3014
2997
|
const r = await a.json();
|
|
3015
2998
|
if (!r || !Array.isArray(r.images))
|
|
3016
2999
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3017
3000
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
3018
3001
|
} catch (a) {
|
|
3019
|
-
throw clearTimeout(
|
|
3002
|
+
throw clearTimeout(o), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
3020
3003
|
}
|
|
3021
3004
|
}
|
|
3022
3005
|
/**
|
|
@@ -3038,11 +3021,11 @@ class Ye {
|
|
|
3038
3021
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3039
3022
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3040
3023
|
try {
|
|
3041
|
-
const e = new AbortController(),
|
|
3024
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), this.validationTimeout), a = await fetch(t, {
|
|
3042
3025
|
method: "HEAD",
|
|
3043
3026
|
signal: e.signal
|
|
3044
3027
|
});
|
|
3045
|
-
return clearTimeout(
|
|
3028
|
+
return clearTimeout(o), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
3046
3029
|
} catch (e) {
|
|
3047
3030
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3048
3031
|
}
|
|
@@ -3059,8 +3042,8 @@ class Ye {
|
|
|
3059
3042
|
return `${e}/${i}`;
|
|
3060
3043
|
if (typeof window > "u")
|
|
3061
3044
|
return `${e}/${i}`;
|
|
3062
|
-
const
|
|
3063
|
-
return `${
|
|
3045
|
+
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
3046
|
+
return `${o}${r}/${i}`;
|
|
3064
3047
|
}
|
|
3065
3048
|
/**
|
|
3066
3049
|
* Check if URL is absolute (contains protocol)
|
|
@@ -3094,16 +3077,16 @@ class Ve {
|
|
|
3094
3077
|
*/
|
|
3095
3078
|
async prepare(t) {
|
|
3096
3079
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3097
|
-
const i = this.loaders.map((e,
|
|
3098
|
-
this.log(`Loader ${
|
|
3080
|
+
const i = this.loaders.map((e, o) => e.prepare(t).then(() => {
|
|
3081
|
+
this.log(`Loader ${o} prepared with ${e.imagesLength()} images`);
|
|
3099
3082
|
}).catch((a) => {
|
|
3100
|
-
console.warn(`Loader ${
|
|
3083
|
+
console.warn(`Loader ${o} failed to prepare:`, a);
|
|
3101
3084
|
}));
|
|
3102
3085
|
await Promise.all(i);
|
|
3103
3086
|
for (const e of this.loaders)
|
|
3104
3087
|
if (e.isPrepared()) {
|
|
3105
|
-
const
|
|
3106
|
-
this._discoveredUrls.push(...
|
|
3088
|
+
const o = e.imageURLs();
|
|
3089
|
+
this._discoveredUrls.push(...o);
|
|
3107
3090
|
}
|
|
3108
3091
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
3109
3092
|
}
|
|
@@ -3228,18 +3211,18 @@ const Ke = `
|
|
|
3228
3211
|
`;
|
|
3229
3212
|
function Ze() {
|
|
3230
3213
|
if (typeof document > "u") return;
|
|
3231
|
-
const
|
|
3232
|
-
if (document.getElementById(
|
|
3214
|
+
const n = "fbn-ic-functional-styles";
|
|
3215
|
+
if (document.getElementById(n)) return;
|
|
3233
3216
|
const t = document.createElement("style");
|
|
3234
|
-
t.id =
|
|
3217
|
+
t.id = n, t.textContent = Ke, document.head.appendChild(t);
|
|
3235
3218
|
}
|
|
3236
3219
|
class Qe {
|
|
3237
3220
|
constructor(t = {}) {
|
|
3238
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({
|
|
3239
3222
|
layout: this.fullConfig.layout,
|
|
3240
3223
|
image: this.fullConfig.image
|
|
3241
|
-
}), this.zoomEngine = new
|
|
3242
|
-
const i = this.fullConfig.animation.entry ||
|
|
3224
|
+
}), this.zoomEngine = new Ne(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = et(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3225
|
+
const i = this.fullConfig.animation.entry || R.animation.entry;
|
|
3243
3226
|
this.entryAnimationEngine = new ge(
|
|
3244
3227
|
i,
|
|
3245
3228
|
this.fullConfig.layout.algorithm
|
|
@@ -3248,8 +3231,8 @@ class Qe {
|
|
|
3248
3231
|
e && e.type !== "none" ? this.idleAnimationEngine = new fe(
|
|
3249
3232
|
e,
|
|
3250
3233
|
i.timing?.duration ?? 600
|
|
3251
|
-
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((
|
|
3252
|
-
this.idleAnimationEngine?.resumeForImage(
|
|
3234
|
+
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((o) => {
|
|
3235
|
+
this.idleAnimationEngine?.resumeForImage(o);
|
|
3253
3236
|
}), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
3254
3237
|
}
|
|
3255
3238
|
/**
|
|
@@ -3267,7 +3250,7 @@ class Qe {
|
|
|
3267
3250
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
3268
3251
|
if (!t || t.length === 0)
|
|
3269
3252
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
3270
|
-
const e = t.map((
|
|
3253
|
+
const e = t.map((o) => this.createLoaderFromEntry(o, i));
|
|
3271
3254
|
return e.length === 1 ? e[0] : new Ve({
|
|
3272
3255
|
loaders: e,
|
|
3273
3256
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
@@ -3278,7 +3261,7 @@ class Qe {
|
|
|
3278
3261
|
*/
|
|
3279
3262
|
createLoaderFromEntry(t, i) {
|
|
3280
3263
|
if ("static" in t) {
|
|
3281
|
-
const e = t.static,
|
|
3264
|
+
const e = t.static, o = {
|
|
3282
3265
|
...e,
|
|
3283
3266
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
3284
3267
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -3286,14 +3269,14 @@ class Qe {
|
|
|
3286
3269
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3287
3270
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3288
3271
|
};
|
|
3289
|
-
return new Ye(
|
|
3272
|
+
return new Ye(o);
|
|
3290
3273
|
} else if ("googleDrive" in t) {
|
|
3291
|
-
const e = t.googleDrive,
|
|
3274
|
+
const e = t.googleDrive, o = {
|
|
3292
3275
|
...e,
|
|
3293
3276
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3294
3277
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3295
3278
|
};
|
|
3296
|
-
return new Xe(
|
|
3279
|
+
return new Xe(o);
|
|
3297
3280
|
} else
|
|
3298
3281
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3299
3282
|
}
|
|
@@ -3306,7 +3289,7 @@ class Qe {
|
|
|
3306
3289
|
this.containerEl = this.containerRef;
|
|
3307
3290
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3308
3291
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3309
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new
|
|
3292
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new yt(this.containerEl, {
|
|
3310
3293
|
onNext: () => this.navigateToNextImage(),
|
|
3311
3294
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3312
3295
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
@@ -3319,7 +3302,7 @@ class Qe {
|
|
|
3319
3302
|
}
|
|
3320
3303
|
}
|
|
3321
3304
|
setupUI() {
|
|
3322
|
-
const t = this.fullConfig.
|
|
3305
|
+
const t = this.fullConfig.ui;
|
|
3323
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));
|
|
3324
3307
|
}
|
|
3325
3308
|
resolveElement(t) {
|
|
@@ -3354,7 +3337,7 @@ class Qe {
|
|
|
3354
3337
|
navigateToNextImage() {
|
|
3355
3338
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3356
3339
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3357
|
-
(
|
|
3340
|
+
(o) => o.dataset.imageId === String(t)
|
|
3358
3341
|
);
|
|
3359
3342
|
if (!i) return;
|
|
3360
3343
|
const e = this.imageLayouts[t];
|
|
@@ -3366,7 +3349,7 @@ class Qe {
|
|
|
3366
3349
|
navigateToPreviousImage() {
|
|
3367
3350
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3368
3351
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3369
|
-
(
|
|
3352
|
+
(o) => o.dataset.imageId === String(t)
|
|
3370
3353
|
);
|
|
3371
3354
|
if (!i) return;
|
|
3372
3355
|
const e = this.imageLayouts[t];
|
|
@@ -3382,8 +3365,8 @@ class Qe {
|
|
|
3382
3365
|
}, 500));
|
|
3383
3366
|
}
|
|
3384
3367
|
getImageHeight() {
|
|
3385
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3386
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3368
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, o = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3369
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, o) : t <= i.tablet.maxWidth ? Math.min(180, o) : Math.min(225, o) : t <= 767 ? Math.min(100, o) : t <= 1199 ? Math.min(180, o) : Math.min(225, o);
|
|
3387
3370
|
}
|
|
3388
3371
|
/**
|
|
3389
3372
|
* Get container bounds for layout calculations
|
|
@@ -3406,12 +3389,12 @@ class Qe {
|
|
|
3406
3389
|
this.showError("No images found."), this.showLoading(!1);
|
|
3407
3390
|
return;
|
|
3408
3391
|
}
|
|
3409
|
-
const e = this.getContainerBounds(),
|
|
3410
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3392
|
+
const e = this.getContainerBounds(), o = this.getImageHeight(), a = window.innerWidth;
|
|
3393
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${o}px`);
|
|
3411
3394
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3412
3395
|
e,
|
|
3413
3396
|
t,
|
|
3414
|
-
|
|
3397
|
+
o,
|
|
3415
3398
|
a
|
|
3416
3399
|
);
|
|
3417
3400
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3429,92 +3412,92 @@ class Qe {
|
|
|
3429
3412
|
if (!this.containerEl) return;
|
|
3430
3413
|
const e = this.getContainerBounds();
|
|
3431
3414
|
this.currentImageHeight = i;
|
|
3432
|
-
const
|
|
3415
|
+
const o = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3433
3416
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3434
3417
|
let r = 0;
|
|
3435
|
-
const s = (
|
|
3436
|
-
this.containerEl && (this.containerEl.appendChild(
|
|
3437
|
-
if (
|
|
3418
|
+
const s = (c) => {
|
|
3419
|
+
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
3420
|
+
if (c.offsetWidth, c.style.opacity = this.defaultStyles.opacity ?? "1", c.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || c.dataset.startRotation !== c.dataset.rotation || c.dataset.startScale !== c.dataset.scale)) {
|
|
3438
3421
|
const d = {
|
|
3439
|
-
x: parseFloat(
|
|
3440
|
-
y: parseFloat(
|
|
3422
|
+
x: parseFloat(c.dataset.startX),
|
|
3423
|
+
y: parseFloat(c.dataset.startY)
|
|
3441
3424
|
}, f = {
|
|
3442
|
-
x: parseFloat(
|
|
3443
|
-
y: parseFloat(
|
|
3444
|
-
},
|
|
3425
|
+
x: parseFloat(c.dataset.endX),
|
|
3426
|
+
y: parseFloat(c.dataset.endY)
|
|
3427
|
+
}, y = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale), b = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, w = c.dataset.startScale ? parseFloat(c.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3445
3428
|
he({
|
|
3446
|
-
element:
|
|
3429
|
+
element: c,
|
|
3447
3430
|
startPosition: d,
|
|
3448
3431
|
endPosition: f,
|
|
3449
3432
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3450
3433
|
duration: v.duration,
|
|
3451
|
-
imageWidth:
|
|
3434
|
+
imageWidth: y,
|
|
3452
3435
|
imageHeight: p,
|
|
3453
3436
|
rotation: g,
|
|
3454
3437
|
scale: m,
|
|
3455
3438
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3456
|
-
startRotation:
|
|
3439
|
+
startRotation: b,
|
|
3457
3440
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3458
3441
|
startScale: w
|
|
3459
3442
|
});
|
|
3460
3443
|
} else {
|
|
3461
|
-
const d =
|
|
3462
|
-
|
|
3444
|
+
const d = c.dataset.finalTransform || "";
|
|
3445
|
+
c.style.transform = d;
|
|
3463
3446
|
}
|
|
3464
|
-
const h = parseInt(
|
|
3447
|
+
const h = parseInt(c.dataset.imageId || "0");
|
|
3465
3448
|
if (this.fullConfig.config.debug?.enabled && h < 3) {
|
|
3466
|
-
const d =
|
|
3449
|
+
const d = c.dataset.finalTransform || "";
|
|
3467
3450
|
console.log(`Image ${h} final state:`, {
|
|
3468
|
-
left:
|
|
3469
|
-
top:
|
|
3470
|
-
width:
|
|
3471
|
-
height:
|
|
3472
|
-
computedWidth:
|
|
3473
|
-
computedHeight:
|
|
3451
|
+
left: c.style.left,
|
|
3452
|
+
top: c.style.top,
|
|
3453
|
+
width: c.style.width,
|
|
3454
|
+
height: c.style.height,
|
|
3455
|
+
computedWidth: c.offsetWidth,
|
|
3456
|
+
computedHeight: c.offsetHeight,
|
|
3474
3457
|
transform: d,
|
|
3475
3458
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3476
3459
|
});
|
|
3477
3460
|
}
|
|
3478
3461
|
if (this.idleAnimationEngine) {
|
|
3479
3462
|
const d = this.entryAnimationEngine.getTiming().duration;
|
|
3480
|
-
this.idleAnimationEngine.register(
|
|
3463
|
+
this.idleAnimationEngine.register(c, h, this.imageElements.length, d);
|
|
3481
3464
|
}
|
|
3482
3465
|
}), r++);
|
|
3483
|
-
},
|
|
3466
|
+
}, l = () => {
|
|
3484
3467
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3485
3468
|
for (; this.displayQueue.length > 0; ) {
|
|
3486
|
-
const
|
|
3487
|
-
|
|
3469
|
+
const c = this.displayQueue.shift();
|
|
3470
|
+
c && s(c);
|
|
3488
3471
|
}
|
|
3489
3472
|
return;
|
|
3490
3473
|
}
|
|
3491
3474
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3492
|
-
if (
|
|
3475
|
+
if (o !== this.loadGeneration) {
|
|
3493
3476
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3494
3477
|
return;
|
|
3495
3478
|
}
|
|
3496
3479
|
if (this.displayQueue.length > 0) {
|
|
3497
|
-
const
|
|
3498
|
-
|
|
3480
|
+
const c = this.displayQueue.shift();
|
|
3481
|
+
c && s(c);
|
|
3499
3482
|
}
|
|
3500
3483
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3501
3484
|
}, this.fullConfig.animation.queue.interval);
|
|
3502
3485
|
};
|
|
3503
3486
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3504
|
-
const
|
|
3487
|
+
const c = new IntersectionObserver((u) => {
|
|
3505
3488
|
u.forEach((h) => {
|
|
3506
|
-
h.isIntersecting && (
|
|
3489
|
+
h.isIntersecting && (l(), c.disconnect());
|
|
3507
3490
|
});
|
|
3508
3491
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3509
|
-
|
|
3492
|
+
c.observe(this.containerEl);
|
|
3510
3493
|
} else
|
|
3511
|
-
|
|
3512
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((
|
|
3494
|
+
l();
|
|
3495
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), a.forEach((c, u) => {
|
|
3513
3496
|
const h = document.createElement("div");
|
|
3514
3497
|
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";
|
|
3515
|
-
const d =
|
|
3498
|
+
const d = c.x, f = c.y;
|
|
3516
3499
|
h.style.left = `${d - 6}px`, h.style.top = `${f - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(h);
|
|
3517
|
-
})), t.forEach((
|
|
3500
|
+
})), t.forEach((c, u) => {
|
|
3518
3501
|
const h = document.createElement("img");
|
|
3519
3502
|
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";
|
|
3520
3503
|
const d = a[u];
|
|
@@ -3531,29 +3514,29 @@ class Qe {
|
|
|
3531
3514
|
}), h.addEventListener("click", (f) => {
|
|
3532
3515
|
f.stopPropagation(), this.handleImageClick(h, d);
|
|
3533
3516
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3534
|
-
if (
|
|
3517
|
+
if (o !== this.loadGeneration)
|
|
3535
3518
|
return;
|
|
3536
|
-
const f = h.naturalWidth / h.naturalHeight,
|
|
3537
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${
|
|
3538
|
-
const p = { x: d.x, y: d.y }, g = { width:
|
|
3519
|
+
const f = h.naturalWidth / h.naturalHeight, y = i * f;
|
|
3520
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${y}`), h.style.width = `${y}px`, h.cachedRenderedWidth = y, h.aspectRatio = f, ft(h, this.fullConfig.styling?.default, i, y);
|
|
3521
|
+
const p = { x: d.x, y: d.y }, g = { width: y, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3539
3522
|
p,
|
|
3540
3523
|
g,
|
|
3541
3524
|
e,
|
|
3542
3525
|
u,
|
|
3543
3526
|
t.length
|
|
3544
|
-
),
|
|
3527
|
+
), b = this.entryAnimationEngine.calculateStartRotation(d.rotation), w = this.entryAnimationEngine.calculateStartScale(d.scale), v = this.entryAnimationEngine.buildFinalTransform(
|
|
3545
3528
|
d.rotation,
|
|
3546
3529
|
d.scale,
|
|
3547
|
-
|
|
3530
|
+
y,
|
|
3548
3531
|
i
|
|
3549
|
-
),
|
|
3532
|
+
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3550
3533
|
m,
|
|
3551
3534
|
p,
|
|
3552
3535
|
d.rotation,
|
|
3553
3536
|
d.scale,
|
|
3554
|
-
b,
|
|
3555
|
-
i,
|
|
3556
3537
|
y,
|
|
3538
|
+
i,
|
|
3539
|
+
b,
|
|
3557
3540
|
w
|
|
3558
3541
|
);
|
|
3559
3542
|
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
@@ -3562,15 +3545,15 @@ class Qe {
|
|
|
3562
3545
|
left: d.x,
|
|
3563
3546
|
top: d.y,
|
|
3564
3547
|
finalTransform: v,
|
|
3565
|
-
renderedWidth:
|
|
3548
|
+
renderedWidth: y,
|
|
3566
3549
|
renderedHeight: i
|
|
3567
|
-
}), h.style.transform =
|
|
3568
|
-
}, h.onerror = () => r++, h.src =
|
|
3550
|
+
}), h.style.transform = S, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || b !== d.rotation || w !== 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(y), h.dataset.imageHeight = String(i), h.dataset.rotation = String(d.rotation), h.dataset.scale = String(d.scale), h.dataset.startRotation = String(b), h.dataset.startScale = String(w)), this.displayQueue.push(h);
|
|
3551
|
+
}, h.onerror = () => r++, h.src = c;
|
|
3569
3552
|
});
|
|
3570
3553
|
}
|
|
3571
3554
|
async handleImageClick(t, i) {
|
|
3572
3555
|
if (!this.containerEl) return;
|
|
3573
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3556
|
+
const e = this.zoomEngine.isFocused(t), o = {
|
|
3574
3557
|
width: this.containerEl.offsetWidth,
|
|
3575
3558
|
height: this.containerEl.offsetHeight
|
|
3576
3559
|
};
|
|
@@ -3579,7 +3562,7 @@ class Qe {
|
|
|
3579
3562
|
else {
|
|
3580
3563
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3581
3564
|
const a = t.dataset.imageId;
|
|
3582
|
-
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t,
|
|
3565
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, o, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3583
3566
|
}
|
|
3584
3567
|
}
|
|
3585
3568
|
/**
|
|
@@ -3589,7 +3572,7 @@ class Qe {
|
|
|
3589
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;
|
|
3590
3573
|
}
|
|
3591
3574
|
showLoading(t) {
|
|
3592
|
-
!this.fullConfig.
|
|
3575
|
+
!this.fullConfig.ui.showLoadingSpinner || !this.loadingEl || (t ? this.loadingEl.classList.remove("fbn-ic-hidden") : this.loadingEl.classList.add("fbn-ic-hidden"));
|
|
3593
3576
|
}
|
|
3594
3577
|
showError(t) {
|
|
3595
3578
|
this.errorEl && (this.errorEl.textContent = t, this.errorEl.classList.remove("fbn-ic-hidden"));
|
|
@@ -3598,7 +3581,7 @@ class Qe {
|
|
|
3598
3581
|
this.errorEl && this.errorEl.classList.add("fbn-ic-hidden");
|
|
3599
3582
|
}
|
|
3600
3583
|
updateCounter(t) {
|
|
3601
|
-
!this.fullConfig.
|
|
3584
|
+
!this.fullConfig.ui.showImageCounter || !this.counterEl || (this.counterEl.textContent = `${t + 1} of ${this.imageElements.length}`, this.counterEl.classList.remove("fbn-ic-hidden"));
|
|
3602
3585
|
}
|
|
3603
3586
|
hideCounter() {
|
|
3604
3587
|
this.counterEl && this.counterEl.classList.add("fbn-ic-hidden");
|
|
@@ -3615,13 +3598,13 @@ export {
|
|
|
3615
3598
|
It as BOUNCE_PRESETS,
|
|
3616
3599
|
Se as ClusterPlacementLayout,
|
|
3617
3600
|
Ve as CompositeLoader,
|
|
3618
|
-
|
|
3601
|
+
R as DEFAULT_CONFIG,
|
|
3619
3602
|
zt as DEFAULT_SHARED_LOADER_CONFIG,
|
|
3620
3603
|
Rt as ELASTIC_PRESETS,
|
|
3621
3604
|
ge as EntryAnimationEngine,
|
|
3622
3605
|
Ke as FUNCTIONAL_CSS,
|
|
3623
3606
|
Xe as GoogleDriveLoader,
|
|
3624
|
-
|
|
3607
|
+
be as GridPlacementLayout,
|
|
3625
3608
|
Fe as HoneycombPlacementLayout,
|
|
3626
3609
|
Qe as ImageCloud,
|
|
3627
3610
|
Je as ImageFilter,
|
|
@@ -3633,7 +3616,7 @@ export {
|
|
|
3633
3616
|
Ye as StaticImageLoader,
|
|
3634
3617
|
Tt as WAVE_PATH_PRESETS,
|
|
3635
3618
|
Ie as WavePlacementLayout,
|
|
3636
|
-
|
|
3619
|
+
Ne as ZoomEngine,
|
|
3637
3620
|
he as animatePath,
|
|
3638
3621
|
Ze as injectFunctionalStyles,
|
|
3639
3622
|
de as requiresJSAnimation
|