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