@frybynite/image-cloud 0.6.5 → 0.7.0
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/README.md +1 -28
- package/dist/image-cloud-auto-init.js +759 -345
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +1040 -1085
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +5 -5
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +0 -31
- package/dist/react.d.ts +0 -31
- package/dist/react.js +848 -434
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +0 -31
- package/dist/vue.js +856 -442
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +0 -31
- package/dist/web-component.js +843 -429
- package/dist/web-component.js.map +1 -1
- package/package.json +14 -27
- package/dist/composite-BSJXKGwG.js +0 -63
- package/dist/composite-BSJXKGwG.js.map +0 -1
- package/dist/google-drive-DK2v0Xay.js +0 -227
- package/dist/google-drive-DK2v0Xay.js.map +0 -1
- package/dist/image-cloud-CO9PMUGK.js +0 -38
- package/dist/image-cloud-CO9PMUGK.js.map +0 -1
- package/dist/loaders/all.d.ts +0 -1683
- package/dist/loaders/all.js +0 -463
- package/dist/loaders/all.js.map +0 -1
- package/dist/loaders/composite.d.ts +0 -1683
- package/dist/loaders/composite.js +0 -63
- package/dist/loaders/composite.js.map +0 -1
- package/dist/loaders/google-drive.d.ts +0 -1683
- package/dist/loaders/google-drive.js +0 -227
- package/dist/loaders/google-drive.js.map +0 -1
- package/dist/loaders/static.d.ts +0 -1683
- package/dist/loaders/static.js +0 -186
- package/dist/loaders/static.js.map +0 -1
- package/dist/static-D9YjTesh.js +0 -186
- package/dist/static-D9YjTesh.js.map +0 -1
package/dist/vue.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as Ot, ref as wt, onMounted as $t, onUnmounted as Ut, watch as Pt, h as _t } from "vue";
|
|
2
|
+
const mt = Object.freeze({
|
|
3
3
|
none: "none",
|
|
4
4
|
sm: "0 2px 4px rgba(0,0,0,0.1)",
|
|
5
5
|
md: "0 4px 16px rgba(0,0,0,0.4)",
|
|
6
6
|
lg: "0 8px 32px rgba(0,0,0,0.5)",
|
|
7
7
|
glow: "0 0 30px rgba(255,255,255,0.6)"
|
|
8
|
-
}),
|
|
8
|
+
}), xt = Object.freeze({
|
|
9
9
|
energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
|
|
10
10
|
playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
|
|
11
11
|
subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
|
|
12
|
-
}),
|
|
12
|
+
}), St = Object.freeze({
|
|
13
13
|
gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
|
|
14
14
|
bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
|
|
15
15
|
wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
|
|
16
16
|
snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
|
|
17
|
-
}),
|
|
17
|
+
}), Et = Object.freeze({
|
|
18
18
|
gentle: Object.freeze({ amplitude: 30, frequency: 1.5, decay: !0, decayRate: 0.9, phase: 0 }),
|
|
19
19
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
20
20
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
21
21
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
22
|
-
}),
|
|
22
|
+
}), pt = Object.freeze({
|
|
23
23
|
type: "linear"
|
|
24
|
-
}),
|
|
24
|
+
}), bt = Object.freeze({
|
|
25
25
|
mode: "none"
|
|
26
|
-
}),
|
|
26
|
+
}), yt = Object.freeze({
|
|
27
27
|
mode: "none"
|
|
28
|
-
}),
|
|
28
|
+
}), Tt = Object.freeze({
|
|
29
29
|
default: Object.freeze({
|
|
30
30
|
border: Object.freeze({
|
|
31
31
|
width: 0,
|
|
@@ -50,17 +50,17 @@ const pt = Object.freeze({
|
|
|
50
50
|
focused: Object.freeze({
|
|
51
51
|
shadow: "none"
|
|
52
52
|
})
|
|
53
|
-
}),
|
|
53
|
+
}), Ht = Object.freeze({
|
|
54
54
|
rows: 1,
|
|
55
55
|
amplitude: 100,
|
|
56
56
|
frequency: 2,
|
|
57
57
|
phaseShift: 0,
|
|
58
58
|
synchronization: "offset"
|
|
59
59
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
60
|
-
}),
|
|
60
|
+
}), Nt = Object.freeze({
|
|
61
61
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
62
62
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
63
|
-
}),
|
|
63
|
+
}), jt = Object.freeze({
|
|
64
64
|
mode: "adaptive",
|
|
65
65
|
// Default to adaptive sizing
|
|
66
66
|
minSize: 50,
|
|
@@ -72,21 +72,21 @@ const pt = Object.freeze({
|
|
|
72
72
|
// No variance by default
|
|
73
73
|
max: 1
|
|
74
74
|
})
|
|
75
|
-
}),
|
|
75
|
+
}), kt = Object.freeze({
|
|
76
76
|
mode: "none",
|
|
77
77
|
range: Object.freeze({
|
|
78
78
|
min: -15,
|
|
79
79
|
max: 15
|
|
80
80
|
})
|
|
81
|
+
}), Ct = Object.freeze({
|
|
82
|
+
sizing: jt,
|
|
83
|
+
rotation: kt
|
|
81
84
|
}), Rt = Object.freeze({
|
|
82
|
-
sizing: kt,
|
|
83
|
-
rotation: _t
|
|
84
|
-
}), zt = Object.freeze({
|
|
85
85
|
validateUrls: !0,
|
|
86
86
|
validationTimeout: 5e3,
|
|
87
87
|
validationMethod: "head",
|
|
88
88
|
allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"]
|
|
89
|
-
}),
|
|
89
|
+
}), Mt = Object.freeze({
|
|
90
90
|
enabled: !1,
|
|
91
91
|
centers: !1,
|
|
92
92
|
loaders: !1
|
|
@@ -95,17 +95,17 @@ const pt = Object.freeze({
|
|
|
95
95
|
loaders: [],
|
|
96
96
|
// Shared loader settings and debug config
|
|
97
97
|
config: Object.freeze({
|
|
98
|
-
loaders:
|
|
99
|
-
debug:
|
|
98
|
+
loaders: Rt,
|
|
99
|
+
debug: Mt
|
|
100
100
|
}),
|
|
101
101
|
// Image sizing and rotation configuration
|
|
102
|
-
image:
|
|
102
|
+
image: Ct,
|
|
103
103
|
// Pattern-based layout configuration
|
|
104
104
|
layout: Object.freeze({
|
|
105
105
|
algorithm: "radial",
|
|
106
106
|
scaleDecay: 0,
|
|
107
107
|
// No decay by default (0-1 for radial/spiral)
|
|
108
|
-
responsive:
|
|
108
|
+
responsive: Nt,
|
|
109
109
|
targetCoverage: 0.6,
|
|
110
110
|
// Target 60% of container area
|
|
111
111
|
densityFactor: 1,
|
|
@@ -161,9 +161,9 @@ const pt = Object.freeze({
|
|
|
161
161
|
}),
|
|
162
162
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
163
163
|
// smooth deceleration
|
|
164
|
-
path:
|
|
165
|
-
rotation:
|
|
166
|
-
scale:
|
|
164
|
+
path: pt,
|
|
165
|
+
rotation: bt,
|
|
166
|
+
scale: yt
|
|
167
167
|
})
|
|
168
168
|
}),
|
|
169
169
|
// Pattern-based interaction configuration
|
|
@@ -220,21 +220,21 @@ const pt = Object.freeze({
|
|
|
220
220
|
})
|
|
221
221
|
}),
|
|
222
222
|
// Image styling
|
|
223
|
-
styling:
|
|
223
|
+
styling: Tt
|
|
224
224
|
});
|
|
225
|
-
function
|
|
225
|
+
function Z(n, t) {
|
|
226
226
|
if (!n) return t || {};
|
|
227
227
|
if (!t) return { ...n };
|
|
228
228
|
const e = { ...n };
|
|
229
229
|
return t.border !== void 0 && (e.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...n.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;
|
|
230
230
|
}
|
|
231
|
-
function
|
|
231
|
+
function Wt(n, t) {
|
|
232
232
|
if (!t) return { ...n };
|
|
233
|
-
const e =
|
|
234
|
-
|
|
233
|
+
const e = Z(n.default, t.default), i = Z(
|
|
234
|
+
Z(e, n.hover),
|
|
235
235
|
t.hover
|
|
236
|
-
), o =
|
|
237
|
-
|
|
236
|
+
), o = Z(
|
|
237
|
+
Z(e, n.focused),
|
|
238
238
|
t.focused
|
|
239
239
|
);
|
|
240
240
|
return {
|
|
@@ -243,7 +243,7 @@ function qt(n, t) {
|
|
|
243
243
|
focused: o
|
|
244
244
|
};
|
|
245
245
|
}
|
|
246
|
-
function
|
|
246
|
+
function Gt(n, t) {
|
|
247
247
|
if (!t) return { ...n };
|
|
248
248
|
const e = { ...n };
|
|
249
249
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
@@ -262,7 +262,7 @@ function Xt(n, t) {
|
|
|
262
262
|
}
|
|
263
263
|
return e;
|
|
264
264
|
}
|
|
265
|
-
function
|
|
265
|
+
function qt(n) {
|
|
266
266
|
const t = n.layout?.rotation;
|
|
267
267
|
if (t && "enabled" in t)
|
|
268
268
|
return {
|
|
@@ -272,7 +272,7 @@ function Yt(n) {
|
|
|
272
272
|
}
|
|
273
273
|
};
|
|
274
274
|
}
|
|
275
|
-
function
|
|
275
|
+
function Yt(n) {
|
|
276
276
|
const t = n.layout?.sizing?.variance;
|
|
277
277
|
if (t)
|
|
278
278
|
return {
|
|
@@ -283,8 +283,8 @@ function Bt(n) {
|
|
|
283
283
|
}
|
|
284
284
|
};
|
|
285
285
|
}
|
|
286
|
-
function
|
|
287
|
-
const t =
|
|
286
|
+
function Xt(n = {}) {
|
|
287
|
+
const t = qt(n), e = Yt(n);
|
|
288
288
|
let i = n.image;
|
|
289
289
|
(t || e) && (i = {
|
|
290
290
|
...e || {},
|
|
@@ -302,18 +302,18 @@ function Jt(n = {}) {
|
|
|
302
302
|
});
|
|
303
303
|
const r = {
|
|
304
304
|
loaders: {
|
|
305
|
-
...
|
|
305
|
+
...Rt,
|
|
306
306
|
...n.config?.loaders ?? {}
|
|
307
307
|
}
|
|
308
308
|
}, a = {
|
|
309
309
|
loaders: o,
|
|
310
310
|
config: r,
|
|
311
|
-
image:
|
|
311
|
+
image: Gt(Ct, i),
|
|
312
312
|
layout: { ...y.layout },
|
|
313
313
|
animation: { ...y.animation },
|
|
314
314
|
interaction: { ...y.interaction },
|
|
315
315
|
rendering: { ...y.rendering },
|
|
316
|
-
styling:
|
|
316
|
+
styling: Wt(Tt, n.styling)
|
|
317
317
|
};
|
|
318
318
|
return n.layout && (a.layout = {
|
|
319
319
|
...y.layout,
|
|
@@ -346,9 +346,9 @@ function Jt(n = {}) {
|
|
|
346
346
|
circular: n.animation.entry.start.circular ? { ...y.animation.entry.start.circular, ...n.animation.entry.start.circular } : y.animation.entry.start.circular
|
|
347
347
|
} : y.animation.entry.start,
|
|
348
348
|
timing: n.animation.entry.timing ? { ...y.animation.entry.timing, ...n.animation.entry.timing } : y.animation.entry.timing,
|
|
349
|
-
path: n.animation.entry.path ? { ...
|
|
350
|
-
rotation: n.animation.entry.rotation ? { ...
|
|
351
|
-
scale: n.animation.entry.scale ? { ...
|
|
349
|
+
path: n.animation.entry.path ? { ...pt, ...n.animation.entry.path } : y.animation.entry.path,
|
|
350
|
+
rotation: n.animation.entry.rotation ? { ...bt, ...n.animation.entry.rotation } : y.animation.entry.rotation,
|
|
351
|
+
scale: n.animation.entry.scale ? { ...yt, ...n.animation.entry.scale } : y.animation.entry.scale
|
|
352
352
|
})), n.interaction && (a.interaction = {
|
|
353
353
|
...y.interaction,
|
|
354
354
|
...n.interaction
|
|
@@ -376,18 +376,18 @@ function Jt(n = {}) {
|
|
|
376
376
|
...y.rendering.performance,
|
|
377
377
|
...n.rendering.performance
|
|
378
378
|
})), a.config.debug = {
|
|
379
|
-
...
|
|
379
|
+
...Mt,
|
|
380
380
|
...n.config?.debug ?? {}
|
|
381
381
|
}, a;
|
|
382
382
|
}
|
|
383
|
-
function
|
|
384
|
-
return { ...n ?
|
|
383
|
+
function Bt(n, t) {
|
|
384
|
+
return { ...n ? xt[n] : xt.playful, ...t };
|
|
385
385
|
}
|
|
386
|
-
function
|
|
387
|
-
return { ...n ?
|
|
386
|
+
function Jt(n, t) {
|
|
387
|
+
return { ...n ? St[n] : St.gentle, ...t };
|
|
388
388
|
}
|
|
389
|
-
function
|
|
390
|
-
return { ...n ?
|
|
389
|
+
function Vt(n, t) {
|
|
390
|
+
return { ...n ? Et[n] : Et.gentle, ...t };
|
|
391
391
|
}
|
|
392
392
|
class Kt {
|
|
393
393
|
constructor(t) {
|
|
@@ -418,7 +418,7 @@ class Kt {
|
|
|
418
418
|
this.cancelAllAnimations(t);
|
|
419
419
|
const r = o ?? this.config.duration, a = s ?? this.config.easing.default, h = this.buildTransformString(e), c = this.buildTransformString(i);
|
|
420
420
|
t.style.transition = "none";
|
|
421
|
-
const
|
|
421
|
+
const u = t.animate(
|
|
422
422
|
[
|
|
423
423
|
{ transform: h },
|
|
424
424
|
{ transform: c }
|
|
@@ -432,13 +432,13 @@ class Kt {
|
|
|
432
432
|
), l = {
|
|
433
433
|
id: `anim-${++this.animationIdCounter}`,
|
|
434
434
|
element: t,
|
|
435
|
-
animation:
|
|
435
|
+
animation: u,
|
|
436
436
|
fromState: e,
|
|
437
437
|
toState: i,
|
|
438
438
|
startTime: performance.now(),
|
|
439
439
|
duration: r
|
|
440
440
|
};
|
|
441
|
-
return this.activeAnimations.set(t, l),
|
|
441
|
+
return this.activeAnimations.set(t, l), u.finished.then(() => {
|
|
442
442
|
t.style.transform = c, this.activeAnimations.delete(t);
|
|
443
443
|
}).catch(() => {
|
|
444
444
|
this.activeAnimations.delete(t);
|
|
@@ -548,31 +548,31 @@ class Kt {
|
|
|
548
548
|
function V(n, t, e) {
|
|
549
549
|
return n + (t - n) * e;
|
|
550
550
|
}
|
|
551
|
-
function
|
|
552
|
-
const { overshoot: o, bounces: s, decayRatio: r } = i, a = e.x - t.x, h = e.y - t.y, c =
|
|
553
|
-
let
|
|
551
|
+
function Zt(n, t, e, i) {
|
|
552
|
+
const { overshoot: o, bounces: s, decayRatio: r } = i, a = e.x - t.x, h = e.y - t.y, c = Qt(s, r);
|
|
553
|
+
let u = 0, l = 0, d = 1, m = o, b = !1;
|
|
554
554
|
for (let g = 0; g < c.length; g++)
|
|
555
555
|
if (n <= c[g].time) {
|
|
556
|
-
l = g === 0 ? 0 : c[g - 1].time,
|
|
556
|
+
l = g === 0 ? 0 : c[g - 1].time, d = c[g].time, m = c[g].overshoot, b = c[g].isOvershoot;
|
|
557
557
|
break;
|
|
558
558
|
}
|
|
559
|
-
const p = (n - l) / (
|
|
559
|
+
const p = (n - l) / (d - l);
|
|
560
560
|
if (b)
|
|
561
|
-
|
|
561
|
+
u = 1 + m * ot(p);
|
|
562
562
|
else if (l === 0)
|
|
563
|
-
|
|
563
|
+
u = ot(p);
|
|
564
564
|
else {
|
|
565
565
|
const f = 1 + (c.find(
|
|
566
|
-
(
|
|
566
|
+
(S, v) => S.time > l && v > 0 && c[v - 1].isOvershoot
|
|
567
567
|
)?.overshoot || m);
|
|
568
|
-
|
|
568
|
+
u = V(f, 1, ot(p));
|
|
569
569
|
}
|
|
570
570
|
return {
|
|
571
|
-
x: t.x + a *
|
|
572
|
-
y: t.y + h *
|
|
571
|
+
x: t.x + a * u,
|
|
572
|
+
y: t.y + h * u
|
|
573
573
|
};
|
|
574
574
|
}
|
|
575
|
-
function
|
|
575
|
+
function Qt(n, t) {
|
|
576
576
|
const e = [];
|
|
577
577
|
let i = 0.6;
|
|
578
578
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
@@ -582,57 +582,57 @@ function ee(n, t) {
|
|
|
582
582
|
i += r, e.push({ time: i, overshoot: o, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
583
583
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
584
584
|
}
|
|
585
|
-
function
|
|
586
|
-
const { stiffness: o, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, c = e.y - t.y,
|
|
587
|
-
let
|
|
585
|
+
function te(n, t, e, i) {
|
|
586
|
+
const { stiffness: o, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, c = e.y - t.y, u = Math.sqrt(o / r), l = s / (2 * Math.sqrt(o * r));
|
|
587
|
+
let d;
|
|
588
588
|
if (l < 1) {
|
|
589
|
-
const m =
|
|
590
|
-
|
|
589
|
+
const m = u * Math.sqrt(1 - l * l), b = Math.exp(-l * u * n * 3), p = Math.cos(m * n * a * Math.PI);
|
|
590
|
+
d = 1 - b * p;
|
|
591
591
|
} else
|
|
592
|
-
|
|
593
|
-
return
|
|
594
|
-
x: t.x + h *
|
|
595
|
-
y: t.y + c *
|
|
592
|
+
d = 1 - Math.exp(-u * n * 3);
|
|
593
|
+
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
594
|
+
x: t.x + h * d,
|
|
595
|
+
y: t.y + c * d
|
|
596
596
|
};
|
|
597
597
|
}
|
|
598
|
-
function
|
|
599
|
-
const { amplitude: o, frequency: s, decay: r, decayRate: a, phase: h } = i, c = e.x - t.x,
|
|
598
|
+
function ee(n, t, e, i) {
|
|
599
|
+
const { amplitude: o, frequency: s, decay: r, decayRate: a, phase: h } = i, c = e.x - t.x, u = e.y - t.y, l = Math.sqrt(c * c + u * u), d = l > 0 ? -u / l : 0, m = l > 0 ? c / l : 1, b = s * Math.PI * 2 * n + h, p = r ? Math.pow(1 - n, a) : 1, g = o * Math.sin(b) * p, f = ie(n);
|
|
600
600
|
return {
|
|
601
|
-
x: V(t.x, e.x, f) + g *
|
|
601
|
+
x: V(t.x, e.x, f) + g * d,
|
|
602
602
|
y: V(t.y, e.y, f) + g * m
|
|
603
603
|
};
|
|
604
604
|
}
|
|
605
|
-
function
|
|
605
|
+
function ot(n) {
|
|
606
606
|
return 1 - (1 - n) * (1 - n);
|
|
607
607
|
}
|
|
608
|
-
function
|
|
608
|
+
function ie(n) {
|
|
609
609
|
return 1 - Math.pow(1 - n, 3);
|
|
610
610
|
}
|
|
611
|
-
function
|
|
611
|
+
function ne(n, t, e) {
|
|
612
612
|
const { amplitude: i, frequency: o, decay: s } = e, r = Math.sin(n * o * Math.PI * 2), a = s ? Math.pow(1 - n, 2) : 1, h = i * r * a;
|
|
613
613
|
return t + h;
|
|
614
614
|
}
|
|
615
|
-
function
|
|
615
|
+
function oe(n, t, e) {
|
|
616
616
|
const { overshoot: i, bounces: o } = e, s = [];
|
|
617
617
|
s.push({ time: 0.5, scale: i });
|
|
618
618
|
let r = i;
|
|
619
619
|
const a = 0.5, c = 0.5 / (o * 2);
|
|
620
|
-
let
|
|
621
|
-
for (let
|
|
620
|
+
let u = 0.5;
|
|
621
|
+
for (let d = 0; d < o; d++) {
|
|
622
622
|
const m = 1 - (r - 1) * a;
|
|
623
|
-
|
|
623
|
+
u += c, s.push({ time: u, scale: m }), r = 1 + (r - 1) * a * a, u += c, d < o - 1 && s.push({ time: u, scale: r });
|
|
624
624
|
}
|
|
625
625
|
s.push({ time: 1, scale: 1 });
|
|
626
626
|
let l = 1;
|
|
627
|
-
for (let
|
|
628
|
-
if (n <= s[
|
|
629
|
-
const m =
|
|
630
|
-
l = b + (s[
|
|
627
|
+
for (let d = 0; d < s.length; d++)
|
|
628
|
+
if (n <= s[d].time) {
|
|
629
|
+
const m = d === 0 ? 0 : s[d - 1].time, b = d === 0 ? 1 : s[d - 1].scale, p = (n - m) / (s[d].time - m), g = ot(p);
|
|
630
|
+
l = b + (s[d].scale - b) * g;
|
|
631
631
|
break;
|
|
632
632
|
}
|
|
633
633
|
return l * t;
|
|
634
634
|
}
|
|
635
|
-
function
|
|
635
|
+
function se(n) {
|
|
636
636
|
const {
|
|
637
637
|
element: t,
|
|
638
638
|
startPosition: e,
|
|
@@ -643,43 +643,43 @@ function re(n) {
|
|
|
643
643
|
imageHeight: a,
|
|
644
644
|
rotation: h,
|
|
645
645
|
scale: c,
|
|
646
|
-
onComplete:
|
|
646
|
+
onComplete: u,
|
|
647
647
|
rotationConfig: l,
|
|
648
|
-
startRotation:
|
|
648
|
+
startRotation: d,
|
|
649
649
|
scaleConfig: m,
|
|
650
650
|
startScale: b
|
|
651
|
-
} = n, p = o.type, g =
|
|
652
|
-
if ((p === "linear" || p === "arc") && !v && !(
|
|
653
|
-
|
|
651
|
+
} = n, p = o.type, g = d !== void 0 && d !== h, f = l?.mode === "wobble", S = l?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, v = g || f, w = b !== void 0 && b !== c, E = m?.mode === "pop", x = m?.pop || { overshoot: 1.2, bounces: 1 };
|
|
652
|
+
if ((p === "linear" || p === "arc") && !v && !(w || E)) {
|
|
653
|
+
u && u();
|
|
654
654
|
return;
|
|
655
655
|
}
|
|
656
|
-
const
|
|
657
|
-
function
|
|
658
|
-
const
|
|
656
|
+
const L = performance.now(), z = -r / 2, P = -a / 2;
|
|
657
|
+
function _(Y) {
|
|
658
|
+
const N = Y - L, T = Math.min(N / s, 1);
|
|
659
659
|
let D;
|
|
660
660
|
switch (p) {
|
|
661
661
|
case "bounce": {
|
|
662
|
-
const O =
|
|
662
|
+
const O = Bt(
|
|
663
663
|
o.bouncePreset,
|
|
664
664
|
o.bounce
|
|
665
665
|
);
|
|
666
|
-
D =
|
|
666
|
+
D = Zt(T, e, i, O);
|
|
667
667
|
break;
|
|
668
668
|
}
|
|
669
669
|
case "elastic": {
|
|
670
|
-
const O =
|
|
670
|
+
const O = Jt(
|
|
671
671
|
o.elasticPreset,
|
|
672
672
|
o.elastic
|
|
673
673
|
);
|
|
674
|
-
D =
|
|
674
|
+
D = te(T, e, i, O);
|
|
675
675
|
break;
|
|
676
676
|
}
|
|
677
677
|
case "wave": {
|
|
678
|
-
const O =
|
|
678
|
+
const O = Vt(
|
|
679
679
|
o.wavePreset,
|
|
680
680
|
o.wave
|
|
681
681
|
);
|
|
682
|
-
D =
|
|
682
|
+
D = ee(T, e, i, O);
|
|
683
683
|
break;
|
|
684
684
|
}
|
|
685
685
|
default:
|
|
@@ -688,18 +688,18 @@ function re(n) {
|
|
|
688
688
|
y: V(e.y, i.y, T)
|
|
689
689
|
};
|
|
690
690
|
}
|
|
691
|
-
const
|
|
692
|
-
let
|
|
693
|
-
f ?
|
|
694
|
-
let
|
|
695
|
-
|
|
691
|
+
const k = D.x - i.x, H = D.y - i.y;
|
|
692
|
+
let R;
|
|
693
|
+
f ? R = ne(T, h, S) : g ? R = V(d, h, T) : R = h;
|
|
694
|
+
let C;
|
|
695
|
+
E ? C = oe(T, c, x) : w ? C = V(b, c, T) : C = c, t.style.transform = `translate(${z}px, ${P}px) translate(${k}px, ${H}px) rotate(${R}deg) scale(${C})`, T < 1 ? requestAnimationFrame(_) : (t.style.transform = `translate(${z}px, ${P}px) rotate(${h}deg) scale(${c})`, u && u());
|
|
696
696
|
}
|
|
697
|
-
requestAnimationFrame(
|
|
697
|
+
requestAnimationFrame(_);
|
|
698
698
|
}
|
|
699
|
-
function
|
|
699
|
+
function ae(n) {
|
|
700
700
|
return n === "bounce" || n === "elastic" || n === "wave";
|
|
701
701
|
}
|
|
702
|
-
const
|
|
702
|
+
const re = {
|
|
703
703
|
radial: "center",
|
|
704
704
|
spiral: "center",
|
|
705
705
|
grid: "top",
|
|
@@ -707,15 +707,15 @@ const le = {
|
|
|
707
707
|
random: "nearest-edge",
|
|
708
708
|
wave: "left"
|
|
709
709
|
};
|
|
710
|
-
class
|
|
710
|
+
class ce {
|
|
711
711
|
constructor(t, e) {
|
|
712
|
-
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
712
|
+
this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || pt, this.rotationConfig = t.rotation || bt, this.scaleConfig = t.scale || yt;
|
|
713
713
|
}
|
|
714
714
|
/**
|
|
715
715
|
* Get the effective start position, considering layout-aware defaults
|
|
716
716
|
*/
|
|
717
717
|
resolveStartPosition() {
|
|
718
|
-
return this.config.start.position ? this.config.start.position :
|
|
718
|
+
return this.config.start.position ? this.config.start.position : re[this.layoutAlgorithm] || "nearest-edge";
|
|
719
719
|
}
|
|
720
720
|
/**
|
|
721
721
|
* Calculate the starting position for an image's entry animation
|
|
@@ -753,9 +753,9 @@ class he {
|
|
|
753
753
|
* Calculate start position from the nearest edge (current default behavior)
|
|
754
754
|
*/
|
|
755
755
|
calculateNearestEdge(t, e, i, o) {
|
|
756
|
-
const s = t.x, r = t.y, a = s, h = i.width - s, c = r,
|
|
757
|
-
let
|
|
758
|
-
return l === a ?
|
|
756
|
+
const s = t.x, r = t.y, a = s, h = i.width - s, c = r, u = i.height - r, l = Math.min(a, h, c, u);
|
|
757
|
+
let d = t.x, m = t.y;
|
|
758
|
+
return l === a ? d = -(e.width + o) : l === h ? d = i.width + o : l === c ? m = -(e.height + o) : m = i.height + o, { x: d, y: m };
|
|
759
759
|
}
|
|
760
760
|
/**
|
|
761
761
|
* Calculate start position from a specific edge
|
|
@@ -811,9 +811,9 @@ class he {
|
|
|
811
811
|
) * p / 2;
|
|
812
812
|
} else
|
|
813
813
|
h = typeof c == "number" ? c : 500;
|
|
814
|
-
let
|
|
815
|
-
a === "even" ?
|
|
816
|
-
const l = i.width / 2,
|
|
814
|
+
let u;
|
|
815
|
+
a === "even" ? u = o / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
816
|
+
const l = i.width / 2, d = i.height / 2, m = l + Math.cos(u) * h, b = d + Math.sin(u) * h;
|
|
817
817
|
return { x: m, y: b };
|
|
818
818
|
}
|
|
819
819
|
/**
|
|
@@ -834,8 +834,8 @@ class he {
|
|
|
834
834
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
835
835
|
*/
|
|
836
836
|
buildStartTransform(t, e, i, o, s, r, a, h) {
|
|
837
|
-
const c = t.x - e.x,
|
|
838
|
-
return t.useScale ? `${p} translate(${c}px, ${
|
|
837
|
+
const c = t.x - e.x, u = t.y - e.y, l = a !== void 0 ? a : i, d = h !== void 0 ? h : o, m = s !== void 0 ? -s / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = s !== void 0 ? `translate(${m}px, ${b}px)` : "translate(-50%, -50%)";
|
|
838
|
+
return t.useScale ? `${p} translate(${c}px, ${u}px) rotate(${l}deg) scale(0)` : `${p} translate(${c}px, ${u}px) rotate(${l}deg) scale(${d})`;
|
|
839
839
|
}
|
|
840
840
|
/**
|
|
841
841
|
* Build the final CSS transform string
|
|
@@ -860,7 +860,7 @@ class he {
|
|
|
860
860
|
* Check if the current path type requires JavaScript animation
|
|
861
861
|
*/
|
|
862
862
|
requiresJSAnimation() {
|
|
863
|
-
return
|
|
863
|
+
return ae(this.pathConfig.type);
|
|
864
864
|
}
|
|
865
865
|
/**
|
|
866
866
|
* Get the path configuration
|
|
@@ -1023,8 +1023,8 @@ class he {
|
|
|
1023
1023
|
let a = e;
|
|
1024
1024
|
for (let h = 0; h < r.length; h++)
|
|
1025
1025
|
if (t <= r[h].time) {
|
|
1026
|
-
const c = h === 0 ? 0 : r[h - 1].time,
|
|
1027
|
-
a =
|
|
1026
|
+
const c = h === 0 ? 0 : r[h - 1].time, u = h === 0 ? e : r[h - 1].scale, l = (t - c) / (r[h].time - c), d = this.easeOutQuad(l);
|
|
1027
|
+
a = u + (r[h].scale - u) * d;
|
|
1028
1028
|
break;
|
|
1029
1029
|
}
|
|
1030
1030
|
return a * e;
|
|
@@ -1039,8 +1039,8 @@ class he {
|
|
|
1039
1039
|
const s = 0.5, a = 0.5 / (t * 2);
|
|
1040
1040
|
let h = 0.5;
|
|
1041
1041
|
for (let c = 0; c < t; c++) {
|
|
1042
|
-
const
|
|
1043
|
-
h += a, i.push({ time: h, scale:
|
|
1042
|
+
const u = 1 - (o - 1) * s;
|
|
1043
|
+
h += a, i.push({ time: h, scale: u }), o = 1 + (o - 1) * s * s, h += a, c < t - 1 && i.push({ time: h, scale: o });
|
|
1044
1044
|
}
|
|
1045
1045
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1046
1046
|
}
|
|
@@ -1051,7 +1051,7 @@ class he {
|
|
|
1051
1051
|
return 1 - (1 - t) * (1 - t);
|
|
1052
1052
|
}
|
|
1053
1053
|
}
|
|
1054
|
-
class
|
|
1054
|
+
class le {
|
|
1055
1055
|
constructor(t, e = {}) {
|
|
1056
1056
|
this.config = t, this.imageConfig = e;
|
|
1057
1057
|
}
|
|
@@ -1063,17 +1063,17 @@ class ue {
|
|
|
1063
1063
|
* @returns Array of layout objects with position, rotation, scale
|
|
1064
1064
|
*/
|
|
1065
1065
|
generate(t, e, i = {}) {
|
|
1066
|
-
const o = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none",
|
|
1067
|
-
for (let
|
|
1068
|
-
const
|
|
1069
|
-
id:
|
|
1070
|
-
x:
|
|
1071
|
-
y:
|
|
1072
|
-
rotation:
|
|
1073
|
-
scale:
|
|
1074
|
-
baseSize:
|
|
1066
|
+
const o = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || m !== 1, g = h * 1.5 / 2, f = h / 2, S = s - a - g, v = r - a - f, w = a + g, E = a + f;
|
|
1067
|
+
for (let x = 0; x < t; x++) {
|
|
1068
|
+
const A = this.random(w, S), L = this.random(E, v), z = c === "random" ? this.random(u, l) : 0, P = b ? this.random(d, m) : 1, _ = h * P, Y = {
|
|
1069
|
+
id: x,
|
|
1070
|
+
x: A,
|
|
1071
|
+
y: L,
|
|
1072
|
+
rotation: z,
|
|
1073
|
+
scale: P,
|
|
1074
|
+
baseSize: _
|
|
1075
1075
|
};
|
|
1076
|
-
o.push(
|
|
1076
|
+
o.push(Y);
|
|
1077
1077
|
}
|
|
1078
1078
|
return o;
|
|
1079
1079
|
}
|
|
@@ -1087,7 +1087,7 @@ class ue {
|
|
|
1087
1087
|
return Math.random() * (e - t) + t;
|
|
1088
1088
|
}
|
|
1089
1089
|
}
|
|
1090
|
-
class
|
|
1090
|
+
class he {
|
|
1091
1091
|
constructor(t, e = {}) {
|
|
1092
1092
|
this.config = t, this.imageConfig = e;
|
|
1093
1093
|
}
|
|
@@ -1099,47 +1099,47 @@ class de {
|
|
|
1099
1099
|
* @returns Array of layout objects with position, rotation, scale
|
|
1100
1100
|
*/
|
|
1101
1101
|
generate(t, e, i = {}) {
|
|
1102
|
-
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15,
|
|
1102
|
+
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, l = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, m = l !== 1 || d !== 1, b = this.config.scaleDecay ?? 0, p = i.fixedHeight ?? a, g = s / 2, f = r / 2, S = Math.ceil(Math.sqrt(t));
|
|
1103
1103
|
if (t > 0) {
|
|
1104
|
-
const
|
|
1104
|
+
const E = m ? this.random(l, d) : 1, x = p * E;
|
|
1105
1105
|
o.push({
|
|
1106
1106
|
id: 0,
|
|
1107
1107
|
x: g,
|
|
1108
1108
|
y: f,
|
|
1109
|
-
rotation: h === "random" ? this.random(c * 0.33,
|
|
1109
|
+
rotation: h === "random" ? this.random(c * 0.33, u * 0.33) : 0,
|
|
1110
1110
|
// Less rotation for center
|
|
1111
|
-
scale:
|
|
1112
|
-
baseSize:
|
|
1111
|
+
scale: E,
|
|
1112
|
+
baseSize: x,
|
|
1113
1113
|
zIndex: 100
|
|
1114
1114
|
// Center image is highest
|
|
1115
1115
|
});
|
|
1116
1116
|
}
|
|
1117
|
-
let v = 1,
|
|
1117
|
+
let v = 1, w = 1;
|
|
1118
1118
|
for (; v < t; ) {
|
|
1119
|
-
const
|
|
1120
|
-
if (
|
|
1121
|
-
|
|
1119
|
+
const E = w / S, x = b > 0 ? 1 - E * b * 0.5 : 1, A = w * (p * 0.8), L = A * 1.5, z = Math.PI * (3 * (L + A) - Math.sqrt((3 * L + A) * (L + 3 * A))), P = this.estimateWidth(p), _ = Math.floor(z / (P * 0.7));
|
|
1120
|
+
if (_ === 0) {
|
|
1121
|
+
w++;
|
|
1122
1122
|
continue;
|
|
1123
1123
|
}
|
|
1124
|
-
const
|
|
1125
|
-
for (let T = 0; T <
|
|
1126
|
-
const D = T *
|
|
1127
|
-
let
|
|
1128
|
-
const $ = this.config.spacing.padding ?? 50,
|
|
1129
|
-
|
|
1130
|
-
const
|
|
1124
|
+
const Y = 2 * Math.PI / _, N = w * (20 * Math.PI / 180);
|
|
1125
|
+
for (let T = 0; T < _ && v < t; T++) {
|
|
1126
|
+
const D = T * Y + N, k = m ? this.random(l, d) : 1, H = x * k, R = p * H;
|
|
1127
|
+
let C = g + Math.cos(D) * L, O = f + Math.sin(D) * A;
|
|
1128
|
+
const $ = this.config.spacing.padding ?? 50, U = R * 1.5 / 2, M = R / 2;
|
|
1129
|
+
C - U < $ ? C = $ + U : C + U > s - $ && (C = s - $ - U), O - M < $ ? O = $ + M : O + M > r - $ && (O = r - $ - M);
|
|
1130
|
+
const W = h === "random" ? this.random(c, u) : 0;
|
|
1131
1131
|
o.push({
|
|
1132
1132
|
id: v,
|
|
1133
|
-
x:
|
|
1133
|
+
x: C,
|
|
1134
1134
|
y: O,
|
|
1135
|
-
rotation:
|
|
1136
|
-
scale:
|
|
1137
|
-
baseSize:
|
|
1138
|
-
zIndex: Math.max(1, 100 -
|
|
1135
|
+
rotation: W,
|
|
1136
|
+
scale: H,
|
|
1137
|
+
baseSize: R,
|
|
1138
|
+
zIndex: Math.max(1, 100 - w)
|
|
1139
1139
|
// Outer rings have lower z-index
|
|
1140
1140
|
}), v++;
|
|
1141
1141
|
}
|
|
1142
|
-
|
|
1142
|
+
w++;
|
|
1143
1143
|
}
|
|
1144
1144
|
return o;
|
|
1145
1145
|
}
|
|
@@ -1162,7 +1162,7 @@ class de {
|
|
|
1162
1162
|
return Math.random() * (e - t) + t;
|
|
1163
1163
|
}
|
|
1164
1164
|
}
|
|
1165
|
-
const
|
|
1165
|
+
const de = {
|
|
1166
1166
|
columns: "auto",
|
|
1167
1167
|
rows: "auto",
|
|
1168
1168
|
stagger: "none",
|
|
@@ -1172,7 +1172,7 @@ const ge = {
|
|
|
1172
1172
|
alignment: "center",
|
|
1173
1173
|
gap: 10,
|
|
1174
1174
|
overflowOffset: 0.25
|
|
1175
|
-
},
|
|
1175
|
+
}, It = [
|
|
1176
1176
|
{ x: 1, y: 1 },
|
|
1177
1177
|
// bottom-right
|
|
1178
1178
|
{ x: -1, y: -1 },
|
|
@@ -1190,7 +1190,7 @@ const ge = {
|
|
|
1190
1190
|
{ x: 0, y: 1 }
|
|
1191
1191
|
// down
|
|
1192
1192
|
];
|
|
1193
|
-
class
|
|
1193
|
+
class ue {
|
|
1194
1194
|
constructor(t, e = {}) {
|
|
1195
1195
|
this.config = t, this.imageConfig = e;
|
|
1196
1196
|
}
|
|
@@ -1202,65 +1202,65 @@ class me {
|
|
|
1202
1202
|
* @returns Array of layout objects with position, rotation, scale
|
|
1203
1203
|
*/
|
|
1204
1204
|
generate(t, e, i = {}) {
|
|
1205
|
-
const o = [], { width: s, height: r } = e, a = { ...
|
|
1205
|
+
const o = [], { width: s, height: r } = e, a = { ...de, ...this.config.grid }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, m = l !== 1 || d !== 1, b = s - 2 * h, p = r - 2 * h, { columns: g, rows: f } = this.calculateGridDimensions(
|
|
1206
1206
|
t,
|
|
1207
1207
|
b,
|
|
1208
1208
|
p,
|
|
1209
1209
|
c,
|
|
1210
1210
|
a
|
|
1211
|
-
),
|
|
1211
|
+
), S = a.stagger === "row", v = a.stagger === "column", w = S ? g + 0.5 : g, E = v ? f + 0.5 : f, x = (b - a.gap * (g - 1)) / w, A = (p - a.gap * (f - 1)) / E, L = S ? x / 2 : 0, z = v ? A / 2 : 0, P = 1 + a.overlap, _ = Math.min(x, A) * P, Y = i.fixedHeight ? Math.min(i.fixedHeight, _) : _, N = g * x + (g - 1) * a.gap + L, T = f * A + (f - 1) * a.gap + z, D = h + (b - N) / 2, k = h + (p - T) / 2, H = g * f, R = a.columns !== "auto" && a.rows !== "auto", C = R && t > H;
|
|
1212
1212
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1213
1213
|
gridConfigColumns: a.columns,
|
|
1214
1214
|
gridConfigRows: a.rows,
|
|
1215
1215
|
columns: g,
|
|
1216
1216
|
rows: f,
|
|
1217
|
-
cellCount:
|
|
1218
|
-
hasFixedGrid:
|
|
1217
|
+
cellCount: H,
|
|
1218
|
+
hasFixedGrid: R,
|
|
1219
1219
|
imageCount: t,
|
|
1220
|
-
isOverflowMode:
|
|
1220
|
+
isOverflowMode: C
|
|
1221
1221
|
});
|
|
1222
|
-
const O =
|
|
1223
|
-
for (let
|
|
1224
|
-
let
|
|
1225
|
-
if (
|
|
1226
|
-
const q =
|
|
1227
|
-
|
|
1222
|
+
const O = C ? new Array(H).fill(0) : [], $ = Math.min(x, A) * a.overflowOffset;
|
|
1223
|
+
for (let F = 0; F < t; F++) {
|
|
1224
|
+
let U, M, W = 0;
|
|
1225
|
+
if (C && F >= H) {
|
|
1226
|
+
const q = F - H, j = q % H;
|
|
1227
|
+
W = Math.floor(q / H) + 1, O[j]++, a.fillDirection === "row" ? (U = j % g, M = Math.floor(j / g)) : (M = j % f, U = Math.floor(j / f));
|
|
1228
1228
|
} else
|
|
1229
|
-
a.fillDirection === "row" ? (
|
|
1230
|
-
let
|
|
1231
|
-
if (a.stagger === "row" &&
|
|
1232
|
-
const q = (
|
|
1233
|
-
|
|
1229
|
+
a.fillDirection === "row" ? (U = F % g, M = Math.floor(F / g)) : (M = F % f, U = Math.floor(F / f));
|
|
1230
|
+
let G = D + U * (x + a.gap) + x / 2, X = k + M * (A + a.gap) + A / 2;
|
|
1231
|
+
if (a.stagger === "row" && M % 2 === 1 ? G += x / 2 : a.stagger === "column" && U % 2 === 1 && (X += A / 2), W > 0) {
|
|
1232
|
+
const q = (W - 1) % It.length, j = It[q];
|
|
1233
|
+
G += j.x * $, X += j.y * $;
|
|
1234
1234
|
}
|
|
1235
1235
|
if (a.jitter > 0) {
|
|
1236
|
-
const q =
|
|
1237
|
-
|
|
1236
|
+
const q = x / 2 * a.jitter, j = A / 2 * a.jitter;
|
|
1237
|
+
G += this.random(-q, q), X += this.random(-j, j);
|
|
1238
1238
|
}
|
|
1239
|
-
let B =
|
|
1240
|
-
if (!
|
|
1239
|
+
let B = G, J = X;
|
|
1240
|
+
if (!C && a.fillDirection === "row") {
|
|
1241
1241
|
const q = t % g || g;
|
|
1242
|
-
if (
|
|
1243
|
-
const
|
|
1244
|
-
let
|
|
1245
|
-
a.alignment === "center" ?
|
|
1242
|
+
if (M === Math.floor((t - 1) / g) && q < g) {
|
|
1243
|
+
const vt = q * x + (q - 1) * a.gap;
|
|
1244
|
+
let gt = 0;
|
|
1245
|
+
a.alignment === "center" ? gt = (N - vt) / 2 : a.alignment === "end" && (gt = N - vt), B += gt;
|
|
1246
1246
|
}
|
|
1247
1247
|
}
|
|
1248
|
-
const
|
|
1249
|
-
B = Math.max(
|
|
1250
|
-
let
|
|
1251
|
-
if (
|
|
1252
|
-
const q = this.imageConfig.rotation?.range?.min ?? -15,
|
|
1253
|
-
a.jitter > 0 ?
|
|
1248
|
+
const rt = m ? this.random(l, d) : 1, K = Y * rt, it = K * 1.5 / 2, nt = K / 2, lt = h + it, ht = s - h - it, Ft = h + nt, Dt = r - h - nt;
|
|
1249
|
+
B = Math.max(lt, Math.min(B, ht)), J = Math.max(Ft, Math.min(J, Dt));
|
|
1250
|
+
let dt = 0;
|
|
1251
|
+
if (u === "random") {
|
|
1252
|
+
const q = this.imageConfig.rotation?.range?.min ?? -15, j = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1253
|
+
a.jitter > 0 ? dt = this.random(q * a.jitter, j * a.jitter) : dt = this.random(q, j);
|
|
1254
1254
|
}
|
|
1255
|
-
let
|
|
1256
|
-
|
|
1257
|
-
id:
|
|
1255
|
+
let ut;
|
|
1256
|
+
C && W > 0 ? ut = 50 - W : ut = C ? 100 + F : F + 1, o.push({
|
|
1257
|
+
id: F,
|
|
1258
1258
|
x: B,
|
|
1259
1259
|
y: J,
|
|
1260
|
-
rotation:
|
|
1261
|
-
scale:
|
|
1262
|
-
baseSize:
|
|
1263
|
-
zIndex:
|
|
1260
|
+
rotation: dt,
|
|
1261
|
+
scale: rt,
|
|
1262
|
+
baseSize: K,
|
|
1263
|
+
zIndex: ut
|
|
1264
1264
|
});
|
|
1265
1265
|
}
|
|
1266
1266
|
return o;
|
|
@@ -1290,14 +1290,14 @@ class me {
|
|
|
1290
1290
|
return Math.random() * (e - t) + t;
|
|
1291
1291
|
}
|
|
1292
1292
|
}
|
|
1293
|
-
const
|
|
1293
|
+
const ge = Math.PI * (3 - Math.sqrt(5)), me = {
|
|
1294
1294
|
spiralType: "golden",
|
|
1295
1295
|
direction: "counterclockwise",
|
|
1296
1296
|
tightness: 1,
|
|
1297
1297
|
scaleDecay: 0,
|
|
1298
1298
|
startAngle: 0
|
|
1299
1299
|
};
|
|
1300
|
-
class
|
|
1300
|
+
class fe {
|
|
1301
1301
|
constructor(t, e = {}) {
|
|
1302
1302
|
this.config = t, this.imageConfig = e;
|
|
1303
1303
|
}
|
|
@@ -1309,36 +1309,36 @@ class be {
|
|
|
1309
1309
|
* @returns Array of layout objects with position, rotation, scale
|
|
1310
1310
|
*/
|
|
1311
1311
|
generate(t, e, i = {}) {
|
|
1312
|
-
const o = [], { width: s, height: r } = e, a = { ...
|
|
1312
|
+
const o = [], { width: s, height: r } = e, a = { ...me, ...this.config.spiral }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = m !== 1 || b !== 1, g = this.config.scaleDecay ?? a.scaleDecay, f = s / 2, S = r / 2, v = Math.min(
|
|
1313
1313
|
f - h - c / 2,
|
|
1314
|
-
|
|
1315
|
-
),
|
|
1316
|
-
for (let
|
|
1317
|
-
let
|
|
1314
|
+
S - h - c / 2
|
|
1315
|
+
), w = a.direction === "clockwise" ? -1 : 1;
|
|
1316
|
+
for (let E = 0; E < t; E++) {
|
|
1317
|
+
let x, A;
|
|
1318
1318
|
if (a.spiralType === "golden")
|
|
1319
|
-
|
|
1319
|
+
x = E * ge * w + a.startAngle, A = this.calculateGoldenRadius(E, t, v, a.tightness);
|
|
1320
1320
|
else if (a.spiralType === "archimedean") {
|
|
1321
|
-
const
|
|
1322
|
-
|
|
1321
|
+
const G = E * 0.5 * a.tightness;
|
|
1322
|
+
x = G * w + a.startAngle, A = this.calculateArchimedeanRadius(G, t, v, a.tightness);
|
|
1323
1323
|
} else {
|
|
1324
|
-
const
|
|
1325
|
-
|
|
1324
|
+
const G = E * 0.3 * a.tightness;
|
|
1325
|
+
x = G * w + a.startAngle, A = this.calculateLogarithmicRadius(G, t, v, a.tightness);
|
|
1326
1326
|
}
|
|
1327
|
-
const
|
|
1328
|
-
let
|
|
1329
|
-
if (
|
|
1330
|
-
const
|
|
1331
|
-
|
|
1332
|
-
} else
|
|
1333
|
-
const
|
|
1327
|
+
const L = f + Math.cos(x) * A, z = S + Math.sin(x) * A, P = A / v, _ = g > 0 ? 1 - P * g * 0.5 : 1, Y = p ? this.random(m, b) : 1, N = _ * Y, T = c * N, k = T * 1.5 / 2, H = T / 2, R = h + k, C = s - h - k, O = h + H, $ = r - h - H, F = Math.max(R, Math.min(L, C)), U = Math.max(O, Math.min(z, $));
|
|
1328
|
+
let M = 0;
|
|
1329
|
+
if (u === "random") {
|
|
1330
|
+
const G = x * 180 / Math.PI % 360, X = this.random(l, d);
|
|
1331
|
+
M = a.spiralType === "golden" ? X : G * 0.1 + X * 0.9;
|
|
1332
|
+
} else u === "tangent" && (M = this.calculateSpiralTangent(x, A, a));
|
|
1333
|
+
const W = t - E;
|
|
1334
1334
|
o.push({
|
|
1335
|
-
id:
|
|
1336
|
-
x:
|
|
1337
|
-
y:
|
|
1338
|
-
rotation:
|
|
1339
|
-
scale:
|
|
1335
|
+
id: E,
|
|
1336
|
+
x: F,
|
|
1337
|
+
y: U,
|
|
1338
|
+
rotation: M,
|
|
1339
|
+
scale: N,
|
|
1340
1340
|
baseSize: T,
|
|
1341
|
-
zIndex:
|
|
1341
|
+
zIndex: W
|
|
1342
1342
|
});
|
|
1343
1343
|
}
|
|
1344
1344
|
return o;
|
|
@@ -1391,7 +1391,7 @@ class be {
|
|
|
1391
1391
|
return Math.random() * (e - t) + t;
|
|
1392
1392
|
}
|
|
1393
1393
|
}
|
|
1394
|
-
const
|
|
1394
|
+
const pe = {
|
|
1395
1395
|
clusterCount: "auto",
|
|
1396
1396
|
clusterSpread: 150,
|
|
1397
1397
|
clusterSpacing: 200,
|
|
@@ -1399,7 +1399,7 @@ const ye = {
|
|
|
1399
1399
|
overlap: 0.3,
|
|
1400
1400
|
distribution: "gaussian"
|
|
1401
1401
|
};
|
|
1402
|
-
class
|
|
1402
|
+
class be {
|
|
1403
1403
|
constructor(t, e = {}) {
|
|
1404
1404
|
this.config = t, this.imageConfig = e;
|
|
1405
1405
|
}
|
|
@@ -1411,7 +1411,7 @@ class ve {
|
|
|
1411
1411
|
* @returns Array of layout objects with position, rotation, scale
|
|
1412
1412
|
*/
|
|
1413
1413
|
generate(t, e, i = {}) {
|
|
1414
|
-
const o = [], { width: s, height: r } = e, a = { ...
|
|
1414
|
+
const o = [], { width: s, height: r } = e, a = { ...pe, ...this.config.cluster }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = m !== 1 || b !== 1, g = this.calculateClusterCount(
|
|
1415
1415
|
t,
|
|
1416
1416
|
a.clusterCount,
|
|
1417
1417
|
s,
|
|
@@ -1423,35 +1423,35 @@ class ve {
|
|
|
1423
1423
|
r,
|
|
1424
1424
|
h,
|
|
1425
1425
|
a
|
|
1426
|
-
),
|
|
1427
|
-
for (let
|
|
1428
|
-
|
|
1426
|
+
), S = new Array(g).fill(0);
|
|
1427
|
+
for (let w = 0; w < t; w++)
|
|
1428
|
+
S[w % g]++;
|
|
1429
1429
|
let v = 0;
|
|
1430
|
-
for (let
|
|
1431
|
-
const
|
|
1432
|
-
for (let
|
|
1433
|
-
let
|
|
1430
|
+
for (let w = 0; w < g; w++) {
|
|
1431
|
+
const E = f[w], x = S[w];
|
|
1432
|
+
for (let A = 0; A < x; A++) {
|
|
1433
|
+
let L, z;
|
|
1434
1434
|
if (a.distribution === "gaussian")
|
|
1435
|
-
|
|
1435
|
+
L = this.gaussianRandom() * E.spread, z = this.gaussianRandom() * E.spread;
|
|
1436
1436
|
else {
|
|
1437
|
-
const
|
|
1438
|
-
|
|
1437
|
+
const M = this.random(0, Math.PI * 2), W = this.random(0, E.spread);
|
|
1438
|
+
L = Math.cos(M) * W, z = Math.sin(M) * W;
|
|
1439
1439
|
}
|
|
1440
|
-
const
|
|
1441
|
-
|
|
1442
|
-
const
|
|
1443
|
-
let D =
|
|
1444
|
-
const
|
|
1445
|
-
D = Math.max(h +
|
|
1446
|
-
const O =
|
|
1440
|
+
const P = 1 + a.overlap * 0.5, _ = 1 + a.overlap * 0.3;
|
|
1441
|
+
L /= P, z /= P;
|
|
1442
|
+
const Y = p ? this.random(m, b) : 1, N = _ * Y, T = c * N;
|
|
1443
|
+
let D = E.x + L, k = E.y + z;
|
|
1444
|
+
const R = T * 1.5 / 2, C = T / 2;
|
|
1445
|
+
D = Math.max(h + R, Math.min(D, s - h - R)), k = Math.max(h + C, Math.min(k, r - h - C));
|
|
1446
|
+
const O = u === "random" ? this.random(l, d) : 0, F = Math.sqrt(L * L + z * z) / E.spread, U = Math.round((1 - F) * 50) + 1;
|
|
1447
1447
|
o.push({
|
|
1448
1448
|
id: v,
|
|
1449
1449
|
x: D,
|
|
1450
|
-
y:
|
|
1450
|
+
y: k,
|
|
1451
1451
|
rotation: O,
|
|
1452
|
-
scale:
|
|
1452
|
+
scale: N,
|
|
1453
1453
|
baseSize: T,
|
|
1454
|
-
zIndex:
|
|
1454
|
+
zIndex: U
|
|
1455
1455
|
}), v++;
|
|
1456
1456
|
}
|
|
1457
1457
|
}
|
|
@@ -1472,19 +1472,19 @@ class ve {
|
|
|
1472
1472
|
* Generate cluster center positions with spacing constraints
|
|
1473
1473
|
*/
|
|
1474
1474
|
generateClusterCenters(t, e, i, o, s) {
|
|
1475
|
-
const r = [], h = o + s.clusterSpread, c = e - o - s.clusterSpread,
|
|
1476
|
-
for (let
|
|
1475
|
+
const r = [], h = o + s.clusterSpread, c = e - o - s.clusterSpread, u = o + s.clusterSpread, l = i - o - s.clusterSpread;
|
|
1476
|
+
for (let d = 0; d < t; d++) {
|
|
1477
1477
|
let m = null, b = -1;
|
|
1478
1478
|
for (let p = 0; p < 100; p++) {
|
|
1479
1479
|
const g = {
|
|
1480
1480
|
x: this.random(h, c),
|
|
1481
|
-
y: this.random(
|
|
1481
|
+
y: this.random(u, l),
|
|
1482
1482
|
spread: this.calculateClusterSpread(s)
|
|
1483
1483
|
};
|
|
1484
1484
|
let f = 1 / 0;
|
|
1485
|
-
for (const
|
|
1486
|
-
const v = g.x -
|
|
1487
|
-
f = Math.min(f,
|
|
1485
|
+
for (const S of r) {
|
|
1486
|
+
const v = g.x - S.x, w = g.y - S.y, E = Math.sqrt(v * v + w * w);
|
|
1487
|
+
f = Math.min(f, E);
|
|
1488
1488
|
}
|
|
1489
1489
|
if ((r.length === 0 || f > b) && (m = g, b = f), f >= s.clusterSpacing)
|
|
1490
1490
|
break;
|
|
@@ -1517,7 +1517,7 @@ class ve {
|
|
|
1517
1517
|
return Math.random() * (e - t) + t;
|
|
1518
1518
|
}
|
|
1519
1519
|
}
|
|
1520
|
-
class
|
|
1520
|
+
class ye {
|
|
1521
1521
|
constructor(t, e = {}) {
|
|
1522
1522
|
this.config = t, this.imageConfig = e;
|
|
1523
1523
|
}
|
|
@@ -1529,29 +1529,29 @@ class xe {
|
|
|
1529
1529
|
* @returns Array of layout objects with position, rotation, scale
|
|
1530
1530
|
*/
|
|
1531
1531
|
generate(t, e, i = {}) {
|
|
1532
|
-
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none",
|
|
1533
|
-
...
|
|
1532
|
+
const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || m !== 1, p = i.fixedHeight ?? a, g = {
|
|
1533
|
+
...Ht,
|
|
1534
1534
|
...this.config.wave
|
|
1535
|
-
}, { rows: f, amplitude:
|
|
1536
|
-
let
|
|
1537
|
-
for (let
|
|
1538
|
-
const O = f === 1 ? (T + D) / 2 : T +
|
|
1535
|
+
}, { rows: f, amplitude: S, frequency: v, phaseShift: w, synchronization: E } = g, x = Math.ceil(t / f), z = p * 1.5 / 2, P = h + z, _ = s - h - z, Y = _ - P, N = x > 1 ? Y / (x - 1) : 0, T = h + S + p / 2, D = r - h - S - p / 2, k = D - T, H = f > 1 ? k / (f - 1) : 0;
|
|
1536
|
+
let R = 0;
|
|
1537
|
+
for (let C = 0; C < f && R < t; C++) {
|
|
1538
|
+
const O = f === 1 ? (T + D) / 2 : T + C * H;
|
|
1539
1539
|
let $ = 0;
|
|
1540
|
-
|
|
1541
|
-
for (let
|
|
1542
|
-
const
|
|
1540
|
+
E === "offset" ? $ = C * w : E === "alternating" && ($ = C * Math.PI);
|
|
1541
|
+
for (let F = 0; F < x && R < t; F++) {
|
|
1542
|
+
const U = x === 1 ? (P + _) / 2 : P + F * N, M = this.calculateWaveY(U, s, S, v, $), W = U, G = O + M, X = b ? this.random(d, m) : 1, B = p * X;
|
|
1543
1543
|
let J = 0;
|
|
1544
|
-
c === "tangent" ? J = this.calculateRotation(
|
|
1545
|
-
const
|
|
1544
|
+
c === "tangent" ? J = this.calculateRotation(U, s, S, v, $) : c === "random" && (J = this.random(u, l));
|
|
1545
|
+
const K = B * 1.5 / 2, ct = B / 2, it = h + K, nt = s - h - K, lt = h + ct, ht = r - h - ct;
|
|
1546
1546
|
o.push({
|
|
1547
|
-
id:
|
|
1548
|
-
x: Math.max(
|
|
1549
|
-
y: Math.max(
|
|
1547
|
+
id: R,
|
|
1548
|
+
x: Math.max(it, Math.min(W, nt)),
|
|
1549
|
+
y: Math.max(lt, Math.min(G, ht)),
|
|
1550
1550
|
rotation: J,
|
|
1551
|
-
scale:
|
|
1551
|
+
scale: X,
|
|
1552
1552
|
baseSize: B,
|
|
1553
|
-
zIndex:
|
|
1554
|
-
}),
|
|
1553
|
+
zIndex: R + 1
|
|
1554
|
+
}), R++;
|
|
1555
1555
|
}
|
|
1556
1556
|
}
|
|
1557
1557
|
return o;
|
|
@@ -1594,7 +1594,7 @@ class xe {
|
|
|
1594
1594
|
return Math.random() * (e - t) + t;
|
|
1595
1595
|
}
|
|
1596
1596
|
}
|
|
1597
|
-
class
|
|
1597
|
+
class ve {
|
|
1598
1598
|
constructor(t) {
|
|
1599
1599
|
this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.placementLayout = this.initLayout();
|
|
1600
1600
|
}
|
|
@@ -1605,17 +1605,17 @@ class Se {
|
|
|
1605
1605
|
initLayout() {
|
|
1606
1606
|
switch (this.config.algorithm) {
|
|
1607
1607
|
case "radial":
|
|
1608
|
-
return new
|
|
1608
|
+
return new he(this.config, this.imageConfig);
|
|
1609
1609
|
case "grid":
|
|
1610
|
-
return new
|
|
1610
|
+
return new ue(this.config, this.imageConfig);
|
|
1611
1611
|
case "spiral":
|
|
1612
|
-
return new
|
|
1612
|
+
return new fe(this.config, this.imageConfig);
|
|
1613
1613
|
case "cluster":
|
|
1614
|
-
return new
|
|
1614
|
+
return new be(this.config, this.imageConfig);
|
|
1615
1615
|
case "wave":
|
|
1616
|
-
return new
|
|
1616
|
+
return new ye(this.config, this.imageConfig);
|
|
1617
1617
|
default:
|
|
1618
|
-
return new
|
|
1618
|
+
return new le(this.config, this.imageConfig);
|
|
1619
1619
|
}
|
|
1620
1620
|
}
|
|
1621
1621
|
/**
|
|
@@ -1697,15 +1697,15 @@ class Se {
|
|
|
1697
1697
|
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1698
1698
|
if (r !== void 0)
|
|
1699
1699
|
return { height: r };
|
|
1700
|
-
const a = s?.minSize ?? 50, h = s?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6,
|
|
1700
|
+
const a = s?.minSize ?? 50, h = s?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: l, height: d } = t, p = l * d * c / e;
|
|
1701
1701
|
let f = Math.sqrt(p / 1.4);
|
|
1702
|
-
f *=
|
|
1703
|
-
let
|
|
1704
|
-
if (
|
|
1702
|
+
f *= u, f = Math.min(f, i);
|
|
1703
|
+
let S = this.clamp(f, a, h);
|
|
1704
|
+
if (S === a && f < a) {
|
|
1705
1705
|
const v = Math.max(a * 0.05, 20);
|
|
1706
|
-
|
|
1706
|
+
S = Math.max(v, f);
|
|
1707
1707
|
}
|
|
1708
|
-
return { height:
|
|
1708
|
+
return { height: S };
|
|
1709
1709
|
}
|
|
1710
1710
|
/**
|
|
1711
1711
|
* Utility: Clamp a value between min and max
|
|
@@ -1714,48 +1714,14 @@ class Se {
|
|
|
1714
1714
|
return Math.max(e, Math.min(i, t));
|
|
1715
1715
|
}
|
|
1716
1716
|
}
|
|
1717
|
-
const Z = class Z {
|
|
1718
|
-
/**
|
|
1719
|
-
* Register a loader implementation with the registry
|
|
1720
|
-
* @param name - Loader identifier (e.g., 'static', 'google-drive', 'composite')
|
|
1721
|
-
* @param Loader - Loader class constructor to register
|
|
1722
|
-
*/
|
|
1723
|
-
static registerLoader(t, e) {
|
|
1724
|
-
Z.registry.set(t, e);
|
|
1725
|
-
}
|
|
1726
|
-
/**
|
|
1727
|
-
* Get a registered loader implementation
|
|
1728
|
-
* @param name - Loader identifier
|
|
1729
|
-
* @returns Loader class constructor
|
|
1730
|
-
* @throws Error if loader is not registered
|
|
1731
|
-
*/
|
|
1732
|
-
static getLoader(t) {
|
|
1733
|
-
const e = Z.registry.get(t);
|
|
1734
|
-
if (!e)
|
|
1735
|
-
throw new Error(
|
|
1736
|
-
`Loader "${t}" is not registered. Import "@frybynite/image-cloud/loaders/${t}" or "@frybynite/image-cloud/loaders/all".`
|
|
1737
|
-
);
|
|
1738
|
-
return e;
|
|
1739
|
-
}
|
|
1740
|
-
/**
|
|
1741
|
-
* Check if a loader is registered
|
|
1742
|
-
* @param name - Loader identifier
|
|
1743
|
-
* @returns True if the loader is registered, false otherwise
|
|
1744
|
-
*/
|
|
1745
|
-
static isRegistered(t) {
|
|
1746
|
-
return Z.registry.has(t);
|
|
1747
|
-
}
|
|
1748
|
-
};
|
|
1749
|
-
Z.registry = /* @__PURE__ */ new Map();
|
|
1750
|
-
let et = Z;
|
|
1751
1717
|
var I = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(I || {});
|
|
1752
|
-
function Ee(n) {
|
|
1753
|
-
return n in pt;
|
|
1754
|
-
}
|
|
1755
1718
|
function we(n) {
|
|
1756
|
-
return n
|
|
1719
|
+
return n in mt;
|
|
1720
|
+
}
|
|
1721
|
+
function xe(n) {
|
|
1722
|
+
return n ? we(n) ? mt[n] : n : mt.md;
|
|
1757
1723
|
}
|
|
1758
|
-
function
|
|
1724
|
+
function Se(n) {
|
|
1759
1725
|
if (!n) return "";
|
|
1760
1726
|
const t = [];
|
|
1761
1727
|
if (n.grayscale !== void 0 && t.push(`grayscale(${n.grayscale})`), n.blur !== void 0 && t.push(`blur(${n.blur}px)`), n.brightness !== void 0 && t.push(`brightness(${n.brightness})`), n.contrast !== void 0 && t.push(`contrast(${n.contrast})`), n.saturate !== void 0 && t.push(`saturate(${n.saturate})`), n.opacity !== void 0 && t.push(`opacity(${n.opacity})`), n.sepia !== void 0 && t.push(`sepia(${n.sepia})`), n.hueRotate !== void 0 && t.push(`hue-rotate(${n.hueRotate}deg)`), n.invert !== void 0 && t.push(`invert(${n.invert})`), n.dropShadow !== void 0)
|
|
@@ -1767,13 +1733,13 @@ function Ie(n) {
|
|
|
1767
1733
|
}
|
|
1768
1734
|
return t.join(" ");
|
|
1769
1735
|
}
|
|
1770
|
-
function
|
|
1736
|
+
function Q(n) {
|
|
1771
1737
|
if (!n || n.style === "none" || n.width === 0)
|
|
1772
1738
|
return "none";
|
|
1773
1739
|
const t = n.width ?? 0, e = n.style ?? "solid", i = n.color ?? "#000000";
|
|
1774
1740
|
return `${t}px ${e} ${i}`;
|
|
1775
1741
|
}
|
|
1776
|
-
function
|
|
1742
|
+
function st(n) {
|
|
1777
1743
|
if (!n) return {};
|
|
1778
1744
|
const t = {};
|
|
1779
1745
|
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
@@ -1782,41 +1748,41 @@ function rt(n) {
|
|
|
1782
1748
|
} else n.border?.radius !== void 0 && (t.borderRadius = `${n.border.radius}px`);
|
|
1783
1749
|
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
1784
1750
|
const s = n.border || {}, r = { ...s, ...n.borderTop }, a = { ...s, ...n.borderRight }, h = { ...s, ...n.borderBottom }, c = { ...s, ...n.borderLeft };
|
|
1785
|
-
t.borderTop =
|
|
1786
|
-
} else n.border && (t.border =
|
|
1787
|
-
n.shadow !== void 0 && (t.boxShadow =
|
|
1788
|
-
const o =
|
|
1751
|
+
t.borderTop = Q(r), t.borderRight = Q(a), t.borderBottom = Q(h), t.borderLeft = Q(c);
|
|
1752
|
+
} else n.border && (t.border = Q(n.border));
|
|
1753
|
+
n.shadow !== void 0 && (t.boxShadow = xe(n.shadow));
|
|
1754
|
+
const o = Se(n.filter);
|
|
1789
1755
|
if (t.filter = o || "none", n.opacity !== void 0 && (t.opacity = String(n.opacity)), n.cursor !== void 0 && (t.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
1790
1756
|
const s = n.outline.width ?? 0, r = n.outline.style ?? "solid", a = n.outline.color ?? "#000000";
|
|
1791
1757
|
t.outline = `${s}px ${r} ${a}`, n.outline.offset !== void 0 && (t.outlineOffset = `${n.outline.offset}px`);
|
|
1792
1758
|
}
|
|
1793
1759
|
return n.objectFit !== void 0 && (t.objectFit = n.objectFit), n.aspectRatio !== void 0 && (t.aspectRatio = n.aspectRatio), t;
|
|
1794
1760
|
}
|
|
1795
|
-
function
|
|
1761
|
+
function tt(n, t) {
|
|
1796
1762
|
t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio);
|
|
1797
1763
|
}
|
|
1798
1764
|
function Lt(n) {
|
|
1799
1765
|
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
1800
1766
|
}
|
|
1801
|
-
function
|
|
1767
|
+
function et(n, t) {
|
|
1802
1768
|
const e = Lt(t);
|
|
1803
1769
|
e && e.split(" ").forEach((i) => {
|
|
1804
1770
|
i.trim() && n.classList.add(i.trim());
|
|
1805
1771
|
});
|
|
1806
1772
|
}
|
|
1807
|
-
function
|
|
1773
|
+
function zt(n, t) {
|
|
1808
1774
|
const e = Lt(t);
|
|
1809
1775
|
e && e.split(" ").forEach((i) => {
|
|
1810
1776
|
i.trim() && n.classList.remove(i.trim());
|
|
1811
1777
|
});
|
|
1812
1778
|
}
|
|
1813
|
-
const
|
|
1779
|
+
const At = {
|
|
1814
1780
|
UNFOCUSING: 999,
|
|
1815
1781
|
FOCUSING: 1e3
|
|
1816
1782
|
};
|
|
1817
|
-
class
|
|
1783
|
+
class Ee {
|
|
1818
1784
|
constructor(t, e, i) {
|
|
1819
|
-
this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles =
|
|
1785
|
+
this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = st(i?.default), this.focusedStyles = st(i?.focused), this.defaultClassName = i?.default?.className, this.focusedClassName = i?.focused?.className;
|
|
1820
1786
|
}
|
|
1821
1787
|
/**
|
|
1822
1788
|
* Get current state machine state
|
|
@@ -1876,7 +1842,7 @@ class Ce {
|
|
|
1876
1842
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1877
1843
|
*/
|
|
1878
1844
|
animateWithDimensions(t, e, i, o, s, r, a, h) {
|
|
1879
|
-
const c = this.buildDimensionZoomTransform(e),
|
|
1845
|
+
const c = this.buildDimensionZoomTransform(e), u = this.buildDimensionZoomTransform(i);
|
|
1880
1846
|
return t.style.transition = "none", t.animate(
|
|
1881
1847
|
[
|
|
1882
1848
|
{
|
|
@@ -1885,7 +1851,7 @@ class Ce {
|
|
|
1885
1851
|
height: `${s}px`
|
|
1886
1852
|
},
|
|
1887
1853
|
{
|
|
1888
|
-
transform:
|
|
1854
|
+
transform: u,
|
|
1889
1855
|
width: `${r}px`,
|
|
1890
1856
|
height: `${a}px`
|
|
1891
1857
|
}
|
|
@@ -1901,13 +1867,13 @@ class Ce {
|
|
|
1901
1867
|
* Apply focused styling to an element
|
|
1902
1868
|
*/
|
|
1903
1869
|
applyFocusedStyling(t, e) {
|
|
1904
|
-
t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"),
|
|
1870
|
+
t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"), tt(t, this.focusedStyles), et(t, this.focusedClassName);
|
|
1905
1871
|
}
|
|
1906
1872
|
/**
|
|
1907
1873
|
* Remove focused styling from an element
|
|
1908
1874
|
*/
|
|
1909
1875
|
removeFocusedStyling(t, e) {
|
|
1910
|
-
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"),
|
|
1876
|
+
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), zt(t, this.focusedClassName), tt(t, this.defaultStyles), et(t, this.defaultClassName);
|
|
1911
1877
|
}
|
|
1912
1878
|
/**
|
|
1913
1879
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -1916,19 +1882,19 @@ class Ce {
|
|
|
1916
1882
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1917
1883
|
*/
|
|
1918
1884
|
startFocusAnimation(t, e, i, o, s) {
|
|
1919
|
-
const r = t.style.zIndex || "", a = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(a, h, e),
|
|
1920
|
-
this.applyFocusedStyling(t,
|
|
1885
|
+
const r = t.style.zIndex || "", a = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(a, h, e), u = this.calculateFocusTransform(e, i);
|
|
1886
|
+
this.applyFocusedStyling(t, At.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1921
1887
|
const l = o ?? {
|
|
1922
1888
|
x: 0,
|
|
1923
1889
|
y: 0,
|
|
1924
1890
|
rotation: i.rotation,
|
|
1925
1891
|
scale: 1
|
|
1926
1892
|
// No scale - using dimensions
|
|
1927
|
-
},
|
|
1893
|
+
}, d = s?.width ?? a, m = s?.height ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
|
|
1928
1894
|
t,
|
|
1929
1895
|
l,
|
|
1930
|
-
d,
|
|
1931
1896
|
u,
|
|
1897
|
+
d,
|
|
1932
1898
|
m,
|
|
1933
1899
|
c.width,
|
|
1934
1900
|
c.height,
|
|
@@ -1938,14 +1904,14 @@ class Ce {
|
|
|
1938
1904
|
element: t,
|
|
1939
1905
|
animation: p,
|
|
1940
1906
|
fromState: l,
|
|
1941
|
-
toState:
|
|
1907
|
+
toState: u,
|
|
1942
1908
|
startTime: performance.now(),
|
|
1943
1909
|
duration: b
|
|
1944
1910
|
};
|
|
1945
1911
|
return this.focusData = {
|
|
1946
1912
|
element: t,
|
|
1947
1913
|
originalState: i,
|
|
1948
|
-
focusTransform:
|
|
1914
|
+
focusTransform: u,
|
|
1949
1915
|
originalZIndex: r,
|
|
1950
1916
|
originalWidth: a,
|
|
1951
1917
|
originalHeight: h,
|
|
@@ -1966,26 +1932,26 @@ class Ce {
|
|
|
1966
1932
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1967
1933
|
*/
|
|
1968
1934
|
startUnfocusAnimation(t, e, i, o) {
|
|
1969
|
-
t.style.zIndex = String(
|
|
1935
|
+
t.style.zIndex = String(At.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1970
1936
|
const s = i ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, a = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, h = {
|
|
1971
1937
|
x: 0,
|
|
1972
1938
|
y: 0,
|
|
1973
1939
|
rotation: e.rotation,
|
|
1974
1940
|
scale: 1
|
|
1975
1941
|
// No scale - using dimensions
|
|
1976
|
-
}, c = this.focusData?.originalWidth ?? t.offsetWidth,
|
|
1942
|
+
}, c = this.focusData?.originalWidth ?? t.offsetWidth, u = this.focusData?.originalHeight ?? t.offsetHeight, l = this.config.animationDuration ?? 600, d = this.animateWithDimensions(
|
|
1977
1943
|
t,
|
|
1978
1944
|
s,
|
|
1979
1945
|
h,
|
|
1980
1946
|
r,
|
|
1981
1947
|
a,
|
|
1982
1948
|
c,
|
|
1983
|
-
|
|
1949
|
+
u,
|
|
1984
1950
|
l
|
|
1985
1951
|
), m = {
|
|
1986
1952
|
id: `unfocus-${Date.now()}`,
|
|
1987
1953
|
element: t,
|
|
1988
|
-
animation:
|
|
1954
|
+
animation: d,
|
|
1989
1955
|
fromState: s,
|
|
1990
1956
|
toState: h,
|
|
1991
1957
|
startTime: performance.now(),
|
|
@@ -1997,7 +1963,7 @@ class Ce {
|
|
|
1997
1963
|
animationHandle: m,
|
|
1998
1964
|
direction: "out",
|
|
1999
1965
|
originalWidth: c,
|
|
2000
|
-
originalHeight:
|
|
1966
|
+
originalHeight: u
|
|
2001
1967
|
};
|
|
2002
1968
|
}
|
|
2003
1969
|
/**
|
|
@@ -2254,7 +2220,7 @@ class Ce {
|
|
|
2254
2220
|
), this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2255
2221
|
}
|
|
2256
2222
|
}
|
|
2257
|
-
const
|
|
2223
|
+
const Ie = 50, Ae = 0.5, Te = 20, Ce = 0.3, Re = 150, Me = 30, at = class at {
|
|
2258
2224
|
constructor(t, e) {
|
|
2259
2225
|
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);
|
|
2260
2226
|
}
|
|
@@ -2281,7 +2247,7 @@ const Te = 50, Me = 0.5, Ae = 20, Re = 0.3, ze = 150, Fe = 30, ct = class ct {
|
|
|
2281
2247
|
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2282
2248
|
*/
|
|
2283
2249
|
hadRecentTouch() {
|
|
2284
|
-
return Date.now() - this.recentTouchTimestamp <
|
|
2250
|
+
return Date.now() - this.recentTouchTimestamp < at.TOUCH_CLICK_DELAY;
|
|
2285
2251
|
}
|
|
2286
2252
|
handleTouchStart(t) {
|
|
2287
2253
|
if (t.touches.length !== 1) return;
|
|
@@ -2301,11 +2267,11 @@ const Te = 50, Me = 0.5, Ae = 20, Re = 0.3, ze = 150, Fe = 30, ct = class ct {
|
|
|
2301
2267
|
const e = t.touches[0], i = e.clientX - this.touchState.startX, o = e.clientY - this.touchState.startY;
|
|
2302
2268
|
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + o * o) > 10) {
|
|
2303
2269
|
const a = Math.atan2(Math.abs(o), Math.abs(i)) * (180 / Math.PI);
|
|
2304
|
-
this.touchState.isHorizontalSwipe = a <=
|
|
2270
|
+
this.touchState.isHorizontalSwipe = a <= Me;
|
|
2305
2271
|
}
|
|
2306
2272
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2307
2273
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
|
|
2308
|
-
const s = i *
|
|
2274
|
+
const s = i * Ce;
|
|
2309
2275
|
this.callbacks.onDragOffset(s);
|
|
2310
2276
|
}
|
|
2311
2277
|
}
|
|
@@ -2314,15 +2280,473 @@ const Te = 50, Me = 0.5, Ae = 20, Re = 0.3, ze = 150, Fe = 30, ct = class ct {
|
|
|
2314
2280
|
this.recentTouchTimestamp = Date.now();
|
|
2315
2281
|
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, o = Math.abs(e) / i, s = Math.abs(e);
|
|
2316
2282
|
let r = !1;
|
|
2317
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >=
|
|
2283
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= Ie || o >= Ae && s >= Te) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2318
2284
|
}
|
|
2319
2285
|
handleTouchCancel(t) {
|
|
2320
2286
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2321
2287
|
}
|
|
2322
2288
|
};
|
|
2323
|
-
|
|
2324
|
-
let
|
|
2289
|
+
at.TOUCH_CLICK_DELAY = 300;
|
|
2290
|
+
let ft = at;
|
|
2325
2291
|
class Le {
|
|
2292
|
+
constructor(t) {
|
|
2293
|
+
if (this._prepared = !1, this._discoveredUrls = [], this.apiKey = t.apiKey ?? "", this.apiEndpoint = t.apiEndpoint ?? "https://www.googleapis.com/drive/v3/files", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2294
|
+
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
2295
|
+
}
|
|
2296
|
+
/**
|
|
2297
|
+
* Prepare the loader by discovering all images from configured sources
|
|
2298
|
+
* @param filter - Filter to apply to discovered images
|
|
2299
|
+
*/
|
|
2300
|
+
async prepare(t) {
|
|
2301
|
+
this._discoveredUrls = [];
|
|
2302
|
+
for (const e of this.sources)
|
|
2303
|
+
if ("folders" in e)
|
|
2304
|
+
for (const i of e.folders) {
|
|
2305
|
+
const o = e.recursive !== void 0 ? e.recursive : !0, s = await this.loadFromFolder(i, t, o);
|
|
2306
|
+
this._discoveredUrls.push(...s);
|
|
2307
|
+
}
|
|
2308
|
+
else if ("files" in e) {
|
|
2309
|
+
const i = await this.loadFiles(e.files, t);
|
|
2310
|
+
this._discoveredUrls.push(...i);
|
|
2311
|
+
}
|
|
2312
|
+
this._prepared = !0;
|
|
2313
|
+
}
|
|
2314
|
+
/**
|
|
2315
|
+
* Get the number of discovered images
|
|
2316
|
+
* @throws Error if called before prepare()
|
|
2317
|
+
*/
|
|
2318
|
+
imagesLength() {
|
|
2319
|
+
if (!this._prepared)
|
|
2320
|
+
throw new Error("GoogleDriveLoader.imagesLength() called before prepare()");
|
|
2321
|
+
return this._discoveredUrls.length;
|
|
2322
|
+
}
|
|
2323
|
+
/**
|
|
2324
|
+
* Get the ordered list of image URLs
|
|
2325
|
+
* @throws Error if called before prepare()
|
|
2326
|
+
*/
|
|
2327
|
+
imageURLs() {
|
|
2328
|
+
if (!this._prepared)
|
|
2329
|
+
throw new Error("GoogleDriveLoader.imageURLs() called before prepare()");
|
|
2330
|
+
return [...this._discoveredUrls];
|
|
2331
|
+
}
|
|
2332
|
+
/**
|
|
2333
|
+
* Check if the loader has been prepared
|
|
2334
|
+
*/
|
|
2335
|
+
isPrepared() {
|
|
2336
|
+
return this._prepared;
|
|
2337
|
+
}
|
|
2338
|
+
/**
|
|
2339
|
+
* Extract folder ID from various Google Drive URL formats
|
|
2340
|
+
* @param folderUrl - Google Drive folder URL
|
|
2341
|
+
* @returns Folder ID or null if invalid
|
|
2342
|
+
*/
|
|
2343
|
+
extractFolderId(t) {
|
|
2344
|
+
const e = [
|
|
2345
|
+
/\/folders\/([a-zA-Z0-9_-]+)/,
|
|
2346
|
+
// Standard format
|
|
2347
|
+
/id=([a-zA-Z0-9_-]+)/
|
|
2348
|
+
// Alternative format
|
|
2349
|
+
];
|
|
2350
|
+
for (const i of e) {
|
|
2351
|
+
const o = t.match(i);
|
|
2352
|
+
if (o && o[1])
|
|
2353
|
+
return o[1];
|
|
2354
|
+
}
|
|
2355
|
+
return null;
|
|
2356
|
+
}
|
|
2357
|
+
/**
|
|
2358
|
+
* Load images from a Google Drive folder
|
|
2359
|
+
* @param folderUrl - Google Drive folder URL
|
|
2360
|
+
* @param filter - Filter to apply to discovered images
|
|
2361
|
+
* @param recursive - Whether to include images from subfolders
|
|
2362
|
+
* @returns Promise resolving to array of image URLs
|
|
2363
|
+
*/
|
|
2364
|
+
async loadFromFolder(t, e, i = !0) {
|
|
2365
|
+
const o = this.extractFolderId(t);
|
|
2366
|
+
if (!o)
|
|
2367
|
+
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2368
|
+
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2369
|
+
return this.loadImagesDirectly(o, e);
|
|
2370
|
+
try {
|
|
2371
|
+
return i ? await this.loadImagesRecursively(o, e) : await this.loadImagesFromSingleFolder(o, e);
|
|
2372
|
+
} catch (s) {
|
|
2373
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(o, e);
|
|
2374
|
+
}
|
|
2375
|
+
}
|
|
2376
|
+
/**
|
|
2377
|
+
* Load images from a single folder (non-recursive)
|
|
2378
|
+
* @param folderId - Google Drive folder ID
|
|
2379
|
+
* @param filter - Filter to apply to discovered images
|
|
2380
|
+
* @returns Promise resolving to array of image URLs
|
|
2381
|
+
*/
|
|
2382
|
+
async loadImagesFromSingleFolder(t, e) {
|
|
2383
|
+
const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2384
|
+
if (!a.ok)
|
|
2385
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2386
|
+
const c = (await a.json()).files.filter(
|
|
2387
|
+
(u) => u.mimeType.startsWith("image/") && e.isAllowed(u.name)
|
|
2388
|
+
);
|
|
2389
|
+
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
|
|
2390
|
+
i.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2391
|
+
}), i;
|
|
2392
|
+
}
|
|
2393
|
+
/**
|
|
2394
|
+
* Load specific files by their URLs or IDs
|
|
2395
|
+
* @param fileUrls - Array of Google Drive file URLs or IDs
|
|
2396
|
+
* @param filter - Filter to apply to discovered images
|
|
2397
|
+
* @returns Promise resolving to array of image URLs
|
|
2398
|
+
*/
|
|
2399
|
+
async loadFiles(t, e) {
|
|
2400
|
+
const i = [];
|
|
2401
|
+
for (const o of t) {
|
|
2402
|
+
const s = this.extractFileId(o);
|
|
2403
|
+
if (!s) {
|
|
2404
|
+
this.log(`Skipping invalid file URL: ${o}`);
|
|
2405
|
+
continue;
|
|
2406
|
+
}
|
|
2407
|
+
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2408
|
+
try {
|
|
2409
|
+
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2410
|
+
if (a.ok) {
|
|
2411
|
+
const h = await a.json();
|
|
2412
|
+
h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${h.name}`)) : this.log(`Skipping non-image file: ${h.name} (${h.mimeType})`);
|
|
2413
|
+
} else
|
|
2414
|
+
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2415
|
+
} catch (r) {
|
|
2416
|
+
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2417
|
+
}
|
|
2418
|
+
else
|
|
2419
|
+
i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
|
|
2420
|
+
}
|
|
2421
|
+
return i;
|
|
2422
|
+
}
|
|
2423
|
+
/**
|
|
2424
|
+
* Extract file ID from Google Drive file URL
|
|
2425
|
+
* @param fileUrl - Google Drive file URL or file ID
|
|
2426
|
+
* @returns File ID or null if invalid
|
|
2427
|
+
*/
|
|
2428
|
+
extractFileId(t) {
|
|
2429
|
+
if (!/[/:.]/.test(t))
|
|
2430
|
+
return t;
|
|
2431
|
+
const e = [
|
|
2432
|
+
/\/file\/d\/([a-zA-Z0-9_-]+)/,
|
|
2433
|
+
// Standard file format
|
|
2434
|
+
/\/open\?id=([a-zA-Z0-9_-]+)/,
|
|
2435
|
+
// Alternative format
|
|
2436
|
+
/id=([a-zA-Z0-9_-]+)/
|
|
2437
|
+
// Generic id parameter
|
|
2438
|
+
];
|
|
2439
|
+
for (const i of e) {
|
|
2440
|
+
const o = t.match(i);
|
|
2441
|
+
if (o && o[1])
|
|
2442
|
+
return o[1];
|
|
2443
|
+
}
|
|
2444
|
+
return null;
|
|
2445
|
+
}
|
|
2446
|
+
/**
|
|
2447
|
+
* Recursively load images from a folder and all its subfolders
|
|
2448
|
+
* @param folderId - Google Drive folder ID
|
|
2449
|
+
* @param filter - Filter to apply to discovered images
|
|
2450
|
+
* @returns Promise resolving to array of image URLs
|
|
2451
|
+
*/
|
|
2452
|
+
async loadImagesRecursively(t, e) {
|
|
2453
|
+
const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2454
|
+
if (!a.ok)
|
|
2455
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2456
|
+
const h = await a.json(), c = h.files.filter(
|
|
2457
|
+
(l) => l.mimeType.startsWith("image/") && e.isAllowed(l.name)
|
|
2458
|
+
), u = h.files.filter(
|
|
2459
|
+
(l) => l.mimeType === "application/vnd.google-apps.folder"
|
|
2460
|
+
);
|
|
2461
|
+
this.log(`Found ${h.files.length} total items in folder ${t}`), h.files.forEach((l) => this.log(` - File: ${l.name} (${l.mimeType})`)), this.log(`- ${c.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), c.forEach((l) => {
|
|
2462
|
+
i.push(`https://lh3.googleusercontent.com/d/${l.id}=s1600`), this.log(`Added file: ${l.name}`);
|
|
2463
|
+
});
|
|
2464
|
+
for (const l of u) {
|
|
2465
|
+
this.log(`Loading images from subfolder: ${l.name}`);
|
|
2466
|
+
const d = await this.loadImagesRecursively(l.id, e);
|
|
2467
|
+
i.push(...d);
|
|
2468
|
+
}
|
|
2469
|
+
return i;
|
|
2470
|
+
}
|
|
2471
|
+
/**
|
|
2472
|
+
* Direct loading method (no API key required, but less reliable)
|
|
2473
|
+
* Uses embedded folder view to scrape image IDs
|
|
2474
|
+
* @param folderId - Google Drive folder ID
|
|
2475
|
+
* @param filter - Filter to apply (not used in fallback mode)
|
|
2476
|
+
* @returns Promise resolving to array of image URLs
|
|
2477
|
+
*/
|
|
2478
|
+
async loadImagesDirectly(t, e) {
|
|
2479
|
+
try {
|
|
2480
|
+
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(i, { mode: "cors" });
|
|
2481
|
+
if (!o.ok)
|
|
2482
|
+
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2483
|
+
const s = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2484
|
+
return [...new Set(a.map((u) => u[1]))].map(
|
|
2485
|
+
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2486
|
+
);
|
|
2487
|
+
} catch (i) {
|
|
2488
|
+
throw console.error("Direct loading failed:", i), new Error(
|
|
2489
|
+
`Unable to load images. Please ensure:
|
|
2490
|
+
1. The folder is shared publicly (Anyone with the link can view)
|
|
2491
|
+
2. The folder contains image files
|
|
2492
|
+
3. Consider adding a Google Drive API key in config.js for better reliability`
|
|
2493
|
+
);
|
|
2494
|
+
}
|
|
2495
|
+
}
|
|
2496
|
+
/**
|
|
2497
|
+
* Manually add image URLs (for testing or when auto-loading fails)
|
|
2498
|
+
* @param imageIds - Array of Google Drive file IDs
|
|
2499
|
+
* @returns Array of direct image URLs
|
|
2500
|
+
*/
|
|
2501
|
+
manualImageUrls(t) {
|
|
2502
|
+
return t.map((e) => `https://drive.google.com/uc?export=view&id=${e}`);
|
|
2503
|
+
}
|
|
2504
|
+
/**
|
|
2505
|
+
* Debug logging helper
|
|
2506
|
+
* @param args - Arguments to log
|
|
2507
|
+
*/
|
|
2508
|
+
log(...t) {
|
|
2509
|
+
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2510
|
+
}
|
|
2511
|
+
}
|
|
2512
|
+
class ze {
|
|
2513
|
+
constructor(t) {
|
|
2514
|
+
if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
|
|
2515
|
+
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
2516
|
+
this.log("StaticImageLoader initialized with config:", t);
|
|
2517
|
+
}
|
|
2518
|
+
/**
|
|
2519
|
+
* Prepare the loader by discovering all images from configured sources
|
|
2520
|
+
* @param filter - Filter to apply to discovered images
|
|
2521
|
+
*/
|
|
2522
|
+
async prepare(t) {
|
|
2523
|
+
this._discoveredUrls = [], this.log(`Processing ${this.sources.length} source(s)`);
|
|
2524
|
+
for (const e of this.sources)
|
|
2525
|
+
try {
|
|
2526
|
+
const i = await this.processSource(e, t);
|
|
2527
|
+
this._discoveredUrls.push(...i);
|
|
2528
|
+
} catch (i) {
|
|
2529
|
+
console.warn("Failed to process source:", e, i);
|
|
2530
|
+
}
|
|
2531
|
+
this._prepared = !0, this.log(`Successfully loaded ${this._discoveredUrls.length} image(s)`);
|
|
2532
|
+
}
|
|
2533
|
+
/**
|
|
2534
|
+
* Get the number of discovered images
|
|
2535
|
+
* @throws Error if called before prepare()
|
|
2536
|
+
*/
|
|
2537
|
+
imagesLength() {
|
|
2538
|
+
if (!this._prepared)
|
|
2539
|
+
throw new Error("StaticImageLoader.imagesLength() called before prepare()");
|
|
2540
|
+
return this._discoveredUrls.length;
|
|
2541
|
+
}
|
|
2542
|
+
/**
|
|
2543
|
+
* Get the ordered list of image URLs
|
|
2544
|
+
* @throws Error if called before prepare()
|
|
2545
|
+
*/
|
|
2546
|
+
imageURLs() {
|
|
2547
|
+
if (!this._prepared)
|
|
2548
|
+
throw new Error("StaticImageLoader.imageURLs() called before prepare()");
|
|
2549
|
+
return [...this._discoveredUrls];
|
|
2550
|
+
}
|
|
2551
|
+
/**
|
|
2552
|
+
* Check if the loader has been prepared
|
|
2553
|
+
*/
|
|
2554
|
+
isPrepared() {
|
|
2555
|
+
return this._prepared;
|
|
2556
|
+
}
|
|
2557
|
+
/**
|
|
2558
|
+
* Process a single source object using shape-based detection
|
|
2559
|
+
* @param source - Source configuration detected by key presence
|
|
2560
|
+
* @param filter - Filter to apply to discovered images
|
|
2561
|
+
* @returns Promise resolving to array of valid URLs from this source
|
|
2562
|
+
*/
|
|
2563
|
+
async processSource(t, e) {
|
|
2564
|
+
return t ? "urls" in t ? await this.processUrls(t.urls, e) : "path" in t ? await this.processPath(t.path, t.files, e) : "json" in t ? await this.processJson(t.json, e) : (console.warn("Unknown source shape:", t), []) : (console.warn("Invalid source object:", t), []);
|
|
2565
|
+
}
|
|
2566
|
+
/**
|
|
2567
|
+
* Process a list of direct URLs
|
|
2568
|
+
* @param urls - Array of image URLs
|
|
2569
|
+
* @param filter - Filter to apply to discovered images
|
|
2570
|
+
* @returns Promise resolving to array of validated URLs
|
|
2571
|
+
*/
|
|
2572
|
+
async processUrls(t, e) {
|
|
2573
|
+
if (!Array.isArray(t))
|
|
2574
|
+
return console.warn("URLs must be an array:", t), [];
|
|
2575
|
+
const i = [];
|
|
2576
|
+
for (const o of t) {
|
|
2577
|
+
const s = o.split("/").pop() || o;
|
|
2578
|
+
if (!e.isAllowed(s)) {
|
|
2579
|
+
this.log(`Skipping filtered URL: ${o}`);
|
|
2580
|
+
continue;
|
|
2581
|
+
}
|
|
2582
|
+
this.validateUrls ? await this.validateUrl(o) ? i.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : i.push(o);
|
|
2583
|
+
}
|
|
2584
|
+
return i;
|
|
2585
|
+
}
|
|
2586
|
+
/**
|
|
2587
|
+
* Process a path-based source
|
|
2588
|
+
* @param basePath - Base path (relative or absolute)
|
|
2589
|
+
* @param files - Array of filenames
|
|
2590
|
+
* @param filter - Filter to apply to discovered images
|
|
2591
|
+
* @returns Promise resolving to array of validated URLs
|
|
2592
|
+
*/
|
|
2593
|
+
async processPath(t, e, i) {
|
|
2594
|
+
if (!Array.isArray(e))
|
|
2595
|
+
return console.warn("files must be an array:", e), [];
|
|
2596
|
+
const o = [];
|
|
2597
|
+
for (const s of e) {
|
|
2598
|
+
if (!i.isAllowed(s)) {
|
|
2599
|
+
this.log(`Skipping filtered file: ${s}`);
|
|
2600
|
+
continue;
|
|
2601
|
+
}
|
|
2602
|
+
const r = this.constructUrl(t, s);
|
|
2603
|
+
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
2604
|
+
}
|
|
2605
|
+
return o;
|
|
2606
|
+
}
|
|
2607
|
+
/**
|
|
2608
|
+
* Process a JSON endpoint source
|
|
2609
|
+
* Fetches a JSON endpoint that returns { images: string[] }
|
|
2610
|
+
* @param url - JSON endpoint URL
|
|
2611
|
+
* @param filter - Filter to apply to discovered images
|
|
2612
|
+
* @returns Promise resolving to array of validated URLs
|
|
2613
|
+
*/
|
|
2614
|
+
async processJson(t, e) {
|
|
2615
|
+
this.log(`Fetching JSON endpoint: ${t}`);
|
|
2616
|
+
const i = new AbortController(), o = setTimeout(() => i.abort(), 1e4);
|
|
2617
|
+
try {
|
|
2618
|
+
const s = await fetch(t, { signal: i.signal });
|
|
2619
|
+
if (clearTimeout(o), !s.ok)
|
|
2620
|
+
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2621
|
+
const r = await s.json();
|
|
2622
|
+
if (!r || !Array.isArray(r.images))
|
|
2623
|
+
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2624
|
+
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2625
|
+
} catch (s) {
|
|
2626
|
+
throw clearTimeout(o), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
2627
|
+
}
|
|
2628
|
+
}
|
|
2629
|
+
/**
|
|
2630
|
+
* Validate a single URL using HEAD request
|
|
2631
|
+
* @param url - URL to validate
|
|
2632
|
+
* @returns Promise resolving to true if valid and accessible
|
|
2633
|
+
*/
|
|
2634
|
+
async validateUrl(t) {
|
|
2635
|
+
if (this.validationMethod === "none")
|
|
2636
|
+
return !0;
|
|
2637
|
+
if (this.validationMethod === "simple")
|
|
2638
|
+
try {
|
|
2639
|
+
return typeof window < "u" ? new URL(t, window.location.origin) : new URL(t), !0;
|
|
2640
|
+
} catch {
|
|
2641
|
+
return !1;
|
|
2642
|
+
}
|
|
2643
|
+
if (typeof window > "u")
|
|
2644
|
+
return !0;
|
|
2645
|
+
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
2646
|
+
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
2647
|
+
try {
|
|
2648
|
+
const i = new AbortController(), o = setTimeout(() => i.abort(), this.validationTimeout), s = await fetch(t, {
|
|
2649
|
+
method: "HEAD",
|
|
2650
|
+
signal: i.signal
|
|
2651
|
+
});
|
|
2652
|
+
return clearTimeout(o), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
2653
|
+
} catch (i) {
|
|
2654
|
+
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
2655
|
+
}
|
|
2656
|
+
}
|
|
2657
|
+
/**
|
|
2658
|
+
* Construct full URL from basePath and filename
|
|
2659
|
+
* @param basePath - Base path (relative or absolute)
|
|
2660
|
+
* @param filename - Filename to append
|
|
2661
|
+
* @returns Complete URL
|
|
2662
|
+
*/
|
|
2663
|
+
constructUrl(t, e) {
|
|
2664
|
+
const i = t.replace(/\/$/, "");
|
|
2665
|
+
if (this.isAbsoluteUrl(t))
|
|
2666
|
+
return `${i}/${e}`;
|
|
2667
|
+
if (typeof window > "u")
|
|
2668
|
+
return `${i}/${e}`;
|
|
2669
|
+
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2670
|
+
return `${o}${r}/${e}`;
|
|
2671
|
+
}
|
|
2672
|
+
/**
|
|
2673
|
+
* Check if URL is absolute (contains protocol)
|
|
2674
|
+
* @param url - URL to check
|
|
2675
|
+
* @returns True if absolute URL
|
|
2676
|
+
*/
|
|
2677
|
+
isAbsoluteUrl(t) {
|
|
2678
|
+
try {
|
|
2679
|
+
return new URL(t), !0;
|
|
2680
|
+
} catch {
|
|
2681
|
+
return !1;
|
|
2682
|
+
}
|
|
2683
|
+
}
|
|
2684
|
+
/**
|
|
2685
|
+
* Debug logging helper
|
|
2686
|
+
* @param args - Arguments to log
|
|
2687
|
+
*/
|
|
2688
|
+
log(...t) {
|
|
2689
|
+
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2690
|
+
}
|
|
2691
|
+
}
|
|
2692
|
+
class Fe {
|
|
2693
|
+
constructor(t) {
|
|
2694
|
+
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
2695
|
+
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
2696
|
+
this.log(`CompositeLoader initialized with ${this.loaders.length} loader(s)`);
|
|
2697
|
+
}
|
|
2698
|
+
/**
|
|
2699
|
+
* Prepare all loaders in parallel and combine their results
|
|
2700
|
+
* @param filter - Filter to apply to discovered images
|
|
2701
|
+
*/
|
|
2702
|
+
async prepare(t) {
|
|
2703
|
+
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
2704
|
+
const e = this.loaders.map((i, o) => i.prepare(t).then(() => {
|
|
2705
|
+
this.log(`Loader ${o} prepared with ${i.imagesLength()} images`);
|
|
2706
|
+
}).catch((s) => {
|
|
2707
|
+
console.warn(`Loader ${o} failed to prepare:`, s);
|
|
2708
|
+
}));
|
|
2709
|
+
await Promise.all(e);
|
|
2710
|
+
for (const i of this.loaders)
|
|
2711
|
+
if (i.isPrepared()) {
|
|
2712
|
+
const o = i.imageURLs();
|
|
2713
|
+
this._discoveredUrls.push(...o);
|
|
2714
|
+
}
|
|
2715
|
+
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
2716
|
+
}
|
|
2717
|
+
/**
|
|
2718
|
+
* Get the combined number of discovered images
|
|
2719
|
+
* @throws Error if called before prepare()
|
|
2720
|
+
*/
|
|
2721
|
+
imagesLength() {
|
|
2722
|
+
if (!this._prepared)
|
|
2723
|
+
throw new Error("CompositeLoader.imagesLength() called before prepare()");
|
|
2724
|
+
return this._discoveredUrls.length;
|
|
2725
|
+
}
|
|
2726
|
+
/**
|
|
2727
|
+
* Get the combined ordered list of image URLs
|
|
2728
|
+
* @throws Error if called before prepare()
|
|
2729
|
+
*/
|
|
2730
|
+
imageURLs() {
|
|
2731
|
+
if (!this._prepared)
|
|
2732
|
+
throw new Error("CompositeLoader.imageURLs() called before prepare()");
|
|
2733
|
+
return [...this._discoveredUrls];
|
|
2734
|
+
}
|
|
2735
|
+
/**
|
|
2736
|
+
* Check if the loader has been prepared
|
|
2737
|
+
*/
|
|
2738
|
+
isPrepared() {
|
|
2739
|
+
return this._prepared;
|
|
2740
|
+
}
|
|
2741
|
+
/**
|
|
2742
|
+
* Debug logging helper
|
|
2743
|
+
* @param args - Arguments to log
|
|
2744
|
+
*/
|
|
2745
|
+
log(...t) {
|
|
2746
|
+
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2747
|
+
}
|
|
2748
|
+
}
|
|
2749
|
+
class De {
|
|
2326
2750
|
/**
|
|
2327
2751
|
* Create a new ImageFilter
|
|
2328
2752
|
* @param extensions - Array of allowed file extensions (without dots)
|
|
@@ -2359,7 +2783,7 @@ class Le {
|
|
|
2359
2783
|
// isAllowedDate(date: Date): boolean
|
|
2360
2784
|
// isAllowedDimensions(width: number, height: number): boolean
|
|
2361
2785
|
}
|
|
2362
|
-
const
|
|
2786
|
+
const Oe = `
|
|
2363
2787
|
.fbn-ic-gallery {
|
|
2364
2788
|
position: relative;
|
|
2365
2789
|
width: 100%;
|
|
@@ -2409,77 +2833,67 @@ const De = `
|
|
|
2409
2833
|
display: none !important;
|
|
2410
2834
|
}
|
|
2411
2835
|
`;
|
|
2412
|
-
function
|
|
2836
|
+
function $e() {
|
|
2413
2837
|
if (typeof document > "u") return;
|
|
2414
2838
|
const n = "fbn-ic-functional-styles";
|
|
2415
2839
|
if (document.getElementById(n)) return;
|
|
2416
2840
|
const t = document.createElement("style");
|
|
2417
|
-
t.id = n, t.textContent =
|
|
2841
|
+
t.id = n, t.textContent = Oe, document.head.appendChild(t);
|
|
2418
2842
|
}
|
|
2419
|
-
let
|
|
2843
|
+
let Ue = class {
|
|
2420
2844
|
constructor(t = {}) {
|
|
2421
|
-
this.fullConfig =
|
|
2845
|
+
this.fullConfig = Xt(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 Kt(this.fullConfig.animation), this.layoutEngine = new ve({
|
|
2422
2846
|
layout: this.fullConfig.layout,
|
|
2423
2847
|
image: this.fullConfig.image
|
|
2424
|
-
}), this.zoomEngine = new
|
|
2848
|
+
}), this.zoomEngine = new Ee(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = st(this.fullConfig.styling?.default), this.hoverStyles = st(this.fullConfig.styling?.hover), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
2425
2849
|
const e = this.fullConfig.animation.entry || y.animation.entry;
|
|
2426
|
-
this.entryAnimationEngine = new
|
|
2850
|
+
this.entryAnimationEngine = new ce(
|
|
2427
2851
|
e,
|
|
2428
2852
|
this.fullConfig.layout.algorithm
|
|
2429
|
-
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2853
|
+
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2430
2854
|
}
|
|
2431
2855
|
/**
|
|
2432
2856
|
* Create image filter based on shared loader config
|
|
2433
2857
|
*/
|
|
2434
2858
|
createImageFilter() {
|
|
2435
2859
|
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
2436
|
-
return new
|
|
2860
|
+
return new De(t);
|
|
2437
2861
|
}
|
|
2438
2862
|
/**
|
|
2439
2863
|
* Create appropriate image loader based on config
|
|
2440
2864
|
* Processes loaders array, merges shared config, wraps in CompositeLoader if needed
|
|
2441
|
-
* Uses dynamic imports to trigger loader registration and enable tree-shaking
|
|
2442
2865
|
*/
|
|
2443
|
-
|
|
2866
|
+
createLoader() {
|
|
2444
2867
|
const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
|
|
2445
2868
|
if (!t || t.length === 0)
|
|
2446
2869
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2447
|
-
const i =
|
|
2448
|
-
|
|
2449
|
-
);
|
|
2450
|
-
if (i.length === 1)
|
|
2451
|
-
return i[0];
|
|
2452
|
-
await import("./composite-BSJXKGwG.js");
|
|
2453
|
-
const o = et.getLoader("composite");
|
|
2454
|
-
return new o({
|
|
2870
|
+
const i = t.map((o) => this.createLoaderFromEntry(o, e));
|
|
2871
|
+
return i.length === 1 ? i[0] : new Fe({
|
|
2455
2872
|
loaders: i,
|
|
2456
2873
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
2457
2874
|
});
|
|
2458
2875
|
}
|
|
2459
2876
|
/**
|
|
2460
2877
|
* Create a single loader from a LoaderEntry, merging shared config
|
|
2461
|
-
* Uses dynamic imports to trigger loader registration and enable tree-shaking
|
|
2462
2878
|
*/
|
|
2463
|
-
|
|
2879
|
+
createLoaderFromEntry(t, e) {
|
|
2464
2880
|
if ("static" in t) {
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
debugLogging: o.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2881
|
+
const i = t.static, o = {
|
|
2882
|
+
...i,
|
|
2883
|
+
validateUrls: i.validateUrls ?? e.validateUrls,
|
|
2884
|
+
validationTimeout: i.validationTimeout ?? e.validationTimeout,
|
|
2885
|
+
validationMethod: i.validationMethod ?? e.validationMethod,
|
|
2886
|
+
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2887
|
+
debugLogging: i.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2473
2888
|
};
|
|
2474
|
-
return new
|
|
2889
|
+
return new ze(o);
|
|
2475
2890
|
} else if ("googleDrive" in t) {
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
debugLogging: o.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2891
|
+
const i = t.googleDrive, o = {
|
|
2892
|
+
...i,
|
|
2893
|
+
allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
|
|
2894
|
+
debugLogging: i.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2481
2895
|
};
|
|
2482
|
-
return new
|
|
2896
|
+
return new Le(o);
|
|
2483
2897
|
} else
|
|
2484
2898
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2485
2899
|
}
|
|
@@ -2488,18 +2902,18 @@ let $e = class {
|
|
|
2488
2902
|
*/
|
|
2489
2903
|
async init() {
|
|
2490
2904
|
try {
|
|
2491
|
-
if (
|
|
2905
|
+
if ($e(), this.containerRef)
|
|
2492
2906
|
this.containerEl = this.containerRef;
|
|
2493
2907
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2494
2908
|
throw new Error(`Container #${this.containerId} not found`);
|
|
2495
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
2909
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new ft(this.containerEl, {
|
|
2496
2910
|
onNext: () => this.navigateToNextImage(),
|
|
2497
2911
|
onPrev: () => this.navigateToPreviousImage(),
|
|
2498
2912
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
2499
2913
|
onDragEnd: (t) => {
|
|
2500
|
-
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0,
|
|
2914
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Re);
|
|
2501
2915
|
}
|
|
2502
|
-
}), this.setupUI(), this.setupEventListeners(), this.
|
|
2916
|
+
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
2503
2917
|
} catch (t) {
|
|
2504
2918
|
console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
|
|
2505
2919
|
}
|
|
@@ -2621,35 +3035,35 @@ let $e = class {
|
|
|
2621
3035
|
const a = (c) => {
|
|
2622
3036
|
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
2623
3037
|
if (c.offsetWidth, c.style.opacity = this.defaultStyles.opacity ?? "1", c.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || c.dataset.startRotation !== c.dataset.rotation || c.dataset.startScale !== c.dataset.scale)) {
|
|
2624
|
-
const
|
|
3038
|
+
const d = {
|
|
2625
3039
|
x: parseFloat(c.dataset.startX),
|
|
2626
3040
|
y: parseFloat(c.dataset.startY)
|
|
2627
3041
|
}, m = {
|
|
2628
3042
|
x: parseFloat(c.dataset.endX),
|
|
2629
3043
|
y: parseFloat(c.dataset.endY)
|
|
2630
|
-
}, b = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), f = parseFloat(c.dataset.scale),
|
|
2631
|
-
|
|
3044
|
+
}, b = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), f = parseFloat(c.dataset.scale), S = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, v = c.dataset.startScale ? parseFloat(c.dataset.startScale) : f, w = this.entryAnimationEngine.getTiming();
|
|
3045
|
+
se({
|
|
2632
3046
|
element: c,
|
|
2633
|
-
startPosition:
|
|
3047
|
+
startPosition: d,
|
|
2634
3048
|
endPosition: m,
|
|
2635
3049
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
2636
|
-
duration:
|
|
3050
|
+
duration: w.duration,
|
|
2637
3051
|
imageWidth: b,
|
|
2638
3052
|
imageHeight: p,
|
|
2639
3053
|
rotation: g,
|
|
2640
3054
|
scale: f,
|
|
2641
3055
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
2642
|
-
startRotation:
|
|
3056
|
+
startRotation: S,
|
|
2643
3057
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
2644
3058
|
startScale: v
|
|
2645
3059
|
});
|
|
2646
3060
|
} else {
|
|
2647
|
-
const
|
|
2648
|
-
c.style.transform =
|
|
3061
|
+
const d = c.dataset.finalTransform || "";
|
|
3062
|
+
c.style.transform = d;
|
|
2649
3063
|
}
|
|
2650
3064
|
const l = parseInt(c.dataset.imageId || "0");
|
|
2651
3065
|
if (this.fullConfig.config.debug?.enabled && l < 3) {
|
|
2652
|
-
const
|
|
3066
|
+
const d = c.dataset.finalTransform || "";
|
|
2653
3067
|
console.log(`Image ${l} final state:`, {
|
|
2654
3068
|
left: c.style.left,
|
|
2655
3069
|
top: c.style.top,
|
|
@@ -2657,7 +3071,7 @@ let $e = class {
|
|
|
2657
3071
|
height: c.style.height,
|
|
2658
3072
|
computedWidth: c.offsetWidth,
|
|
2659
3073
|
computedHeight: c.offsetHeight,
|
|
2660
|
-
transform:
|
|
3074
|
+
transform: d,
|
|
2661
3075
|
pathType: this.entryAnimationEngine.getPathType()
|
|
2662
3076
|
});
|
|
2663
3077
|
}
|
|
@@ -2683,64 +3097,64 @@ let $e = class {
|
|
|
2683
3097
|
}, this.fullConfig.animation.queue.interval);
|
|
2684
3098
|
};
|
|
2685
3099
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
2686
|
-
const c = new IntersectionObserver((
|
|
2687
|
-
|
|
3100
|
+
const c = new IntersectionObserver((u) => {
|
|
3101
|
+
u.forEach((l) => {
|
|
2688
3102
|
l.isIntersecting && (h(), c.disconnect());
|
|
2689
3103
|
});
|
|
2690
3104
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
2691
3105
|
c.observe(this.containerEl);
|
|
2692
3106
|
} else
|
|
2693
3107
|
h();
|
|
2694
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), s.forEach((c,
|
|
3108
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), s.forEach((c, u) => {
|
|
2695
3109
|
const l = document.createElement("div");
|
|
2696
3110
|
l.className = "fbn-ic-debug-center", l.style.position = "absolute", l.style.width = "12px", l.style.height = "12px", l.style.borderRadius = "50%", l.style.backgroundColor = "red", l.style.border = "2px solid yellow", l.style.zIndex = "9999", l.style.pointerEvents = "none";
|
|
2697
|
-
const
|
|
2698
|
-
l.style.left = `${
|
|
2699
|
-
})), t.forEach((c,
|
|
3111
|
+
const d = c.x, m = c.y;
|
|
3112
|
+
l.style.left = `${d - 6}px`, l.style.top = `${m - 6}px`, l.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(m)})`, this.containerEl.appendChild(l);
|
|
3113
|
+
})), t.forEach((c, u) => {
|
|
2700
3114
|
const l = document.createElement("img");
|
|
2701
|
-
l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(
|
|
2702
|
-
const
|
|
2703
|
-
l.style.position = "absolute", l.style.width = "auto", l.style.height = `${e}px`, l.style.left = `${
|
|
2704
|
-
this.hoveredImage = { element: l, layout:
|
|
3115
|
+
l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(u);
|
|
3116
|
+
const d = s[u];
|
|
3117
|
+
l.style.position = "absolute", l.style.width = "auto", l.style.height = `${e}px`, l.style.left = `${d.x}px`, l.style.top = `${d.y}px`, d.zIndex && (l.style.zIndex = String(d.zIndex)), tt(l, this.defaultStyles), et(l, this.defaultClassName), l.addEventListener("mouseenter", () => {
|
|
3118
|
+
this.hoveredImage = { element: l, layout: d }, this.zoomEngine.isInvolved(l) || (tt(l, this.hoverStyles), et(l, this.hoverClassName));
|
|
2705
3119
|
}), l.addEventListener("mouseleave", () => {
|
|
2706
|
-
this.hoveredImage = null, this.zoomEngine.isInvolved(l) || (
|
|
3120
|
+
this.hoveredImage = null, this.zoomEngine.isInvolved(l) || (tt(l, this.defaultStyles), zt(l, this.hoverClassName), et(l, this.defaultClassName));
|
|
2707
3121
|
}), l.addEventListener("click", (m) => {
|
|
2708
|
-
m.stopPropagation(), this.handleImageClick(l,
|
|
3122
|
+
m.stopPropagation(), this.handleImageClick(l, d);
|
|
2709
3123
|
}), l.style.opacity = "0", l.style.transition = this.entryAnimationEngine.getTransitionCSS(), l.onload = () => {
|
|
2710
3124
|
if (o !== this.loadGeneration)
|
|
2711
3125
|
return;
|
|
2712
3126
|
const m = l.naturalWidth / l.naturalHeight, b = e * m;
|
|
2713
3127
|
l.style.width = `${b}px`;
|
|
2714
|
-
const p = { x:
|
|
3128
|
+
const p = { x: d.x, y: d.y }, g = { width: b, height: e }, f = this.entryAnimationEngine.calculateStartPosition(
|
|
2715
3129
|
p,
|
|
2716
3130
|
g,
|
|
2717
3131
|
i,
|
|
2718
|
-
|
|
3132
|
+
u,
|
|
2719
3133
|
t.length
|
|
2720
|
-
),
|
|
2721
|
-
|
|
2722
|
-
|
|
3134
|
+
), S = this.entryAnimationEngine.calculateStartRotation(d.rotation), v = this.entryAnimationEngine.calculateStartScale(d.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
3135
|
+
d.rotation,
|
|
3136
|
+
d.scale,
|
|
2723
3137
|
b,
|
|
2724
3138
|
e
|
|
2725
|
-
),
|
|
3139
|
+
), E = this.entryAnimationEngine.buildStartTransform(
|
|
2726
3140
|
f,
|
|
2727
3141
|
p,
|
|
2728
|
-
|
|
2729
|
-
|
|
3142
|
+
d.rotation,
|
|
3143
|
+
d.scale,
|
|
2730
3144
|
b,
|
|
2731
3145
|
e,
|
|
2732
|
-
|
|
3146
|
+
S,
|
|
2733
3147
|
v
|
|
2734
3148
|
);
|
|
2735
|
-
this.fullConfig.config.debug?.enabled &&
|
|
3149
|
+
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
2736
3150
|
finalPosition: p,
|
|
2737
3151
|
imageSize: g,
|
|
2738
|
-
left:
|
|
2739
|
-
top:
|
|
2740
|
-
finalTransform:
|
|
3152
|
+
left: d.x,
|
|
3153
|
+
top: d.y,
|
|
3154
|
+
finalTransform: w,
|
|
2741
3155
|
renderedWidth: b,
|
|
2742
3156
|
renderedHeight: e
|
|
2743
|
-
}), l.style.transform =
|
|
3157
|
+
}), l.style.transform = E, l.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || S !== d.rotation || v !== d.scale) && (l.dataset.startX = String(f.x), l.dataset.startY = String(f.y), l.dataset.endX = String(p.x), l.dataset.endY = String(p.y), l.dataset.imageWidth = String(b), l.dataset.imageHeight = String(e), l.dataset.rotation = String(d.rotation), l.dataset.scale = String(d.scale), l.dataset.startRotation = String(S), l.dataset.startScale = String(v)), this.displayQueue.push(l);
|
|
2744
3158
|
}, l.onerror = () => r++, l.src = c;
|
|
2745
3159
|
});
|
|
2746
3160
|
}
|
|
@@ -2785,7 +3199,7 @@ let $e = class {
|
|
|
2785
3199
|
this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy();
|
|
2786
3200
|
}
|
|
2787
3201
|
};
|
|
2788
|
-
const
|
|
3202
|
+
const He = Ot({
|
|
2789
3203
|
name: "ImageCloud",
|
|
2790
3204
|
props: {
|
|
2791
3205
|
options: {
|
|
@@ -2794,11 +3208,11 @@ const Ne = Pt({
|
|
|
2794
3208
|
}
|
|
2795
3209
|
},
|
|
2796
3210
|
setup(n, { expose: t }) {
|
|
2797
|
-
const e =
|
|
3211
|
+
const e = wt(null), i = wt(null);
|
|
2798
3212
|
function o() {
|
|
2799
3213
|
if (!e.value) return;
|
|
2800
3214
|
i.value?.destroy();
|
|
2801
|
-
const s = new
|
|
3215
|
+
const s = new Ue({
|
|
2802
3216
|
container: e.value,
|
|
2803
3217
|
...n.options
|
|
2804
3218
|
});
|
|
@@ -2806,22 +3220,22 @@ const Ne = Pt({
|
|
|
2806
3220
|
console.error("ImageCloud init failed:", r);
|
|
2807
3221
|
});
|
|
2808
3222
|
}
|
|
2809
|
-
return
|
|
3223
|
+
return $t(() => {
|
|
2810
3224
|
o();
|
|
2811
|
-
}),
|
|
3225
|
+
}), Ut(() => {
|
|
2812
3226
|
i.value?.destroy(), i.value = null;
|
|
2813
|
-
}),
|
|
3227
|
+
}), Pt(
|
|
2814
3228
|
() => n.options,
|
|
2815
3229
|
() => {
|
|
2816
3230
|
o();
|
|
2817
3231
|
},
|
|
2818
3232
|
{ deep: !0 }
|
|
2819
|
-
), t({ instance: i }), () =>
|
|
3233
|
+
), t({ instance: i }), () => _t("div", {
|
|
2820
3234
|
ref: e
|
|
2821
3235
|
});
|
|
2822
3236
|
}
|
|
2823
3237
|
});
|
|
2824
3238
|
export {
|
|
2825
|
-
|
|
3239
|
+
He as ImageCloud
|
|
2826
3240
|
};
|
|
2827
3241
|
//# sourceMappingURL=vue.js.map
|