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