@frybynite/image-cloud 0.3.5 → 0.3.6
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 +413 -410
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +12 -9
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +2 -2
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/package.json +1 -1
|
@@ -20,10 +20,10 @@ const kt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
20
20
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
21
21
|
}), Tt = Object.freeze({
|
|
22
22
|
type: "linear"
|
|
23
|
-
}), At = Object.freeze({
|
|
24
|
-
mode: "none"
|
|
25
23
|
}), Ct = Object.freeze({
|
|
26
24
|
mode: "none"
|
|
25
|
+
}), At = Object.freeze({
|
|
26
|
+
mode: "none"
|
|
27
27
|
}), $t = Object.freeze({
|
|
28
28
|
default: Object.freeze({
|
|
29
29
|
border: Object.freeze({
|
|
@@ -162,8 +162,8 @@ const kt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
162
162
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
163
163
|
// smooth deceleration
|
|
164
164
|
path: Tt,
|
|
165
|
-
rotation:
|
|
166
|
-
scale:
|
|
165
|
+
rotation: Ct,
|
|
166
|
+
scale: At
|
|
167
167
|
})
|
|
168
168
|
}),
|
|
169
169
|
// Pattern-based interaction configuration
|
|
@@ -224,50 +224,50 @@ const kt = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary:
|
|
|
224
224
|
// Debug mode
|
|
225
225
|
debug: !1
|
|
226
226
|
});
|
|
227
|
-
function rt(
|
|
228
|
-
if (!
|
|
229
|
-
if (!t) return { ...
|
|
230
|
-
const e = { ...
|
|
231
|
-
return t.border !== void 0 && (e.border = { ...
|
|
227
|
+
function rt(o, t) {
|
|
228
|
+
if (!o) return t || {};
|
|
229
|
+
if (!t) return { ...o };
|
|
230
|
+
const e = { ...o };
|
|
231
|
+
return t.border !== void 0 && (e.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (e.shadow = t.shadow), t.opacity !== void 0 && (e.opacity = t.opacity), t.cursor !== void 0 && (e.cursor = t.cursor), t.className !== void 0 && (e.className = t.className), t.objectFit !== void 0 && (e.objectFit = t.objectFit), t.aspectRatio !== void 0 && (e.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (e.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (e.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (e.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (e.borderRadiusBottomLeft = t.borderRadiusBottomLeft), e;
|
|
232
232
|
}
|
|
233
|
-
function Yt(
|
|
234
|
-
if (!t) return { ...
|
|
235
|
-
const e = rt(
|
|
236
|
-
rt(e,
|
|
233
|
+
function Yt(o, t) {
|
|
234
|
+
if (!t) return { ...o };
|
|
235
|
+
const e = rt(o.default, t.default), i = rt(
|
|
236
|
+
rt(e, o.hover),
|
|
237
237
|
t.hover
|
|
238
|
-
),
|
|
239
|
-
rt(e,
|
|
238
|
+
), n = rt(
|
|
239
|
+
rt(e, o.focused),
|
|
240
240
|
t.focused
|
|
241
241
|
);
|
|
242
242
|
return {
|
|
243
243
|
default: e,
|
|
244
244
|
hover: i,
|
|
245
|
-
focused:
|
|
245
|
+
focused: n
|
|
246
246
|
};
|
|
247
247
|
}
|
|
248
|
-
function Xt(
|
|
249
|
-
var i,
|
|
250
|
-
if (!t) return { ...
|
|
251
|
-
const e = { ...
|
|
248
|
+
function Xt(o, t) {
|
|
249
|
+
var i, n, a, r, s, h, l, u;
|
|
250
|
+
if (!t) return { ...o };
|
|
251
|
+
const e = { ...o };
|
|
252
252
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
253
|
-
...
|
|
253
|
+
...o.sizing,
|
|
254
254
|
...t.sizing
|
|
255
255
|
}, t.sizing.variance)) {
|
|
256
|
-
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((
|
|
256
|
+
const c = t.sizing.variance, d = c.min !== void 0 && c.min >= 0.25 && c.min <= 1 ? c.min : ((n = (i = o.sizing) == null ? void 0 : i.variance) == null ? void 0 : n.min) ?? 1, m = c.max !== void 0 && c.max >= 1 && c.max <= 1.75 ? c.max : ((r = (a = o.sizing) == null ? void 0 : a.variance) == null ? void 0 : r.max) ?? 1;
|
|
257
257
|
e.sizing.variance = { min: d, max: m };
|
|
258
258
|
}
|
|
259
259
|
if (t.rotation !== void 0 && (e.rotation = {
|
|
260
|
-
...
|
|
260
|
+
...o.rotation,
|
|
261
261
|
...t.rotation
|
|
262
262
|
}, t.rotation.range)) {
|
|
263
|
-
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (s =
|
|
263
|
+
const c = t.rotation.range, d = c.min !== void 0 && c.min >= -180 && c.min <= 0 ? c.min : ((h = (s = o.rotation) == null ? void 0 : s.range) == null ? void 0 : h.min) ?? -15, m = c.max !== void 0 && c.max >= 0 && c.max <= 180 ? c.max : ((u = (l = o.rotation) == null ? void 0 : l.range) == null ? void 0 : u.max) ?? 15;
|
|
264
264
|
e.rotation.range = { min: d, max: m };
|
|
265
265
|
}
|
|
266
266
|
return e;
|
|
267
267
|
}
|
|
268
|
-
function Bt(
|
|
268
|
+
function Bt(o) {
|
|
269
269
|
var e;
|
|
270
|
-
const t = (e =
|
|
270
|
+
const t = (e = o.layout) == null ? void 0 : e.rotation;
|
|
271
271
|
if (t && "enabled" in t)
|
|
272
272
|
return {
|
|
273
273
|
rotation: {
|
|
@@ -276,9 +276,9 @@ function Bt(n) {
|
|
|
276
276
|
}
|
|
277
277
|
};
|
|
278
278
|
}
|
|
279
|
-
function Jt(
|
|
279
|
+
function Jt(o) {
|
|
280
280
|
var e, i;
|
|
281
|
-
const t = (i = (e =
|
|
281
|
+
const t = (i = (e = o.layout) == null ? void 0 : e.sizing) == null ? void 0 : i.variance;
|
|
282
282
|
if (t)
|
|
283
283
|
return {
|
|
284
284
|
sizing: {
|
|
@@ -288,110 +288,110 @@ function Jt(n) {
|
|
|
288
288
|
}
|
|
289
289
|
};
|
|
290
290
|
}
|
|
291
|
-
function Vt(
|
|
291
|
+
function Vt(o = {}) {
|
|
292
292
|
var h, l;
|
|
293
|
-
const t = Bt(
|
|
294
|
-
let i =
|
|
293
|
+
const t = Bt(o), e = Jt(o);
|
|
294
|
+
let i = o.image;
|
|
295
295
|
(t || e) && (i = {
|
|
296
296
|
...e || {},
|
|
297
297
|
...t || {},
|
|
298
298
|
...i
|
|
299
|
-
}, i.rotation && (t != null && t.rotation) && ((h =
|
|
299
|
+
}, i.rotation && (t != null && t.rotation) && ((h = o.image) != null && h.rotation) && (i.rotation = {
|
|
300
300
|
...t.rotation,
|
|
301
|
-
...
|
|
301
|
+
...o.image.rotation
|
|
302
302
|
}));
|
|
303
|
-
const
|
|
304
|
-
|
|
303
|
+
const n = [...o.loaders ?? []];
|
|
304
|
+
o.images && o.images.length > 0 && n.unshift({
|
|
305
305
|
static: {
|
|
306
|
-
sources: [{ urls:
|
|
306
|
+
sources: [{ urls: o.images }]
|
|
307
307
|
}
|
|
308
308
|
});
|
|
309
309
|
const r = {
|
|
310
310
|
loaders: {
|
|
311
311
|
...Ut,
|
|
312
|
-
...((l =
|
|
312
|
+
...((l = o.config) == null ? void 0 : l.loaders) ?? {}
|
|
313
313
|
}
|
|
314
314
|
}, s = {
|
|
315
|
-
loaders:
|
|
315
|
+
loaders: n,
|
|
316
316
|
config: r,
|
|
317
317
|
image: Xt(Dt, i),
|
|
318
318
|
layout: { ...E.layout },
|
|
319
319
|
animation: { ...E.animation },
|
|
320
320
|
interaction: { ...E.interaction },
|
|
321
321
|
rendering: { ...E.rendering },
|
|
322
|
-
styling: Yt($t,
|
|
322
|
+
styling: Yt($t, o.styling),
|
|
323
323
|
debug: E.debug
|
|
324
324
|
};
|
|
325
|
-
return
|
|
325
|
+
return o.layout && (s.layout = {
|
|
326
326
|
...E.layout,
|
|
327
|
-
...
|
|
328
|
-
},
|
|
327
|
+
...o.layout
|
|
328
|
+
}, o.layout.responsive && (s.layout.responsive = {
|
|
329
329
|
...E.layout.responsive,
|
|
330
|
-
mobile:
|
|
331
|
-
tablet:
|
|
332
|
-
}),
|
|
330
|
+
mobile: o.layout.responsive.mobile ? { ...E.layout.responsive.mobile, ...o.layout.responsive.mobile } : E.layout.responsive.mobile,
|
|
331
|
+
tablet: o.layout.responsive.tablet ? { ...E.layout.responsive.tablet, ...o.layout.responsive.tablet } : E.layout.responsive.tablet
|
|
332
|
+
}), o.layout.spacing && (s.layout.spacing = {
|
|
333
333
|
...E.layout.spacing,
|
|
334
|
-
...
|
|
335
|
-
})),
|
|
334
|
+
...o.layout.spacing
|
|
335
|
+
})), o.animation && (s.animation = {
|
|
336
336
|
...E.animation,
|
|
337
|
-
...
|
|
338
|
-
},
|
|
337
|
+
...o.animation
|
|
338
|
+
}, o.animation.easing && (s.animation.easing = {
|
|
339
339
|
...E.animation.easing,
|
|
340
|
-
...
|
|
341
|
-
}),
|
|
340
|
+
...o.animation.easing
|
|
341
|
+
}), o.animation.queue && (s.animation.queue = {
|
|
342
342
|
...E.animation.queue,
|
|
343
|
-
...
|
|
344
|
-
}),
|
|
343
|
+
...o.animation.queue
|
|
344
|
+
}), o.animation.performance && (s.animation.performance = {
|
|
345
345
|
...E.animation.performance,
|
|
346
|
-
...
|
|
347
|
-
}),
|
|
346
|
+
...o.animation.performance
|
|
347
|
+
}), o.animation.entry && (s.animation.entry = {
|
|
348
348
|
...E.animation.entry,
|
|
349
|
-
...
|
|
350
|
-
start:
|
|
349
|
+
...o.animation.entry,
|
|
350
|
+
start: o.animation.entry.start ? {
|
|
351
351
|
...E.animation.entry.start,
|
|
352
|
-
...
|
|
353
|
-
circular:
|
|
352
|
+
...o.animation.entry.start,
|
|
353
|
+
circular: o.animation.entry.start.circular ? { ...E.animation.entry.start.circular, ...o.animation.entry.start.circular } : E.animation.entry.start.circular
|
|
354
354
|
} : E.animation.entry.start,
|
|
355
|
-
timing:
|
|
356
|
-
path:
|
|
357
|
-
rotation:
|
|
358
|
-
scale:
|
|
359
|
-
})),
|
|
355
|
+
timing: o.animation.entry.timing ? { ...E.animation.entry.timing, ...o.animation.entry.timing } : E.animation.entry.timing,
|
|
356
|
+
path: o.animation.entry.path ? { ...Tt, ...o.animation.entry.path } : E.animation.entry.path,
|
|
357
|
+
rotation: o.animation.entry.rotation ? { ...Ct, ...o.animation.entry.rotation } : E.animation.entry.rotation,
|
|
358
|
+
scale: o.animation.entry.scale ? { ...At, ...o.animation.entry.scale } : E.animation.entry.scale
|
|
359
|
+
})), o.interaction && (s.interaction = {
|
|
360
360
|
...E.interaction,
|
|
361
|
-
...
|
|
362
|
-
},
|
|
361
|
+
...o.interaction
|
|
362
|
+
}, o.interaction.focus && (s.interaction.focus = {
|
|
363
363
|
...E.interaction.focus,
|
|
364
|
-
...
|
|
365
|
-
}),
|
|
364
|
+
...o.interaction.focus
|
|
365
|
+
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
366
366
|
...E.interaction.navigation,
|
|
367
|
-
...
|
|
368
|
-
}),
|
|
367
|
+
...o.interaction.navigation
|
|
368
|
+
}), o.interaction.gestures && (s.interaction.gestures = {
|
|
369
369
|
...E.interaction.gestures,
|
|
370
|
-
...
|
|
371
|
-
})),
|
|
370
|
+
...o.interaction.gestures
|
|
371
|
+
})), o.rendering && (s.rendering = {
|
|
372
372
|
...E.rendering,
|
|
373
|
-
...
|
|
374
|
-
},
|
|
373
|
+
...o.rendering
|
|
374
|
+
}, o.rendering.responsive && (s.rendering.responsive = {
|
|
375
375
|
...E.rendering.responsive,
|
|
376
|
-
...
|
|
377
|
-
breakpoints:
|
|
378
|
-
mobileDetection:
|
|
379
|
-
}),
|
|
376
|
+
...o.rendering.responsive,
|
|
377
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...E.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : E.rendering.responsive.breakpoints,
|
|
378
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : E.rendering.responsive.mobileDetection
|
|
379
|
+
}), o.rendering.ui && (s.rendering.ui = {
|
|
380
380
|
...E.rendering.ui,
|
|
381
|
-
...
|
|
382
|
-
}),
|
|
381
|
+
...o.rendering.ui
|
|
382
|
+
}), o.rendering.performance && (s.rendering.performance = {
|
|
383
383
|
...E.rendering.performance,
|
|
384
|
-
...
|
|
385
|
-
})),
|
|
384
|
+
...o.rendering.performance
|
|
385
|
+
})), o.debug !== void 0 && (s.debug = o.debug), s;
|
|
386
386
|
}
|
|
387
|
-
function Kt(
|
|
388
|
-
return { ...
|
|
387
|
+
function Kt(o, t) {
|
|
388
|
+
return { ...o ? Mt[o] : Mt.playful, ...t };
|
|
389
389
|
}
|
|
390
|
-
function Zt(
|
|
391
|
-
return { ...
|
|
390
|
+
function Zt(o, t) {
|
|
391
|
+
return { ...o ? zt[o] : zt.gentle, ...t };
|
|
392
392
|
}
|
|
393
|
-
function Qt(
|
|
394
|
-
return { ...
|
|
393
|
+
function Qt(o, t) {
|
|
394
|
+
return { ...o ? Lt[o] : Lt.gentle, ...t };
|
|
395
395
|
}
|
|
396
396
|
class te {
|
|
397
397
|
constructor(t) {
|
|
@@ -404,8 +404,8 @@ class te {
|
|
|
404
404
|
buildTransformString(t) {
|
|
405
405
|
const e = ["translate(-50%, -50%)"];
|
|
406
406
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
407
|
-
const i = t.x ?? 0,
|
|
408
|
-
e.push(`translate(${i}px, ${
|
|
407
|
+
const i = t.x ?? 0, n = t.y ?? 0;
|
|
408
|
+
e.push(`translate(${i}px, ${n}px)`);
|
|
409
409
|
}
|
|
410
410
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && e.push(`scale(${t.scale})`), e.join(" ");
|
|
411
411
|
}
|
|
@@ -418,9 +418,9 @@ class te {
|
|
|
418
418
|
* @param easing - CSS easing function (optional)
|
|
419
419
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
420
420
|
*/
|
|
421
|
-
animateTransformCancellable(t, e, i,
|
|
421
|
+
animateTransformCancellable(t, e, i, n = null, a = null) {
|
|
422
422
|
this.cancelAllAnimations(t);
|
|
423
|
-
const r =
|
|
423
|
+
const r = n ?? this.config.duration, s = a ?? this.config.easing.default, h = this.buildTransformString(e), l = this.buildTransformString(i);
|
|
424
424
|
t.style.transition = "none";
|
|
425
425
|
const u = t.animate(
|
|
426
426
|
[
|
|
@@ -457,13 +457,13 @@ class te {
|
|
|
457
457
|
cancelAnimation(t, e = !0) {
|
|
458
458
|
const i = this.getCurrentTransform(t.element);
|
|
459
459
|
if (t.animation.cancel(), e) {
|
|
460
|
-
const
|
|
460
|
+
const n = this.buildTransformString({
|
|
461
461
|
x: i.x,
|
|
462
462
|
y: i.y,
|
|
463
463
|
rotation: i.rotation,
|
|
464
464
|
scale: i.scale
|
|
465
465
|
});
|
|
466
|
-
t.element.style.transform =
|
|
466
|
+
t.element.style.transform = n;
|
|
467
467
|
}
|
|
468
468
|
return this.activeAnimations.delete(t.element), i;
|
|
469
469
|
}
|
|
@@ -476,8 +476,8 @@ class te {
|
|
|
476
476
|
const e = this.activeAnimations.get(t);
|
|
477
477
|
e && this.cancelAnimation(e, !1);
|
|
478
478
|
const i = t.getAnimations();
|
|
479
|
-
for (const
|
|
480
|
-
|
|
479
|
+
for (const n of i)
|
|
480
|
+
n.cancel();
|
|
481
481
|
}
|
|
482
482
|
/**
|
|
483
483
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -489,7 +489,7 @@ class te {
|
|
|
489
489
|
const i = getComputedStyle(t).transform;
|
|
490
490
|
if (i === "none" || !i)
|
|
491
491
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
492
|
-
const
|
|
492
|
+
const n = new DOMMatrix(i), a = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), s = n.e, h = n.f;
|
|
493
493
|
return { x: s, y: h, rotation: r, scale: a };
|
|
494
494
|
}
|
|
495
495
|
/**
|
|
@@ -516,9 +516,9 @@ class te {
|
|
|
516
516
|
* @param easing - CSS easing function (optional)
|
|
517
517
|
* @returns Promise that resolves when animation completes
|
|
518
518
|
*/
|
|
519
|
-
animateTransform(t, e, i = null,
|
|
519
|
+
animateTransform(t, e, i = null, n = null) {
|
|
520
520
|
return new Promise((a) => {
|
|
521
|
-
const r = i ?? this.config.duration, s =
|
|
521
|
+
const r = i ?? this.config.duration, s = n ?? this.config.easing.default;
|
|
522
522
|
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
|
|
523
523
|
a();
|
|
524
524
|
}, r);
|
|
@@ -549,18 +549,18 @@ class te {
|
|
|
549
549
|
return new Promise((e) => setTimeout(e, t));
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
|
-
function st(
|
|
553
|
-
return
|
|
552
|
+
function st(o, t, e) {
|
|
553
|
+
return o + (t - o) * e;
|
|
554
554
|
}
|
|
555
|
-
function ee(
|
|
556
|
-
const { overshoot:
|
|
557
|
-
let u = 0, c = 0, d = 1, m =
|
|
555
|
+
function ee(o, t, e, i) {
|
|
556
|
+
const { overshoot: n, bounces: a, decayRatio: r } = i, s = e.x - t.x, h = e.y - t.y, l = ie(a, r);
|
|
557
|
+
let u = 0, c = 0, d = 1, m = n, b = !1;
|
|
558
558
|
for (let g = 0; g < l.length; g++)
|
|
559
|
-
if (
|
|
559
|
+
if (o <= l[g].time) {
|
|
560
560
|
c = g === 0 ? 0 : l[g - 1].time, d = l[g].time, m = l[g].overshoot, b = l[g].isOvershoot;
|
|
561
561
|
break;
|
|
562
562
|
}
|
|
563
|
-
const p = (
|
|
563
|
+
const p = (o - c) / (d - c);
|
|
564
564
|
if (b)
|
|
565
565
|
u = 1 + m * gt(p);
|
|
566
566
|
else if (c === 0)
|
|
@@ -576,72 +576,72 @@ function ee(n, t, e, i) {
|
|
|
576
576
|
y: t.y + h * u
|
|
577
577
|
};
|
|
578
578
|
}
|
|
579
|
-
function ie(
|
|
579
|
+
function ie(o, t) {
|
|
580
580
|
const e = [];
|
|
581
581
|
let i = 0.6;
|
|
582
582
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
583
|
-
let
|
|
584
|
-
const r = 0.4 / (
|
|
585
|
-
for (let s = 0; s <
|
|
586
|
-
i += r, e.push({ time: i, overshoot:
|
|
583
|
+
let n = 0.15;
|
|
584
|
+
const r = 0.4 / (o * 2);
|
|
585
|
+
for (let s = 0; s < o; s++)
|
|
586
|
+
i += r, e.push({ time: i, overshoot: n, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
587
587
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
588
588
|
}
|
|
589
|
-
function ne(
|
|
590
|
-
const { stiffness:
|
|
589
|
+
function ne(o, t, e, i) {
|
|
590
|
+
const { stiffness: n, damping: a, mass: r, oscillations: s } = i, h = e.x - t.x, l = e.y - t.y, u = Math.sqrt(n / r), c = a / (2 * Math.sqrt(n * r));
|
|
591
591
|
let d;
|
|
592
592
|
if (c < 1) {
|
|
593
|
-
const m = u * Math.sqrt(1 - c * c), b = Math.exp(-c * u *
|
|
593
|
+
const m = u * Math.sqrt(1 - c * c), b = Math.exp(-c * u * o * 3), p = Math.cos(m * o * s * Math.PI);
|
|
594
594
|
d = 1 - b * p;
|
|
595
595
|
} else
|
|
596
|
-
d = 1 - Math.exp(-u *
|
|
596
|
+
d = 1 - Math.exp(-u * o * 3);
|
|
597
597
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
598
598
|
x: t.x + h * d,
|
|
599
599
|
y: t.y + l * d
|
|
600
600
|
};
|
|
601
601
|
}
|
|
602
|
-
function oe(
|
|
603
|
-
const { amplitude:
|
|
602
|
+
function oe(o, t, e, i) {
|
|
603
|
+
const { amplitude: n, frequency: a, decay: r, decayRate: s, phase: h } = i, l = e.x - t.x, u = e.y - t.y, c = Math.sqrt(l * l + u * u), d = c > 0 ? -u / c : 0, m = c > 0 ? l / c : 1, b = a * Math.PI * 2 * o + h, p = r ? Math.pow(1 - o, s) : 1, g = n * Math.sin(b) * p, f = se(o);
|
|
604
604
|
return {
|
|
605
605
|
x: st(t.x, e.x, f) + g * d,
|
|
606
606
|
y: st(t.y, e.y, f) + g * m
|
|
607
607
|
};
|
|
608
608
|
}
|
|
609
|
-
function gt(
|
|
610
|
-
return 1 - (1 -
|
|
609
|
+
function gt(o) {
|
|
610
|
+
return 1 - (1 - o) * (1 - o);
|
|
611
611
|
}
|
|
612
|
-
function se(
|
|
613
|
-
return 1 - Math.pow(1 -
|
|
612
|
+
function se(o) {
|
|
613
|
+
return 1 - Math.pow(1 - o, 3);
|
|
614
614
|
}
|
|
615
|
-
function ae(
|
|
616
|
-
const { amplitude: i, frequency:
|
|
615
|
+
function ae(o, t, e) {
|
|
616
|
+
const { amplitude: i, frequency: n, decay: a } = e, r = Math.sin(o * n * Math.PI * 2), s = a ? Math.pow(1 - o, 2) : 1, h = i * r * s;
|
|
617
617
|
return t + h;
|
|
618
618
|
}
|
|
619
|
-
function re(
|
|
620
|
-
const { overshoot: i, bounces:
|
|
619
|
+
function re(o, t, e) {
|
|
620
|
+
const { overshoot: i, bounces: n } = e, a = [];
|
|
621
621
|
a.push({ time: 0.5, scale: i });
|
|
622
622
|
let r = i;
|
|
623
|
-
const s = 0.5, l = 0.5 / (
|
|
623
|
+
const s = 0.5, l = 0.5 / (n * 2);
|
|
624
624
|
let u = 0.5;
|
|
625
|
-
for (let d = 0; d <
|
|
625
|
+
for (let d = 0; d < n; d++) {
|
|
626
626
|
const m = 1 - (r - 1) * s;
|
|
627
|
-
u += l, a.push({ time: u, scale: m }), r = 1 + (r - 1) * s * s, u += l, d <
|
|
627
|
+
u += l, a.push({ time: u, scale: m }), r = 1 + (r - 1) * s * s, u += l, d < n - 1 && a.push({ time: u, scale: r });
|
|
628
628
|
}
|
|
629
629
|
a.push({ time: 1, scale: 1 });
|
|
630
630
|
let c = 1;
|
|
631
631
|
for (let d = 0; d < a.length; d++)
|
|
632
|
-
if (
|
|
633
|
-
const m = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (
|
|
632
|
+
if (o <= a[d].time) {
|
|
633
|
+
const m = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (o - m) / (a[d].time - m), g = gt(p);
|
|
634
634
|
c = b + (a[d].scale - b) * g;
|
|
635
635
|
break;
|
|
636
636
|
}
|
|
637
637
|
return c * t;
|
|
638
638
|
}
|
|
639
|
-
function ce(
|
|
639
|
+
function ce(o) {
|
|
640
640
|
const {
|
|
641
641
|
element: t,
|
|
642
642
|
startPosition: e,
|
|
643
643
|
endPosition: i,
|
|
644
|
-
pathConfig:
|
|
644
|
+
pathConfig: n,
|
|
645
645
|
duration: a,
|
|
646
646
|
imageWidth: r,
|
|
647
647
|
imageHeight: s,
|
|
@@ -652,56 +652,56 @@ function ce(n) {
|
|
|
652
652
|
startRotation: d,
|
|
653
653
|
scaleConfig: m,
|
|
654
654
|
startScale: b
|
|
655
|
-
} =
|
|
656
|
-
if ((p === "linear" || p === "arc") && !v && !(I ||
|
|
655
|
+
} = o, p = n.type, g = d !== void 0 && d !== h, f = (c == null ? void 0 : c.mode) === "wobble", y = (c == null ? void 0 : c.wobble) || { amplitude: 15, frequency: 3, decay: !0 }, v = g || f, I = b !== void 0 && b !== l, C = (m == null ? void 0 : m.mode) === "pop", w = (m == null ? void 0 : m.pop) || { overshoot: 1.2, bounces: 1 };
|
|
656
|
+
if ((p === "linear" || p === "arc") && !v && !(I || C)) {
|
|
657
657
|
u && u();
|
|
658
658
|
return;
|
|
659
659
|
}
|
|
660
660
|
const N = performance.now(), P = -r / 2, D = -s / 2;
|
|
661
661
|
function U(k) {
|
|
662
662
|
const z = k - N, x = Math.min(z / a, 1);
|
|
663
|
-
let
|
|
663
|
+
let A;
|
|
664
664
|
switch (p) {
|
|
665
665
|
case "bounce": {
|
|
666
666
|
const H = Kt(
|
|
667
|
-
|
|
668
|
-
|
|
667
|
+
n.bouncePreset,
|
|
668
|
+
n.bounce
|
|
669
669
|
);
|
|
670
|
-
|
|
670
|
+
A = ee(x, e, i, H);
|
|
671
671
|
break;
|
|
672
672
|
}
|
|
673
673
|
case "elastic": {
|
|
674
674
|
const H = Zt(
|
|
675
|
-
|
|
676
|
-
|
|
675
|
+
n.elasticPreset,
|
|
676
|
+
n.elastic
|
|
677
677
|
);
|
|
678
|
-
|
|
678
|
+
A = ne(x, e, i, H);
|
|
679
679
|
break;
|
|
680
680
|
}
|
|
681
681
|
case "wave": {
|
|
682
682
|
const H = Qt(
|
|
683
|
-
|
|
684
|
-
|
|
683
|
+
n.wavePreset,
|
|
684
|
+
n.wave
|
|
685
685
|
);
|
|
686
|
-
|
|
686
|
+
A = oe(x, e, i, H);
|
|
687
687
|
break;
|
|
688
688
|
}
|
|
689
689
|
default:
|
|
690
|
-
|
|
690
|
+
A = {
|
|
691
691
|
x: st(e.x, i.x, x),
|
|
692
692
|
y: st(e.y, i.y, x)
|
|
693
693
|
};
|
|
694
694
|
}
|
|
695
|
-
const O =
|
|
695
|
+
const O = A.x - i.x, M = A.y - i.y;
|
|
696
696
|
let T;
|
|
697
697
|
f ? T = ae(x, h, y) : g ? T = st(d, h, x) : T = h;
|
|
698
698
|
let R;
|
|
699
|
-
|
|
699
|
+
C ? R = re(x, l, w) : I ? R = st(b, l, x) : R = l, t.style.transform = `translate(${P}px, ${D}px) translate(${O}px, ${M}px) rotate(${T}deg) scale(${R})`, x < 1 ? requestAnimationFrame(U) : (t.style.transform = `translate(${P}px, ${D}px) rotate(${h}deg) scale(${l})`, u && u());
|
|
700
700
|
}
|
|
701
701
|
requestAnimationFrame(U);
|
|
702
702
|
}
|
|
703
|
-
function le(
|
|
704
|
-
return
|
|
703
|
+
function le(o) {
|
|
704
|
+
return o === "bounce" || o === "elastic" || o === "wave";
|
|
705
705
|
}
|
|
706
706
|
const he = {
|
|
707
707
|
radial: "center",
|
|
@@ -713,7 +713,7 @@ const he = {
|
|
|
713
713
|
};
|
|
714
714
|
class de {
|
|
715
715
|
constructor(t, e) {
|
|
716
|
-
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || Tt, this.rotationConfig = t.rotation ||
|
|
716
|
+
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || Tt, this.rotationConfig = t.rotation || Ct, this.scaleConfig = t.scale || At;
|
|
717
717
|
}
|
|
718
718
|
/**
|
|
719
719
|
* Get the effective start position, considering layout-aware defaults
|
|
@@ -724,7 +724,7 @@ class de {
|
|
|
724
724
|
/**
|
|
725
725
|
* Calculate the starting position for an image's entry animation
|
|
726
726
|
*/
|
|
727
|
-
calculateStartPosition(t, e, i,
|
|
727
|
+
calculateStartPosition(t, e, i, n, a) {
|
|
728
728
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
729
729
|
switch (r) {
|
|
730
730
|
case "nearest-edge":
|
|
@@ -746,7 +746,7 @@ class de {
|
|
|
746
746
|
t,
|
|
747
747
|
e,
|
|
748
748
|
i,
|
|
749
|
-
|
|
749
|
+
n,
|
|
750
750
|
a
|
|
751
751
|
);
|
|
752
752
|
default:
|
|
@@ -756,28 +756,28 @@ class de {
|
|
|
756
756
|
/**
|
|
757
757
|
* Calculate start position from the nearest edge (current default behavior)
|
|
758
758
|
*/
|
|
759
|
-
calculateNearestEdge(t, e, i,
|
|
759
|
+
calculateNearestEdge(t, e, i, n) {
|
|
760
760
|
const a = t.x, r = t.y, s = a, h = i.width - a, l = r, u = i.height - r, c = Math.min(s, h, l, u);
|
|
761
761
|
let d = t.x, m = t.y;
|
|
762
|
-
return c === s ? d = -(e.width +
|
|
762
|
+
return c === s ? d = -(e.width + n) : c === h ? d = i.width + n : c === l ? m = -(e.height + n) : m = i.height + n, { x: d, y: m };
|
|
763
763
|
}
|
|
764
764
|
/**
|
|
765
765
|
* Calculate start position from a specific edge
|
|
766
766
|
*/
|
|
767
|
-
calculateEdgePosition(t, e, i,
|
|
767
|
+
calculateEdgePosition(t, e, i, n, a) {
|
|
768
768
|
let r = e.x, s = e.y;
|
|
769
769
|
switch (t) {
|
|
770
770
|
case "top":
|
|
771
771
|
s = -(i.height + a);
|
|
772
772
|
break;
|
|
773
773
|
case "bottom":
|
|
774
|
-
s =
|
|
774
|
+
s = n.height + a;
|
|
775
775
|
break;
|
|
776
776
|
case "left":
|
|
777
777
|
r = -(i.width + a);
|
|
778
778
|
break;
|
|
779
779
|
case "right":
|
|
780
|
-
r =
|
|
780
|
+
r = n.width + a;
|
|
781
781
|
break;
|
|
782
782
|
}
|
|
783
783
|
return { x: r, y: s };
|
|
@@ -786,9 +786,9 @@ class de {
|
|
|
786
786
|
* Calculate start position from center with scale animation
|
|
787
787
|
*/
|
|
788
788
|
calculateCenterPosition(t, e, i) {
|
|
789
|
-
const
|
|
789
|
+
const n = t.width / 2, a = t.height / 2;
|
|
790
790
|
return {
|
|
791
|
-
x:
|
|
791
|
+
x: n,
|
|
792
792
|
y: a,
|
|
793
793
|
useScale: !0
|
|
794
794
|
// Signal to use scale animation from 0
|
|
@@ -797,14 +797,14 @@ class de {
|
|
|
797
797
|
/**
|
|
798
798
|
* Calculate start position from a random edge
|
|
799
799
|
*/
|
|
800
|
-
calculateRandomEdge(t, e, i,
|
|
800
|
+
calculateRandomEdge(t, e, i, n) {
|
|
801
801
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
802
|
-
return this.calculateEdgePosition(r, t, e, i,
|
|
802
|
+
return this.calculateEdgePosition(r, t, e, i, n);
|
|
803
803
|
}
|
|
804
804
|
/**
|
|
805
805
|
* Calculate start position on a circle around the container
|
|
806
806
|
*/
|
|
807
|
-
calculateCircularPosition(t, e, i,
|
|
807
|
+
calculateCircularPosition(t, e, i, n, a) {
|
|
808
808
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
809
809
|
let h;
|
|
810
810
|
const l = r.radius || "120%";
|
|
@@ -816,7 +816,7 @@ class de {
|
|
|
816
816
|
} else
|
|
817
817
|
h = typeof l == "number" ? l : 500;
|
|
818
818
|
let u;
|
|
819
|
-
s === "even" ? u =
|
|
819
|
+
s === "even" ? u = n / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
820
820
|
const c = i.width / 2, d = i.height / 2, m = c + Math.cos(u) * h, b = d + Math.sin(u) * h;
|
|
821
821
|
return { x: m, y: b };
|
|
822
822
|
}
|
|
@@ -824,30 +824,30 @@ class de {
|
|
|
824
824
|
* Get animation parameters for an image
|
|
825
825
|
*/
|
|
826
826
|
getAnimationParams(t) {
|
|
827
|
-
const e = this.config.timing.duration, i = this.config.timing.stagger,
|
|
827
|
+
const e = this.config.timing.duration, i = this.config.timing.stagger, n = this.config.easing;
|
|
828
828
|
return {
|
|
829
829
|
startTransform: "",
|
|
830
830
|
// Will be computed by caller based on start position
|
|
831
831
|
duration: e,
|
|
832
832
|
delay: t * i,
|
|
833
|
-
easing:
|
|
833
|
+
easing: n
|
|
834
834
|
};
|
|
835
835
|
}
|
|
836
836
|
/**
|
|
837
837
|
* Build a CSS transform string for the start position
|
|
838
838
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
839
839
|
*/
|
|
840
|
-
buildStartTransform(t, e, i,
|
|
841
|
-
const l = t.x - e.x, u = t.y - e.y, c = s !== void 0 ? s : i, d = h !== void 0 ? h :
|
|
840
|
+
buildStartTransform(t, e, i, n, a, r, s, h) {
|
|
841
|
+
const l = t.x - e.x, u = t.y - e.y, c = s !== void 0 ? s : i, d = h !== void 0 ? h : n, m = a !== void 0 ? -a / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${m}px, ${b}px)` : "translate(-50%, -50%)";
|
|
842
842
|
return t.useScale ? `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(0)` : `${p} translate(${l}px, ${u}px) rotate(${c}deg) scale(${d})`;
|
|
843
843
|
}
|
|
844
844
|
/**
|
|
845
845
|
* Build the final CSS transform string
|
|
846
846
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
847
847
|
*/
|
|
848
|
-
buildFinalTransform(t, e, i,
|
|
849
|
-
if (i !== void 0 &&
|
|
850
|
-
const a = -i / 2, r = -
|
|
848
|
+
buildFinalTransform(t, e, i, n) {
|
|
849
|
+
if (i !== void 0 && n !== void 0) {
|
|
850
|
+
const a = -i / 2, r = -n / 2;
|
|
851
851
|
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${e})`;
|
|
852
852
|
}
|
|
853
853
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${e})`;
|
|
@@ -914,12 +914,12 @@ class de {
|
|
|
914
914
|
return t + (Math.random() - 0.5) * 60;
|
|
915
915
|
if (typeof i == "number")
|
|
916
916
|
return i;
|
|
917
|
-
const
|
|
918
|
-
return i.min + Math.random() *
|
|
917
|
+
const n = i.max - i.min;
|
|
918
|
+
return i.min + Math.random() * n;
|
|
919
919
|
}
|
|
920
920
|
case "spin": {
|
|
921
|
-
const i = this.rotationConfig.spinCount ?? 1,
|
|
922
|
-
return t + i * 360 *
|
|
921
|
+
const i = this.rotationConfig.spinCount ?? 1, n = this.resolveSpinDirection(t);
|
|
922
|
+
return t + i * 360 * n;
|
|
923
923
|
}
|
|
924
924
|
case "random":
|
|
925
925
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -966,7 +966,7 @@ class de {
|
|
|
966
966
|
amplitude: 15,
|
|
967
967
|
frequency: 3,
|
|
968
968
|
decay: !0
|
|
969
|
-
}, { amplitude:
|
|
969
|
+
}, { amplitude: n, frequency: a, decay: r } = i, s = Math.sin(t * a * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, l = n * s * h;
|
|
970
970
|
return e + l;
|
|
971
971
|
}
|
|
972
972
|
/**
|
|
@@ -1023,7 +1023,7 @@ class de {
|
|
|
1023
1023
|
const i = this.scaleConfig.pop || {
|
|
1024
1024
|
overshoot: 1.2,
|
|
1025
1025
|
bounces: 1
|
|
1026
|
-
}, { overshoot:
|
|
1026
|
+
}, { overshoot: n, bounces: a } = i, r = this.generateScaleBounceKeyframes(a, n);
|
|
1027
1027
|
let s = e;
|
|
1028
1028
|
for (let h = 0; h < r.length; h++)
|
|
1029
1029
|
if (t <= r[h].time) {
|
|
@@ -1039,12 +1039,12 @@ class de {
|
|
|
1039
1039
|
generateScaleBounceKeyframes(t, e) {
|
|
1040
1040
|
const i = [];
|
|
1041
1041
|
i.push({ time: 0.5, scale: e });
|
|
1042
|
-
let
|
|
1042
|
+
let n = e;
|
|
1043
1043
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1044
1044
|
let h = 0.5;
|
|
1045
1045
|
for (let l = 0; l < t; l++) {
|
|
1046
|
-
const u = 1 - (
|
|
1047
|
-
h += s, i.push({ time: h, scale: u }),
|
|
1046
|
+
const u = 1 - (n - 1) * a;
|
|
1047
|
+
h += s, i.push({ time: h, scale: u }), n = 1 + (n - 1) * a * a, h += s, l < t - 1 && i.push({ time: h, scale: n });
|
|
1048
1048
|
}
|
|
1049
1049
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1050
1050
|
}
|
|
@@ -1068,19 +1068,19 @@ class ue {
|
|
|
1068
1068
|
*/
|
|
1069
1069
|
generate(t, e, i = {}) {
|
|
1070
1070
|
var w, F, N, P, D, U, k, z, x;
|
|
1071
|
-
const
|
|
1072
|
-
for (let
|
|
1073
|
-
const O = this.random(I, y), M = this.random(
|
|
1074
|
-
id:
|
|
1071
|
+
const n = [], { width: a, height: r } = e, s = this.config.spacing.padding, h = i.fixedHeight ?? 200, l = ((w = this.imageConfig.rotation) == null ? void 0 : w.mode) ?? "none", u = ((N = (F = this.imageConfig.rotation) == null ? void 0 : F.range) == null ? void 0 : N.min) ?? -15, c = ((D = (P = this.imageConfig.rotation) == null ? void 0 : P.range) == null ? void 0 : D.max) ?? 15, d = ((k = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : k.min) ?? 1, m = ((x = (z = this.imageConfig.sizing) == null ? void 0 : z.variance) == null ? void 0 : x.max) ?? 1, b = d !== 1 || m !== 1, g = h * 1.5 / 2, f = h / 2, y = a - s - g, v = r - s - f, I = s + g, C = s + f;
|
|
1072
|
+
for (let A = 0; A < t; A++) {
|
|
1073
|
+
const O = this.random(I, y), M = this.random(C, v), T = l === "random" ? this.random(u, c) : 0, R = b ? this.random(d, m) : 1, H = h * R, K = {
|
|
1074
|
+
id: A,
|
|
1075
1075
|
x: O,
|
|
1076
1076
|
y: M,
|
|
1077
1077
|
rotation: T,
|
|
1078
1078
|
scale: R,
|
|
1079
1079
|
baseSize: H
|
|
1080
1080
|
};
|
|
1081
|
-
|
|
1081
|
+
n.push(K);
|
|
1082
1082
|
}
|
|
1083
|
-
return
|
|
1083
|
+
return n;
|
|
1084
1084
|
}
|
|
1085
1085
|
/**
|
|
1086
1086
|
* Utility: Generate random number between min and max
|
|
@@ -1104,11 +1104,11 @@ class ge {
|
|
|
1104
1104
|
* @returns Array of layout objects with position, rotation, scale
|
|
1105
1105
|
*/
|
|
1106
1106
|
generate(t, e, i = {}) {
|
|
1107
|
-
var F, N, P, D, U, k, z, x,
|
|
1108
|
-
const
|
|
1107
|
+
var F, N, P, D, U, k, z, x, A;
|
|
1108
|
+
const n = [], { width: a, height: r } = e, { debugRadials: s } = this.config, h = i.fixedHeight ?? 200, l = ((F = this.imageConfig.rotation) == null ? void 0 : F.mode) ?? "none", u = ((P = (N = this.imageConfig.rotation) == null ? void 0 : N.range) == null ? void 0 : P.min) ?? -15, c = ((U = (D = this.imageConfig.rotation) == null ? void 0 : D.range) == null ? void 0 : U.max) ?? 15, d = ((z = (k = this.imageConfig.sizing) == null ? void 0 : k.variance) == null ? void 0 : z.min) ?? 1, m = ((A = (x = this.imageConfig.sizing) == null ? void 0 : x.variance) == null ? void 0 : A.max) ?? 1, b = d !== 1 || m !== 1, p = this.config.scaleDecay ?? 0, g = ["green", "blue", "red", "yellow", "orange", "purple"], f = i.fixedHeight ?? h, y = a / 2, v = r / 2, I = Math.ceil(Math.sqrt(t));
|
|
1109
1109
|
if (t > 0) {
|
|
1110
1110
|
const O = b ? this.random(d, m) : 1, M = f * O;
|
|
1111
|
-
|
|
1111
|
+
n.push({
|
|
1112
1112
|
id: 0,
|
|
1113
1113
|
x: y,
|
|
1114
1114
|
y: v,
|
|
@@ -1121,22 +1121,22 @@ class ge {
|
|
|
1121
1121
|
borderColor: s ? "cyan" : void 0
|
|
1122
1122
|
});
|
|
1123
1123
|
}
|
|
1124
|
-
let
|
|
1125
|
-
for (;
|
|
1124
|
+
let C = 1, w = 1;
|
|
1125
|
+
for (; C < t; ) {
|
|
1126
1126
|
const O = w / I, M = p > 0 ? 1 - O * p * 0.5 : 1, T = w * (f * 0.8), R = T * 1.5, H = Math.PI * (3 * (R + T) - Math.sqrt((3 * R + T) * (R + 3 * T))), K = this.estimateWidth(f), X = Math.floor(H / (K * 0.7));
|
|
1127
1127
|
if (X === 0) {
|
|
1128
1128
|
w++;
|
|
1129
1129
|
continue;
|
|
1130
1130
|
}
|
|
1131
1131
|
const B = 2 * Math.PI / X, Z = w * (20 * Math.PI / 180);
|
|
1132
|
-
for (let W = 0; W < X &&
|
|
1132
|
+
for (let W = 0; W < X && C < t; W++) {
|
|
1133
1133
|
const Q = W * B + Z, tt = b ? this.random(d, m) : 1, q = M * tt, et = f * q;
|
|
1134
1134
|
let Y = y + Math.cos(Q) * R, L = v + Math.sin(Q) * T;
|
|
1135
1135
|
const $ = this.config.spacing.padding ?? 50, G = et * 1.5 / 2, _ = et / 2;
|
|
1136
1136
|
Y - G < $ ? Y = $ + G : Y + G > a - $ && (Y = a - $ - G), L - _ < $ ? L = $ + _ : L + _ > r - $ && (L = r - $ - _);
|
|
1137
1137
|
const it = l === "random" ? this.random(u, c) : 0;
|
|
1138
|
-
|
|
1139
|
-
id:
|
|
1138
|
+
n.push({
|
|
1139
|
+
id: C,
|
|
1140
1140
|
x: Y,
|
|
1141
1141
|
y: L,
|
|
1142
1142
|
rotation: it,
|
|
@@ -1145,11 +1145,11 @@ class ge {
|
|
|
1145
1145
|
zIndex: Math.max(1, 100 - w),
|
|
1146
1146
|
// Outer rings have lower z-index
|
|
1147
1147
|
borderColor: s ? g[(w - 1) % g.length] : void 0
|
|
1148
|
-
}),
|
|
1148
|
+
}), C++;
|
|
1149
1149
|
}
|
|
1150
1150
|
w++;
|
|
1151
1151
|
}
|
|
1152
|
-
return
|
|
1152
|
+
return n;
|
|
1153
1153
|
}
|
|
1154
1154
|
/**
|
|
1155
1155
|
* Estimate image width based on height
|
|
@@ -1211,13 +1211,13 @@ class me {
|
|
|
1211
1211
|
*/
|
|
1212
1212
|
generate(t, e, i = {}) {
|
|
1213
1213
|
var X, B, Z, W, Q, tt, q, et, Y;
|
|
1214
|
-
const
|
|
1214
|
+
const n = [], { width: a, height: r } = e, s = { ...fe, ...this.config.grid }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((X = this.imageConfig.rotation) == null ? void 0 : X.mode) ?? "none", c = ((Z = (B = this.imageConfig.sizing) == null ? void 0 : B.variance) == null ? void 0 : Z.min) ?? 1, d = ((Q = (W = this.imageConfig.sizing) == null ? void 0 : W.variance) == null ? void 0 : Q.max) ?? 1, m = c !== 1 || d !== 1, b = a - 2 * h, p = r - 2 * h, { columns: g, rows: f } = this.calculateGridDimensions(
|
|
1215
1215
|
t,
|
|
1216
1216
|
b,
|
|
1217
1217
|
p,
|
|
1218
1218
|
l,
|
|
1219
1219
|
s
|
|
1220
|
-
), y = s.stagger === "row", v = s.stagger === "column", I = y ? g + 0.5 : g,
|
|
1220
|
+
), y = s.stagger === "row", v = s.stagger === "column", I = y ? g + 0.5 : g, C = v ? f + 0.5 : f, w = (b - s.gap * (g - 1)) / I, F = (p - s.gap * (f - 1)) / C, N = y ? w / 2 : 0, P = v ? F / 2 : 0, D = 1 + s.overlap, U = Math.min(w, F) * D, k = i.fixedHeight ? Math.min(i.fixedHeight, U) : U, z = g * w + (g - 1) * s.gap + N, x = f * F + (f - 1) * s.gap + P, A = h + (b - z) / 2, O = h + (p - x) / 2, M = g * f, T = s.columns !== "auto" && s.rows !== "auto", R = T && t > M;
|
|
1221
1221
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1222
1222
|
gridConfigColumns: s.columns,
|
|
1223
1223
|
gridConfigRows: s.rows,
|
|
@@ -1236,7 +1236,7 @@ class me {
|
|
|
1236
1236
|
G = Math.floor(V / M) + 1, H[J]++, s.fillDirection === "row" ? ($ = J % g, j = Math.floor(J / g)) : (j = J % f, $ = Math.floor(J / f));
|
|
1237
1237
|
} else
|
|
1238
1238
|
s.fillDirection === "row" ? ($ = L % g, j = Math.floor(L / g)) : (j = L % f, $ = Math.floor(L / f));
|
|
1239
|
-
let _ =
|
|
1239
|
+
let _ = A + $ * (w + s.gap) + w / 2, it = O + j * (F + s.gap) + F / 2;
|
|
1240
1240
|
if (s.stagger === "row" && j % 2 === 1 ? _ += w / 2 : s.stagger === "column" && $ % 2 === 1 && (it += F / 2), G > 0) {
|
|
1241
1241
|
const V = (G - 1) % Ft.length, J = Ft[V];
|
|
1242
1242
|
_ += J.x * K, it += J.y * K;
|
|
@@ -1262,7 +1262,7 @@ class me {
|
|
|
1262
1262
|
s.jitter > 0 ? wt = this.random(V * s.jitter, J * s.jitter) : wt = this.random(V, J);
|
|
1263
1263
|
}
|
|
1264
1264
|
let xt;
|
|
1265
|
-
R && G > 0 ? xt = 50 - G : xt = R ? 100 + L : L + 1,
|
|
1265
|
+
R && G > 0 ? xt = 50 - G : xt = R ? 100 + L : L + 1, n.push({
|
|
1266
1266
|
id: L,
|
|
1267
1267
|
x: nt,
|
|
1268
1268
|
y: ot,
|
|
@@ -1272,12 +1272,12 @@ class me {
|
|
|
1272
1272
|
zIndex: xt
|
|
1273
1273
|
});
|
|
1274
1274
|
}
|
|
1275
|
-
return
|
|
1275
|
+
return n;
|
|
1276
1276
|
}
|
|
1277
1277
|
/**
|
|
1278
1278
|
* Calculate optimal grid dimensions based on image count and container
|
|
1279
1279
|
*/
|
|
1280
|
-
calculateGridDimensions(t, e, i,
|
|
1280
|
+
calculateGridDimensions(t, e, i, n, a) {
|
|
1281
1281
|
let r, s;
|
|
1282
1282
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1283
1283
|
r = a.columns, s = a.rows;
|
|
@@ -1318,30 +1318,30 @@ class ye {
|
|
|
1318
1318
|
* @returns Array of layout objects with position, rotation, scale
|
|
1319
1319
|
*/
|
|
1320
1320
|
generate(t, e, i = {}) {
|
|
1321
|
-
var
|
|
1322
|
-
const
|
|
1321
|
+
var C, w, F, N, P, D, U, k, z;
|
|
1322
|
+
const n = [], { width: a, height: r } = e, s = { ...be, ...this.config.spiral }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((C = this.imageConfig.rotation) == null ? void 0 : C.mode) ?? "none", c = ((F = (w = this.imageConfig.rotation) == null ? void 0 : w.range) == null ? void 0 : F.min) ?? -15, d = ((P = (N = this.imageConfig.rotation) == null ? void 0 : N.range) == null ? void 0 : P.max) ?? 15, m = ((U = (D = this.imageConfig.sizing) == null ? void 0 : D.variance) == null ? void 0 : U.min) ?? 1, b = ((z = (k = this.imageConfig.sizing) == null ? void 0 : k.variance) == null ? void 0 : z.max) ?? 1, p = m !== 1 || b !== 1, g = this.config.scaleDecay ?? s.scaleDecay, f = a / 2, y = r / 2, v = Math.min(
|
|
1323
1323
|
f - h - l / 2,
|
|
1324
1324
|
y - h - l / 2
|
|
1325
1325
|
), I = s.direction === "clockwise" ? -1 : 1;
|
|
1326
1326
|
for (let x = 0; x < t; x++) {
|
|
1327
|
-
let
|
|
1327
|
+
let A, O;
|
|
1328
1328
|
if (s.spiralType === "golden")
|
|
1329
|
-
|
|
1329
|
+
A = x * pe * I + s.startAngle, O = this.calculateGoldenRadius(x, t, v, s.tightness);
|
|
1330
1330
|
else if (s.spiralType === "archimedean") {
|
|
1331
1331
|
const _ = x * 0.5 * s.tightness;
|
|
1332
|
-
|
|
1332
|
+
A = _ * I + s.startAngle, O = this.calculateArchimedeanRadius(_, t, v, s.tightness);
|
|
1333
1333
|
} else {
|
|
1334
1334
|
const _ = x * 0.3 * s.tightness;
|
|
1335
|
-
|
|
1335
|
+
A = _ * I + s.startAngle, O = this.calculateLogarithmicRadius(_, t, v, s.tightness);
|
|
1336
1336
|
}
|
|
1337
|
-
const M = f + Math.cos(
|
|
1337
|
+
const M = f + Math.cos(A) * O, T = y + Math.sin(A) * O, R = O / v, H = g > 0 ? 1 - R * g * 0.5 : 1, K = p ? this.random(m, b) : 1, X = H * K, B = l * X, W = B * 1.5 / 2, Q = B / 2, tt = h + W, q = a - h - W, et = h + Q, Y = r - h - Q, L = Math.max(tt, Math.min(M, q)), $ = Math.max(et, Math.min(T, Y));
|
|
1338
1338
|
let j = 0;
|
|
1339
1339
|
if (u === "random") {
|
|
1340
|
-
const _ =
|
|
1340
|
+
const _ = A * 180 / Math.PI % 360, it = this.random(c, d);
|
|
1341
1341
|
j = s.spiralType === "golden" ? it : _ * 0.1 + it * 0.9;
|
|
1342
|
-
} else u === "tangent" && (j = this.calculateSpiralTangent(
|
|
1342
|
+
} else u === "tangent" && (j = this.calculateSpiralTangent(A, O, s));
|
|
1343
1343
|
const G = t - x;
|
|
1344
|
-
|
|
1344
|
+
n.push({
|
|
1345
1345
|
id: x,
|
|
1346
1346
|
x: L,
|
|
1347
1347
|
y: $,
|
|
@@ -1351,47 +1351,47 @@ class ye {
|
|
|
1351
1351
|
zIndex: G
|
|
1352
1352
|
});
|
|
1353
1353
|
}
|
|
1354
|
-
return
|
|
1354
|
+
return n;
|
|
1355
1355
|
}
|
|
1356
1356
|
/**
|
|
1357
1357
|
* Calculate tangent angle for spiral curve at given position
|
|
1358
1358
|
* This aligns the image along the spiral's direction of travel
|
|
1359
1359
|
*/
|
|
1360
1360
|
calculateSpiralTangent(t, e, i) {
|
|
1361
|
-
let
|
|
1361
|
+
let n;
|
|
1362
1362
|
if (i.spiralType === "golden")
|
|
1363
|
-
|
|
1363
|
+
n = t + Math.PI / 2;
|
|
1364
1364
|
else if (i.spiralType === "archimedean") {
|
|
1365
1365
|
const r = 1 / i.tightness, s = Math.atan(e / r);
|
|
1366
|
-
|
|
1366
|
+
n = t + s;
|
|
1367
1367
|
} else {
|
|
1368
1368
|
const r = 0.15 / i.tightness, s = Math.atan(1 / r);
|
|
1369
|
-
|
|
1369
|
+
n = t + s;
|
|
1370
1370
|
}
|
|
1371
|
-
return
|
|
1371
|
+
return n * 180 / Math.PI % 360 - 90;
|
|
1372
1372
|
}
|
|
1373
1373
|
/**
|
|
1374
1374
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1375
1375
|
* Creates even distribution like sunflower seeds
|
|
1376
1376
|
*/
|
|
1377
|
-
calculateGoldenRadius(t, e, i,
|
|
1378
|
-
const r = i / Math.sqrt(e) * Math.sqrt(t) /
|
|
1377
|
+
calculateGoldenRadius(t, e, i, n) {
|
|
1378
|
+
const r = i / Math.sqrt(e) * Math.sqrt(t) / n;
|
|
1379
1379
|
return Math.min(r, i);
|
|
1380
1380
|
}
|
|
1381
1381
|
/**
|
|
1382
1382
|
* Calculate radius for Archimedean spiral
|
|
1383
1383
|
* r = a + b*θ (constant spacing between arms)
|
|
1384
1384
|
*/
|
|
1385
|
-
calculateArchimedeanRadius(t, e, i,
|
|
1386
|
-
const a = e * 0.5 *
|
|
1385
|
+
calculateArchimedeanRadius(t, e, i, n) {
|
|
1386
|
+
const a = e * 0.5 * n;
|
|
1387
1387
|
return t / a * i;
|
|
1388
1388
|
}
|
|
1389
1389
|
/**
|
|
1390
1390
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1391
1391
|
* r = a * e^(b*θ)
|
|
1392
1392
|
*/
|
|
1393
|
-
calculateLogarithmicRadius(t, e, i,
|
|
1394
|
-
const a = i * 0.05, r = 0.15 /
|
|
1393
|
+
calculateLogarithmicRadius(t, e, i, n) {
|
|
1394
|
+
const a = i * 0.05, r = 0.15 / n, s = a * Math.exp(r * t), h = e * 0.3 * n, l = a * Math.exp(r * h);
|
|
1395
1395
|
return s / l * i;
|
|
1396
1396
|
}
|
|
1397
1397
|
/**
|
|
@@ -1421,8 +1421,8 @@ class we {
|
|
|
1421
1421
|
* @returns Array of layout objects with position, rotation, scale
|
|
1422
1422
|
*/
|
|
1423
1423
|
generate(t, e, i = {}) {
|
|
1424
|
-
var I,
|
|
1425
|
-
const
|
|
1424
|
+
var I, C, w, F, N, P, D, U, k;
|
|
1425
|
+
const n = [], { width: a, height: r } = e, s = { ...ve, ...this.config.cluster }, h = this.config.spacing.padding, l = i.fixedHeight ?? 200, u = ((I = this.imageConfig.rotation) == null ? void 0 : I.mode) ?? "none", c = ((w = (C = this.imageConfig.rotation) == null ? void 0 : C.range) == null ? void 0 : w.min) ?? -15, d = ((N = (F = this.imageConfig.rotation) == null ? void 0 : F.range) == null ? void 0 : N.max) ?? 15, m = ((D = (P = this.imageConfig.sizing) == null ? void 0 : P.variance) == null ? void 0 : D.min) ?? 1, b = ((k = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : k.max) ?? 1, p = m !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1426
1426
|
t,
|
|
1427
1427
|
s.clusterCount,
|
|
1428
1428
|
a,
|
|
@@ -1439,8 +1439,8 @@ class we {
|
|
|
1439
1439
|
y[z % g]++;
|
|
1440
1440
|
let v = 0;
|
|
1441
1441
|
for (let z = 0; z < g; z++) {
|
|
1442
|
-
const x = f[z],
|
|
1443
|
-
for (let O = 0; O <
|
|
1442
|
+
const x = f[z], A = y[z];
|
|
1443
|
+
for (let O = 0; O < A; O++) {
|
|
1444
1444
|
let M, T;
|
|
1445
1445
|
if (s.distribution === "gaussian")
|
|
1446
1446
|
M = this.gaussianRandom() * x.spread, T = this.gaussianRandom() * x.spread;
|
|
@@ -1455,7 +1455,7 @@ class we {
|
|
|
1455
1455
|
const tt = B * 1.5 / 2, q = B / 2;
|
|
1456
1456
|
Z = Math.max(h + tt, Math.min(Z, a - h - tt)), W = Math.max(h + q, Math.min(W, r - h - q));
|
|
1457
1457
|
const et = u === "random" ? this.random(c, d) : 0, L = Math.sqrt(M * M + T * T) / x.spread, $ = Math.round((1 - L) * 50) + 1;
|
|
1458
|
-
|
|
1458
|
+
n.push({
|
|
1459
1459
|
id: v,
|
|
1460
1460
|
x: Z,
|
|
1461
1461
|
y: W,
|
|
@@ -1466,24 +1466,24 @@ class we {
|
|
|
1466
1466
|
}), v++;
|
|
1467
1467
|
}
|
|
1468
1468
|
}
|
|
1469
|
-
return
|
|
1469
|
+
return n;
|
|
1470
1470
|
}
|
|
1471
1471
|
/**
|
|
1472
1472
|
* Calculate optimal number of clusters based on image count and container
|
|
1473
1473
|
*/
|
|
1474
|
-
calculateClusterCount(t, e, i,
|
|
1474
|
+
calculateClusterCount(t, e, i, n, a) {
|
|
1475
1475
|
if (e !== "auto")
|
|
1476
1476
|
return Math.max(1, Math.min(e, t));
|
|
1477
1477
|
const s = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
|
|
1478
|
-
i / a * (
|
|
1478
|
+
i / a * (n / a) * 0.6
|
|
1479
1479
|
);
|
|
1480
1480
|
return Math.max(1, Math.min(s, h, 10));
|
|
1481
1481
|
}
|
|
1482
1482
|
/**
|
|
1483
1483
|
* Generate cluster center positions with spacing constraints
|
|
1484
1484
|
*/
|
|
1485
|
-
generateClusterCenters(t, e, i,
|
|
1486
|
-
const r = [], h =
|
|
1485
|
+
generateClusterCenters(t, e, i, n, a) {
|
|
1486
|
+
const r = [], h = n + a.clusterSpread, l = e - n - a.clusterSpread, u = n + a.clusterSpread, c = i - n - a.clusterSpread;
|
|
1487
1487
|
for (let d = 0; d < t; d++) {
|
|
1488
1488
|
let m = null, b = -1;
|
|
1489
1489
|
for (let p = 0; p < 100; p++) {
|
|
@@ -1494,8 +1494,8 @@ class we {
|
|
|
1494
1494
|
};
|
|
1495
1495
|
let f = 1 / 0;
|
|
1496
1496
|
for (const y of r) {
|
|
1497
|
-
const v = g.x - y.x, I = g.y - y.y,
|
|
1498
|
-
f = Math.min(f,
|
|
1497
|
+
const v = g.x - y.x, I = g.y - y.y, C = Math.sqrt(v * v + I * I);
|
|
1498
|
+
f = Math.min(f, C);
|
|
1499
1499
|
}
|
|
1500
1500
|
if ((r.length === 0 || f > b) && (m = g, b = f), f >= a.clusterSpacing)
|
|
1501
1501
|
break;
|
|
@@ -1541,21 +1541,21 @@ class xe {
|
|
|
1541
1541
|
*/
|
|
1542
1542
|
generate(t, e, i = {}) {
|
|
1543
1543
|
var R, H, K, X, B, Z, W, Q, tt;
|
|
1544
|
-
const
|
|
1544
|
+
const n = [], { width: a, height: r } = e, s = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, l = ((R = this.imageConfig.rotation) == null ? void 0 : R.mode) ?? "none", u = ((K = (H = this.imageConfig.rotation) == null ? void 0 : H.range) == null ? void 0 : K.min) ?? -15, c = ((B = (X = this.imageConfig.rotation) == null ? void 0 : X.range) == null ? void 0 : B.max) ?? 15, d = ((W = (Z = this.imageConfig.sizing) == null ? void 0 : Z.variance) == null ? void 0 : W.min) ?? 1, m = ((tt = (Q = this.imageConfig.sizing) == null ? void 0 : Q.variance) == null ? void 0 : tt.max) ?? 1, b = d !== 1 || m !== 1, p = i.fixedHeight ?? s, g = {
|
|
1545
1545
|
...jt,
|
|
1546
1546
|
...this.config.wave
|
|
1547
|
-
}, { rows: f, amplitude: y, frequency: v, phaseShift: I, synchronization:
|
|
1547
|
+
}, { rows: f, amplitude: y, frequency: v, phaseShift: I, synchronization: C } = g, w = Math.ceil(t / f), P = p * 1.5 / 2, D = h + P, U = a - h - P, k = U - D, z = w > 1 ? k / (w - 1) : 0, x = h + y + p / 2, A = r - h - y - p / 2, O = A - x, M = f > 1 ? O / (f - 1) : 0;
|
|
1548
1548
|
let T = 0;
|
|
1549
1549
|
for (let q = 0; q < f && T < t; q++) {
|
|
1550
|
-
const et = f === 1 ? (x +
|
|
1550
|
+
const et = f === 1 ? (x + A) / 2 : x + q * M;
|
|
1551
1551
|
let Y = 0;
|
|
1552
|
-
|
|
1552
|
+
C === "offset" ? Y = q * I : C === "alternating" && (Y = q * Math.PI);
|
|
1553
1553
|
for (let L = 0; L < w && T < t; L++) {
|
|
1554
1554
|
const $ = w === 1 ? (D + U) / 2 : D + L * z, j = this.calculateWaveY($, a, y, v, Y), G = $, _ = et + j, it = b ? this.random(d, m) : 1, nt = p * it;
|
|
1555
1555
|
let ot = 0;
|
|
1556
1556
|
l === "tangent" ? ot = this.calculateRotation($, a, y, v, Y) : l === "random" && (ot = this.random(u, c));
|
|
1557
1557
|
const at = nt * 1.5 / 2, bt = nt / 2, dt = h + at, ut = a - h - at, yt = h + bt, vt = r - h - bt;
|
|
1558
|
-
|
|
1558
|
+
n.push({
|
|
1559
1559
|
id: T,
|
|
1560
1560
|
x: Math.max(dt, Math.min(G, ut)),
|
|
1561
1561
|
y: Math.max(yt, Math.min(_, vt)),
|
|
@@ -1566,7 +1566,7 @@ class xe {
|
|
|
1566
1566
|
}), T++;
|
|
1567
1567
|
}
|
|
1568
1568
|
}
|
|
1569
|
-
return
|
|
1569
|
+
return n;
|
|
1570
1570
|
}
|
|
1571
1571
|
/**
|
|
1572
1572
|
* Calculate Y position displacement on wave curve
|
|
@@ -1577,9 +1577,9 @@ class xe {
|
|
|
1577
1577
|
* @param phase - Phase offset
|
|
1578
1578
|
* @returns Y displacement from baseline
|
|
1579
1579
|
*/
|
|
1580
|
-
calculateWaveY(t, e, i,
|
|
1580
|
+
calculateWaveY(t, e, i, n, a) {
|
|
1581
1581
|
const r = t / e;
|
|
1582
|
-
return i * Math.sin(
|
|
1582
|
+
return i * Math.sin(n * r * 2 * Math.PI + a);
|
|
1583
1583
|
}
|
|
1584
1584
|
/**
|
|
1585
1585
|
* Calculate rotation based on wave tangent
|
|
@@ -1590,8 +1590,8 @@ class xe {
|
|
|
1590
1590
|
* @param phase - Phase offset
|
|
1591
1591
|
* @returns Rotation angle in degrees
|
|
1592
1592
|
*/
|
|
1593
|
-
calculateRotation(t, e, i,
|
|
1594
|
-
const r = t / e, s = i *
|
|
1593
|
+
calculateRotation(t, e, i, n, a) {
|
|
1594
|
+
const r = t / e, s = i * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + a) / e;
|
|
1595
1595
|
return Math.atan(s) * (180 / Math.PI);
|
|
1596
1596
|
}
|
|
1597
1597
|
/**
|
|
@@ -1639,10 +1639,10 @@ class Ee {
|
|
|
1639
1639
|
* @returns Array of layout objects with position, rotation, scale
|
|
1640
1640
|
*/
|
|
1641
1641
|
generateLayout(t, e, i = {}) {
|
|
1642
|
-
const
|
|
1643
|
-
return
|
|
1642
|
+
const n = this.generator.generate(t, e, i);
|
|
1643
|
+
return n.forEach((a) => {
|
|
1644
1644
|
this.layouts.set(a.id, a);
|
|
1645
|
-
}),
|
|
1645
|
+
}), n;
|
|
1646
1646
|
}
|
|
1647
1647
|
/**
|
|
1648
1648
|
* Get the original layout state for an image
|
|
@@ -1695,8 +1695,8 @@ class Ee {
|
|
|
1695
1695
|
return;
|
|
1696
1696
|
if (typeof i == "number")
|
|
1697
1697
|
return i;
|
|
1698
|
-
const
|
|
1699
|
-
return a === "mobile" ?
|
|
1698
|
+
const n = i, a = this.resolveBreakpoint(t);
|
|
1699
|
+
return a === "mobile" ? n.mobile ?? n.tablet ?? n.screen : a === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1700
1700
|
}
|
|
1701
1701
|
/**
|
|
1702
1702
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1706,8 +1706,8 @@ class Ee {
|
|
|
1706
1706
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1707
1707
|
* @returns Calculated sizing result with height
|
|
1708
1708
|
*/
|
|
1709
|
-
calculateAdaptiveSize(t, e, i,
|
|
1710
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1709
|
+
calculateAdaptiveSize(t, e, i, n) {
|
|
1710
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1711
1711
|
if (r !== void 0)
|
|
1712
1712
|
return { height: r };
|
|
1713
1713
|
const s = (a == null ? void 0 : a.minSize) ?? 50, h = (a == null ? void 0 : a.maxSize) ?? 400, l = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: c, height: d } = t, p = c * d * l / e;
|
|
@@ -1727,77 +1727,77 @@ class Ee {
|
|
|
1727
1727
|
return Math.max(e, Math.min(i, t));
|
|
1728
1728
|
}
|
|
1729
1729
|
}
|
|
1730
|
-
var S = /* @__PURE__ */ ((
|
|
1731
|
-
function Se(
|
|
1732
|
-
return
|
|
1730
|
+
var S = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(S || {});
|
|
1731
|
+
function Se(o) {
|
|
1732
|
+
return o in St;
|
|
1733
1733
|
}
|
|
1734
|
-
function Ie(
|
|
1735
|
-
return
|
|
1734
|
+
function Ie(o) {
|
|
1735
|
+
return o ? Se(o) ? St[o] : o : St.md;
|
|
1736
1736
|
}
|
|
1737
|
-
function Te(
|
|
1738
|
-
if (!
|
|
1737
|
+
function Te(o) {
|
|
1738
|
+
if (!o) return "";
|
|
1739
1739
|
const t = [];
|
|
1740
|
-
if (
|
|
1741
|
-
if (typeof
|
|
1742
|
-
t.push(`drop-shadow(${
|
|
1740
|
+
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)
|
|
1741
|
+
if (typeof o.dropShadow == "string")
|
|
1742
|
+
t.push(`drop-shadow(${o.dropShadow})`);
|
|
1743
1743
|
else {
|
|
1744
|
-
const e =
|
|
1744
|
+
const e = o.dropShadow;
|
|
1745
1745
|
t.push(`drop-shadow(${e.x}px ${e.y}px ${e.blur}px ${e.color})`);
|
|
1746
1746
|
}
|
|
1747
1747
|
return t.join(" ");
|
|
1748
1748
|
}
|
|
1749
|
-
function ct(
|
|
1750
|
-
if (!
|
|
1749
|
+
function ct(o) {
|
|
1750
|
+
if (!o || o.style === "none" || o.width === 0)
|
|
1751
1751
|
return "none";
|
|
1752
|
-
const t =
|
|
1752
|
+
const t = o.width ?? 0, e = o.style ?? "solid", i = o.color ?? "#000000";
|
|
1753
1753
|
return `${t}px ${e} ${i}`;
|
|
1754
1754
|
}
|
|
1755
|
-
function ft(
|
|
1755
|
+
function ft(o) {
|
|
1756
1756
|
var a, r;
|
|
1757
|
-
if (!
|
|
1757
|
+
if (!o) return {};
|
|
1758
1758
|
const t = {};
|
|
1759
|
-
if (
|
|
1760
|
-
const s = ((a =
|
|
1761
|
-
|
|
1762
|
-
} else ((r =
|
|
1763
|
-
if (
|
|
1764
|
-
const s =
|
|
1759
|
+
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
1760
|
+
const s = ((a = o.border) == null ? void 0 : a.radius) ?? 0;
|
|
1761
|
+
o.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : s && (t.borderTopLeftRadius = `${s}px`), o.borderRadiusTopRight !== void 0 ? t.borderTopRightRadius = `${o.borderRadiusTopRight}px` : s && (t.borderTopRightRadius = `${s}px`), o.borderRadiusBottomRight !== void 0 ? t.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : s && (t.borderBottomRightRadius = `${s}px`), o.borderRadiusBottomLeft !== void 0 ? t.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : s && (t.borderBottomLeftRadius = `${s}px`);
|
|
1762
|
+
} else ((r = o.border) == null ? void 0 : r.radius) !== void 0 && (t.borderRadius = `${o.border.radius}px`);
|
|
1763
|
+
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
1764
|
+
const s = o.border || {}, h = { ...s, ...o.borderTop }, l = { ...s, ...o.borderRight }, u = { ...s, ...o.borderBottom }, c = { ...s, ...o.borderLeft };
|
|
1765
1765
|
t.borderTop = ct(h), t.borderRight = ct(l), t.borderBottom = ct(u), t.borderLeft = ct(c);
|
|
1766
|
-
} else
|
|
1767
|
-
|
|
1768
|
-
const
|
|
1769
|
-
if (t.filter =
|
|
1770
|
-
const s =
|
|
1771
|
-
t.outline = `${s}px ${h} ${l}`,
|
|
1772
|
-
}
|
|
1773
|
-
return
|
|
1766
|
+
} else o.border && (t.border = ct(o.border));
|
|
1767
|
+
o.shadow !== void 0 && (t.boxShadow = Ie(o.shadow));
|
|
1768
|
+
const n = Te(o.filter);
|
|
1769
|
+
if (t.filter = n || "none", o.opacity !== void 0 && (t.opacity = String(o.opacity)), o.cursor !== void 0 && (t.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
1770
|
+
const s = o.outline.width ?? 0, h = o.outline.style ?? "solid", l = o.outline.color ?? "#000000";
|
|
1771
|
+
t.outline = `${s}px ${h} ${l}`, o.outline.offset !== void 0 && (t.outlineOffset = `${o.outline.offset}px`);
|
|
1772
|
+
}
|
|
1773
|
+
return o.objectFit !== void 0 && (t.objectFit = o.objectFit), o.aspectRatio !== void 0 && (t.aspectRatio = o.aspectRatio), t;
|
|
1774
1774
|
}
|
|
1775
|
-
function lt(
|
|
1776
|
-
t.borderRadius !== void 0 && (
|
|
1775
|
+
function lt(o, t) {
|
|
1776
|
+
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);
|
|
1777
1777
|
}
|
|
1778
|
-
function Pt(
|
|
1779
|
-
return
|
|
1778
|
+
function Pt(o) {
|
|
1779
|
+
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
1780
1780
|
}
|
|
1781
|
-
function ht(
|
|
1781
|
+
function ht(o, t) {
|
|
1782
1782
|
const e = Pt(t);
|
|
1783
1783
|
e && e.split(" ").forEach((i) => {
|
|
1784
|
-
i.trim() &&
|
|
1784
|
+
i.trim() && o.classList.add(i.trim());
|
|
1785
1785
|
});
|
|
1786
1786
|
}
|
|
1787
|
-
function _t(
|
|
1787
|
+
function _t(o, t) {
|
|
1788
1788
|
const e = Pt(t);
|
|
1789
1789
|
e && e.split(" ").forEach((i) => {
|
|
1790
|
-
i.trim() &&
|
|
1790
|
+
i.trim() && o.classList.remove(i.trim());
|
|
1791
1791
|
});
|
|
1792
1792
|
}
|
|
1793
1793
|
const Ot = {
|
|
1794
1794
|
UNFOCUSING: 999,
|
|
1795
1795
|
FOCUSING: 1e3
|
|
1796
1796
|
};
|
|
1797
|
-
class
|
|
1797
|
+
class Ce {
|
|
1798
1798
|
constructor(t, e, i) {
|
|
1799
|
-
var
|
|
1800
|
-
this.state = S.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = ft(i == null ? void 0 : i.default), this.focusedStyles = ft(i == null ? void 0 : i.focused), this.defaultClassName = (
|
|
1799
|
+
var n, a;
|
|
1800
|
+
this.state = S.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = ft(i == null ? void 0 : i.default), this.focusedStyles = ft(i == null ? void 0 : i.focused), this.defaultClassName = (n = i == null ? void 0 : i.default) == null ? void 0 : n.className, this.focusedClassName = (a = i == null ? void 0 : i.focused) == null ? void 0 : a.className;
|
|
1801
1801
|
}
|
|
1802
1802
|
/**
|
|
1803
1803
|
* Get current state machine state
|
|
@@ -1822,9 +1822,9 @@ class Ae {
|
|
|
1822
1822
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1823
1823
|
*/
|
|
1824
1824
|
calculateFocusDimensions(t, e, i) {
|
|
1825
|
-
const
|
|
1825
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), a = i.height * n, r = t / e;
|
|
1826
1826
|
let s = a, h = s * r;
|
|
1827
|
-
const l = i.width *
|
|
1827
|
+
const l = i.width * n;
|
|
1828
1828
|
return h > l && (h = l, s = h / r), { width: h, height: s };
|
|
1829
1829
|
}
|
|
1830
1830
|
/**
|
|
@@ -1832,7 +1832,7 @@ class Ae {
|
|
|
1832
1832
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1833
1833
|
*/
|
|
1834
1834
|
calculateFocusTransform(t, e) {
|
|
1835
|
-
const i = t.width / 2,
|
|
1835
|
+
const i = t.width / 2, n = t.height / 2, a = i - e.x, r = n - e.y;
|
|
1836
1836
|
return {
|
|
1837
1837
|
x: a,
|
|
1838
1838
|
y: r,
|
|
@@ -1847,8 +1847,8 @@ class Ae {
|
|
|
1847
1847
|
buildDimensionZoomTransform(t) {
|
|
1848
1848
|
const e = ["translate(-50%, -50%)"];
|
|
1849
1849
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
1850
|
-
const i = t.x ?? 0,
|
|
1851
|
-
e.push(`translate(${i}px, ${
|
|
1850
|
+
const i = t.x ?? 0, n = t.y ?? 0;
|
|
1851
|
+
e.push(`translate(${i}px, ${n}px)`);
|
|
1852
1852
|
}
|
|
1853
1853
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), e.join(" ");
|
|
1854
1854
|
}
|
|
@@ -1856,13 +1856,13 @@ class Ae {
|
|
|
1856
1856
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1857
1857
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1858
1858
|
*/
|
|
1859
|
-
animateWithDimensions(t, e, i,
|
|
1859
|
+
animateWithDimensions(t, e, i, n, a, r, s, h) {
|
|
1860
1860
|
const l = this.buildDimensionZoomTransform(e), u = this.buildDimensionZoomTransform(i);
|
|
1861
1861
|
return t.style.transition = "none", t.animate(
|
|
1862
1862
|
[
|
|
1863
1863
|
{
|
|
1864
1864
|
transform: l,
|
|
1865
|
-
width: `${
|
|
1865
|
+
width: `${n}px`,
|
|
1866
1866
|
height: `${a}px`
|
|
1867
1867
|
},
|
|
1868
1868
|
{
|
|
@@ -1896,10 +1896,10 @@ class Ae {
|
|
|
1896
1896
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1897
1897
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1898
1898
|
*/
|
|
1899
|
-
startFocusAnimation(t, e, i,
|
|
1899
|
+
startFocusAnimation(t, e, i, n, a) {
|
|
1900
1900
|
const r = t.style.zIndex || "", s = t.offsetWidth, h = t.offsetHeight, l = this.calculateFocusDimensions(s, h, e), u = this.calculateFocusTransform(e, i);
|
|
1901
1901
|
this.applyFocusedStyling(t, Ot.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1902
|
-
const c =
|
|
1902
|
+
const c = n ?? {
|
|
1903
1903
|
x: 0,
|
|
1904
1904
|
y: 0,
|
|
1905
1905
|
rotation: i.rotation,
|
|
@@ -1946,10 +1946,10 @@ class Ae {
|
|
|
1946
1946
|
* Animates back to original dimensions for consistent behavior
|
|
1947
1947
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1948
1948
|
*/
|
|
1949
|
-
startUnfocusAnimation(t, e, i,
|
|
1949
|
+
startUnfocusAnimation(t, e, i, n) {
|
|
1950
1950
|
var b, p, g, f, y;
|
|
1951
1951
|
t.style.zIndex = String(Ot.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1952
|
-
const a = i ?? ((b = this.focusData) == null ? void 0 : b.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = (
|
|
1952
|
+
const a = i ?? ((b = this.focusData) == null ? void 0 : b.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = (n == null ? void 0 : n.width) ?? ((p = this.focusData) == null ? void 0 : p.focusWidth) ?? t.offsetWidth, s = (n == null ? void 0 : n.height) ?? ((g = this.focusData) == null ? void 0 : g.focusHeight) ?? t.offsetHeight, h = {
|
|
1953
1953
|
x: 0,
|
|
1954
1954
|
y: 0,
|
|
1955
1955
|
rotation: e.rotation,
|
|
@@ -1994,10 +1994,10 @@ class Ae {
|
|
|
1994
1994
|
/**
|
|
1995
1995
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
1996
1996
|
*/
|
|
1997
|
-
resetElementInstantly(t, e, i,
|
|
1997
|
+
resetElementInstantly(t, e, i, n, a) {
|
|
1998
1998
|
this.animationEngine.cancelAllAnimations(t);
|
|
1999
1999
|
const r = ["translate(-50%, -50%)"];
|
|
2000
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2000
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${e.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, i);
|
|
2001
2001
|
}
|
|
2002
2002
|
/**
|
|
2003
2003
|
* Focus (zoom) an image to center of container
|
|
@@ -2026,10 +2026,10 @@ class Ae {
|
|
|
2026
2026
|
), this.incoming = null, this.state = S.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, ((r = this.focusData) == null ? void 0 : r.originalZIndex) || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = S.IDLE;
|
|
2027
2027
|
return;
|
|
2028
2028
|
}
|
|
2029
|
-
const
|
|
2029
|
+
const n = ++this.focusGeneration;
|
|
2030
2030
|
switch (this.state) {
|
|
2031
2031
|
case S.IDLE:
|
|
2032
|
-
if (this.state = S.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2032
|
+
if (this.state = S.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2033
2033
|
this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2034
2034
|
break;
|
|
2035
2035
|
case S.FOCUSED:
|
|
@@ -2039,7 +2039,7 @@ class Ae {
|
|
|
2039
2039
|
)), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2040
2040
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2041
2041
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2042
|
-
]), this.focusGeneration !==
|
|
2042
|
+
]), this.focusGeneration !== n)
|
|
2043
2043
|
return;
|
|
2044
2044
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((s = this.outgoing.originalState.zIndex) == null ? void 0 : s.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2045
2045
|
break;
|
|
@@ -2050,14 +2050,14 @@ class Ae {
|
|
|
2050
2050
|
((h = this.focusData) == null ? void 0 : h.originalZIndex) || "",
|
|
2051
2051
|
(l = this.focusData) == null ? void 0 : l.originalWidth,
|
|
2052
2052
|
(u = this.focusData) == null ? void 0 : u.originalHeight
|
|
2053
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2053
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2054
2054
|
this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2055
2055
|
break;
|
|
2056
2056
|
case S.UNFOCUSING:
|
|
2057
2057
|
if (this.state = S.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2058
2058
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2059
2059
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2060
|
-
]), this.focusGeneration !==
|
|
2060
|
+
]), this.focusGeneration !== n) return;
|
|
2061
2061
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2062
2062
|
break;
|
|
2063
2063
|
case S.CROSS_ANIMATING:
|
|
@@ -2075,7 +2075,7 @@ class Ae {
|
|
|
2075
2075
|
height: t.offsetHeight
|
|
2076
2076
|
};
|
|
2077
2077
|
if (this.incoming) {
|
|
2078
|
-
const I = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0),
|
|
2078
|
+
const I = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), C = {
|
|
2079
2079
|
x: I.x,
|
|
2080
2080
|
y: I.y,
|
|
2081
2081
|
rotation: I.rotation,
|
|
@@ -2088,7 +2088,7 @@ class Ae {
|
|
|
2088
2088
|
this.outgoing = this.startUnfocusAnimation(
|
|
2089
2089
|
this.incoming.element,
|
|
2090
2090
|
this.incoming.originalState,
|
|
2091
|
-
|
|
2091
|
+
C,
|
|
2092
2092
|
w
|
|
2093
2093
|
);
|
|
2094
2094
|
} else
|
|
@@ -2096,7 +2096,7 @@ class Ae {
|
|
|
2096
2096
|
if (this.incoming = this.startFocusAnimation(t, e, i, y, v), await Promise.all([
|
|
2097
2097
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2098
2098
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2099
|
-
]), this.focusGeneration !==
|
|
2099
|
+
]), this.focusGeneration !== n) return;
|
|
2100
2100
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2101
2101
|
return;
|
|
2102
2102
|
}
|
|
@@ -2127,7 +2127,7 @@ class Ae {
|
|
|
2127
2127
|
if (this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2128
2128
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2129
2129
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2130
|
-
]), this.focusGeneration !==
|
|
2130
|
+
]), this.focusGeneration !== n) return;
|
|
2131
2131
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, ((g = this.outgoing.originalState.zIndex) == null ? void 0 : g.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = S.FOCUSED;
|
|
2132
2132
|
break;
|
|
2133
2133
|
}
|
|
@@ -2184,8 +2184,8 @@ class Ae {
|
|
|
2184
2184
|
return;
|
|
2185
2185
|
}
|
|
2186
2186
|
this.state = S.UNFOCUSING;
|
|
2187
|
-
const e = this.currentFocus, i = this.focusData.originalState,
|
|
2188
|
-
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e,
|
|
2187
|
+
const e = this.currentFocus, i = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2188
|
+
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = S.IDLE);
|
|
2189
2189
|
}
|
|
2190
2190
|
/**
|
|
2191
2191
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2227,8 +2227,8 @@ class Ae {
|
|
|
2227
2227
|
*/
|
|
2228
2228
|
setDragOffset(t) {
|
|
2229
2229
|
if (!this.currentFocus || !this.focusData || this.state !== S.FOCUSED) return;
|
|
2230
|
-
const e = this.currentFocus, i = this.focusData.focusTransform,
|
|
2231
|
-
|
|
2230
|
+
const e = this.currentFocus, i = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], a = (i.x ?? 0) + t, r = i.y ?? 0;
|
|
2231
|
+
n.push(`translate(${a}px, ${r}px)`), i.rotation !== void 0 && n.push(`rotate(${i.rotation}deg)`), e.style.transition = "none", e.style.transform = n.join(" ");
|
|
2232
2232
|
}
|
|
2233
2233
|
/**
|
|
2234
2234
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2237,8 +2237,8 @@ class Ae {
|
|
|
2237
2237
|
*/
|
|
2238
2238
|
clearDragOffset(t, e = 150) {
|
|
2239
2239
|
if (!this.currentFocus || !this.focusData || this.state !== S.FOCUSED) return;
|
|
2240
|
-
const i = this.currentFocus,
|
|
2241
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2240
|
+
const i = this.currentFocus, n = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = n.x ?? 0, s = n.y ?? 0;
|
|
2241
|
+
a.push(`translate(${r}px, ${s}px)`), n.rotation !== void 0 && a.push(`rotate(${n.rotation}deg)`);
|
|
2242
2242
|
const h = a.join(" ");
|
|
2243
2243
|
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform = h, setTimeout(() => {
|
|
2244
2244
|
this.currentFocus === i && (i.style.transition = "none");
|
|
@@ -2248,7 +2248,7 @@ class Ae {
|
|
|
2248
2248
|
* Reset zoom state (cancels all animations)
|
|
2249
2249
|
*/
|
|
2250
2250
|
reset() {
|
|
2251
|
-
var t, e, i,
|
|
2251
|
+
var t, e, i, n;
|
|
2252
2252
|
this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
2253
2253
|
this.outgoing.element,
|
|
2254
2254
|
this.outgoing.originalState,
|
|
@@ -2260,7 +2260,7 @@ class Ae {
|
|
|
2260
2260
|
this.incoming.originalState,
|
|
2261
2261
|
((e = this.focusData) == null ? void 0 : e.originalZIndex) || "",
|
|
2262
2262
|
(i = this.focusData) == null ? void 0 : i.originalWidth,
|
|
2263
|
-
(
|
|
2263
|
+
(n = this.focusData) == null ? void 0 : n.originalHeight
|
|
2264
2264
|
)), this.currentFocus && this.focusData && this.resetElementInstantly(
|
|
2265
2265
|
this.currentFocus,
|
|
2266
2266
|
this.focusData.originalState,
|
|
@@ -2270,7 +2270,7 @@ class Ae {
|
|
|
2270
2270
|
), this.state = S.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2271
2271
|
}
|
|
2272
2272
|
}
|
|
2273
|
-
const
|
|
2273
|
+
const Ae = 50, Re = 0.5, Me = 20, ze = 0.3, Le = 150, Fe = 30, mt = class mt {
|
|
2274
2274
|
constructor(t, e) {
|
|
2275
2275
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = e, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2276
2276
|
}
|
|
@@ -2315,9 +2315,9 @@ const Ce = 50, Re = 0.5, Me = 20, ze = 0.3, Le = 150, Fe = 30, mt = class mt {
|
|
|
2315
2315
|
}
|
|
2316
2316
|
handleTouchMove(t) {
|
|
2317
2317
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2318
|
-
const e = t.touches[0], i = e.clientX - this.touchState.startX,
|
|
2319
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i +
|
|
2320
|
-
const s = Math.atan2(Math.abs(
|
|
2318
|
+
const e = t.touches[0], i = e.clientX - this.touchState.startX, n = e.clientY - this.touchState.startY;
|
|
2319
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + n * n) > 10) {
|
|
2320
|
+
const s = Math.atan2(Math.abs(n), Math.abs(i)) * (180 / Math.PI);
|
|
2321
2321
|
this.touchState.isHorizontalSwipe = s <= Fe;
|
|
2322
2322
|
}
|
|
2323
2323
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
@@ -2329,9 +2329,9 @@ const Ce = 50, Re = 0.5, Me = 20, ze = 0.3, Le = 150, Fe = 30, mt = class mt {
|
|
|
2329
2329
|
handleTouchEnd(t) {
|
|
2330
2330
|
if (!this.touchState) return;
|
|
2331
2331
|
this.recentTouchTimestamp = Date.now();
|
|
2332
|
-
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime,
|
|
2332
|
+
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, n = Math.abs(e) / i, a = Math.abs(e);
|
|
2333
2333
|
let r = !1;
|
|
2334
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >=
|
|
2334
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= Ae || n >= Re && a >= Me) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2335
2335
|
}
|
|
2336
2336
|
handleTouchCancel(t) {
|
|
2337
2337
|
var e;
|
|
@@ -2354,7 +2354,7 @@ class Oe {
|
|
|
2354
2354
|
for (const e of this.sources)
|
|
2355
2355
|
if ("folders" in e)
|
|
2356
2356
|
for (const i of e.folders) {
|
|
2357
|
-
const
|
|
2357
|
+
const n = e.recursive !== void 0 ? e.recursive : !0, a = await this.loadFromFolder(i, t, n);
|
|
2358
2358
|
this._discoveredUrls.push(...a);
|
|
2359
2359
|
}
|
|
2360
2360
|
else if ("files" in e) {
|
|
@@ -2400,9 +2400,9 @@ class Oe {
|
|
|
2400
2400
|
// Alternative format
|
|
2401
2401
|
];
|
|
2402
2402
|
for (const i of e) {
|
|
2403
|
-
const
|
|
2404
|
-
if (
|
|
2405
|
-
return
|
|
2403
|
+
const n = t.match(i);
|
|
2404
|
+
if (n && n[1])
|
|
2405
|
+
return n[1];
|
|
2406
2406
|
}
|
|
2407
2407
|
return null;
|
|
2408
2408
|
}
|
|
@@ -2414,15 +2414,15 @@ class Oe {
|
|
|
2414
2414
|
* @returns Promise resolving to array of image URLs
|
|
2415
2415
|
*/
|
|
2416
2416
|
async loadFromFolder(t, e, i = !0) {
|
|
2417
|
-
const
|
|
2418
|
-
if (!
|
|
2417
|
+
const n = this.extractFolderId(t);
|
|
2418
|
+
if (!n)
|
|
2419
2419
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2420
2420
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2421
|
-
return this.loadImagesDirectly(
|
|
2421
|
+
return this.loadImagesDirectly(n, e);
|
|
2422
2422
|
try {
|
|
2423
|
-
return i ? await this.loadImagesRecursively(
|
|
2423
|
+
return i ? await this.loadImagesRecursively(n, e) : await this.loadImagesFromSingleFolder(n, e);
|
|
2424
2424
|
} catch (a) {
|
|
2425
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2425
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(n, e);
|
|
2426
2426
|
}
|
|
2427
2427
|
}
|
|
2428
2428
|
/**
|
|
@@ -2432,7 +2432,7 @@ class Oe {
|
|
|
2432
2432
|
* @returns Promise resolving to array of image URLs
|
|
2433
2433
|
*/
|
|
2434
2434
|
async loadImagesFromSingleFolder(t, e) {
|
|
2435
|
-
const i = [],
|
|
2435
|
+
const i = [], 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);
|
|
2436
2436
|
if (!s.ok)
|
|
2437
2437
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2438
2438
|
const l = (await s.json()).files.filter(
|
|
@@ -2450,10 +2450,10 @@ class Oe {
|
|
|
2450
2450
|
*/
|
|
2451
2451
|
async loadFiles(t, e) {
|
|
2452
2452
|
const i = [];
|
|
2453
|
-
for (const
|
|
2454
|
-
const a = this.extractFileId(
|
|
2453
|
+
for (const n of t) {
|
|
2454
|
+
const a = this.extractFileId(n);
|
|
2455
2455
|
if (!a) {
|
|
2456
|
-
this.log(`Skipping invalid file URL: ${
|
|
2456
|
+
this.log(`Skipping invalid file URL: ${n}`);
|
|
2457
2457
|
continue;
|
|
2458
2458
|
}
|
|
2459
2459
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
@@ -2489,9 +2489,9 @@ class Oe {
|
|
|
2489
2489
|
// Generic id parameter
|
|
2490
2490
|
];
|
|
2491
2491
|
for (const i of e) {
|
|
2492
|
-
const
|
|
2493
|
-
if (
|
|
2494
|
-
return
|
|
2492
|
+
const n = t.match(i);
|
|
2493
|
+
if (n && n[1])
|
|
2494
|
+
return n[1];
|
|
2495
2495
|
}
|
|
2496
2496
|
return null;
|
|
2497
2497
|
}
|
|
@@ -2502,7 +2502,7 @@ class Oe {
|
|
|
2502
2502
|
* @returns Promise resolving to array of image URLs
|
|
2503
2503
|
*/
|
|
2504
2504
|
async loadImagesRecursively(t, e) {
|
|
2505
|
-
const i = [],
|
|
2505
|
+
const i = [], 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);
|
|
2506
2506
|
if (!s.ok)
|
|
2507
2507
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2508
2508
|
const h = await s.json(), l = h.files.filter(
|
|
@@ -2529,10 +2529,10 @@ class Oe {
|
|
|
2529
2529
|
*/
|
|
2530
2530
|
async loadImagesDirectly(t, e) {
|
|
2531
2531
|
try {
|
|
2532
|
-
const i = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2533
|
-
if (!
|
|
2532
|
+
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(i, { mode: "cors" });
|
|
2533
|
+
if (!n.ok)
|
|
2534
2534
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2535
|
-
const a = await
|
|
2535
|
+
const a = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2536
2536
|
return [...new Set(s.map((u) => u[1]))].map(
|
|
2537
2537
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2538
2538
|
);
|
|
@@ -2625,13 +2625,13 @@ class $e {
|
|
|
2625
2625
|
if (!Array.isArray(t))
|
|
2626
2626
|
return console.warn("URLs must be an array:", t), [];
|
|
2627
2627
|
const i = [];
|
|
2628
|
-
for (const
|
|
2629
|
-
const a =
|
|
2628
|
+
for (const n of t) {
|
|
2629
|
+
const a = n.split("/").pop() || n;
|
|
2630
2630
|
if (!e.isAllowed(a)) {
|
|
2631
|
-
this.log(`Skipping filtered URL: ${
|
|
2631
|
+
this.log(`Skipping filtered URL: ${n}`);
|
|
2632
2632
|
continue;
|
|
2633
2633
|
}
|
|
2634
|
-
this.validateUrls ? await this.validateUrl(
|
|
2634
|
+
this.validateUrls ? await this.validateUrl(n) ? i.push(n) : console.warn(`Skipping invalid/missing URL: ${n}`) : i.push(n);
|
|
2635
2635
|
}
|
|
2636
2636
|
return i;
|
|
2637
2637
|
}
|
|
@@ -2645,16 +2645,16 @@ class $e {
|
|
|
2645
2645
|
async processPath(t, e, i) {
|
|
2646
2646
|
if (!Array.isArray(e))
|
|
2647
2647
|
return console.warn("files must be an array:", e), [];
|
|
2648
|
-
const
|
|
2648
|
+
const n = [];
|
|
2649
2649
|
for (const a of e) {
|
|
2650
2650
|
if (!i.isAllowed(a)) {
|
|
2651
2651
|
this.log(`Skipping filtered file: ${a}`);
|
|
2652
2652
|
continue;
|
|
2653
2653
|
}
|
|
2654
2654
|
const r = this.constructUrl(t, a);
|
|
2655
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2655
|
+
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
2656
2656
|
}
|
|
2657
|
-
return
|
|
2657
|
+
return n;
|
|
2658
2658
|
}
|
|
2659
2659
|
/**
|
|
2660
2660
|
* Process a JSON endpoint source
|
|
@@ -2665,17 +2665,17 @@ class $e {
|
|
|
2665
2665
|
*/
|
|
2666
2666
|
async processJson(t, e) {
|
|
2667
2667
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2668
|
-
const i = new AbortController(),
|
|
2668
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), 1e4);
|
|
2669
2669
|
try {
|
|
2670
2670
|
const a = await fetch(t, { signal: i.signal });
|
|
2671
|
-
if (clearTimeout(
|
|
2671
|
+
if (clearTimeout(n), !a.ok)
|
|
2672
2672
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
2673
2673
|
const r = await a.json();
|
|
2674
2674
|
if (!r || !Array.isArray(r.images))
|
|
2675
2675
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2676
2676
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2677
2677
|
} catch (a) {
|
|
2678
|
-
throw clearTimeout(
|
|
2678
|
+
throw clearTimeout(n), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
2679
2679
|
}
|
|
2680
2680
|
}
|
|
2681
2681
|
/**
|
|
@@ -2697,11 +2697,11 @@ class $e {
|
|
|
2697
2697
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2698
2698
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2699
2699
|
try {
|
|
2700
|
-
const i = new AbortController(),
|
|
2700
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), this.validationTimeout), a = await fetch(t, {
|
|
2701
2701
|
method: "HEAD",
|
|
2702
2702
|
signal: i.signal
|
|
2703
2703
|
});
|
|
2704
|
-
return clearTimeout(
|
|
2704
|
+
return clearTimeout(n), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
2705
2705
|
} catch (i) {
|
|
2706
2706
|
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
2707
2707
|
}
|
|
@@ -2718,8 +2718,8 @@ class $e {
|
|
|
2718
2718
|
return `${i}/${e}`;
|
|
2719
2719
|
if (typeof window > "u")
|
|
2720
2720
|
return `${i}/${e}`;
|
|
2721
|
-
const
|
|
2722
|
-
return `${
|
|
2721
|
+
const n = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2722
|
+
return `${n}${r}/${e}`;
|
|
2723
2723
|
}
|
|
2724
2724
|
/**
|
|
2725
2725
|
* Check if URL is absolute (contains protocol)
|
|
@@ -2753,16 +2753,16 @@ class De {
|
|
|
2753
2753
|
*/
|
|
2754
2754
|
async prepare(t) {
|
|
2755
2755
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2756
|
-
const e = this.loaders.map((i,
|
|
2757
|
-
this.log(`Loader ${
|
|
2756
|
+
const e = this.loaders.map((i, n) => i.prepare(t).then(() => {
|
|
2757
|
+
this.log(`Loader ${n} prepared with ${i.imagesLength()} images`);
|
|
2758
2758
|
}).catch((a) => {
|
|
2759
|
-
console.warn(`Loader ${
|
|
2759
|
+
console.warn(`Loader ${n} failed to prepare:`, a);
|
|
2760
2760
|
}));
|
|
2761
2761
|
await Promise.all(e);
|
|
2762
2762
|
for (const i of this.loaders)
|
|
2763
2763
|
if (i.isPrepared()) {
|
|
2764
|
-
const
|
|
2765
|
-
this._discoveredUrls.push(...
|
|
2764
|
+
const n = i.imageURLs();
|
|
2765
|
+
this._discoveredUrls.push(...n);
|
|
2766
2766
|
}
|
|
2767
2767
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2768
2768
|
}
|
|
@@ -2820,8 +2820,8 @@ class Ue {
|
|
|
2820
2820
|
* @returns True if the file extension is allowed
|
|
2821
2821
|
*/
|
|
2822
2822
|
isAllowed(t) {
|
|
2823
|
-
var
|
|
2824
|
-
const i = (
|
|
2823
|
+
var n;
|
|
2824
|
+
const i = (n = t.split("?")[0].split(".").pop()) == null ? void 0 : n.toLowerCase();
|
|
2825
2825
|
return i ? this.allowedExtensions.includes(i) : !1;
|
|
2826
2826
|
}
|
|
2827
2827
|
/**
|
|
@@ -2888,18 +2888,18 @@ const Pe = `
|
|
|
2888
2888
|
`;
|
|
2889
2889
|
function _e() {
|
|
2890
2890
|
if (typeof document > "u") return;
|
|
2891
|
-
const
|
|
2892
|
-
if (document.getElementById(
|
|
2891
|
+
const o = "fbn-ic-functional-styles";
|
|
2892
|
+
if (document.getElementById(o)) return;
|
|
2893
2893
|
const t = document.createElement("style");
|
|
2894
|
-
t.id =
|
|
2894
|
+
t.id = o, t.textContent = Pe, document.head.appendChild(t);
|
|
2895
2895
|
}
|
|
2896
2896
|
class He {
|
|
2897
2897
|
constructor(t = {}) {
|
|
2898
|
-
var i,
|
|
2898
|
+
var i, n, a, r, s, h;
|
|
2899
2899
|
this.fullConfig = Vt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.animationEngine = new te(this.fullConfig.animation), this.layoutEngine = new Ee({
|
|
2900
2900
|
layout: this.fullConfig.layout,
|
|
2901
2901
|
image: this.fullConfig.image
|
|
2902
|
-
}), this.zoomEngine = new
|
|
2902
|
+
}), this.zoomEngine = new Ce(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = ft((i = this.fullConfig.styling) == null ? void 0 : i.default), this.hoverStyles = ft((n = this.fullConfig.styling) == null ? void 0 : n.hover), this.defaultClassName = (r = (a = this.fullConfig.styling) == null ? void 0 : a.default) == null ? void 0 : r.className, this.hoverClassName = (h = (s = this.fullConfig.styling) == null ? void 0 : s.hover) == null ? void 0 : h.className;
|
|
2903
2903
|
const e = this.fullConfig.animation.entry || E.animation.entry;
|
|
2904
2904
|
this.entryAnimationEngine = new de(
|
|
2905
2905
|
e,
|
|
@@ -2922,7 +2922,7 @@ class He {
|
|
|
2922
2922
|
const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
|
|
2923
2923
|
if (!t || t.length === 0)
|
|
2924
2924
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2925
|
-
const i = t.map((
|
|
2925
|
+
const i = t.map((n) => this.createLoaderFromEntry(n, e));
|
|
2926
2926
|
return i.length === 1 ? i[0] : new De({
|
|
2927
2927
|
loaders: i,
|
|
2928
2928
|
debugLogging: e.debugLogging
|
|
@@ -2933,7 +2933,7 @@ class He {
|
|
|
2933
2933
|
*/
|
|
2934
2934
|
createLoaderFromEntry(t, e) {
|
|
2935
2935
|
if ("static" in t) {
|
|
2936
|
-
const i = t.static,
|
|
2936
|
+
const i = t.static, n = {
|
|
2937
2937
|
...i,
|
|
2938
2938
|
validateUrls: i.validateUrls ?? e.validateUrls,
|
|
2939
2939
|
validationTimeout: i.validationTimeout ?? e.validationTimeout,
|
|
@@ -2942,14 +2942,14 @@ class He {
|
|
|
2942
2942
|
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2943
2943
|
debugLogging: i.debugLogging ?? e.debugLogging
|
|
2944
2944
|
};
|
|
2945
|
-
return new $e(
|
|
2945
|
+
return new $e(n);
|
|
2946
2946
|
} else if ("googleDrive" in t) {
|
|
2947
|
-
const i = t.googleDrive,
|
|
2947
|
+
const i = t.googleDrive, n = {
|
|
2948
2948
|
...i,
|
|
2949
2949
|
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2950
2950
|
debugLogging: i.debugLogging ?? e.debugLogging
|
|
2951
2951
|
};
|
|
2952
|
-
return new Oe(
|
|
2952
|
+
return new Oe(n);
|
|
2953
2953
|
} else
|
|
2954
2954
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2955
2955
|
}
|
|
@@ -3011,25 +3011,28 @@ class He {
|
|
|
3011
3011
|
*/
|
|
3012
3012
|
navigateToNextImage() {
|
|
3013
3013
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3014
|
-
const t = (this.currentFocusIndex + 1) % this.imageElements.
|
|
3015
|
-
|
|
3014
|
+
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, e = this.imageElements.find(
|
|
3015
|
+
(n) => n.dataset.imageId === String(t)
|
|
3016
|
+
);
|
|
3017
|
+
if (!e) return;
|
|
3018
|
+
const i = this.imageLayouts[t];
|
|
3019
|
+
i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
|
|
3016
3020
|
}
|
|
3017
3021
|
/**
|
|
3018
3022
|
* Navigate to the previous image (Left arrow)
|
|
3019
3023
|
*/
|
|
3020
3024
|
navigateToPreviousImage() {
|
|
3021
3025
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3022
|
-
const t = (this.currentFocusIndex - 1 + this.
|
|
3023
|
-
|
|
3026
|
+
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, e = this.imageElements.find(
|
|
3027
|
+
(n) => n.dataset.imageId === String(t)
|
|
3028
|
+
);
|
|
3029
|
+
if (!e) return;
|
|
3030
|
+
const i = this.imageLayouts[t];
|
|
3031
|
+
i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
|
|
3024
3032
|
}
|
|
3025
3033
|
/**
|
|
3026
3034
|
* Navigate to a specific image by index
|
|
3027
3035
|
*/
|
|
3028
|
-
async navigateToImage(t) {
|
|
3029
|
-
if (t < 0 || t >= this.imageElements.length) return;
|
|
3030
|
-
const e = this.imageElements[t], i = this.imageLayouts[t];
|
|
3031
|
-
!e || !i || await this.handleImageClick(e, i);
|
|
3032
|
-
}
|
|
3033
3036
|
handleResize() {
|
|
3034
3037
|
this.imagesLoaded && (this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.resizeTimeout = window.setTimeout(() => {
|
|
3035
3038
|
const t = this.getImageHeight();
|
|
@@ -3037,8 +3040,8 @@ class He {
|
|
|
3037
3040
|
}, 500));
|
|
3038
3041
|
}
|
|
3039
3042
|
getImageHeight() {
|
|
3040
|
-
const t = window.innerWidth, e = this.fullConfig.layout.responsive, i = this.fullConfig.image.sizing,
|
|
3041
|
-
return e ? t <= e.mobile.maxWidth ? Math.min(100,
|
|
3043
|
+
const t = window.innerWidth, e = this.fullConfig.layout.responsive, i = this.fullConfig.image.sizing, n = (i == null ? void 0 : i.maxSize) ?? 400;
|
|
3044
|
+
return e ? t <= e.mobile.maxWidth ? Math.min(100, n) : t <= e.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);
|
|
3042
3045
|
}
|
|
3043
3046
|
/**
|
|
3044
3047
|
* Get container bounds for layout calculations
|
|
@@ -3061,12 +3064,12 @@ class He {
|
|
|
3061
3064
|
this.showError("No images found."), this.showLoading(!1);
|
|
3062
3065
|
return;
|
|
3063
3066
|
}
|
|
3064
|
-
const i = this.getContainerBounds(),
|
|
3065
|
-
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${
|
|
3067
|
+
const i = this.getContainerBounds(), n = this.getImageHeight(), a = window.innerWidth;
|
|
3068
|
+
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${n}px`);
|
|
3066
3069
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3067
3070
|
i,
|
|
3068
3071
|
t,
|
|
3069
|
-
|
|
3072
|
+
n,
|
|
3070
3073
|
a
|
|
3071
3074
|
);
|
|
3072
3075
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3084,7 +3087,7 @@ class He {
|
|
|
3084
3087
|
if (!this.containerEl) return;
|
|
3085
3088
|
const i = this.getContainerBounds();
|
|
3086
3089
|
this.currentImageHeight = e;
|
|
3087
|
-
const
|
|
3090
|
+
const n = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
|
|
3088
3091
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3089
3092
|
let r = 0;
|
|
3090
3093
|
const s = (l) => {
|
|
@@ -3140,7 +3143,7 @@ class He {
|
|
|
3140
3143
|
return;
|
|
3141
3144
|
}
|
|
3142
3145
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3143
|
-
if (
|
|
3146
|
+
if (n !== this.loadGeneration) {
|
|
3144
3147
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3145
3148
|
return;
|
|
3146
3149
|
}
|
|
@@ -3177,7 +3180,7 @@ class He {
|
|
|
3177
3180
|
}), c.addEventListener("click", (p) => {
|
|
3178
3181
|
p.stopPropagation(), this.handleImageClick(c, d);
|
|
3179
3182
|
}), c.style.opacity = "0", c.style.transition = this.entryAnimationEngine.getTransitionCSS(), c.onload = () => {
|
|
3180
|
-
if (
|
|
3183
|
+
if (n !== this.loadGeneration)
|
|
3181
3184
|
return;
|
|
3182
3185
|
const p = c.naturalWidth / c.naturalHeight, g = e * p;
|
|
3183
3186
|
c.style.width = `${g}px`;
|
|
@@ -3187,7 +3190,7 @@ class He {
|
|
|
3187
3190
|
i,
|
|
3188
3191
|
u,
|
|
3189
3192
|
t.length
|
|
3190
|
-
), I = this.entryAnimationEngine.calculateStartRotation(d.rotation),
|
|
3193
|
+
), I = this.entryAnimationEngine.calculateStartRotation(d.rotation), C = this.entryAnimationEngine.calculateStartScale(d.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
3191
3194
|
d.rotation,
|
|
3192
3195
|
d.scale,
|
|
3193
3196
|
g,
|
|
@@ -3200,7 +3203,7 @@ class He {
|
|
|
3200
3203
|
g,
|
|
3201
3204
|
e,
|
|
3202
3205
|
I,
|
|
3203
|
-
|
|
3206
|
+
C
|
|
3204
3207
|
);
|
|
3205
3208
|
this.fullConfig.debug && u < 3 && console.log(`Image ${u}:`, {
|
|
3206
3209
|
finalPosition: f,
|
|
@@ -3210,14 +3213,14 @@ class He {
|
|
|
3210
3213
|
finalTransform: w,
|
|
3211
3214
|
renderedWidth: g,
|
|
3212
3215
|
renderedHeight: e
|
|
3213
|
-
}), c.style.transform = F, c.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || I !== d.rotation ||
|
|
3216
|
+
}), c.style.transform = F, c.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || I !== d.rotation || C !== d.scale) && (c.dataset.startX = String(v.x), c.dataset.startY = String(v.y), c.dataset.endX = String(f.x), c.dataset.endY = String(f.y), c.dataset.imageWidth = String(g), c.dataset.imageHeight = String(e), c.dataset.rotation = String(d.rotation), c.dataset.scale = String(d.scale), c.dataset.startRotation = String(I), c.dataset.startScale = String(C)), this.displayQueue.push(c);
|
|
3214
3217
|
}, c.onerror = () => r++, c.src = l;
|
|
3215
3218
|
});
|
|
3216
3219
|
}
|
|
3217
3220
|
async handleImageClick(t, e) {
|
|
3218
3221
|
var a, r;
|
|
3219
3222
|
if (!this.containerEl) return;
|
|
3220
|
-
const i = this.zoomEngine.isFocused(t),
|
|
3223
|
+
const i = this.zoomEngine.isFocused(t), n = {
|
|
3221
3224
|
width: this.containerEl.offsetWidth,
|
|
3222
3225
|
height: this.containerEl.offsetHeight
|
|
3223
3226
|
};
|
|
@@ -3225,7 +3228,7 @@ class He {
|
|
|
3225
3228
|
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, (a = this.swipeEngine) == null || a.disable(), this.hideCounter();
|
|
3226
3229
|
else {
|
|
3227
3230
|
const s = t.dataset.imageId;
|
|
3228
|
-
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, (r = this.swipeEngine) == null || r.enable(), await this.zoomEngine.focusImage(t,
|
|
3231
|
+
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, (r = this.swipeEngine) == null || r.enable(), await this.zoomEngine.focusImage(t, n, e), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3229
3232
|
}
|
|
3230
3233
|
}
|
|
3231
3234
|
/**
|
|
@@ -3259,10 +3262,10 @@ class He {
|
|
|
3259
3262
|
}
|
|
3260
3263
|
function Ne() {
|
|
3261
3264
|
if (typeof document > "u") return;
|
|
3262
|
-
const
|
|
3263
|
-
if (document.getElementById(
|
|
3265
|
+
const o = "fbn-ic-styles";
|
|
3266
|
+
if (document.getElementById(o)) return;
|
|
3264
3267
|
const t = document.createElement("style");
|
|
3265
|
-
t.id =
|
|
3268
|
+
t.id = o, t.textContent = kt, document.head.appendChild(t);
|
|
3266
3269
|
}
|
|
3267
3270
|
Ne();
|
|
3268
3271
|
function ke() {
|
|
@@ -3270,7 +3273,7 @@ function ke() {
|
|
|
3270
3273
|
console.warn("ImageCloud: Document not available (not in browser environment)");
|
|
3271
3274
|
return;
|
|
3272
3275
|
}
|
|
3273
|
-
const
|
|
3276
|
+
const o = () => {
|
|
3274
3277
|
const t = document.querySelectorAll("[data-image-cloud], [data-image-gallery]");
|
|
3275
3278
|
t.length !== 0 && t.forEach((e) => {
|
|
3276
3279
|
const i = e;
|
|
@@ -3278,11 +3281,11 @@ function ke() {
|
|
|
3278
3281
|
console.error("ImageCloud: Container with data-image-cloud must have an id attribute");
|
|
3279
3282
|
return;
|
|
3280
3283
|
}
|
|
3281
|
-
const
|
|
3284
|
+
const n = i.dataset.config || i.dataset.galleryConfig;
|
|
3282
3285
|
let a;
|
|
3283
|
-
if (
|
|
3286
|
+
if (n)
|
|
3284
3287
|
try {
|
|
3285
|
-
const s = JSON.parse(
|
|
3288
|
+
const s = JSON.parse(n);
|
|
3286
3289
|
a = {
|
|
3287
3290
|
container: i.id,
|
|
3288
3291
|
...s
|
|
@@ -3300,7 +3303,7 @@ function ke() {
|
|
|
3300
3303
|
});
|
|
3301
3304
|
});
|
|
3302
3305
|
};
|
|
3303
|
-
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded",
|
|
3306
|
+
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", o) : o();
|
|
3304
3307
|
}
|
|
3305
3308
|
ke();
|
|
3306
3309
|
export {
|