@frybynite/image-cloud 0.9.0 → 0.9.2
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 +402 -425
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +10 -32
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +3 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +9 -14
- package/dist/react.d.ts +9 -14
- package/dist/react.js +9 -32
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +9 -14
- package/dist/vue.js +9 -32
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +9 -14
- package/dist/web-component.js +45 -68
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
|
@@ -115,10 +115,8 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
115
115
|
densityFactor: 1,
|
|
116
116
|
// Default density
|
|
117
117
|
spacing: Object.freeze({
|
|
118
|
-
padding: 50
|
|
118
|
+
padding: 50
|
|
119
119
|
// padding from viewport edges
|
|
120
|
-
minGap: 20
|
|
121
|
-
// minimum spacing between images
|
|
122
120
|
})
|
|
123
121
|
}),
|
|
124
122
|
// Pattern-based animation configuration
|
|
@@ -136,16 +134,8 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
136
134
|
queue: Object.freeze({
|
|
137
135
|
enabled: !0,
|
|
138
136
|
// When false, all images display simultaneously
|
|
139
|
-
interval: 150
|
|
137
|
+
interval: 150
|
|
140
138
|
// ms between processing queue items (when enabled)
|
|
141
|
-
maxConcurrent: void 0
|
|
142
|
-
// STUB: Not implemented yet
|
|
143
|
-
}),
|
|
144
|
-
performance: Object.freeze({
|
|
145
|
-
useGPU: void 0,
|
|
146
|
-
// STUB: Not implemented yet
|
|
147
|
-
reduceMotion: void 0
|
|
148
|
-
// STUB: Not implemented yet
|
|
149
139
|
}),
|
|
150
140
|
entry: Object.freeze({
|
|
151
141
|
start: Object.freeze({
|
|
@@ -181,19 +171,12 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
181
171
|
// Use default animation duration
|
|
182
172
|
}),
|
|
183
173
|
navigation: Object.freeze({
|
|
184
|
-
keyboard:
|
|
185
|
-
|
|
186
|
-
swipe: void 0,
|
|
187
|
-
// STUB: Not implemented yet
|
|
174
|
+
keyboard: !0,
|
|
175
|
+
swipe: !0,
|
|
188
176
|
mouseWheel: void 0
|
|
189
177
|
// STUB: Not implemented yet
|
|
190
178
|
}),
|
|
191
|
-
|
|
192
|
-
pinchToZoom: void 0,
|
|
193
|
-
// STUB: Not implemented yet
|
|
194
|
-
doubleTapToFocus: void 0
|
|
195
|
-
// STUB: Not implemented yet
|
|
196
|
-
})
|
|
179
|
+
dragging: !0
|
|
197
180
|
}),
|
|
198
181
|
// Pattern-based rendering configuration
|
|
199
182
|
rendering: Object.freeze({
|
|
@@ -215,48 +198,48 @@ const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
215
198
|
// Image styling
|
|
216
199
|
styling: Mt
|
|
217
200
|
});
|
|
218
|
-
function Z(
|
|
219
|
-
if (!
|
|
220
|
-
if (!t) return { ...
|
|
221
|
-
const i = { ...
|
|
222
|
-
return t.border !== void 0 && (i.border = { ...
|
|
201
|
+
function Z(o, t) {
|
|
202
|
+
if (!o) return t || {};
|
|
203
|
+
if (!t) return { ...o };
|
|
204
|
+
const i = { ...o };
|
|
205
|
+
return t.border !== void 0 && (i.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
223
206
|
}
|
|
224
|
-
function Jt(
|
|
225
|
-
if (!t) return { ...
|
|
226
|
-
const i = Z(
|
|
227
|
-
Z(i,
|
|
207
|
+
function Jt(o, t) {
|
|
208
|
+
if (!t) return { ...o };
|
|
209
|
+
const i = Z(o.default, t.default), e = Z(
|
|
210
|
+
Z(i, o.hover),
|
|
228
211
|
t.hover
|
|
229
|
-
),
|
|
230
|
-
Z(i,
|
|
212
|
+
), n = Z(
|
|
213
|
+
Z(i, o.focused),
|
|
231
214
|
t.focused
|
|
232
215
|
);
|
|
233
216
|
return {
|
|
234
217
|
default: i,
|
|
235
218
|
hover: e,
|
|
236
|
-
focused:
|
|
219
|
+
focused: n
|
|
237
220
|
};
|
|
238
221
|
}
|
|
239
|
-
function Vt(
|
|
240
|
-
if (!t) return { ...
|
|
241
|
-
const i = { ...
|
|
222
|
+
function Vt(o, t) {
|
|
223
|
+
if (!t) return { ...o };
|
|
224
|
+
const i = { ...o };
|
|
242
225
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
243
|
-
...
|
|
226
|
+
...o.sizing,
|
|
244
227
|
...t.sizing
|
|
245
228
|
}, t.sizing.variance)) {
|
|
246
|
-
const e = t.sizing.variance,
|
|
247
|
-
i.sizing.variance = { min:
|
|
229
|
+
const e = t.sizing.variance, n = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : o.sizing?.variance?.min ?? 1, a = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : o.sizing?.variance?.max ?? 1;
|
|
230
|
+
i.sizing.variance = { min: n, max: a };
|
|
248
231
|
}
|
|
249
232
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
250
|
-
...
|
|
233
|
+
...o.rotation,
|
|
251
234
|
...t.rotation
|
|
252
235
|
}, t.rotation.range)) {
|
|
253
|
-
const e = t.rotation.range,
|
|
254
|
-
i.rotation.range = { min:
|
|
236
|
+
const e = t.rotation.range, n = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : o.rotation?.range?.min ?? -15, a = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : o.rotation?.range?.max ?? 15;
|
|
237
|
+
i.rotation.range = { min: n, max: a };
|
|
255
238
|
}
|
|
256
239
|
return i;
|
|
257
240
|
}
|
|
258
|
-
function Kt(
|
|
259
|
-
const t =
|
|
241
|
+
function Kt(o) {
|
|
242
|
+
const t = o.layout?.rotation;
|
|
260
243
|
if (t && "enabled" in t)
|
|
261
244
|
return {
|
|
262
245
|
rotation: {
|
|
@@ -265,8 +248,8 @@ function Kt(n) {
|
|
|
265
248
|
}
|
|
266
249
|
};
|
|
267
250
|
}
|
|
268
|
-
function Zt(
|
|
269
|
-
const t =
|
|
251
|
+
function Zt(o) {
|
|
252
|
+
const t = o.layout?.sizing?.variance;
|
|
270
253
|
if (t)
|
|
271
254
|
return {
|
|
272
255
|
sizing: {
|
|
@@ -276,101 +259,95 @@ function Zt(n) {
|
|
|
276
259
|
}
|
|
277
260
|
};
|
|
278
261
|
}
|
|
279
|
-
function Qt(
|
|
280
|
-
const t = Kt(
|
|
281
|
-
let e =
|
|
262
|
+
function Qt(o = {}) {
|
|
263
|
+
const t = Kt(o), i = Zt(o);
|
|
264
|
+
let e = o.image;
|
|
282
265
|
(t || i) && (e = {
|
|
283
266
|
...i || {},
|
|
284
267
|
...t || {},
|
|
285
268
|
...e
|
|
286
|
-
}, e.rotation && t?.rotation &&
|
|
269
|
+
}, e.rotation && t?.rotation && o.image?.rotation && (e.rotation = {
|
|
287
270
|
...t.rotation,
|
|
288
|
-
...
|
|
271
|
+
...o.image.rotation
|
|
289
272
|
}));
|
|
290
|
-
const
|
|
291
|
-
|
|
273
|
+
const n = [...o.loaders ?? []];
|
|
274
|
+
o.images && o.images.length > 0 && n.unshift({
|
|
292
275
|
static: {
|
|
293
|
-
sources: [{ urls:
|
|
276
|
+
sources: [{ urls: o.images }]
|
|
294
277
|
}
|
|
295
278
|
});
|
|
296
279
|
const r = {
|
|
297
280
|
loaders: {
|
|
298
281
|
...zt,
|
|
299
|
-
...
|
|
282
|
+
...o.config?.loaders ?? {}
|
|
300
283
|
}
|
|
301
284
|
}, s = {
|
|
302
|
-
loaders:
|
|
285
|
+
loaders: n,
|
|
303
286
|
config: r,
|
|
304
287
|
image: Vt(Ft, e),
|
|
305
288
|
layout: { ...E.layout },
|
|
306
289
|
animation: { ...E.animation },
|
|
307
290
|
interaction: { ...E.interaction },
|
|
308
291
|
rendering: { ...E.rendering },
|
|
309
|
-
styling: Jt(Mt,
|
|
292
|
+
styling: Jt(Mt, o.styling)
|
|
310
293
|
};
|
|
311
|
-
if (
|
|
294
|
+
if (o.layout && (s.layout = {
|
|
312
295
|
...E.layout,
|
|
313
|
-
...
|
|
314
|
-
},
|
|
296
|
+
...o.layout
|
|
297
|
+
}, o.layout.responsive && (s.layout.responsive = {
|
|
315
298
|
...E.layout.responsive,
|
|
316
|
-
mobile:
|
|
317
|
-
tablet:
|
|
318
|
-
}),
|
|
299
|
+
mobile: o.layout.responsive.mobile ? { ...E.layout.responsive.mobile, ...o.layout.responsive.mobile } : E.layout.responsive.mobile,
|
|
300
|
+
tablet: o.layout.responsive.tablet ? { ...E.layout.responsive.tablet, ...o.layout.responsive.tablet } : E.layout.responsive.tablet
|
|
301
|
+
}), o.layout.spacing && (s.layout.spacing = {
|
|
319
302
|
...E.layout.spacing,
|
|
320
|
-
...
|
|
321
|
-
})),
|
|
303
|
+
...o.layout.spacing
|
|
304
|
+
})), o.animation && (s.animation = {
|
|
322
305
|
...E.animation,
|
|
323
|
-
...
|
|
324
|
-
},
|
|
306
|
+
...o.animation
|
|
307
|
+
}, o.animation.easing && (s.animation.easing = {
|
|
325
308
|
...E.animation.easing,
|
|
326
|
-
...
|
|
327
|
-
}),
|
|
309
|
+
...o.animation.easing
|
|
310
|
+
}), o.animation.queue && (s.animation.queue = {
|
|
328
311
|
...E.animation.queue,
|
|
329
|
-
...
|
|
330
|
-
}),
|
|
331
|
-
...E.animation.performance,
|
|
332
|
-
...n.animation.performance
|
|
333
|
-
}), n.animation.entry && (s.animation.entry = {
|
|
312
|
+
...o.animation.queue
|
|
313
|
+
}), o.animation.entry && (s.animation.entry = {
|
|
334
314
|
...E.animation.entry,
|
|
335
|
-
...
|
|
336
|
-
start:
|
|
315
|
+
...o.animation.entry,
|
|
316
|
+
start: o.animation.entry.start ? {
|
|
337
317
|
...E.animation.entry.start,
|
|
338
|
-
...
|
|
339
|
-
circular:
|
|
318
|
+
...o.animation.entry.start,
|
|
319
|
+
circular: o.animation.entry.start.circular ? { ...E.animation.entry.start.circular, ...o.animation.entry.start.circular } : E.animation.entry.start.circular
|
|
340
320
|
} : E.animation.entry.start,
|
|
341
|
-
timing:
|
|
342
|
-
path:
|
|
343
|
-
rotation:
|
|
344
|
-
scale:
|
|
345
|
-
}),
|
|
321
|
+
timing: o.animation.entry.timing ? { ...E.animation.entry.timing, ...o.animation.entry.timing } : E.animation.entry.timing,
|
|
322
|
+
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : E.animation.entry.path,
|
|
323
|
+
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : E.animation.entry.rotation,
|
|
324
|
+
scale: o.animation.entry.scale ? { ...wt, ...o.animation.entry.scale } : E.animation.entry.scale
|
|
325
|
+
}), o.animation.idle && (s.animation.idle = {
|
|
346
326
|
...Dt,
|
|
347
|
-
...
|
|
348
|
-
})),
|
|
327
|
+
...o.animation.idle
|
|
328
|
+
})), o.interaction && (s.interaction = {
|
|
349
329
|
...E.interaction,
|
|
350
|
-
...
|
|
351
|
-
},
|
|
330
|
+
...o.interaction
|
|
331
|
+
}, o.interaction.focus && (s.interaction.focus = {
|
|
352
332
|
...E.interaction.focus,
|
|
353
|
-
...
|
|
354
|
-
}),
|
|
333
|
+
...o.interaction.focus
|
|
334
|
+
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
355
335
|
...E.interaction.navigation,
|
|
356
|
-
...
|
|
357
|
-
}),
|
|
358
|
-
...E.interaction.gestures,
|
|
359
|
-
...n.interaction.gestures
|
|
360
|
-
})), n.rendering && (s.rendering = {
|
|
336
|
+
...o.interaction.navigation
|
|
337
|
+
})), o.rendering && (s.rendering = {
|
|
361
338
|
...E.rendering,
|
|
362
|
-
...
|
|
363
|
-
},
|
|
339
|
+
...o.rendering
|
|
340
|
+
}, o.rendering.responsive && (s.rendering.responsive = {
|
|
364
341
|
...E.rendering.responsive,
|
|
365
|
-
...
|
|
366
|
-
breakpoints:
|
|
367
|
-
mobileDetection:
|
|
368
|
-
}),
|
|
342
|
+
...o.rendering.responsive,
|
|
343
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...E.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : E.rendering.responsive.breakpoints,
|
|
344
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : E.rendering.responsive.mobileDetection
|
|
345
|
+
}), o.rendering.ui && (s.rendering.ui = {
|
|
369
346
|
...E.rendering.ui,
|
|
370
|
-
...
|
|
347
|
+
...o.rendering.ui
|
|
371
348
|
})), s.config.debug = {
|
|
372
349
|
...Ot,
|
|
373
|
-
...
|
|
350
|
+
...o.config?.debug ?? {}
|
|
374
351
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
375
352
|
const c = { shape: "hexagon", mode: "height-relative" };
|
|
376
353
|
s.styling = {
|
|
@@ -382,14 +359,14 @@ function Qt(n = {}) {
|
|
|
382
359
|
}
|
|
383
360
|
return s;
|
|
384
361
|
}
|
|
385
|
-
function te(
|
|
386
|
-
return { ...
|
|
362
|
+
function te(o, t) {
|
|
363
|
+
return { ...o ? It[o] : It.playful, ...t };
|
|
387
364
|
}
|
|
388
|
-
function ee(
|
|
389
|
-
return { ...
|
|
365
|
+
function ee(o, t) {
|
|
366
|
+
return { ...o ? Rt[o] : Rt.gentle, ...t };
|
|
390
367
|
}
|
|
391
|
-
function ie(
|
|
392
|
-
return { ...
|
|
368
|
+
function ie(o, t) {
|
|
369
|
+
return { ...o ? Tt[o] : Tt.gentle, ...t };
|
|
393
370
|
}
|
|
394
371
|
class ne {
|
|
395
372
|
constructor(t) {
|
|
@@ -402,8 +379,8 @@ class ne {
|
|
|
402
379
|
buildTransformString(t) {
|
|
403
380
|
const i = ["translate(-50%, -50%)"];
|
|
404
381
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
405
|
-
const e = t.x ?? 0,
|
|
406
|
-
i.push(`translate(${e}px, ${
|
|
382
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
383
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
407
384
|
}
|
|
408
385
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
409
386
|
}
|
|
@@ -416,9 +393,9 @@ class ne {
|
|
|
416
393
|
* @param easing - CSS easing function (optional)
|
|
417
394
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
418
395
|
*/
|
|
419
|
-
animateTransformCancellable(t, i, e,
|
|
396
|
+
animateTransformCancellable(t, i, e, n = null, a = null) {
|
|
420
397
|
this.cancelAllAnimations(t);
|
|
421
|
-
const r =
|
|
398
|
+
const r = n ?? this.config.duration, s = a ?? this.config.easing.default, c = this.buildTransformString(i), l = this.buildTransformString(e);
|
|
422
399
|
t.style.transition = "none";
|
|
423
400
|
const u = t.animate(
|
|
424
401
|
[
|
|
@@ -455,13 +432,13 @@ class ne {
|
|
|
455
432
|
cancelAnimation(t, i = !0) {
|
|
456
433
|
const e = this.getCurrentTransform(t.element);
|
|
457
434
|
if (t.animation.cancel(), i) {
|
|
458
|
-
const
|
|
435
|
+
const n = this.buildTransformString({
|
|
459
436
|
x: e.x,
|
|
460
437
|
y: e.y,
|
|
461
438
|
rotation: e.rotation,
|
|
462
439
|
scale: e.scale
|
|
463
440
|
});
|
|
464
|
-
t.element.style.transform =
|
|
441
|
+
t.element.style.transform = n;
|
|
465
442
|
}
|
|
466
443
|
return this.activeAnimations.delete(t.element), e;
|
|
467
444
|
}
|
|
@@ -474,8 +451,8 @@ class ne {
|
|
|
474
451
|
const i = this.activeAnimations.get(t);
|
|
475
452
|
i && this.cancelAnimation(i, !1);
|
|
476
453
|
const e = t.getAnimations();
|
|
477
|
-
for (const
|
|
478
|
-
|
|
454
|
+
for (const n of e)
|
|
455
|
+
n.cancel();
|
|
479
456
|
}
|
|
480
457
|
/**
|
|
481
458
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -487,7 +464,7 @@ class ne {
|
|
|
487
464
|
const e = getComputedStyle(t).transform;
|
|
488
465
|
if (e === "none" || !e)
|
|
489
466
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
490
|
-
const
|
|
467
|
+
const n = new DOMMatrix(e), a = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), s = n.e, c = n.f;
|
|
491
468
|
return { x: s, y: c, rotation: r, scale: a };
|
|
492
469
|
}
|
|
493
470
|
/**
|
|
@@ -514,9 +491,9 @@ class ne {
|
|
|
514
491
|
* @param easing - CSS easing function (optional)
|
|
515
492
|
* @returns Promise that resolves when animation completes
|
|
516
493
|
*/
|
|
517
|
-
animateTransform(t, i, e = null,
|
|
494
|
+
animateTransform(t, i, e = null, n = null) {
|
|
518
495
|
return new Promise((a) => {
|
|
519
|
-
const r = e ?? this.config.duration, s =
|
|
496
|
+
const r = e ?? this.config.duration, s = n ?? this.config.easing.default;
|
|
520
497
|
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
521
498
|
a();
|
|
522
499
|
}, r);
|
|
@@ -547,18 +524,18 @@ class ne {
|
|
|
547
524
|
return new Promise((i) => setTimeout(i, t));
|
|
548
525
|
}
|
|
549
526
|
}
|
|
550
|
-
function V(
|
|
551
|
-
return
|
|
527
|
+
function V(o, t, i) {
|
|
528
|
+
return o + (t - o) * i;
|
|
552
529
|
}
|
|
553
|
-
function oe(
|
|
554
|
-
const { overshoot:
|
|
555
|
-
let u = 0, h = 0, d = 1, g =
|
|
530
|
+
function oe(o, t, i, e) {
|
|
531
|
+
const { overshoot: n, bounces: a, decayRatio: r } = e, s = i.x - t.x, c = i.y - t.y, l = se(a, r);
|
|
532
|
+
let u = 0, h = 0, d = 1, g = n, b = !1;
|
|
556
533
|
for (let f = 0; f < l.length; f++)
|
|
557
|
-
if (
|
|
534
|
+
if (o <= l[f].time) {
|
|
558
535
|
h = f === 0 ? 0 : l[f - 1].time, d = l[f].time, g = l[f].overshoot, b = l[f].isOvershoot;
|
|
559
536
|
break;
|
|
560
537
|
}
|
|
561
|
-
const p = (
|
|
538
|
+
const p = (o - h) / (d - h);
|
|
562
539
|
if (b)
|
|
563
540
|
u = 1 + g * ot(p);
|
|
564
541
|
else if (h === 0)
|
|
@@ -574,72 +551,72 @@ function oe(n, t, i, e) {
|
|
|
574
551
|
y: t.y + c * u
|
|
575
552
|
};
|
|
576
553
|
}
|
|
577
|
-
function se(
|
|
554
|
+
function se(o, t) {
|
|
578
555
|
const i = [];
|
|
579
556
|
let e = 0.6;
|
|
580
557
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
581
|
-
let
|
|
582
|
-
const r = 0.4 / (
|
|
583
|
-
for (let s = 0; s <
|
|
584
|
-
e += r, i.push({ time: e, overshoot:
|
|
558
|
+
let n = 0.15;
|
|
559
|
+
const r = 0.4 / (o * 2);
|
|
560
|
+
for (let s = 0; s < o; s++)
|
|
561
|
+
e += r, i.push({ time: e, overshoot: n, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
585
562
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
586
563
|
}
|
|
587
|
-
function ae(
|
|
588
|
-
const { stiffness:
|
|
564
|
+
function ae(o, t, i, e) {
|
|
565
|
+
const { stiffness: n, damping: a, mass: r, oscillations: s } = e, c = i.x - t.x, l = i.y - t.y, u = Math.sqrt(n / r), h = a / (2 * Math.sqrt(n * r));
|
|
589
566
|
let d;
|
|
590
567
|
if (h < 1) {
|
|
591
|
-
const g = u * Math.sqrt(1 - h * h), b = Math.exp(-h * u *
|
|
568
|
+
const g = u * Math.sqrt(1 - h * h), b = Math.exp(-h * u * o * 3), p = Math.cos(g * o * s * Math.PI);
|
|
592
569
|
d = 1 - b * p;
|
|
593
570
|
} else
|
|
594
|
-
d = 1 - Math.exp(-u *
|
|
571
|
+
d = 1 - Math.exp(-u * o * 3);
|
|
595
572
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
596
573
|
x: t.x + c * d,
|
|
597
574
|
y: t.y + l * d
|
|
598
575
|
};
|
|
599
576
|
}
|
|
600
|
-
function re(
|
|
601
|
-
const { amplitude:
|
|
577
|
+
function re(o, t, i, e) {
|
|
578
|
+
const { amplitude: n, frequency: a, decay: r, decayRate: s, phase: c } = e, l = i.x - t.x, u = i.y - t.y, h = Math.sqrt(l * l + u * u), d = h > 0 ? -u / h : 0, g = h > 0 ? l / h : 1, b = a * Math.PI * 2 * o + c, p = r ? Math.pow(1 - o, s) : 1, f = n * Math.sin(b) * p, m = ce(o);
|
|
602
579
|
return {
|
|
603
580
|
x: V(t.x, i.x, m) + f * d,
|
|
604
581
|
y: V(t.y, i.y, m) + f * g
|
|
605
582
|
};
|
|
606
583
|
}
|
|
607
|
-
function ot(
|
|
608
|
-
return 1 - (1 -
|
|
584
|
+
function ot(o) {
|
|
585
|
+
return 1 - (1 - o) * (1 - o);
|
|
609
586
|
}
|
|
610
|
-
function ce(
|
|
611
|
-
return 1 - Math.pow(1 -
|
|
587
|
+
function ce(o) {
|
|
588
|
+
return 1 - Math.pow(1 - o, 3);
|
|
612
589
|
}
|
|
613
|
-
function le(
|
|
614
|
-
const { amplitude: e, frequency:
|
|
590
|
+
function le(o, t, i) {
|
|
591
|
+
const { amplitude: e, frequency: n, decay: a } = i, r = Math.sin(o * n * Math.PI * 2), s = a ? Math.pow(1 - o, 2) : 1, c = e * r * s;
|
|
615
592
|
return t + c;
|
|
616
593
|
}
|
|
617
|
-
function he(
|
|
618
|
-
const { overshoot: e, bounces:
|
|
594
|
+
function he(o, t, i) {
|
|
595
|
+
const { overshoot: e, bounces: n } = i, a = [];
|
|
619
596
|
a.push({ time: 0.5, scale: e });
|
|
620
597
|
let r = e;
|
|
621
|
-
const s = 0.5, l = 0.5 / (
|
|
598
|
+
const s = 0.5, l = 0.5 / (n * 2);
|
|
622
599
|
let u = 0.5;
|
|
623
|
-
for (let d = 0; d <
|
|
600
|
+
for (let d = 0; d < n; d++) {
|
|
624
601
|
const g = 1 - (r - 1) * s;
|
|
625
|
-
u += l, a.push({ time: u, scale: g }), r = 1 + (r - 1) * s * s, u += l, d <
|
|
602
|
+
u += l, a.push({ time: u, scale: g }), r = 1 + (r - 1) * s * s, u += l, d < n - 1 && a.push({ time: u, scale: r });
|
|
626
603
|
}
|
|
627
604
|
a.push({ time: 1, scale: 1 });
|
|
628
605
|
let h = 1;
|
|
629
606
|
for (let d = 0; d < a.length; d++)
|
|
630
|
-
if (
|
|
631
|
-
const g = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (
|
|
607
|
+
if (o <= a[d].time) {
|
|
608
|
+
const g = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (o - g) / (a[d].time - g), f = ot(p);
|
|
632
609
|
h = b + (a[d].scale - b) * f;
|
|
633
610
|
break;
|
|
634
611
|
}
|
|
635
612
|
return h * t;
|
|
636
613
|
}
|
|
637
|
-
function de(
|
|
614
|
+
function de(o) {
|
|
638
615
|
const {
|
|
639
616
|
element: t,
|
|
640
617
|
startPosition: i,
|
|
641
618
|
endPosition: e,
|
|
642
|
-
pathConfig:
|
|
619
|
+
pathConfig: n,
|
|
643
620
|
duration: a,
|
|
644
621
|
imageWidth: r,
|
|
645
622
|
imageHeight: s,
|
|
@@ -650,7 +627,7 @@ function de(n) {
|
|
|
650
627
|
startRotation: d,
|
|
651
628
|
scaleConfig: g,
|
|
652
629
|
startScale: b
|
|
653
|
-
} =
|
|
630
|
+
} = o, p = n.type, f = d !== void 0 && d !== c, m = h?.mode === "wobble", y = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, w = f || m, v = b !== void 0 && b !== l, I = g?.mode === "pop", x = g?.pop || { overshoot: 1.2, bounces: 1 };
|
|
654
631
|
if ((p === "linear" || p === "arc") && !w && !(v || I)) {
|
|
655
632
|
u && u();
|
|
656
633
|
return;
|
|
@@ -662,24 +639,24 @@ function de(n) {
|
|
|
662
639
|
switch (p) {
|
|
663
640
|
case "bounce": {
|
|
664
641
|
const N = te(
|
|
665
|
-
|
|
666
|
-
|
|
642
|
+
n.bouncePreset,
|
|
643
|
+
n.bounce
|
|
667
644
|
);
|
|
668
645
|
D = oe(T, i, e, N);
|
|
669
646
|
break;
|
|
670
647
|
}
|
|
671
648
|
case "elastic": {
|
|
672
649
|
const N = ee(
|
|
673
|
-
|
|
674
|
-
|
|
650
|
+
n.elasticPreset,
|
|
651
|
+
n.elastic
|
|
675
652
|
);
|
|
676
653
|
D = ae(T, i, e, N);
|
|
677
654
|
break;
|
|
678
655
|
}
|
|
679
656
|
case "wave": {
|
|
680
657
|
const N = ie(
|
|
681
|
-
|
|
682
|
-
|
|
658
|
+
n.wavePreset,
|
|
659
|
+
n.wave
|
|
683
660
|
);
|
|
684
661
|
D = re(T, i, e, N);
|
|
685
662
|
break;
|
|
@@ -698,8 +675,8 @@ function de(n) {
|
|
|
698
675
|
}
|
|
699
676
|
requestAnimationFrame(O);
|
|
700
677
|
}
|
|
701
|
-
function ue(
|
|
702
|
-
return
|
|
678
|
+
function ue(o) {
|
|
679
|
+
return o === "bounce" || o === "elastic" || o === "wave";
|
|
703
680
|
}
|
|
704
681
|
const fe = {
|
|
705
682
|
radial: "center",
|
|
@@ -723,7 +700,7 @@ class ge {
|
|
|
723
700
|
/**
|
|
724
701
|
* Calculate the starting position for an image's entry animation
|
|
725
702
|
*/
|
|
726
|
-
calculateStartPosition(t, i, e,
|
|
703
|
+
calculateStartPosition(t, i, e, n, a) {
|
|
727
704
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
728
705
|
switch (r) {
|
|
729
706
|
case "nearest-edge":
|
|
@@ -745,7 +722,7 @@ class ge {
|
|
|
745
722
|
t,
|
|
746
723
|
i,
|
|
747
724
|
e,
|
|
748
|
-
|
|
725
|
+
n,
|
|
749
726
|
a
|
|
750
727
|
);
|
|
751
728
|
default:
|
|
@@ -755,28 +732,28 @@ class ge {
|
|
|
755
732
|
/**
|
|
756
733
|
* Calculate start position from the nearest edge (current default behavior)
|
|
757
734
|
*/
|
|
758
|
-
calculateNearestEdge(t, i, e,
|
|
735
|
+
calculateNearestEdge(t, i, e, n) {
|
|
759
736
|
const a = t.x, r = t.y, s = a, c = e.width - a, l = r, u = e.height - r, h = Math.min(s, c, l, u);
|
|
760
737
|
let d = t.x, g = t.y;
|
|
761
|
-
return h === s ? d = -(i.width +
|
|
738
|
+
return h === s ? d = -(i.width + n) : h === c ? d = e.width + n : h === l ? g = -(i.height + n) : g = e.height + n, { x: d, y: g };
|
|
762
739
|
}
|
|
763
740
|
/**
|
|
764
741
|
* Calculate start position from a specific edge
|
|
765
742
|
*/
|
|
766
|
-
calculateEdgePosition(t, i, e,
|
|
743
|
+
calculateEdgePosition(t, i, e, n, a) {
|
|
767
744
|
let r = i.x, s = i.y;
|
|
768
745
|
switch (t) {
|
|
769
746
|
case "top":
|
|
770
747
|
s = -(e.height + a);
|
|
771
748
|
break;
|
|
772
749
|
case "bottom":
|
|
773
|
-
s =
|
|
750
|
+
s = n.height + a;
|
|
774
751
|
break;
|
|
775
752
|
case "left":
|
|
776
753
|
r = -(e.width + a);
|
|
777
754
|
break;
|
|
778
755
|
case "right":
|
|
779
|
-
r =
|
|
756
|
+
r = n.width + a;
|
|
780
757
|
break;
|
|
781
758
|
}
|
|
782
759
|
return { x: r, y: s };
|
|
@@ -785,9 +762,9 @@ class ge {
|
|
|
785
762
|
* Calculate start position from center with scale animation
|
|
786
763
|
*/
|
|
787
764
|
calculateCenterPosition(t, i, e) {
|
|
788
|
-
const
|
|
765
|
+
const n = t.width / 2, a = t.height / 2;
|
|
789
766
|
return {
|
|
790
|
-
x:
|
|
767
|
+
x: n,
|
|
791
768
|
y: a,
|
|
792
769
|
useScale: !0
|
|
793
770
|
// Signal to use scale animation from 0
|
|
@@ -796,14 +773,14 @@ class ge {
|
|
|
796
773
|
/**
|
|
797
774
|
* Calculate start position from a random edge
|
|
798
775
|
*/
|
|
799
|
-
calculateRandomEdge(t, i, e,
|
|
776
|
+
calculateRandomEdge(t, i, e, n) {
|
|
800
777
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
801
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
778
|
+
return this.calculateEdgePosition(r, t, i, e, n);
|
|
802
779
|
}
|
|
803
780
|
/**
|
|
804
781
|
* Calculate start position on a circle around the container
|
|
805
782
|
*/
|
|
806
|
-
calculateCircularPosition(t, i, e,
|
|
783
|
+
calculateCircularPosition(t, i, e, n, a) {
|
|
807
784
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
808
785
|
let c;
|
|
809
786
|
const l = r.radius || "120%";
|
|
@@ -815,7 +792,7 @@ class ge {
|
|
|
815
792
|
} else
|
|
816
793
|
c = typeof l == "number" ? l : 500;
|
|
817
794
|
let u;
|
|
818
|
-
s === "even" ? u =
|
|
795
|
+
s === "even" ? u = n / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
819
796
|
const h = e.width / 2, d = e.height / 2, g = h + Math.cos(u) * c, b = d + Math.sin(u) * c;
|
|
820
797
|
return { x: g, y: b };
|
|
821
798
|
}
|
|
@@ -836,17 +813,17 @@ class ge {
|
|
|
836
813
|
* Build a CSS transform string for the start position
|
|
837
814
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
838
815
|
*/
|
|
839
|
-
buildStartTransform(t, i, e,
|
|
840
|
-
const l = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = c !== void 0 ? c :
|
|
816
|
+
buildStartTransform(t, i, e, n, a, r, s, c) {
|
|
817
|
+
const l = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = c !== void 0 ? c : n, g = a !== void 0 ? -a / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${g}px, ${b}px)` : "translate(-50%, -50%)";
|
|
841
818
|
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${h}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
842
819
|
}
|
|
843
820
|
/**
|
|
844
821
|
* Build the final CSS transform string
|
|
845
822
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
846
823
|
*/
|
|
847
|
-
buildFinalTransform(t, i, e,
|
|
848
|
-
if (e !== void 0 &&
|
|
849
|
-
const a = -e / 2, r = -
|
|
824
|
+
buildFinalTransform(t, i, e, n) {
|
|
825
|
+
if (e !== void 0 && n !== void 0) {
|
|
826
|
+
const a = -e / 2, r = -n / 2;
|
|
850
827
|
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
851
828
|
}
|
|
852
829
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
@@ -912,12 +889,12 @@ class ge {
|
|
|
912
889
|
return t + (Math.random() - 0.5) * 60;
|
|
913
890
|
if (typeof e == "number")
|
|
914
891
|
return e;
|
|
915
|
-
const
|
|
916
|
-
return e.min + Math.random() *
|
|
892
|
+
const n = e.max - e.min;
|
|
893
|
+
return e.min + Math.random() * n;
|
|
917
894
|
}
|
|
918
895
|
case "spin": {
|
|
919
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
920
|
-
return t + e * 360 *
|
|
896
|
+
const e = this.rotationConfig.spinCount ?? 1, n = this.resolveSpinDirection(t);
|
|
897
|
+
return t + e * 360 * n;
|
|
921
898
|
}
|
|
922
899
|
case "random":
|
|
923
900
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -965,7 +942,7 @@ class ge {
|
|
|
965
942
|
amplitude: 15,
|
|
966
943
|
frequency: 3,
|
|
967
944
|
decay: !0
|
|
968
|
-
}, { amplitude:
|
|
945
|
+
}, { amplitude: n, frequency: a, decay: r } = e, s = Math.sin(t * a * Math.PI * 2), c = r ? Math.pow(1 - t, 2) : 1, l = n * s * c;
|
|
969
946
|
return i + l;
|
|
970
947
|
}
|
|
971
948
|
/**
|
|
@@ -1022,7 +999,7 @@ class ge {
|
|
|
1022
999
|
const e = this.scaleConfig.pop || {
|
|
1023
1000
|
overshoot: 1.2,
|
|
1024
1001
|
bounces: 1
|
|
1025
|
-
}, { overshoot:
|
|
1002
|
+
}, { overshoot: n, bounces: a } = e, r = this.generateScaleBounceKeyframes(a, n);
|
|
1026
1003
|
let s = i;
|
|
1027
1004
|
for (let c = 0; c < r.length; c++)
|
|
1028
1005
|
if (t <= r[c].time) {
|
|
@@ -1038,12 +1015,12 @@ class ge {
|
|
|
1038
1015
|
generateScaleBounceKeyframes(t, i) {
|
|
1039
1016
|
const e = [];
|
|
1040
1017
|
e.push({ time: 0.5, scale: i });
|
|
1041
|
-
let
|
|
1018
|
+
let n = i;
|
|
1042
1019
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1043
1020
|
let c = 0.5;
|
|
1044
1021
|
for (let l = 0; l < t; l++) {
|
|
1045
|
-
const u = 1 - (
|
|
1046
|
-
c += s, e.push({ time: c, scale: u }),
|
|
1022
|
+
const u = 1 - (n - 1) * a;
|
|
1023
|
+
c += s, e.push({ time: c, scale: u }), n = 1 + (n - 1) * a * a, c += s, l < t - 1 && e.push({ time: c, scale: n });
|
|
1047
1024
|
}
|
|
1048
1025
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1049
1026
|
}
|
|
@@ -1062,9 +1039,9 @@ class me {
|
|
|
1062
1039
|
* Register an image element for idle animation.
|
|
1063
1040
|
* Starts animation after entry duration completes.
|
|
1064
1041
|
*/
|
|
1065
|
-
register(t, i, e,
|
|
1042
|
+
register(t, i, e, n) {
|
|
1066
1043
|
if (this.entries.has(t)) return;
|
|
1067
|
-
const a =
|
|
1044
|
+
const a = n ?? this.entryDurationMs, r = this.config.startDelay ?? a, s = {
|
|
1068
1045
|
element: t,
|
|
1069
1046
|
index: i,
|
|
1070
1047
|
totalImages: e,
|
|
@@ -1179,23 +1156,23 @@ class me {
|
|
|
1179
1156
|
});
|
|
1180
1157
|
}
|
|
1181
1158
|
_startBlink(t) {
|
|
1182
|
-
const i = { ...Xt, ...this.config.blink }, e = -(Math.random() * i.speed),
|
|
1159
|
+
const i = { ...Xt, ...this.config.blink }, e = -(Math.random() * i.speed), n = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1183
1160
|
let a, r;
|
|
1184
1161
|
i.style === "fade" ? (a = [
|
|
1185
|
-
{ opacity:
|
|
1162
|
+
{ opacity: n, offset: 0 },
|
|
1186
1163
|
{ opacity: 0, offset: 0.5 },
|
|
1187
|
-
{ opacity:
|
|
1164
|
+
{ opacity: n, offset: 1 }
|
|
1188
1165
|
], r = {
|
|
1189
1166
|
duration: i.speed,
|
|
1190
1167
|
delay: e,
|
|
1191
1168
|
iterations: 1 / 0,
|
|
1192
1169
|
easing: "ease-in-out"
|
|
1193
1170
|
}) : (a = [
|
|
1194
|
-
{ opacity:
|
|
1195
|
-
{ opacity:
|
|
1171
|
+
{ opacity: n, offset: 0 },
|
|
1172
|
+
{ opacity: n, offset: i.onRatio },
|
|
1196
1173
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
1197
1174
|
{ opacity: 0, offset: 0.99 },
|
|
1198
|
-
{ opacity:
|
|
1175
|
+
{ opacity: n, offset: 1 }
|
|
1199
1176
|
], r = {
|
|
1200
1177
|
duration: i.speed,
|
|
1201
1178
|
delay: e,
|
|
@@ -1224,8 +1201,8 @@ class me {
|
|
|
1224
1201
|
if (this.togetherSpeed = t, this.togetherRafId !== null) return;
|
|
1225
1202
|
const i = () => {
|
|
1226
1203
|
const e = performance.now() % this.togetherSpeed;
|
|
1227
|
-
for (const
|
|
1228
|
-
!
|
|
1204
|
+
for (const n of this.entries.values())
|
|
1205
|
+
!n.stopped && !n.paused && n.animation && (n.animation.currentTime = e);
|
|
1229
1206
|
this.togetherRafId = requestAnimationFrame(i);
|
|
1230
1207
|
};
|
|
1231
1208
|
this.togetherRafId = requestAnimationFrame(i);
|
|
@@ -1252,7 +1229,7 @@ class pe {
|
|
|
1252
1229
|
* @returns Array of layout objects with position, rotation, scale
|
|
1253
1230
|
*/
|
|
1254
1231
|
generate(t, i, e = {}) {
|
|
1255
|
-
const
|
|
1232
|
+
const n = [], { width: a, height: r } = i, s = this.config.spacing.padding, c = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || g !== 1, f = c * 1.5 / 2, m = c / 2, y = a - s - f, w = r - s - m, v = s + f, I = s + m;
|
|
1256
1233
|
for (let x = 0; x < t; x++) {
|
|
1257
1234
|
const R = this.random(v, y), z = this.random(I, w), L = l === "random" ? this.random(u, h) : 0, _ = b ? this.random(d, g) : 1, O = c * _, H = {
|
|
1258
1235
|
id: x,
|
|
@@ -1262,9 +1239,9 @@ class pe {
|
|
|
1262
1239
|
scale: _,
|
|
1263
1240
|
baseSize: O
|
|
1264
1241
|
};
|
|
1265
|
-
|
|
1242
|
+
n.push(H);
|
|
1266
1243
|
}
|
|
1267
|
-
return
|
|
1244
|
+
return n;
|
|
1268
1245
|
}
|
|
1269
1246
|
/**
|
|
1270
1247
|
* Utility: Generate random number between min and max
|
|
@@ -1288,7 +1265,7 @@ class be {
|
|
|
1288
1265
|
* @returns Array of layout objects with position, rotation, scale
|
|
1289
1266
|
*/
|
|
1290
1267
|
generate(t, i, e = {}) {
|
|
1291
|
-
const
|
|
1268
|
+
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, g = h !== 1 || d !== 1, b = this.config.scaleDecay ?? 0, p = {
|
|
1292
1269
|
...Ht,
|
|
1293
1270
|
...this.config.radial
|
|
1294
1271
|
}, f = e.fixedHeight ?? s, m = a / 2, y = r / 2, w = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, I = Math.max(f * 0.8, Math.min(
|
|
@@ -1297,7 +1274,7 @@ class be {
|
|
|
1297
1274
|
));
|
|
1298
1275
|
if (t > 0) {
|
|
1299
1276
|
const z = g ? this.random(h, d) : 1, L = f * z;
|
|
1300
|
-
|
|
1277
|
+
n.push({
|
|
1301
1278
|
id: 0,
|
|
1302
1279
|
x: m,
|
|
1303
1280
|
y,
|
|
@@ -1323,7 +1300,7 @@ class be {
|
|
|
1323
1300
|
const P = C * 1.5 / 2, j = C / 2;
|
|
1324
1301
|
$ - P < v ? $ = v + P : $ + P > a - v && ($ = a - v - P), F - j < v ? F = v + j : F + j > r - v && (F = r - v - j);
|
|
1325
1302
|
const Y = c === "random" ? this.random(l, u) : 0;
|
|
1326
|
-
|
|
1303
|
+
n.push({
|
|
1327
1304
|
id: x,
|
|
1328
1305
|
x: $,
|
|
1329
1306
|
y: F,
|
|
@@ -1336,7 +1313,7 @@ class be {
|
|
|
1336
1313
|
}
|
|
1337
1314
|
R++;
|
|
1338
1315
|
}
|
|
1339
|
-
return
|
|
1316
|
+
return n;
|
|
1340
1317
|
}
|
|
1341
1318
|
/**
|
|
1342
1319
|
* Estimate image width based on height
|
|
@@ -1397,7 +1374,7 @@ class ve {
|
|
|
1397
1374
|
* @returns Array of layout objects with position, rotation, scale
|
|
1398
1375
|
*/
|
|
1399
1376
|
generate(t, i, e = {}) {
|
|
1400
|
-
const
|
|
1377
|
+
const n = [], { width: a, height: r } = i, s = { ...ye, ...this.config.grid }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, g = h !== 1 || d !== 1, b = a - 2 * c, p = r - 2 * c, { columns: f, rows: m } = this.calculateGridDimensions(
|
|
1401
1378
|
t,
|
|
1402
1379
|
b,
|
|
1403
1380
|
p,
|
|
@@ -1448,7 +1425,7 @@ class ve {
|
|
|
1448
1425
|
s.jitter > 0 ? dt = this.random(q * s.jitter, W * s.jitter) : dt = this.random(q, W);
|
|
1449
1426
|
}
|
|
1450
1427
|
let ut;
|
|
1451
|
-
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1,
|
|
1428
|
+
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1, n.push({
|
|
1452
1429
|
id: C,
|
|
1453
1430
|
x: Y,
|
|
1454
1431
|
y: J,
|
|
@@ -1458,12 +1435,12 @@ class ve {
|
|
|
1458
1435
|
zIndex: ut
|
|
1459
1436
|
});
|
|
1460
1437
|
}
|
|
1461
|
-
return
|
|
1438
|
+
return n;
|
|
1462
1439
|
}
|
|
1463
1440
|
/**
|
|
1464
1441
|
* Calculate optimal grid dimensions based on image count and container
|
|
1465
1442
|
*/
|
|
1466
|
-
calculateGridDimensions(t, i, e,
|
|
1443
|
+
calculateGridDimensions(t, i, e, n, a) {
|
|
1467
1444
|
let r, s;
|
|
1468
1445
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1469
1446
|
r = a.columns, s = a.rows;
|
|
@@ -1504,7 +1481,7 @@ class Ee {
|
|
|
1504
1481
|
* @returns Array of layout objects with position, rotation, scale
|
|
1505
1482
|
*/
|
|
1506
1483
|
generate(t, i, e = {}) {
|
|
1507
|
-
const
|
|
1484
|
+
const n = [], { width: a, height: r } = i, s = { ...xe, ...this.config.spiral }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = g !== 1 || b !== 1, f = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, y = r / 2, w = Math.min(
|
|
1508
1485
|
m - c - l / 2,
|
|
1509
1486
|
y - c - l / 2
|
|
1510
1487
|
), v = s.direction === "clockwise" ? -1 : 1;
|
|
@@ -1526,7 +1503,7 @@ class Ee {
|
|
|
1526
1503
|
F = s.spiralType === "golden" ? j : P * 0.1 + j * 0.9;
|
|
1527
1504
|
} else u === "tangent" && (F = this.calculateSpiralTangent(x, R, s));
|
|
1528
1505
|
const X = t - I;
|
|
1529
|
-
|
|
1506
|
+
n.push({
|
|
1530
1507
|
id: I,
|
|
1531
1508
|
x: C,
|
|
1532
1509
|
y: $,
|
|
@@ -1536,47 +1513,47 @@ class Ee {
|
|
|
1536
1513
|
zIndex: X
|
|
1537
1514
|
});
|
|
1538
1515
|
}
|
|
1539
|
-
return
|
|
1516
|
+
return n;
|
|
1540
1517
|
}
|
|
1541
1518
|
/**
|
|
1542
1519
|
* Calculate tangent angle for spiral curve at given position
|
|
1543
1520
|
* This aligns the image along the spiral's direction of travel
|
|
1544
1521
|
*/
|
|
1545
1522
|
calculateSpiralTangent(t, i, e) {
|
|
1546
|
-
let
|
|
1523
|
+
let n;
|
|
1547
1524
|
if (e.spiralType === "golden")
|
|
1548
|
-
|
|
1525
|
+
n = t + Math.PI / 2;
|
|
1549
1526
|
else if (e.spiralType === "archimedean") {
|
|
1550
1527
|
const r = 1 / e.tightness, s = Math.atan(i / r);
|
|
1551
|
-
|
|
1528
|
+
n = t + s;
|
|
1552
1529
|
} else {
|
|
1553
1530
|
const r = 0.15 / e.tightness, s = Math.atan(1 / r);
|
|
1554
|
-
|
|
1531
|
+
n = t + s;
|
|
1555
1532
|
}
|
|
1556
|
-
return
|
|
1533
|
+
return n * 180 / Math.PI % 360 - 90;
|
|
1557
1534
|
}
|
|
1558
1535
|
/**
|
|
1559
1536
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1560
1537
|
* Creates even distribution like sunflower seeds
|
|
1561
1538
|
*/
|
|
1562
|
-
calculateGoldenRadius(t, i, e,
|
|
1563
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1539
|
+
calculateGoldenRadius(t, i, e, n) {
|
|
1540
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / n;
|
|
1564
1541
|
return Math.min(r, e);
|
|
1565
1542
|
}
|
|
1566
1543
|
/**
|
|
1567
1544
|
* Calculate radius for Archimedean spiral
|
|
1568
1545
|
* r = a + b*θ (constant spacing between arms)
|
|
1569
1546
|
*/
|
|
1570
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1571
|
-
const a = i * 0.5 *
|
|
1547
|
+
calculateArchimedeanRadius(t, i, e, n) {
|
|
1548
|
+
const a = i * 0.5 * n;
|
|
1572
1549
|
return t / a * e;
|
|
1573
1550
|
}
|
|
1574
1551
|
/**
|
|
1575
1552
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1576
1553
|
* r = a * e^(b*θ)
|
|
1577
1554
|
*/
|
|
1578
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1579
|
-
const a = e * 0.05, r = 0.15 /
|
|
1555
|
+
calculateLogarithmicRadius(t, i, e, n) {
|
|
1556
|
+
const a = e * 0.05, r = 0.15 / n, s = a * Math.exp(r * t), c = i * 0.3 * n, l = a * Math.exp(r * c);
|
|
1580
1557
|
return s / l * e;
|
|
1581
1558
|
}
|
|
1582
1559
|
/**
|
|
@@ -1606,7 +1583,7 @@ class Ie {
|
|
|
1606
1583
|
* @returns Array of layout objects with position, rotation, scale
|
|
1607
1584
|
*/
|
|
1608
1585
|
generate(t, i, e = {}) {
|
|
1609
|
-
const
|
|
1586
|
+
const n = [], { width: a, height: r } = i, s = { ...Se, ...this.config.cluster }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = g !== 1 || b !== 1, f = this.calculateClusterCount(
|
|
1610
1587
|
t,
|
|
1611
1588
|
s.clusterCount,
|
|
1612
1589
|
a,
|
|
@@ -1639,7 +1616,7 @@ class Ie {
|
|
|
1639
1616
|
const M = T * 1.5 / 2, A = T / 2;
|
|
1640
1617
|
D = Math.max(c + M, Math.min(D, a - c - M)), G = Math.max(c + A, Math.min(G, r - c - A));
|
|
1641
1618
|
const N = u === "random" ? this.random(h, d) : 0, C = Math.sqrt(z * z + L * L) / I.spread, $ = Math.round((1 - C) * 50) + 1;
|
|
1642
|
-
|
|
1619
|
+
n.push({
|
|
1643
1620
|
id: w,
|
|
1644
1621
|
x: D,
|
|
1645
1622
|
y: G,
|
|
@@ -1650,24 +1627,24 @@ class Ie {
|
|
|
1650
1627
|
}), w++;
|
|
1651
1628
|
}
|
|
1652
1629
|
}
|
|
1653
|
-
return
|
|
1630
|
+
return n;
|
|
1654
1631
|
}
|
|
1655
1632
|
/**
|
|
1656
1633
|
* Calculate optimal number of clusters based on image count and container
|
|
1657
1634
|
*/
|
|
1658
|
-
calculateClusterCount(t, i, e,
|
|
1635
|
+
calculateClusterCount(t, i, e, n, a) {
|
|
1659
1636
|
if (i !== "auto")
|
|
1660
1637
|
return Math.max(1, Math.min(i, t));
|
|
1661
1638
|
const s = Math.max(1, Math.ceil(t / 8)), c = Math.floor(
|
|
1662
|
-
e / a * (
|
|
1639
|
+
e / a * (n / a) * 0.6
|
|
1663
1640
|
);
|
|
1664
1641
|
return Math.max(1, Math.min(s, c, 10));
|
|
1665
1642
|
}
|
|
1666
1643
|
/**
|
|
1667
1644
|
* Generate cluster center positions with spacing constraints
|
|
1668
1645
|
*/
|
|
1669
|
-
generateClusterCenters(t, i, e,
|
|
1670
|
-
const r = [], c =
|
|
1646
|
+
generateClusterCenters(t, i, e, n, a) {
|
|
1647
|
+
const r = [], c = n + a.clusterSpread, l = i - n - a.clusterSpread, u = n + a.clusterSpread, h = e - n - a.clusterSpread;
|
|
1671
1648
|
for (let d = 0; d < t; d++) {
|
|
1672
1649
|
let g = null, b = -1;
|
|
1673
1650
|
for (let p = 0; p < 100; p++) {
|
|
@@ -1724,7 +1701,7 @@ class Re {
|
|
|
1724
1701
|
* @returns Array of layout objects with position, rotation, scale
|
|
1725
1702
|
*/
|
|
1726
1703
|
generate(t, i, e = {}) {
|
|
1727
|
-
const
|
|
1704
|
+
const n = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || g !== 1, p = e.fixedHeight ?? s, f = {
|
|
1728
1705
|
...kt,
|
|
1729
1706
|
...this.config.wave
|
|
1730
1707
|
}, { rows: m, amplitude: y, frequency: w, phaseShift: v, synchronization: I } = f, x = Math.ceil(t / m), L = p * 1.5 / 2, _ = c + L, O = a - c - L, H = O - _, k = x > 1 ? H / (x - 1) : 0, T = c + y + p / 2, D = r - c - y - p / 2, G = D - T, U = m > 1 ? G / (m - 1) : 0;
|
|
@@ -1738,7 +1715,7 @@ class Re {
|
|
|
1738
1715
|
let J = 0;
|
|
1739
1716
|
l === "tangent" ? J = this.calculateRotation($, a, y, w, B) : l === "random" && (J = this.random(u, h));
|
|
1740
1717
|
const K = Y * 1.5 / 2, ct = Y / 2, it = c + K, nt = a - c - K, lt = c + ct, ht = r - c - ct;
|
|
1741
|
-
|
|
1718
|
+
n.push({
|
|
1742
1719
|
id: M,
|
|
1743
1720
|
x: Math.max(it, Math.min(X, nt)),
|
|
1744
1721
|
y: Math.max(lt, Math.min(P, ht)),
|
|
@@ -1749,7 +1726,7 @@ class Re {
|
|
|
1749
1726
|
}), M++;
|
|
1750
1727
|
}
|
|
1751
1728
|
}
|
|
1752
|
-
return
|
|
1729
|
+
return n;
|
|
1753
1730
|
}
|
|
1754
1731
|
/**
|
|
1755
1732
|
* Calculate Y position displacement on wave curve
|
|
@@ -1760,9 +1737,9 @@ class Re {
|
|
|
1760
1737
|
* @param phase - Phase offset
|
|
1761
1738
|
* @returns Y displacement from baseline
|
|
1762
1739
|
*/
|
|
1763
|
-
calculateWaveY(t, i, e,
|
|
1740
|
+
calculateWaveY(t, i, e, n, a) {
|
|
1764
1741
|
const r = t / i;
|
|
1765
|
-
return e * Math.sin(
|
|
1742
|
+
return e * Math.sin(n * r * 2 * Math.PI + a);
|
|
1766
1743
|
}
|
|
1767
1744
|
/**
|
|
1768
1745
|
* Calculate rotation based on wave tangent
|
|
@@ -1773,8 +1750,8 @@ class Re {
|
|
|
1773
1750
|
* @param phase - Phase offset
|
|
1774
1751
|
* @returns Rotation angle in degrees
|
|
1775
1752
|
*/
|
|
1776
|
-
calculateRotation(t, i, e,
|
|
1777
|
-
const r = t / i, s = e *
|
|
1753
|
+
calculateRotation(t, i, e, n, a) {
|
|
1754
|
+
const r = t / i, s = e * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + a) / i;
|
|
1778
1755
|
return Math.atan(s) * (180 / Math.PI);
|
|
1779
1756
|
}
|
|
1780
1757
|
/**
|
|
@@ -1803,17 +1780,17 @@ const xt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1803
1780
|
[0, 50]
|
|
1804
1781
|
// left
|
|
1805
1782
|
], Te = Et[1][0] / xt, Ae = Et[2][1] / xt;
|
|
1806
|
-
function Ce(
|
|
1783
|
+
function Ce(o) {
|
|
1807
1784
|
return {
|
|
1808
|
-
colStep: Te *
|
|
1809
|
-
rowOffset: Ae *
|
|
1785
|
+
colStep: Te * o,
|
|
1786
|
+
rowOffset: Ae * o
|
|
1810
1787
|
};
|
|
1811
1788
|
}
|
|
1812
|
-
function Le(
|
|
1789
|
+
function Le(o, t, i, e, n, a) {
|
|
1813
1790
|
const { colStep: r } = Ce(a);
|
|
1814
1791
|
return {
|
|
1815
|
-
px: e + r *
|
|
1816
|
-
py:
|
|
1792
|
+
px: e + r * o,
|
|
1793
|
+
py: n + a * (t + o / 2)
|
|
1817
1794
|
};
|
|
1818
1795
|
}
|
|
1819
1796
|
const Me = [
|
|
@@ -1824,13 +1801,13 @@ const Me = [
|
|
|
1824
1801
|
[0, -1, 1],
|
|
1825
1802
|
[1, -1, 0]
|
|
1826
1803
|
];
|
|
1827
|
-
function Fe(
|
|
1828
|
-
if (
|
|
1804
|
+
function Fe(o) {
|
|
1805
|
+
if (o === 0) return [[0, 0, 0]];
|
|
1829
1806
|
const t = [];
|
|
1830
|
-
let [i, e,
|
|
1807
|
+
let [i, e, n] = [0, -o, o];
|
|
1831
1808
|
for (const [a, r, s] of Me)
|
|
1832
|
-
for (let c = 0; c <
|
|
1833
|
-
t.push([i, e,
|
|
1809
|
+
for (let c = 0; c < o; c++)
|
|
1810
|
+
t.push([i, e, n]), i += a, e += r, n += s;
|
|
1834
1811
|
return t;
|
|
1835
1812
|
}
|
|
1836
1813
|
class ze {
|
|
@@ -1840,7 +1817,7 @@ class ze {
|
|
|
1840
1817
|
this.config = t;
|
|
1841
1818
|
}
|
|
1842
1819
|
generate(t, i, e = {}) {
|
|
1843
|
-
const
|
|
1820
|
+
const n = [], { width: a, height: r } = i, s = a / 2, c = r / 2, l = e.fixedHeight ?? 200, h = {
|
|
1844
1821
|
...Nt,
|
|
1845
1822
|
...this.config.honeycomb
|
|
1846
1823
|
}.spacing ?? 0, d = l + h;
|
|
@@ -1850,7 +1827,7 @@ class ze {
|
|
|
1850
1827
|
for (const [f, m, y] of p) {
|
|
1851
1828
|
if (g >= t) break;
|
|
1852
1829
|
const { px: w, py: v } = Le(f, m, y, s, c, d);
|
|
1853
|
-
|
|
1830
|
+
n.push({
|
|
1854
1831
|
id: g,
|
|
1855
1832
|
x: w,
|
|
1856
1833
|
y: v,
|
|
@@ -1863,7 +1840,7 @@ class ze {
|
|
|
1863
1840
|
}
|
|
1864
1841
|
b++;
|
|
1865
1842
|
}
|
|
1866
|
-
return
|
|
1843
|
+
return n;
|
|
1867
1844
|
}
|
|
1868
1845
|
}
|
|
1869
1846
|
class Oe {
|
|
@@ -1900,10 +1877,10 @@ class Oe {
|
|
|
1900
1877
|
* @returns Array of layout objects with position, rotation, scale
|
|
1901
1878
|
*/
|
|
1902
1879
|
generateLayout(t, i, e = {}) {
|
|
1903
|
-
const
|
|
1904
|
-
return
|
|
1880
|
+
const n = this.placementLayout.generate(t, i, e);
|
|
1881
|
+
return n.forEach((a) => {
|
|
1905
1882
|
this.layouts.set(a.id, a);
|
|
1906
|
-
}),
|
|
1883
|
+
}), n;
|
|
1907
1884
|
}
|
|
1908
1885
|
/**
|
|
1909
1886
|
* Get the original layout state for an image
|
|
@@ -1956,8 +1933,8 @@ class Oe {
|
|
|
1956
1933
|
return;
|
|
1957
1934
|
if (typeof e == "number")
|
|
1958
1935
|
return e;
|
|
1959
|
-
const
|
|
1960
|
-
return a === "mobile" ?
|
|
1936
|
+
const n = e, a = this.resolveBreakpoint(t);
|
|
1937
|
+
return a === "mobile" ? n.mobile ?? n.tablet ?? n.screen : a === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1961
1938
|
}
|
|
1962
1939
|
/**
|
|
1963
1940
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1967,8 +1944,8 @@ class Oe {
|
|
|
1967
1944
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1968
1945
|
* @returns Calculated sizing result with height
|
|
1969
1946
|
*/
|
|
1970
|
-
calculateAdaptiveSize(t, i, e,
|
|
1971
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1947
|
+
calculateAdaptiveSize(t, i, e, n) {
|
|
1948
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1972
1949
|
if (r !== void 0)
|
|
1973
1950
|
return { height: r };
|
|
1974
1951
|
const s = a?.minSize ?? 50, c = a?.maxSize ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, p = h * d * l / i;
|
|
@@ -1988,9 +1965,9 @@ class Oe {
|
|
|
1988
1965
|
*/
|
|
1989
1966
|
honeycombMaxImageHeight(t, i) {
|
|
1990
1967
|
if (t <= 1) return 1 / 0;
|
|
1991
|
-
let e = 0,
|
|
1992
|
-
for (;
|
|
1993
|
-
e++,
|
|
1968
|
+
let e = 0, n = 1;
|
|
1969
|
+
for (; n < t; )
|
|
1970
|
+
e++, n += 6 * e;
|
|
1994
1971
|
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2, c = i.height / 2, l = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), h = (c - a - r * e) / (e + 0.5), d = (s - a - l * r * e) / (l * e + u);
|
|
1995
1972
|
return Math.max(10, Math.min(h, d));
|
|
1996
1973
|
}
|
|
@@ -2001,7 +1978,7 @@ class Oe {
|
|
|
2001
1978
|
return Math.max(i, Math.min(e, t));
|
|
2002
1979
|
}
|
|
2003
1980
|
}
|
|
2004
|
-
var S = /* @__PURE__ */ ((
|
|
1981
|
+
var S = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(S || {});
|
|
2005
1982
|
const Ct = {
|
|
2006
1983
|
// Geometric shapes - uses percentages for responsive sizing
|
|
2007
1984
|
circle: "circle(50%)",
|
|
@@ -2049,96 +2026,96 @@ const Ct = {
|
|
|
2049
2026
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
2050
2027
|
}
|
|
2051
2028
|
};
|
|
2052
|
-
function $e(
|
|
2053
|
-
if (
|
|
2054
|
-
return
|
|
2029
|
+
function $e(o) {
|
|
2030
|
+
if (o)
|
|
2031
|
+
return o in Ct ? Ct[o] : o;
|
|
2055
2032
|
}
|
|
2056
|
-
function Pe(
|
|
2057
|
-
const e = De[
|
|
2033
|
+
function Pe(o, t, i) {
|
|
2034
|
+
const e = De[o];
|
|
2058
2035
|
if (!e) return "";
|
|
2059
|
-
const
|
|
2060
|
-
if (
|
|
2061
|
-
return `circle(${Math.round(50 *
|
|
2062
|
-
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 *
|
|
2036
|
+
const n = t / e.refHeight;
|
|
2037
|
+
if (o === "circle")
|
|
2038
|
+
return `circle(${Math.round(50 * n * 100) / 100}px)`;
|
|
2039
|
+
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 * n, c = (Math.min(...r) + Math.max(...r)) / 2 * n, l = (Math.max(...a) - Math.min(...a)) * n, u = (i ?? l) / 2, h = t / 2, d = u - s, g = h - c;
|
|
2063
2040
|
return `polygon(${e.points.map(([p, f]) => {
|
|
2064
|
-
const m = Math.round((p *
|
|
2041
|
+
const m = Math.round((p * n + d) * 100) / 100, y = Math.round((f * n + g) * 100) / 100;
|
|
2065
2042
|
return `${m}px ${y}px`;
|
|
2066
2043
|
}).join(", ")})`;
|
|
2067
2044
|
}
|
|
2068
|
-
function _e(
|
|
2069
|
-
return
|
|
2045
|
+
function _e(o) {
|
|
2046
|
+
return o in mt;
|
|
2070
2047
|
}
|
|
2071
|
-
function Ue(
|
|
2072
|
-
return
|
|
2048
|
+
function Ue(o) {
|
|
2049
|
+
return o ? _e(o) ? mt[o] : o : mt.md;
|
|
2073
2050
|
}
|
|
2074
|
-
function He(
|
|
2075
|
-
if (!
|
|
2051
|
+
function He(o) {
|
|
2052
|
+
if (!o) return "";
|
|
2076
2053
|
const t = [];
|
|
2077
|
-
if (
|
|
2078
|
-
if (typeof
|
|
2079
|
-
t.push(`drop-shadow(${
|
|
2054
|
+
if (o.grayscale !== void 0 && t.push(`grayscale(${o.grayscale})`), o.blur !== void 0 && t.push(`blur(${o.blur}px)`), o.brightness !== void 0 && t.push(`brightness(${o.brightness})`), o.contrast !== void 0 && t.push(`contrast(${o.contrast})`), o.saturate !== void 0 && t.push(`saturate(${o.saturate})`), o.opacity !== void 0 && t.push(`opacity(${o.opacity})`), o.sepia !== void 0 && t.push(`sepia(${o.sepia})`), o.hueRotate !== void 0 && t.push(`hue-rotate(${o.hueRotate}deg)`), o.invert !== void 0 && t.push(`invert(${o.invert})`), o.dropShadow !== void 0)
|
|
2055
|
+
if (typeof o.dropShadow == "string")
|
|
2056
|
+
t.push(`drop-shadow(${o.dropShadow})`);
|
|
2080
2057
|
else {
|
|
2081
|
-
const i =
|
|
2058
|
+
const i = o.dropShadow;
|
|
2082
2059
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
2083
2060
|
}
|
|
2084
2061
|
return t.join(" ");
|
|
2085
2062
|
}
|
|
2086
|
-
function tt(
|
|
2087
|
-
if (!
|
|
2063
|
+
function tt(o) {
|
|
2064
|
+
if (!o || o.style === "none" || o.width === 0)
|
|
2088
2065
|
return "none";
|
|
2089
|
-
const t =
|
|
2066
|
+
const t = o.width ?? 0, i = o.style ?? "solid", e = o.color ?? "#000000";
|
|
2090
2067
|
return `${t}px ${i} ${e}`;
|
|
2091
2068
|
}
|
|
2092
|
-
function et(
|
|
2093
|
-
if (!
|
|
2069
|
+
function et(o, t, i) {
|
|
2070
|
+
if (!o) return {};
|
|
2094
2071
|
const e = {};
|
|
2095
|
-
if (
|
|
2096
|
-
const s =
|
|
2097
|
-
|
|
2098
|
-
} else
|
|
2099
|
-
if (
|
|
2100
|
-
const s =
|
|
2072
|
+
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
2073
|
+
const s = o.border?.radius ?? 0;
|
|
2074
|
+
o.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : s && (e.borderTopLeftRadius = `${s}px`), o.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${o.borderRadiusTopRight}px` : s && (e.borderTopRightRadius = `${s}px`), o.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : s && (e.borderBottomRightRadius = `${s}px`), o.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : s && (e.borderBottomLeftRadius = `${s}px`);
|
|
2075
|
+
} else o.border?.radius !== void 0 && (e.borderRadius = `${o.border.radius}px`);
|
|
2076
|
+
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
2077
|
+
const s = o.border || {}, c = { ...s, ...o.borderTop }, l = { ...s, ...o.borderRight }, u = { ...s, ...o.borderBottom }, h = { ...s, ...o.borderLeft };
|
|
2101
2078
|
e.borderTop = tt(c), e.borderRight = tt(l), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
2102
|
-
} else
|
|
2103
|
-
|
|
2104
|
-
const r = He(
|
|
2105
|
-
if (e.filter = r || "none",
|
|
2106
|
-
const s =
|
|
2107
|
-
e.outline = `${s}px ${c} ${l}`,
|
|
2108
|
-
}
|
|
2109
|
-
if (
|
|
2079
|
+
} else o.border && (e.border = tt(o.border));
|
|
2080
|
+
o.shadow !== void 0 && (e.boxShadow = Ue(o.shadow));
|
|
2081
|
+
const r = He(o.filter);
|
|
2082
|
+
if (e.filter = r || "none", o.opacity !== void 0 && (e.opacity = String(o.opacity)), o.cursor !== void 0 && (e.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
2083
|
+
const s = o.outline.width ?? 0, c = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
2084
|
+
e.outline = `${s}px ${c} ${l}`, o.outline.offset !== void 0 && (e.outlineOffset = `${o.outline.offset}px`);
|
|
2085
|
+
}
|
|
2086
|
+
if (o.objectFit !== void 0 && (e.objectFit = o.objectFit), o.aspectRatio !== void 0 && (e.aspectRatio = o.aspectRatio), o.clipPath !== void 0) {
|
|
2110
2087
|
let s;
|
|
2111
|
-
const c = typeof
|
|
2088
|
+
const c = typeof o.clipPath == "object" && o.clipPath !== null && "shape" in o.clipPath, l = c ? o.clipPath : void 0;
|
|
2112
2089
|
if (l?.mode === "height-relative" && t)
|
|
2113
2090
|
s = Pe(l.shape, t, i);
|
|
2114
2091
|
else {
|
|
2115
|
-
const u = c && l ? l.shape :
|
|
2092
|
+
const u = c && l ? l.shape : o.clipPath;
|
|
2116
2093
|
s = $e(u);
|
|
2117
2094
|
}
|
|
2118
2095
|
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
2119
2096
|
}
|
|
2120
2097
|
return e;
|
|
2121
2098
|
}
|
|
2122
|
-
function ke(
|
|
2123
|
-
t.borderRadius !== void 0 && (
|
|
2099
|
+
function ke(o, t) {
|
|
2100
|
+
t.borderRadius !== void 0 && (o.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (o.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (o.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (o.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (o.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (o.style.border = t.border), t.borderTop !== void 0 && (o.style.borderTop = t.borderTop), t.borderRight !== void 0 && (o.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (o.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (o.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (o.style.boxShadow = t.boxShadow), t.filter !== void 0 && (o.style.filter = t.filter), t.opacity !== void 0 && (o.style.opacity = t.opacity), t.cursor !== void 0 && (o.style.cursor = t.cursor), t.outline !== void 0 && (o.style.outline = t.outline), t.outlineOffset !== void 0 && (o.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (o.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (o.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (o.style.clipPath = t.clipPath), t.overflow !== void 0 && (o.style.overflow = t.overflow);
|
|
2124
2101
|
}
|
|
2125
|
-
function gt(
|
|
2126
|
-
const
|
|
2127
|
-
ke(
|
|
2102
|
+
function gt(o, t, i, e) {
|
|
2103
|
+
const n = et(t, i, e);
|
|
2104
|
+
ke(o, n);
|
|
2128
2105
|
}
|
|
2129
|
-
function $t(
|
|
2130
|
-
return
|
|
2106
|
+
function $t(o) {
|
|
2107
|
+
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
2131
2108
|
}
|
|
2132
|
-
function st(
|
|
2109
|
+
function st(o, t) {
|
|
2133
2110
|
const i = $t(t);
|
|
2134
2111
|
i && i.split(" ").forEach((e) => {
|
|
2135
|
-
e.trim() &&
|
|
2112
|
+
e.trim() && o.classList.add(e.trim());
|
|
2136
2113
|
});
|
|
2137
2114
|
}
|
|
2138
|
-
function pt(
|
|
2115
|
+
function pt(o, t) {
|
|
2139
2116
|
const i = $t(t);
|
|
2140
2117
|
i && i.split(" ").forEach((e) => {
|
|
2141
|
-
e.trim() &&
|
|
2118
|
+
e.trim() && o.classList.remove(e.trim());
|
|
2142
2119
|
});
|
|
2143
2120
|
}
|
|
2144
2121
|
const Lt = {
|
|
@@ -2178,9 +2155,9 @@ class Ne {
|
|
|
2178
2155
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2179
2156
|
*/
|
|
2180
2157
|
calculateFocusDimensions(t, i, e) {
|
|
2181
|
-
const
|
|
2158
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), a = e.height * n, r = t / i;
|
|
2182
2159
|
let s = a, c = s * r;
|
|
2183
|
-
const l = e.width *
|
|
2160
|
+
const l = e.width * n;
|
|
2184
2161
|
return c > l && (c = l, s = c / r), { width: c, height: s };
|
|
2185
2162
|
}
|
|
2186
2163
|
/**
|
|
@@ -2188,7 +2165,7 @@ class Ne {
|
|
|
2188
2165
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2189
2166
|
*/
|
|
2190
2167
|
calculateFocusTransform(t, i) {
|
|
2191
|
-
const e = t.width / 2,
|
|
2168
|
+
const e = t.width / 2, n = t.height / 2, a = e - i.x, r = n - i.y;
|
|
2192
2169
|
return {
|
|
2193
2170
|
x: a,
|
|
2194
2171
|
y: r,
|
|
@@ -2203,8 +2180,8 @@ class Ne {
|
|
|
2203
2180
|
buildDimensionZoomTransform(t) {
|
|
2204
2181
|
const i = ["translate(-50%, -50%)"];
|
|
2205
2182
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
2206
|
-
const e = t.x ?? 0,
|
|
2207
|
-
i.push(`translate(${e}px, ${
|
|
2183
|
+
const e = t.x ?? 0, n = t.y ?? 0;
|
|
2184
|
+
i.push(`translate(${e}px, ${n}px)`);
|
|
2208
2185
|
}
|
|
2209
2186
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
2210
2187
|
}
|
|
@@ -2212,13 +2189,13 @@ class Ne {
|
|
|
2212
2189
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2213
2190
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2214
2191
|
*/
|
|
2215
|
-
animateWithDimensions(t, i, e,
|
|
2192
|
+
animateWithDimensions(t, i, e, n, a, r, s, c) {
|
|
2216
2193
|
const l = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2217
2194
|
return t.style.transition = "none", t.animate(
|
|
2218
2195
|
[
|
|
2219
2196
|
{
|
|
2220
2197
|
transform: l,
|
|
2221
|
-
width: `${
|
|
2198
|
+
width: `${n}px`,
|
|
2222
2199
|
height: `${a}px`
|
|
2223
2200
|
},
|
|
2224
2201
|
{
|
|
@@ -2259,10 +2236,10 @@ class Ne {
|
|
|
2259
2236
|
* This ensures clip-path changes smoothly as width/height animate
|
|
2260
2237
|
*/
|
|
2261
2238
|
startClipPathAnimation(t, i, e) {
|
|
2262
|
-
let
|
|
2263
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
2239
|
+
let n = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2240
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (n = { ...n, clipPath: void 0 });
|
|
2264
2241
|
const a = () => {
|
|
2265
|
-
const r = t.offsetHeight, s = t.offsetWidth, c = et(
|
|
2242
|
+
const r = t.offsetHeight, s = t.offsetWidth, c = et(n, r, s);
|
|
2266
2243
|
c.clipPath !== void 0 ? t.style.clipPath = c.clipPath : t.style.clipPath = "unset", c.overflow !== void 0 && (t.style.overflow = c.overflow), i.animation.playState === "running" && requestAnimationFrame(a);
|
|
2267
2244
|
};
|
|
2268
2245
|
requestAnimationFrame(a);
|
|
@@ -2273,12 +2250,12 @@ class Ne {
|
|
|
2273
2250
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2274
2251
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2275
2252
|
*/
|
|
2276
|
-
startFocusAnimation(t, i, e,
|
|
2253
|
+
startFocusAnimation(t, i, e, n, a) {
|
|
2277
2254
|
const r = t.style.zIndex || "", s = t.offsetWidth, c = t.offsetHeight, l = this.calculateFocusDimensions(s, c, i), u = this.calculateFocusTransform(i, e);
|
|
2278
2255
|
this.animationEngine.cancelAllAnimations(t);
|
|
2279
2256
|
const h = this.config.animationDuration ?? 600;
|
|
2280
2257
|
this.applyFocusedStyling(t, Lt.FOCUSING);
|
|
2281
|
-
const d =
|
|
2258
|
+
const d = n ?? {
|
|
2282
2259
|
x: 0,
|
|
2283
2260
|
y: 0,
|
|
2284
2261
|
rotation: e.rotation,
|
|
@@ -2325,11 +2302,11 @@ class Ne {
|
|
|
2325
2302
|
* Animates back to original dimensions for consistent behavior
|
|
2326
2303
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2327
2304
|
*/
|
|
2328
|
-
startUnfocusAnimation(t, i, e,
|
|
2305
|
+
startUnfocusAnimation(t, i, e, n) {
|
|
2329
2306
|
t.style.zIndex = String(Lt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2330
2307
|
const a = this.config.animationDuration ?? 600;
|
|
2331
2308
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2332
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s =
|
|
2309
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, c = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, l = {
|
|
2333
2310
|
x: 0,
|
|
2334
2311
|
y: 0,
|
|
2335
2312
|
rotation: i.rotation,
|
|
@@ -2377,10 +2354,10 @@ class Ne {
|
|
|
2377
2354
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2378
2355
|
*/
|
|
2379
2356
|
captureMidAnimationState(t) {
|
|
2380
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2381
|
-
return t.style.width = `${
|
|
2357
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), n = t.offsetWidth, a = t.offsetHeight, r = e.e + n * 0.5, s = e.f + a * 0.5, c = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2358
|
+
return t.style.width = `${n}px`, t.style.height = `${a}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${s}px) rotate(${c}deg)`, t.style.transition = "none", {
|
|
2382
2359
|
transform: { x: r, y: s, rotation: c, scale: 1 },
|
|
2383
|
-
dimensions: { width:
|
|
2360
|
+
dimensions: { width: n, height: a }
|
|
2384
2361
|
};
|
|
2385
2362
|
}
|
|
2386
2363
|
/**
|
|
@@ -2395,10 +2372,10 @@ class Ne {
|
|
|
2395
2372
|
/**
|
|
2396
2373
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2397
2374
|
*/
|
|
2398
|
-
resetElementInstantly(t, i, e,
|
|
2375
|
+
resetElementInstantly(t, i, e, n, a) {
|
|
2399
2376
|
this.animationEngine.cancelAllAnimations(t);
|
|
2400
2377
|
const r = ["translate(-50%, -50%)"];
|
|
2401
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2378
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && a !== void 0 && (t.style.width = `${n}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, e);
|
|
2402
2379
|
}
|
|
2403
2380
|
/**
|
|
2404
2381
|
* Focus (zoom) an image to center of container
|
|
@@ -2417,10 +2394,10 @@ class Ne {
|
|
|
2417
2394
|
), this.incoming = null, this.state = S.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 = S.IDLE;
|
|
2418
2395
|
return;
|
|
2419
2396
|
}
|
|
2420
|
-
const
|
|
2397
|
+
const n = ++this.focusGeneration;
|
|
2421
2398
|
switch (this.state) {
|
|
2422
2399
|
case S.IDLE:
|
|
2423
|
-
if (this.state = S.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2400
|
+
if (this.state = S.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2424
2401
|
this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2425
2402
|
break;
|
|
2426
2403
|
case S.FOCUSED:
|
|
@@ -2430,7 +2407,7 @@ class Ne {
|
|
|
2430
2407
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2431
2408
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2432
2409
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2433
|
-
]), this.focusGeneration !==
|
|
2410
|
+
]), this.focusGeneration !== n)
|
|
2434
2411
|
return;
|
|
2435
2412
|
if (this.outgoing) {
|
|
2436
2413
|
const a = this.outgoing.element;
|
|
@@ -2445,14 +2422,14 @@ class Ne {
|
|
|
2445
2422
|
this.focusData?.originalZIndex || "",
|
|
2446
2423
|
this.focusData?.originalWidth,
|
|
2447
2424
|
this.focusData?.originalHeight
|
|
2448
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2425
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2449
2426
|
this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2450
2427
|
break;
|
|
2451
2428
|
case S.UNFOCUSING:
|
|
2452
2429
|
if (this.state = S.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2453
2430
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2454
2431
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2455
|
-
]), this.focusGeneration !==
|
|
2432
|
+
]), this.focusGeneration !== n) return;
|
|
2456
2433
|
if (this.outgoing) {
|
|
2457
2434
|
const a = this.outgoing.element;
|
|
2458
2435
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
@@ -2477,7 +2454,7 @@ class Ne {
|
|
|
2477
2454
|
if (this.incoming = this.startFocusAnimation(t, i, e, a, r), await Promise.all([
|
|
2478
2455
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2479
2456
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2480
|
-
]), this.focusGeneration !==
|
|
2457
|
+
]), this.focusGeneration !== n) return;
|
|
2481
2458
|
if (this.outgoing) {
|
|
2482
2459
|
const s = this.outgoing.element;
|
|
2483
2460
|
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
@@ -2503,7 +2480,7 @@ class Ne {
|
|
|
2503
2480
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2504
2481
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2505
2482
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2506
|
-
]), this.focusGeneration !==
|
|
2483
|
+
]), this.focusGeneration !== n) return;
|
|
2507
2484
|
if (this.outgoing) {
|
|
2508
2485
|
const a = this.outgoing.element;
|
|
2509
2486
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
@@ -2553,8 +2530,8 @@ class Ne {
|
|
|
2553
2530
|
return;
|
|
2554
2531
|
}
|
|
2555
2532
|
this.state = S.UNFOCUSING;
|
|
2556
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2557
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2533
|
+
const i = this.currentFocus, e = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2534
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = S.IDLE, this.onUnfocusComplete?.(i));
|
|
2558
2535
|
}
|
|
2559
2536
|
/**
|
|
2560
2537
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2594,8 +2571,8 @@ class Ne {
|
|
|
2594
2571
|
*/
|
|
2595
2572
|
setDragOffset(t) {
|
|
2596
2573
|
if (!this.currentFocus || !this.focusData || this.state !== S.FOCUSED) return;
|
|
2597
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2598
|
-
|
|
2574
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2575
|
+
n.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && n.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = n.join(" ");
|
|
2599
2576
|
}
|
|
2600
2577
|
/**
|
|
2601
2578
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2604,8 +2581,8 @@ class Ne {
|
|
|
2604
2581
|
*/
|
|
2605
2582
|
clearDragOffset(t, i = 150) {
|
|
2606
2583
|
if (!this.currentFocus || !this.focusData || this.state !== S.FOCUSED) return;
|
|
2607
|
-
const e = this.currentFocus,
|
|
2608
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2584
|
+
const e = this.currentFocus, n = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = n.x ?? 0, s = n.y ?? 0;
|
|
2585
|
+
a.push(`translate(${r}px, ${s}px)`), n.rotation !== void 0 && a.push(`rotate(${n.rotation}deg)`);
|
|
2609
2586
|
const c = a.join(" ");
|
|
2610
2587
|
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = c, setTimeout(() => {
|
|
2611
2588
|
this.currentFocus === e && (e.style.transition = "none");
|
|
@@ -2680,9 +2657,9 @@ const je = 50, We = 0.5, Ge = 20, qe = 0.3, Be = 150, Xe = 30, at = class at {
|
|
|
2680
2657
|
}
|
|
2681
2658
|
handleTouchMove(t) {
|
|
2682
2659
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2683
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2684
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2685
|
-
const s = Math.atan2(Math.abs(
|
|
2660
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, n = i.clientY - this.touchState.startY;
|
|
2661
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + n * n) > 10) {
|
|
2662
|
+
const s = Math.atan2(Math.abs(n), Math.abs(e)) * (180 / Math.PI);
|
|
2686
2663
|
this.touchState.isHorizontalSwipe = s <= Xe;
|
|
2687
2664
|
}
|
|
2688
2665
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
@@ -2694,9 +2671,9 @@ const je = 50, We = 0.5, Ge = 20, qe = 0.3, Be = 150, Xe = 30, at = class at {
|
|
|
2694
2671
|
handleTouchEnd(t) {
|
|
2695
2672
|
if (!this.touchState) return;
|
|
2696
2673
|
this.recentTouchTimestamp = Date.now();
|
|
2697
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2674
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, n = Math.abs(i) / e, a = Math.abs(i);
|
|
2698
2675
|
let r = !1;
|
|
2699
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= je ||
|
|
2676
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= je || n >= We && a >= Ge) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2700
2677
|
}
|
|
2701
2678
|
handleTouchCancel(t) {
|
|
2702
2679
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
@@ -2718,7 +2695,7 @@ class Ye {
|
|
|
2718
2695
|
for (const i of this.sources)
|
|
2719
2696
|
if ("folders" in i)
|
|
2720
2697
|
for (const e of i.folders) {
|
|
2721
|
-
const
|
|
2698
|
+
const n = i.recursive !== void 0 ? i.recursive : !0, a = await this.loadFromFolder(e, t, n);
|
|
2722
2699
|
this._discoveredUrls.push(...a);
|
|
2723
2700
|
}
|
|
2724
2701
|
else if ("files" in i) {
|
|
@@ -2764,9 +2741,9 @@ class Ye {
|
|
|
2764
2741
|
// Alternative format
|
|
2765
2742
|
];
|
|
2766
2743
|
for (const e of i) {
|
|
2767
|
-
const
|
|
2768
|
-
if (
|
|
2769
|
-
return
|
|
2744
|
+
const n = t.match(e);
|
|
2745
|
+
if (n && n[1])
|
|
2746
|
+
return n[1];
|
|
2770
2747
|
}
|
|
2771
2748
|
return null;
|
|
2772
2749
|
}
|
|
@@ -2778,15 +2755,15 @@ class Ye {
|
|
|
2778
2755
|
* @returns Promise resolving to array of image URLs
|
|
2779
2756
|
*/
|
|
2780
2757
|
async loadFromFolder(t, i, e = !0) {
|
|
2781
|
-
const
|
|
2782
|
-
if (!
|
|
2758
|
+
const n = this.extractFolderId(t);
|
|
2759
|
+
if (!n)
|
|
2783
2760
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2784
2761
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2785
|
-
return this.loadImagesDirectly(
|
|
2762
|
+
return this.loadImagesDirectly(n, i);
|
|
2786
2763
|
try {
|
|
2787
|
-
return e ? await this.loadImagesRecursively(
|
|
2764
|
+
return e ? await this.loadImagesRecursively(n, i) : await this.loadImagesFromSingleFolder(n, i);
|
|
2788
2765
|
} catch (a) {
|
|
2789
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2766
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(n, i);
|
|
2790
2767
|
}
|
|
2791
2768
|
}
|
|
2792
2769
|
/**
|
|
@@ -2796,7 +2773,7 @@ class Ye {
|
|
|
2796
2773
|
* @returns Promise resolving to array of image URLs
|
|
2797
2774
|
*/
|
|
2798
2775
|
async loadImagesFromSingleFolder(t, i) {
|
|
2799
|
-
const e = [],
|
|
2776
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2800
2777
|
if (!s.ok)
|
|
2801
2778
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2802
2779
|
const l = (await s.json()).files.filter(
|
|
@@ -2814,10 +2791,10 @@ class Ye {
|
|
|
2814
2791
|
*/
|
|
2815
2792
|
async loadFiles(t, i) {
|
|
2816
2793
|
const e = [];
|
|
2817
|
-
for (const
|
|
2818
|
-
const a = this.extractFileId(
|
|
2794
|
+
for (const n of t) {
|
|
2795
|
+
const a = this.extractFileId(n);
|
|
2819
2796
|
if (!a) {
|
|
2820
|
-
this.log(`Skipping invalid file URL: ${
|
|
2797
|
+
this.log(`Skipping invalid file URL: ${n}`);
|
|
2821
2798
|
continue;
|
|
2822
2799
|
}
|
|
2823
2800
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
@@ -2853,9 +2830,9 @@ class Ye {
|
|
|
2853
2830
|
// Generic id parameter
|
|
2854
2831
|
];
|
|
2855
2832
|
for (const e of i) {
|
|
2856
|
-
const
|
|
2857
|
-
if (
|
|
2858
|
-
return
|
|
2833
|
+
const n = t.match(e);
|
|
2834
|
+
if (n && n[1])
|
|
2835
|
+
return n[1];
|
|
2859
2836
|
}
|
|
2860
2837
|
return null;
|
|
2861
2838
|
}
|
|
@@ -2866,7 +2843,7 @@ class Ye {
|
|
|
2866
2843
|
* @returns Promise resolving to array of image URLs
|
|
2867
2844
|
*/
|
|
2868
2845
|
async loadImagesRecursively(t, i) {
|
|
2869
|
-
const e = [],
|
|
2846
|
+
const e = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2870
2847
|
if (!s.ok)
|
|
2871
2848
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2872
2849
|
const c = await s.json(), l = c.files.filter(
|
|
@@ -2893,10 +2870,10 @@ class Ye {
|
|
|
2893
2870
|
*/
|
|
2894
2871
|
async loadImagesDirectly(t, i) {
|
|
2895
2872
|
try {
|
|
2896
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2897
|
-
if (!
|
|
2873
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(e, { mode: "cors" });
|
|
2874
|
+
if (!n.ok)
|
|
2898
2875
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2899
|
-
const a = await
|
|
2876
|
+
const a = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2900
2877
|
return [...new Set(s.map((u) => u[1]))].map(
|
|
2901
2878
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2902
2879
|
);
|
|
@@ -2989,13 +2966,13 @@ class Je {
|
|
|
2989
2966
|
if (!Array.isArray(t))
|
|
2990
2967
|
return console.warn("URLs must be an array:", t), [];
|
|
2991
2968
|
const e = [];
|
|
2992
|
-
for (const
|
|
2993
|
-
const a =
|
|
2969
|
+
for (const n of t) {
|
|
2970
|
+
const a = n.split("/").pop() || n;
|
|
2994
2971
|
if (!i.isAllowed(a)) {
|
|
2995
|
-
this.log(`Skipping filtered URL: ${
|
|
2972
|
+
this.log(`Skipping filtered URL: ${n}`);
|
|
2996
2973
|
continue;
|
|
2997
2974
|
}
|
|
2998
|
-
this.validateUrls ? await this.validateUrl(
|
|
2975
|
+
this.validateUrls ? await this.validateUrl(n) ? e.push(n) : console.warn(`Skipping invalid/missing URL: ${n}`) : e.push(n);
|
|
2999
2976
|
}
|
|
3000
2977
|
return e;
|
|
3001
2978
|
}
|
|
@@ -3009,16 +2986,16 @@ class Je {
|
|
|
3009
2986
|
async processPath(t, i, e) {
|
|
3010
2987
|
if (!Array.isArray(i))
|
|
3011
2988
|
return console.warn("files must be an array:", i), [];
|
|
3012
|
-
const
|
|
2989
|
+
const n = [];
|
|
3013
2990
|
for (const a of i) {
|
|
3014
2991
|
if (!e.isAllowed(a)) {
|
|
3015
2992
|
this.log(`Skipping filtered file: ${a}`);
|
|
3016
2993
|
continue;
|
|
3017
2994
|
}
|
|
3018
2995
|
const r = this.constructUrl(t, a);
|
|
3019
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2996
|
+
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
3020
2997
|
}
|
|
3021
|
-
return
|
|
2998
|
+
return n;
|
|
3022
2999
|
}
|
|
3023
3000
|
/**
|
|
3024
3001
|
* Process a JSON endpoint source
|
|
@@ -3029,17 +3006,17 @@ class Je {
|
|
|
3029
3006
|
*/
|
|
3030
3007
|
async processJson(t, i) {
|
|
3031
3008
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
3032
|
-
const e = new AbortController(),
|
|
3009
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), 1e4);
|
|
3033
3010
|
try {
|
|
3034
3011
|
const a = await fetch(t, { signal: e.signal });
|
|
3035
|
-
if (clearTimeout(
|
|
3012
|
+
if (clearTimeout(n), !a.ok)
|
|
3036
3013
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
3037
3014
|
const r = await a.json();
|
|
3038
3015
|
if (!r || !Array.isArray(r.images))
|
|
3039
3016
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3040
3017
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
3041
3018
|
} catch (a) {
|
|
3042
|
-
throw clearTimeout(
|
|
3019
|
+
throw clearTimeout(n), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
3043
3020
|
}
|
|
3044
3021
|
}
|
|
3045
3022
|
/**
|
|
@@ -3061,11 +3038,11 @@ class Je {
|
|
|
3061
3038
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3062
3039
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3063
3040
|
try {
|
|
3064
|
-
const e = new AbortController(),
|
|
3041
|
+
const e = new AbortController(), n = setTimeout(() => e.abort(), this.validationTimeout), a = await fetch(t, {
|
|
3065
3042
|
method: "HEAD",
|
|
3066
3043
|
signal: e.signal
|
|
3067
3044
|
});
|
|
3068
|
-
return clearTimeout(
|
|
3045
|
+
return clearTimeout(n), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
3069
3046
|
} catch (e) {
|
|
3070
3047
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3071
3048
|
}
|
|
@@ -3082,8 +3059,8 @@ class Je {
|
|
|
3082
3059
|
return `${e}/${i}`;
|
|
3083
3060
|
if (typeof window > "u")
|
|
3084
3061
|
return `${e}/${i}`;
|
|
3085
|
-
const
|
|
3086
|
-
return `${
|
|
3062
|
+
const n = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
3063
|
+
return `${n}${r}/${i}`;
|
|
3087
3064
|
}
|
|
3088
3065
|
/**
|
|
3089
3066
|
* Check if URL is absolute (contains protocol)
|
|
@@ -3117,16 +3094,16 @@ class Ve {
|
|
|
3117
3094
|
*/
|
|
3118
3095
|
async prepare(t) {
|
|
3119
3096
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3120
|
-
const i = this.loaders.map((e,
|
|
3121
|
-
this.log(`Loader ${
|
|
3097
|
+
const i = this.loaders.map((e, n) => e.prepare(t).then(() => {
|
|
3098
|
+
this.log(`Loader ${n} prepared with ${e.imagesLength()} images`);
|
|
3122
3099
|
}).catch((a) => {
|
|
3123
|
-
console.warn(`Loader ${
|
|
3100
|
+
console.warn(`Loader ${n} failed to prepare:`, a);
|
|
3124
3101
|
}));
|
|
3125
3102
|
await Promise.all(i);
|
|
3126
3103
|
for (const e of this.loaders)
|
|
3127
3104
|
if (e.isPrepared()) {
|
|
3128
|
-
const
|
|
3129
|
-
this._discoveredUrls.push(...
|
|
3105
|
+
const n = e.imageURLs();
|
|
3106
|
+
this._discoveredUrls.push(...n);
|
|
3130
3107
|
}
|
|
3131
3108
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
3132
3109
|
}
|
|
@@ -3251,10 +3228,10 @@ const Ze = `
|
|
|
3251
3228
|
`;
|
|
3252
3229
|
function Qe() {
|
|
3253
3230
|
if (typeof document > "u") return;
|
|
3254
|
-
const
|
|
3255
|
-
if (document.getElementById(
|
|
3231
|
+
const o = "fbn-ic-functional-styles";
|
|
3232
|
+
if (document.getElementById(o)) return;
|
|
3256
3233
|
const t = document.createElement("style");
|
|
3257
|
-
t.id =
|
|
3234
|
+
t.id = o, t.textContent = Ze, document.head.appendChild(t);
|
|
3258
3235
|
}
|
|
3259
3236
|
class ti {
|
|
3260
3237
|
constructor(t = {}) {
|
|
@@ -3271,8 +3248,8 @@ class ti {
|
|
|
3271
3248
|
e && e.type !== "none" ? this.idleAnimationEngine = new me(
|
|
3272
3249
|
e,
|
|
3273
3250
|
i.timing?.duration ?? 600
|
|
3274
|
-
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((
|
|
3275
|
-
this.idleAnimationEngine?.resumeForImage(
|
|
3251
|
+
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((n) => {
|
|
3252
|
+
this.idleAnimationEngine?.resumeForImage(n);
|
|
3276
3253
|
}), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
3277
3254
|
}
|
|
3278
3255
|
/**
|
|
@@ -3290,7 +3267,7 @@ class ti {
|
|
|
3290
3267
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
3291
3268
|
if (!t || t.length === 0)
|
|
3292
3269
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
3293
|
-
const e = t.map((
|
|
3270
|
+
const e = t.map((n) => this.createLoaderFromEntry(n, i));
|
|
3294
3271
|
return e.length === 1 ? e[0] : new Ve({
|
|
3295
3272
|
loaders: e,
|
|
3296
3273
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
@@ -3301,7 +3278,7 @@ class ti {
|
|
|
3301
3278
|
*/
|
|
3302
3279
|
createLoaderFromEntry(t, i) {
|
|
3303
3280
|
if ("static" in t) {
|
|
3304
|
-
const e = t.static,
|
|
3281
|
+
const e = t.static, n = {
|
|
3305
3282
|
...e,
|
|
3306
3283
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
3307
3284
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -3309,14 +3286,14 @@ class ti {
|
|
|
3309
3286
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3310
3287
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3311
3288
|
};
|
|
3312
|
-
return new Je(
|
|
3289
|
+
return new Je(n);
|
|
3313
3290
|
} else if ("googleDrive" in t) {
|
|
3314
|
-
const e = t.googleDrive,
|
|
3291
|
+
const e = t.googleDrive, n = {
|
|
3315
3292
|
...e,
|
|
3316
3293
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3317
3294
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3318
3295
|
};
|
|
3319
|
-
return new Ye(
|
|
3296
|
+
return new Ye(n);
|
|
3320
3297
|
} else
|
|
3321
3298
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3322
3299
|
}
|
|
@@ -3329,14 +3306,14 @@ class ti {
|
|
|
3329
3306
|
this.containerEl = this.containerRef;
|
|
3330
3307
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3331
3308
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3332
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new bt(this.containerEl, {
|
|
3309
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
|
|
3333
3310
|
onNext: () => this.navigateToNextImage(),
|
|
3334
3311
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3335
3312
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3336
3313
|
onDragEnd: (t) => {
|
|
3337
3314
|
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Be);
|
|
3338
3315
|
}
|
|
3339
|
-
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3316
|
+
})), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3340
3317
|
} catch (t) {
|
|
3341
3318
|
console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
|
|
3342
3319
|
}
|
|
@@ -3365,7 +3342,7 @@ class ti {
|
|
|
3365
3342
|
return t.className = "fbn-ic-counter fbn-ic-hidden", this.containerEl.appendChild(t), t;
|
|
3366
3343
|
}
|
|
3367
3344
|
setupEventListeners() {
|
|
3368
|
-
|
|
3345
|
+
this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
|
|
3369
3346
|
t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
|
|
3370
3347
|
}), document.addEventListener("click", (t) => {
|
|
3371
3348
|
this.swipeEngine?.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter());
|
|
@@ -3377,7 +3354,7 @@ class ti {
|
|
|
3377
3354
|
navigateToNextImage() {
|
|
3378
3355
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3379
3356
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3380
|
-
(
|
|
3357
|
+
(n) => n.dataset.imageId === String(t)
|
|
3381
3358
|
);
|
|
3382
3359
|
if (!i) return;
|
|
3383
3360
|
const e = this.imageLayouts[t];
|
|
@@ -3389,7 +3366,7 @@ class ti {
|
|
|
3389
3366
|
navigateToPreviousImage() {
|
|
3390
3367
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3391
3368
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3392
|
-
(
|
|
3369
|
+
(n) => n.dataset.imageId === String(t)
|
|
3393
3370
|
);
|
|
3394
3371
|
if (!i) return;
|
|
3395
3372
|
const e = this.imageLayouts[t];
|
|
@@ -3405,8 +3382,8 @@ class ti {
|
|
|
3405
3382
|
}, 500));
|
|
3406
3383
|
}
|
|
3407
3384
|
getImageHeight() {
|
|
3408
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3409
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3385
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, n = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3386
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, n) : t <= i.tablet.maxWidth ? Math.min(180, n) : Math.min(225, n) : t <= 767 ? Math.min(100, n) : t <= 1199 ? Math.min(180, n) : Math.min(225, n);
|
|
3410
3387
|
}
|
|
3411
3388
|
/**
|
|
3412
3389
|
* Get container bounds for layout calculations
|
|
@@ -3429,12 +3406,12 @@ class ti {
|
|
|
3429
3406
|
this.showError("No images found."), this.showLoading(!1);
|
|
3430
3407
|
return;
|
|
3431
3408
|
}
|
|
3432
|
-
const e = this.getContainerBounds(),
|
|
3433
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3409
|
+
const e = this.getContainerBounds(), n = this.getImageHeight(), a = window.innerWidth;
|
|
3410
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3434
3411
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3435
3412
|
e,
|
|
3436
3413
|
t,
|
|
3437
|
-
|
|
3414
|
+
n,
|
|
3438
3415
|
a
|
|
3439
3416
|
);
|
|
3440
3417
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3452,7 +3429,7 @@ class ti {
|
|
|
3452
3429
|
if (!this.containerEl) return;
|
|
3453
3430
|
const e = this.getContainerBounds();
|
|
3454
3431
|
this.currentImageHeight = i;
|
|
3455
|
-
const
|
|
3432
|
+
const n = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3456
3433
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3457
3434
|
let r = 0;
|
|
3458
3435
|
const s = (l) => {
|
|
@@ -3512,7 +3489,7 @@ class ti {
|
|
|
3512
3489
|
return;
|
|
3513
3490
|
}
|
|
3514
3491
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3515
|
-
if (
|
|
3492
|
+
if (n !== this.loadGeneration) {
|
|
3516
3493
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3517
3494
|
return;
|
|
3518
3495
|
}
|
|
@@ -3539,7 +3516,7 @@ class ti {
|
|
|
3539
3516
|
h.style.left = `${d - 6}px`, h.style.top = `${g - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(g)})`, this.containerEl.appendChild(h);
|
|
3540
3517
|
})), t.forEach((l, u) => {
|
|
3541
3518
|
const h = document.createElement("img");
|
|
3542
|
-
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
|
|
3519
|
+
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";
|
|
3543
3520
|
const d = a[u];
|
|
3544
3521
|
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)), st(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3545
3522
|
if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {
|
|
@@ -3554,7 +3531,7 @@ class ti {
|
|
|
3554
3531
|
}), h.addEventListener("click", (g) => {
|
|
3555
3532
|
g.stopPropagation(), this.handleImageClick(h, d);
|
|
3556
3533
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3557
|
-
if (
|
|
3534
|
+
if (n !== this.loadGeneration)
|
|
3558
3535
|
return;
|
|
3559
3536
|
const g = h.naturalWidth / h.naturalHeight, b = i * g;
|
|
3560
3537
|
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${b}`), h.style.width = `${b}px`, h.cachedRenderedWidth = b, h.aspectRatio = g, gt(h, this.fullConfig.styling?.default, i, b);
|
|
@@ -3593,7 +3570,7 @@ class ti {
|
|
|
3593
3570
|
}
|
|
3594
3571
|
async handleImageClick(t, i) {
|
|
3595
3572
|
if (!this.containerEl) return;
|
|
3596
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3573
|
+
const e = this.zoomEngine.isFocused(t), n = {
|
|
3597
3574
|
width: this.containerEl.offsetWidth,
|
|
3598
3575
|
height: this.containerEl.offsetHeight
|
|
3599
3576
|
};
|
|
@@ -3602,7 +3579,7 @@ class ti {
|
|
|
3602
3579
|
else {
|
|
3603
3580
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3604
3581
|
const a = t.dataset.imageId;
|
|
3605
|
-
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t,
|
|
3582
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3606
3583
|
}
|
|
3607
3584
|
}
|
|
3608
3585
|
/**
|
|
@@ -3635,10 +3612,10 @@ class ti {
|
|
|
3635
3612
|
}
|
|
3636
3613
|
function ei() {
|
|
3637
3614
|
if (typeof document > "u") return;
|
|
3638
|
-
const
|
|
3639
|
-
if (document.getElementById(
|
|
3615
|
+
const o = "fbn-ic-styles";
|
|
3616
|
+
if (document.getElementById(o)) return;
|
|
3640
3617
|
const t = document.createElement("style");
|
|
3641
|
-
t.id =
|
|
3618
|
+
t.id = o, t.textContent = Ut, document.head.appendChild(t);
|
|
3642
3619
|
}
|
|
3643
3620
|
ei();
|
|
3644
3621
|
function ii() {
|
|
@@ -3646,7 +3623,7 @@ function ii() {
|
|
|
3646
3623
|
console.warn("ImageCloud: Document not available (not in browser environment)");
|
|
3647
3624
|
return;
|
|
3648
3625
|
}
|
|
3649
|
-
const
|
|
3626
|
+
const o = () => {
|
|
3650
3627
|
const t = document.querySelectorAll("[data-image-cloud], [data-image-gallery]");
|
|
3651
3628
|
t.length !== 0 && t.forEach((i) => {
|
|
3652
3629
|
const e = i;
|
|
@@ -3654,11 +3631,11 @@ function ii() {
|
|
|
3654
3631
|
console.error("ImageCloud: Container with data-image-cloud must have an id attribute");
|
|
3655
3632
|
return;
|
|
3656
3633
|
}
|
|
3657
|
-
const
|
|
3634
|
+
const n = e.dataset.config || e.dataset.galleryConfig;
|
|
3658
3635
|
let a;
|
|
3659
|
-
if (
|
|
3636
|
+
if (n)
|
|
3660
3637
|
try {
|
|
3661
|
-
const s = JSON.parse(
|
|
3638
|
+
const s = JSON.parse(n);
|
|
3662
3639
|
a = {
|
|
3663
3640
|
container: e.id,
|
|
3664
3641
|
...s
|
|
@@ -3676,7 +3653,7 @@ function ii() {
|
|
|
3676
3653
|
});
|
|
3677
3654
|
});
|
|
3678
3655
|
};
|
|
3679
|
-
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded",
|
|
3656
|
+
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", o) : o();
|
|
3680
3657
|
}
|
|
3681
3658
|
ii();
|
|
3682
3659
|
export {
|