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