@frybynite/image-cloud 0.5.0 → 0.6.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 +46 -13
- package/dist/composite-CtUxtN2l.js +96 -0
- package/dist/composite-CtUxtN2l.js.map +1 -0
- package/dist/google-drive-CC-qFSV1.js +260 -0
- package/dist/google-drive-CC-qFSV1.js.map +1 -0
- package/dist/image-cloud-auto-init.js +399 -842
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +1356 -1341
- 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 +17 -0
- package/dist/loaders/all.d.ts +1654 -0
- package/dist/loaders/all.js +496 -0
- package/dist/loaders/all.js.map +1 -0
- package/dist/loaders/composite.d.ts +1654 -0
- package/dist/loaders/composite.js +96 -0
- package/dist/loaders/composite.js.map +1 -0
- package/dist/loaders/google-drive.d.ts +1654 -0
- package/dist/loaders/google-drive.js +260 -0
- package/dist/loaders/google-drive.js.map +1 -0
- package/dist/loaders/static.d.ts +1654 -0
- package/dist/loaders/static.js +219 -0
- package/dist/loaders/static.js.map +1 -0
- package/dist/react.d.ts +17 -0
- package/dist/react.js +575 -1018
- package/dist/react.js.map +1 -1
- package/dist/static-ejylHtQ4.js +219 -0
- package/dist/static-ejylHtQ4.js.map +1 -0
- package/dist/vue.d.ts +17 -0
- package/dist/vue.js +507 -950
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +17 -0
- package/dist/web-component.js +513 -956
- package/dist/web-component.js.map +1 -1
- package/package.json +24 -5
package/dist/image-cloud.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
const
|
|
1
|
+
const pt = 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
|
+
}), St = 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
|
+
}), Et = 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
|
+
}), yt = Object.freeze({
|
|
22
22
|
type: "linear"
|
|
23
|
-
}),
|
|
23
|
+
}), vt = Object.freeze({
|
|
24
24
|
mode: "none"
|
|
25
|
-
}),
|
|
25
|
+
}), wt = 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 ft = 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
|
+
}), Ut = Object.freeze({
|
|
60
60
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
61
61
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
62
|
-
}),
|
|
62
|
+
}), Pt = Object.freeze({
|
|
63
63
|
mode: "adaptive",
|
|
64
64
|
// Default to adaptive sizing
|
|
65
65
|
minSize: 50,
|
|
@@ -71,21 +71,21 @@ const ft = Object.freeze({
|
|
|
71
71
|
// No variance by default
|
|
72
72
|
max: 1
|
|
73
73
|
})
|
|
74
|
-
}),
|
|
74
|
+
}), _t = Object.freeze({
|
|
75
75
|
mode: "none",
|
|
76
76
|
range: Object.freeze({
|
|
77
77
|
min: -15,
|
|
78
78
|
max: 15
|
|
79
79
|
})
|
|
80
80
|
}), Rt = Object.freeze({
|
|
81
|
-
sizing:
|
|
82
|
-
rotation:
|
|
83
|
-
}),
|
|
81
|
+
sizing: Pt,
|
|
82
|
+
rotation: _t
|
|
83
|
+
}), Lt = 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
|
+
}), Mt = Object.freeze({
|
|
89
89
|
enabled: !1,
|
|
90
90
|
centers: !1,
|
|
91
91
|
loaders: !1
|
|
@@ -94,8 +94,8 @@ const ft = Object.freeze({
|
|
|
94
94
|
loaders: [],
|
|
95
95
|
// Shared loader settings and debug config
|
|
96
96
|
config: Object.freeze({
|
|
97
|
-
loaders:
|
|
98
|
-
debug:
|
|
97
|
+
loaders: Lt,
|
|
98
|
+
debug: Mt
|
|
99
99
|
}),
|
|
100
100
|
// Image sizing and rotation configuration
|
|
101
101
|
image: Rt,
|
|
@@ -104,7 +104,7 @@ const ft = 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: Ut,
|
|
108
108
|
targetCoverage: 0.6,
|
|
109
109
|
// Target 60% of container area
|
|
110
110
|
densityFactor: 1,
|
|
@@ -160,9 +160,9 @@ const ft = 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: yt,
|
|
164
|
+
rotation: vt,
|
|
165
|
+
scale: wt
|
|
166
166
|
})
|
|
167
167
|
}),
|
|
168
168
|
// Pattern-based interaction configuration
|
|
@@ -219,50 +219,50 @@ const ft = Object.freeze({
|
|
|
219
219
|
})
|
|
220
220
|
}),
|
|
221
221
|
// Image styling
|
|
222
|
-
styling:
|
|
222
|
+
styling: Ct
|
|
223
223
|
});
|
|
224
|
-
function
|
|
225
|
-
if (!
|
|
226
|
-
if (!t) return { ...
|
|
227
|
-
const e = { ...
|
|
228
|
-
return t.border !== void 0 && (e.border = { ...
|
|
224
|
+
function Q(o, t) {
|
|
225
|
+
if (!o) return t || {};
|
|
226
|
+
if (!t) return { ...o };
|
|
227
|
+
const e = { ...o };
|
|
228
|
+
return t.border !== void 0 && (e.border = { ...o.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...o.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...o.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...o.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...o.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...o.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...o.outline, ...t.outline }), t.shadow !== void 0 && (e.shadow = t.shadow), t.opacity !== void 0 && (e.opacity = t.opacity), t.cursor !== void 0 && (e.cursor = t.cursor), t.className !== void 0 && (e.className = t.className), t.objectFit !== void 0 && (e.objectFit = t.objectFit), t.aspectRatio !== void 0 && (e.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (e.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (e.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (e.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (e.borderRadiusBottomLeft = t.borderRadiusBottomLeft), e;
|
|
229
229
|
}
|
|
230
|
-
function
|
|
231
|
-
if (!t) return { ...
|
|
232
|
-
const e =
|
|
233
|
-
|
|
230
|
+
function Ht(o, t) {
|
|
231
|
+
if (!t) return { ...o };
|
|
232
|
+
const e = Q(o.default, t.default), i = Q(
|
|
233
|
+
Q(e, o.hover),
|
|
234
234
|
t.hover
|
|
235
|
-
),
|
|
236
|
-
|
|
235
|
+
), n = Q(
|
|
236
|
+
Q(e, o.focused),
|
|
237
237
|
t.focused
|
|
238
238
|
);
|
|
239
239
|
return {
|
|
240
240
|
default: e,
|
|
241
241
|
hover: i,
|
|
242
|
-
focused:
|
|
242
|
+
focused: n
|
|
243
243
|
};
|
|
244
244
|
}
|
|
245
|
-
function
|
|
246
|
-
if (!t) return { ...
|
|
247
|
-
const e = { ...
|
|
245
|
+
function Nt(o, t) {
|
|
246
|
+
if (!t) return { ...o };
|
|
247
|
+
const e = { ...o };
|
|
248
248
|
if (t.sizing !== void 0 && (e.sizing = {
|
|
249
|
-
...
|
|
249
|
+
...o.sizing,
|
|
250
250
|
...t.sizing
|
|
251
251
|
}, t.sizing.variance)) {
|
|
252
|
-
const i = t.sizing.variance,
|
|
253
|
-
e.sizing.variance = { min:
|
|
252
|
+
const i = t.sizing.variance, n = i.min !== void 0 && i.min >= 0.25 && i.min <= 1 ? i.min : o.sizing?.variance?.min ?? 1, s = i.max !== void 0 && i.max >= 1 && i.max <= 1.75 ? i.max : o.sizing?.variance?.max ?? 1;
|
|
253
|
+
e.sizing.variance = { min: n, max: s };
|
|
254
254
|
}
|
|
255
255
|
if (t.rotation !== void 0 && (e.rotation = {
|
|
256
|
-
...
|
|
256
|
+
...o.rotation,
|
|
257
257
|
...t.rotation
|
|
258
258
|
}, t.rotation.range)) {
|
|
259
|
-
const i = t.rotation.range,
|
|
260
|
-
e.rotation.range = { min:
|
|
259
|
+
const i = t.rotation.range, n = i.min !== void 0 && i.min >= -180 && i.min <= 0 ? i.min : o.rotation?.range?.min ?? -15, s = i.max !== void 0 && i.max >= 0 && i.max <= 180 ? i.max : o.rotation?.range?.max ?? 15;
|
|
260
|
+
e.rotation.range = { min: n, max: s };
|
|
261
261
|
}
|
|
262
262
|
return e;
|
|
263
263
|
}
|
|
264
|
-
function
|
|
265
|
-
const t =
|
|
264
|
+
function jt(o) {
|
|
265
|
+
const t = o.layout?.rotation;
|
|
266
266
|
if (t && "enabled" in t)
|
|
267
267
|
return {
|
|
268
268
|
rotation: {
|
|
@@ -271,8 +271,8 @@ function Ht(n) {
|
|
|
271
271
|
}
|
|
272
272
|
};
|
|
273
273
|
}
|
|
274
|
-
function
|
|
275
|
-
const t =
|
|
274
|
+
function kt(o) {
|
|
275
|
+
const t = o.layout?.sizing?.variance;
|
|
276
276
|
if (t)
|
|
277
277
|
return {
|
|
278
278
|
sizing: {
|
|
@@ -282,113 +282,113 @@ function Nt(n) {
|
|
|
282
282
|
}
|
|
283
283
|
};
|
|
284
284
|
}
|
|
285
|
-
function
|
|
286
|
-
const t =
|
|
287
|
-
let i =
|
|
285
|
+
function Gt(o = {}) {
|
|
286
|
+
const t = jt(o), e = kt(o);
|
|
287
|
+
let i = o.image;
|
|
288
288
|
(t || e) && (i = {
|
|
289
289
|
...e || {},
|
|
290
290
|
...t || {},
|
|
291
291
|
...i
|
|
292
|
-
}, i.rotation && t?.rotation &&
|
|
292
|
+
}, i.rotation && t?.rotation && o.image?.rotation && (i.rotation = {
|
|
293
293
|
...t.rotation,
|
|
294
|
-
...
|
|
294
|
+
...o.image.rotation
|
|
295
295
|
}));
|
|
296
|
-
const
|
|
297
|
-
|
|
296
|
+
const n = [...o.loaders ?? []];
|
|
297
|
+
o.images && o.images.length > 0 && n.unshift({
|
|
298
298
|
static: {
|
|
299
|
-
sources: [{ urls:
|
|
299
|
+
sources: [{ urls: o.images }]
|
|
300
300
|
}
|
|
301
301
|
});
|
|
302
302
|
const r = {
|
|
303
303
|
loaders: {
|
|
304
|
-
...
|
|
305
|
-
...
|
|
304
|
+
...Lt,
|
|
305
|
+
...o.config?.loaders ?? {}
|
|
306
306
|
}
|
|
307
307
|
}, a = {
|
|
308
|
-
loaders:
|
|
308
|
+
loaders: n,
|
|
309
309
|
config: r,
|
|
310
|
-
image:
|
|
310
|
+
image: Nt(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: Ht(Ct, o.styling)
|
|
316
316
|
};
|
|
317
|
-
return
|
|
317
|
+
return o.layout && (a.layout = {
|
|
318
318
|
...y.layout,
|
|
319
|
-
...
|
|
320
|
-
},
|
|
319
|
+
...o.layout
|
|
320
|
+
}, o.layout.responsive && (a.layout.responsive = {
|
|
321
321
|
...y.layout.responsive,
|
|
322
|
-
mobile:
|
|
323
|
-
tablet:
|
|
324
|
-
}),
|
|
322
|
+
mobile: o.layout.responsive.mobile ? { ...y.layout.responsive.mobile, ...o.layout.responsive.mobile } : y.layout.responsive.mobile,
|
|
323
|
+
tablet: o.layout.responsive.tablet ? { ...y.layout.responsive.tablet, ...o.layout.responsive.tablet } : y.layout.responsive.tablet
|
|
324
|
+
}), o.layout.spacing && (a.layout.spacing = {
|
|
325
325
|
...y.layout.spacing,
|
|
326
|
-
...
|
|
327
|
-
})),
|
|
326
|
+
...o.layout.spacing
|
|
327
|
+
})), o.animation && (a.animation = {
|
|
328
328
|
...y.animation,
|
|
329
|
-
...
|
|
330
|
-
},
|
|
329
|
+
...o.animation
|
|
330
|
+
}, o.animation.easing && (a.animation.easing = {
|
|
331
331
|
...y.animation.easing,
|
|
332
|
-
...
|
|
333
|
-
}),
|
|
332
|
+
...o.animation.easing
|
|
333
|
+
}), o.animation.queue && (a.animation.queue = {
|
|
334
334
|
...y.animation.queue,
|
|
335
|
-
...
|
|
336
|
-
}),
|
|
335
|
+
...o.animation.queue
|
|
336
|
+
}), o.animation.performance && (a.animation.performance = {
|
|
337
337
|
...y.animation.performance,
|
|
338
|
-
...
|
|
339
|
-
}),
|
|
338
|
+
...o.animation.performance
|
|
339
|
+
}), o.animation.entry && (a.animation.entry = {
|
|
340
340
|
...y.animation.entry,
|
|
341
|
-
...
|
|
342
|
-
start:
|
|
341
|
+
...o.animation.entry,
|
|
342
|
+
start: o.animation.entry.start ? {
|
|
343
343
|
...y.animation.entry.start,
|
|
344
|
-
...
|
|
345
|
-
circular:
|
|
344
|
+
...o.animation.entry.start,
|
|
345
|
+
circular: o.animation.entry.start.circular ? { ...y.animation.entry.start.circular, ...o.animation.entry.start.circular } : y.animation.entry.start.circular
|
|
346
346
|
} : y.animation.entry.start,
|
|
347
|
-
timing:
|
|
348
|
-
path:
|
|
349
|
-
rotation:
|
|
350
|
-
scale:
|
|
351
|
-
})),
|
|
347
|
+
timing: o.animation.entry.timing ? { ...y.animation.entry.timing, ...o.animation.entry.timing } : y.animation.entry.timing,
|
|
348
|
+
path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : y.animation.entry.path,
|
|
349
|
+
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : y.animation.entry.rotation,
|
|
350
|
+
scale: o.animation.entry.scale ? { ...wt, ...o.animation.entry.scale } : y.animation.entry.scale
|
|
351
|
+
})), o.interaction && (a.interaction = {
|
|
352
352
|
...y.interaction,
|
|
353
|
-
...
|
|
354
|
-
},
|
|
353
|
+
...o.interaction
|
|
354
|
+
}, o.interaction.focus && (a.interaction.focus = {
|
|
355
355
|
...y.interaction.focus,
|
|
356
|
-
...
|
|
357
|
-
}),
|
|
356
|
+
...o.interaction.focus
|
|
357
|
+
}), o.interaction.navigation && (a.interaction.navigation = {
|
|
358
358
|
...y.interaction.navigation,
|
|
359
|
-
...
|
|
360
|
-
}),
|
|
359
|
+
...o.interaction.navigation
|
|
360
|
+
}), o.interaction.gestures && (a.interaction.gestures = {
|
|
361
361
|
...y.interaction.gestures,
|
|
362
|
-
...
|
|
363
|
-
})),
|
|
362
|
+
...o.interaction.gestures
|
|
363
|
+
})), o.rendering && (a.rendering = {
|
|
364
364
|
...y.rendering,
|
|
365
|
-
...
|
|
366
|
-
},
|
|
365
|
+
...o.rendering
|
|
366
|
+
}, o.rendering.responsive && (a.rendering.responsive = {
|
|
367
367
|
...y.rendering.responsive,
|
|
368
|
-
...
|
|
369
|
-
breakpoints:
|
|
370
|
-
mobileDetection:
|
|
371
|
-
}),
|
|
368
|
+
...o.rendering.responsive,
|
|
369
|
+
breakpoints: o.rendering.responsive.breakpoints ? { ...y.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : y.rendering.responsive.breakpoints,
|
|
370
|
+
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : y.rendering.responsive.mobileDetection
|
|
371
|
+
}), o.rendering.ui && (a.rendering.ui = {
|
|
372
372
|
...y.rendering.ui,
|
|
373
|
-
...
|
|
374
|
-
}),
|
|
373
|
+
...o.rendering.ui
|
|
374
|
+
}), o.rendering.performance && (a.rendering.performance = {
|
|
375
375
|
...y.rendering.performance,
|
|
376
|
-
...
|
|
376
|
+
...o.rendering.performance
|
|
377
377
|
})), a.config.debug = {
|
|
378
|
-
...
|
|
379
|
-
...
|
|
378
|
+
...Mt,
|
|
379
|
+
...o.config?.debug ?? {}
|
|
380
380
|
}, a;
|
|
381
381
|
}
|
|
382
|
-
function
|
|
383
|
-
return { ...
|
|
382
|
+
function Wt(o, t) {
|
|
383
|
+
return { ...o ? St[o] : St.playful, ...t };
|
|
384
384
|
}
|
|
385
|
-
function
|
|
386
|
-
return { ...
|
|
385
|
+
function qt(o, t) {
|
|
386
|
+
return { ...o ? Et[o] : Et.gentle, ...t };
|
|
387
387
|
}
|
|
388
|
-
function
|
|
389
|
-
return { ...
|
|
388
|
+
function Yt(o, t) {
|
|
389
|
+
return { ...o ? It[o] : 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
|
}
|
|
@@ -399,8 +399,8 @@ class qt {
|
|
|
399
399
|
buildTransformString(t) {
|
|
400
400
|
const e = ["translate(-50%, -50%)"];
|
|
401
401
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
402
|
-
const i = t.x ?? 0,
|
|
403
|
-
e.push(`translate(${i}px, ${
|
|
402
|
+
const i = t.x ?? 0, n = t.y ?? 0;
|
|
403
|
+
e.push(`translate(${i}px, ${n}px)`);
|
|
404
404
|
}
|
|
405
405
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && e.push(`scale(${t.scale})`), e.join(" ");
|
|
406
406
|
}
|
|
@@ -413,9 +413,9 @@ class qt {
|
|
|
413
413
|
* @param easing - CSS easing function (optional)
|
|
414
414
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
415
415
|
*/
|
|
416
|
-
animateTransformCancellable(t, e, i,
|
|
416
|
+
animateTransformCancellable(t, e, i, n = null, s = null) {
|
|
417
417
|
this.cancelAllAnimations(t);
|
|
418
|
-
const r =
|
|
418
|
+
const r = n ?? this.config.duration, a = s ?? this.config.easing.default, h = this.buildTransformString(e), c = this.buildTransformString(i);
|
|
419
419
|
t.style.transition = "none";
|
|
420
420
|
const u = t.animate(
|
|
421
421
|
[
|
|
@@ -452,13 +452,13 @@ class qt {
|
|
|
452
452
|
cancelAnimation(t, e = !0) {
|
|
453
453
|
const i = this.getCurrentTransform(t.element);
|
|
454
454
|
if (t.animation.cancel(), e) {
|
|
455
|
-
const
|
|
455
|
+
const n = this.buildTransformString({
|
|
456
456
|
x: i.x,
|
|
457
457
|
y: i.y,
|
|
458
458
|
rotation: i.rotation,
|
|
459
459
|
scale: i.scale
|
|
460
460
|
});
|
|
461
|
-
t.element.style.transform =
|
|
461
|
+
t.element.style.transform = n;
|
|
462
462
|
}
|
|
463
463
|
return this.activeAnimations.delete(t.element), i;
|
|
464
464
|
}
|
|
@@ -471,8 +471,8 @@ class qt {
|
|
|
471
471
|
const e = this.activeAnimations.get(t);
|
|
472
472
|
e && this.cancelAnimation(e, !1);
|
|
473
473
|
const i = t.getAnimations();
|
|
474
|
-
for (const
|
|
475
|
-
|
|
474
|
+
for (const n of i)
|
|
475
|
+
n.cancel();
|
|
476
476
|
}
|
|
477
477
|
/**
|
|
478
478
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -484,7 +484,7 @@ class qt {
|
|
|
484
484
|
const i = getComputedStyle(t).transform;
|
|
485
485
|
if (i === "none" || !i)
|
|
486
486
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
487
|
-
const
|
|
487
|
+
const n = new DOMMatrix(i), s = Math.sqrt(n.a * n.a + n.b * n.b), r = Math.atan2(n.b, n.a) * (180 / Math.PI), a = n.e, h = n.f;
|
|
488
488
|
return { x: a, y: h, rotation: r, scale: s };
|
|
489
489
|
}
|
|
490
490
|
/**
|
|
@@ -511,9 +511,9 @@ class qt {
|
|
|
511
511
|
* @param easing - CSS easing function (optional)
|
|
512
512
|
* @returns Promise that resolves when animation completes
|
|
513
513
|
*/
|
|
514
|
-
animateTransform(t, e, i = null,
|
|
514
|
+
animateTransform(t, e, i = null, n = null) {
|
|
515
515
|
return new Promise((s) => {
|
|
516
|
-
const r = i ?? this.config.duration, a =
|
|
516
|
+
const r = i ?? this.config.duration, a = n ?? this.config.easing.default;
|
|
517
517
|
t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
|
|
518
518
|
s();
|
|
519
519
|
}, r);
|
|
@@ -544,99 +544,99 @@ class qt {
|
|
|
544
544
|
return new Promise((e) => setTimeout(e, t));
|
|
545
545
|
}
|
|
546
546
|
}
|
|
547
|
-
function V(
|
|
548
|
-
return
|
|
547
|
+
function V(o, t, e) {
|
|
548
|
+
return o + (t - o) * e;
|
|
549
549
|
}
|
|
550
|
-
function
|
|
551
|
-
const { overshoot:
|
|
552
|
-
let u = 0, l = 0, d = 1,
|
|
550
|
+
function Bt(o, t, e, i) {
|
|
551
|
+
const { overshoot: n, 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 = n, b = !1;
|
|
553
553
|
for (let g = 0; g < c.length; g++)
|
|
554
|
-
if (
|
|
555
|
-
l = g === 0 ? 0 : c[g - 1].time, d = c[g].time,
|
|
554
|
+
if (o <= c[g].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 = (
|
|
558
|
+
const p = (o - l) / (d - l);
|
|
559
559
|
if (b)
|
|
560
|
-
u = 1 +
|
|
560
|
+
u = 1 + m * at(p);
|
|
561
561
|
else if (l === 0)
|
|
562
|
-
u =
|
|
562
|
+
u = at(p);
|
|
563
563
|
else {
|
|
564
|
-
const
|
|
565
|
-
(
|
|
566
|
-
)?.overshoot ||
|
|
567
|
-
u = V(
|
|
564
|
+
const f = 1 + (c.find(
|
|
565
|
+
(S, v) => S.time > l && v > 0 && c[v - 1].isOvershoot
|
|
566
|
+
)?.overshoot || m);
|
|
567
|
+
u = V(f, 1, at(p));
|
|
568
568
|
}
|
|
569
569
|
return {
|
|
570
570
|
x: t.x + a * u,
|
|
571
571
|
y: t.y + h * u
|
|
572
572
|
};
|
|
573
573
|
}
|
|
574
|
-
function
|
|
574
|
+
function Jt(o, t) {
|
|
575
575
|
const e = [];
|
|
576
576
|
let i = 0.6;
|
|
577
577
|
e.push({ time: i, overshoot: 0, isOvershoot: !1 });
|
|
578
|
-
let
|
|
579
|
-
const r = 0.4 / (
|
|
580
|
-
for (let a = 0; a <
|
|
581
|
-
i += r, e.push({ time: i, overshoot:
|
|
578
|
+
let n = 0.15;
|
|
579
|
+
const r = 0.4 / (o * 2);
|
|
580
|
+
for (let a = 0; a < o; a++)
|
|
581
|
+
i += r, e.push({ time: i, overshoot: n, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: n * t, isOvershoot: !1 }), n *= t;
|
|
582
582
|
return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
|
|
583
583
|
}
|
|
584
|
-
function
|
|
585
|
-
const { stiffness:
|
|
584
|
+
function Vt(o, t, e, i) {
|
|
585
|
+
const { stiffness: n, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, c = e.y - t.y, u = Math.sqrt(n / r), l = s / (2 * Math.sqrt(n * r));
|
|
586
586
|
let d;
|
|
587
587
|
if (l < 1) {
|
|
588
|
-
const
|
|
588
|
+
const m = u * Math.sqrt(1 - l * l), b = Math.exp(-l * u * o * 3), p = Math.cos(m * o * a * Math.PI);
|
|
589
589
|
d = 1 - b * p;
|
|
590
590
|
} else
|
|
591
|
-
d = 1 - Math.exp(-u *
|
|
591
|
+
d = 1 - Math.exp(-u * o * 3);
|
|
592
592
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
593
593
|
x: t.x + h * d,
|
|
594
594
|
y: t.y + c * d
|
|
595
595
|
};
|
|
596
596
|
}
|
|
597
|
-
function
|
|
598
|
-
const { amplitude:
|
|
597
|
+
function Kt(o, t, e, i) {
|
|
598
|
+
const { amplitude: n, 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 * o + h, p = r ? Math.pow(1 - o, a) : 1, g = n * Math.sin(b) * p, f = Zt(o);
|
|
599
599
|
return {
|
|
600
|
-
x: V(t.x, e.x,
|
|
601
|
-
y: V(t.y, e.y,
|
|
600
|
+
x: V(t.x, e.x, f) + g * d,
|
|
601
|
+
y: V(t.y, e.y, f) + g * m
|
|
602
602
|
};
|
|
603
603
|
}
|
|
604
|
-
function
|
|
605
|
-
return 1 - (1 -
|
|
604
|
+
function at(o) {
|
|
605
|
+
return 1 - (1 - o) * (1 - o);
|
|
606
606
|
}
|
|
607
|
-
function
|
|
608
|
-
return 1 - Math.pow(1 -
|
|
607
|
+
function Zt(o) {
|
|
608
|
+
return 1 - Math.pow(1 - o, 3);
|
|
609
609
|
}
|
|
610
|
-
function
|
|
611
|
-
const { amplitude: i, frequency:
|
|
610
|
+
function Qt(o, t, e) {
|
|
611
|
+
const { amplitude: i, frequency: n, decay: s } = e, r = Math.sin(o * n * Math.PI * 2), a = s ? Math.pow(1 - o, 2) : 1, h = i * r * a;
|
|
612
612
|
return t + h;
|
|
613
613
|
}
|
|
614
|
-
function
|
|
615
|
-
const { overshoot: i, bounces:
|
|
614
|
+
function te(o, t, e) {
|
|
615
|
+
const { overshoot: i, bounces: n } = e, s = [];
|
|
616
616
|
s.push({ time: 0.5, scale: i });
|
|
617
617
|
let r = i;
|
|
618
|
-
const a = 0.5, c = 0.5 / (
|
|
618
|
+
const a = 0.5, c = 0.5 / (n * 2);
|
|
619
619
|
let u = 0.5;
|
|
620
|
-
for (let d = 0; d <
|
|
621
|
-
const
|
|
622
|
-
u += c, s.push({ time: u, scale:
|
|
620
|
+
for (let d = 0; d < n; d++) {
|
|
621
|
+
const m = 1 - (r - 1) * a;
|
|
622
|
+
u += c, s.push({ time: u, scale: m }), r = 1 + (r - 1) * a * a, u += c, d < n - 1 && s.push({ time: u, scale: r });
|
|
623
623
|
}
|
|
624
624
|
s.push({ time: 1, scale: 1 });
|
|
625
625
|
let l = 1;
|
|
626
626
|
for (let d = 0; d < s.length; d++)
|
|
627
|
-
if (
|
|
628
|
-
const
|
|
627
|
+
if (o <= s[d].time) {
|
|
628
|
+
const m = d === 0 ? 0 : s[d - 1].time, b = d === 0 ? 1 : s[d - 1].scale, p = (o - m) / (s[d].time - m), g = at(p);
|
|
629
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(o) {
|
|
635
635
|
const {
|
|
636
636
|
element: t,
|
|
637
637
|
startPosition: e,
|
|
638
638
|
endPosition: i,
|
|
639
|
-
pathConfig:
|
|
639
|
+
pathConfig: n,
|
|
640
640
|
duration: s,
|
|
641
641
|
imageWidth: r,
|
|
642
642
|
imageHeight: a,
|
|
@@ -645,60 +645,60 @@ function Qt(n) {
|
|
|
645
645
|
onComplete: u,
|
|
646
646
|
rotationConfig: l,
|
|
647
647
|
startRotation: d,
|
|
648
|
-
scaleConfig:
|
|
648
|
+
scaleConfig: m,
|
|
649
649
|
startScale: b
|
|
650
|
-
} =
|
|
651
|
-
if ((p === "linear" || p === "arc") && !v && !(w ||
|
|
650
|
+
} = o, p = n.type, g = d !== void 0 && d !== h, f = l?.mode === "wobble", S = l?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, v = g || f, w = b !== void 0 && b !== c, E = m?.mode === "pop", x = m?.pop || { overshoot: 1.2, bounces: 1 };
|
|
651
|
+
if ((p === "linear" || p === "arc") && !v && !(w || E)) {
|
|
652
652
|
u && u();
|
|
653
653
|
return;
|
|
654
654
|
}
|
|
655
655
|
const M = performance.now(), z = -r / 2, P = -a / 2;
|
|
656
656
|
function _(Y) {
|
|
657
|
-
const N = Y - M,
|
|
657
|
+
const N = Y - M, T = Math.min(N / s, 1);
|
|
658
658
|
let D;
|
|
659
659
|
switch (p) {
|
|
660
660
|
case "bounce": {
|
|
661
|
-
const O =
|
|
662
|
-
|
|
663
|
-
|
|
661
|
+
const O = Wt(
|
|
662
|
+
n.bouncePreset,
|
|
663
|
+
n.bounce
|
|
664
664
|
);
|
|
665
|
-
D =
|
|
665
|
+
D = Bt(T, e, i, O);
|
|
666
666
|
break;
|
|
667
667
|
}
|
|
668
668
|
case "elastic": {
|
|
669
|
-
const O =
|
|
670
|
-
|
|
671
|
-
|
|
669
|
+
const O = qt(
|
|
670
|
+
n.elasticPreset,
|
|
671
|
+
n.elastic
|
|
672
672
|
);
|
|
673
|
-
D =
|
|
673
|
+
D = Vt(T, e, i, O);
|
|
674
674
|
break;
|
|
675
675
|
}
|
|
676
676
|
case "wave": {
|
|
677
|
-
const O =
|
|
678
|
-
|
|
679
|
-
|
|
677
|
+
const O = Yt(
|
|
678
|
+
n.wavePreset,
|
|
679
|
+
n.wave
|
|
680
680
|
);
|
|
681
|
-
D =
|
|
681
|
+
D = Kt(T, e, i, O);
|
|
682
682
|
break;
|
|
683
683
|
}
|
|
684
684
|
default:
|
|
685
685
|
D = {
|
|
686
|
-
x: V(e.x, i.x,
|
|
687
|
-
y: V(e.y, i.y,
|
|
686
|
+
x: V(e.x, i.x, T),
|
|
687
|
+
y: V(e.y, i.y, T)
|
|
688
688
|
};
|
|
689
689
|
}
|
|
690
690
|
const k = D.x - i.x, H = D.y - i.y;
|
|
691
|
-
let
|
|
692
|
-
|
|
691
|
+
let R;
|
|
692
|
+
f ? R = Qt(T, h, S) : g ? R = V(d, h, T) : R = h;
|
|
693
693
|
let C;
|
|
694
|
-
|
|
694
|
+
E ? C = te(T, c, x) : w ? C = V(b, c, T) : C = c, t.style.transform = `translate(${z}px, ${P}px) translate(${k}px, ${H}px) rotate(${R}deg) scale(${C})`, T < 1 ? requestAnimationFrame(_) : (t.style.transform = `translate(${z}px, ${P}px) rotate(${h}deg) scale(${c})`, u && u());
|
|
695
695
|
}
|
|
696
696
|
requestAnimationFrame(_);
|
|
697
697
|
}
|
|
698
|
-
function
|
|
699
|
-
return
|
|
698
|
+
function ie(o) {
|
|
699
|
+
return o === "bounce" || o === "elastic" || o === "wave";
|
|
700
700
|
}
|
|
701
|
-
const
|
|
701
|
+
const ne = {
|
|
702
702
|
radial: "center",
|
|
703
703
|
spiral: "center",
|
|
704
704
|
grid: "top",
|
|
@@ -706,20 +706,20 @@ const ee = {
|
|
|
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 || yt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || wt;
|
|
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
|
|
721
721
|
*/
|
|
722
|
-
calculateStartPosition(t, e, i,
|
|
722
|
+
calculateStartPosition(t, e, i, n, s) {
|
|
723
723
|
const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
|
|
724
724
|
switch (r) {
|
|
725
725
|
case "nearest-edge":
|
|
@@ -741,7 +741,7 @@ class ie {
|
|
|
741
741
|
t,
|
|
742
742
|
e,
|
|
743
743
|
i,
|
|
744
|
-
|
|
744
|
+
n,
|
|
745
745
|
s
|
|
746
746
|
);
|
|
747
747
|
default:
|
|
@@ -751,28 +751,28 @@ class ie {
|
|
|
751
751
|
/**
|
|
752
752
|
* Calculate start position from the nearest edge (current default behavior)
|
|
753
753
|
*/
|
|
754
|
-
calculateNearestEdge(t, e, i,
|
|
754
|
+
calculateNearestEdge(t, e, i, n) {
|
|
755
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,
|
|
757
|
-
return l === a ? d = -(e.width +
|
|
756
|
+
let d = t.x, m = t.y;
|
|
757
|
+
return l === a ? d = -(e.width + n) : l === h ? d = i.width + n : l === c ? m = -(e.height + n) : m = i.height + n, { x: d, y: m };
|
|
758
758
|
}
|
|
759
759
|
/**
|
|
760
760
|
* Calculate start position from a specific edge
|
|
761
761
|
*/
|
|
762
|
-
calculateEdgePosition(t, e, i,
|
|
762
|
+
calculateEdgePosition(t, e, i, n, s) {
|
|
763
763
|
let r = e.x, a = e.y;
|
|
764
764
|
switch (t) {
|
|
765
765
|
case "top":
|
|
766
766
|
a = -(i.height + s);
|
|
767
767
|
break;
|
|
768
768
|
case "bottom":
|
|
769
|
-
a =
|
|
769
|
+
a = n.height + s;
|
|
770
770
|
break;
|
|
771
771
|
case "left":
|
|
772
772
|
r = -(i.width + s);
|
|
773
773
|
break;
|
|
774
774
|
case "right":
|
|
775
|
-
r =
|
|
775
|
+
r = n.width + s;
|
|
776
776
|
break;
|
|
777
777
|
}
|
|
778
778
|
return { x: r, y: a };
|
|
@@ -781,9 +781,9 @@ class ie {
|
|
|
781
781
|
* Calculate start position from center with scale animation
|
|
782
782
|
*/
|
|
783
783
|
calculateCenterPosition(t, e, i) {
|
|
784
|
-
const
|
|
784
|
+
const n = t.width / 2, s = t.height / 2;
|
|
785
785
|
return {
|
|
786
|
-
x:
|
|
786
|
+
x: n,
|
|
787
787
|
y: s,
|
|
788
788
|
useScale: !0
|
|
789
789
|
// Signal to use scale animation from 0
|
|
@@ -792,14 +792,14 @@ class ie {
|
|
|
792
792
|
/**
|
|
793
793
|
* Calculate start position from a random edge
|
|
794
794
|
*/
|
|
795
|
-
calculateRandomEdge(t, e, i,
|
|
795
|
+
calculateRandomEdge(t, e, i, n) {
|
|
796
796
|
const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
|
|
797
|
-
return this.calculateEdgePosition(r, t, e, i,
|
|
797
|
+
return this.calculateEdgePosition(r, t, e, i, n);
|
|
798
798
|
}
|
|
799
799
|
/**
|
|
800
800
|
* Calculate start position on a circle around the container
|
|
801
801
|
*/
|
|
802
|
-
calculateCircularPosition(t, e, i,
|
|
802
|
+
calculateCircularPosition(t, e, i, n, s) {
|
|
803
803
|
const r = this.config.start.circular || {}, a = r.distribution || "even";
|
|
804
804
|
let h;
|
|
805
805
|
const c = r.radius || "120%";
|
|
@@ -811,9 +811,9 @@ class ie {
|
|
|
811
811
|
} else
|
|
812
812
|
h = typeof c == "number" ? c : 500;
|
|
813
813
|
let u;
|
|
814
|
-
a === "even" ? u =
|
|
815
|
-
const l = i.width / 2, d = i.height / 2,
|
|
816
|
-
return { x:
|
|
814
|
+
a === "even" ? u = n / 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
|
+
return { x: m, y: b };
|
|
817
817
|
}
|
|
818
818
|
/**
|
|
819
819
|
* Get animation parameters for an image
|
|
@@ -832,17 +832,17 @@ class ie {
|
|
|
832
832
|
* Build a CSS transform string for the start position
|
|
833
833
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
834
834
|
*/
|
|
835
|
-
buildStartTransform(t, e, i,
|
|
836
|
-
const c = t.x - e.x, u = t.y - e.y, l = a !== void 0 ? a : i, d = h !== void 0 ? h :
|
|
835
|
+
buildStartTransform(t, e, i, n, s, r, a, h) {
|
|
836
|
+
const c = t.x - e.x, u = t.y - e.y, l = a !== void 0 ? a : i, d = h !== void 0 ? h : n, 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
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
|
|
841
841
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
842
842
|
*/
|
|
843
|
-
buildFinalTransform(t, e, i,
|
|
844
|
-
if (i !== void 0 &&
|
|
845
|
-
const s = -i / 2, r = -
|
|
843
|
+
buildFinalTransform(t, e, i, n) {
|
|
844
|
+
if (i !== void 0 && n !== void 0) {
|
|
845
|
+
const s = -i / 2, r = -n / 2;
|
|
846
846
|
return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${e})`;
|
|
847
847
|
}
|
|
848
848
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${e})`;
|
|
@@ -859,7 +859,7 @@ class ie {
|
|
|
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
|
|
@@ -908,12 +908,12 @@ class ie {
|
|
|
908
908
|
return t + (Math.random() - 0.5) * 60;
|
|
909
909
|
if (typeof i == "number")
|
|
910
910
|
return i;
|
|
911
|
-
const
|
|
912
|
-
return i.min + Math.random() *
|
|
911
|
+
const n = i.max - i.min;
|
|
912
|
+
return i.min + Math.random() * n;
|
|
913
913
|
}
|
|
914
914
|
case "spin": {
|
|
915
|
-
const i = this.rotationConfig.spinCount ?? 1,
|
|
916
|
-
return t + i * 360 *
|
|
915
|
+
const i = this.rotationConfig.spinCount ?? 1, n = this.resolveSpinDirection(t);
|
|
916
|
+
return t + i * 360 * n;
|
|
917
917
|
}
|
|
918
918
|
case "random":
|
|
919
919
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -961,7 +961,7 @@ class ie {
|
|
|
961
961
|
amplitude: 15,
|
|
962
962
|
frequency: 3,
|
|
963
963
|
decay: !0
|
|
964
|
-
}, { amplitude:
|
|
964
|
+
}, { amplitude: n, frequency: s, decay: r } = i, a = Math.sin(t * s * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, c = n * a * h;
|
|
965
965
|
return e + c;
|
|
966
966
|
}
|
|
967
967
|
/**
|
|
@@ -1018,7 +1018,7 @@ class ie {
|
|
|
1018
1018
|
const i = this.scaleConfig.pop || {
|
|
1019
1019
|
overshoot: 1.2,
|
|
1020
1020
|
bounces: 1
|
|
1021
|
-
}, { overshoot:
|
|
1021
|
+
}, { overshoot: n, bounces: s } = i, r = this.generateScaleBounceKeyframes(s, n);
|
|
1022
1022
|
let a = e;
|
|
1023
1023
|
for (let h = 0; h < r.length; h++)
|
|
1024
1024
|
if (t <= r[h].time) {
|
|
@@ -1034,12 +1034,12 @@ class ie {
|
|
|
1034
1034
|
generateScaleBounceKeyframes(t, e) {
|
|
1035
1035
|
const i = [];
|
|
1036
1036
|
i.push({ time: 0.5, scale: e });
|
|
1037
|
-
let
|
|
1037
|
+
let n = e;
|
|
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 u = 1 - (
|
|
1042
|
-
h += a, i.push({ time: h, scale: u }),
|
|
1041
|
+
const u = 1 - (n - 1) * s;
|
|
1042
|
+
h += a, i.push({ time: h, scale: u }), n = 1 + (n - 1) * s * s, h += a, c < t - 1 && i.push({ time: h, scale: n });
|
|
1043
1043
|
}
|
|
1044
1044
|
return i.push({ time: 1, scale: 1 }), i;
|
|
1045
1045
|
}
|
|
@@ -1050,7 +1050,7 @@ class ie {
|
|
|
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,19 +1062,19 @@ class ne {
|
|
|
1062
1062
|
* @returns Array of layout objects with position, rotation, scale
|
|
1063
1063
|
*/
|
|
1064
1064
|
generate(t, e, i = {}) {
|
|
1065
|
-
const
|
|
1065
|
+
const n = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || m !== 1, g = h * 1.5 / 2, f = h / 2, S = s - a - g, v = r - a - f, w = a + g, E = a + f;
|
|
1066
1066
|
for (let x = 0; x < t; x++) {
|
|
1067
|
-
const
|
|
1067
|
+
const A = this.random(w, S), M = this.random(E, v), z = c === "random" ? this.random(u, l) : 0, P = b ? this.random(d, m) : 1, _ = h * P, Y = {
|
|
1068
1068
|
id: x,
|
|
1069
|
-
x:
|
|
1069
|
+
x: A,
|
|
1070
1070
|
y: M,
|
|
1071
1071
|
rotation: z,
|
|
1072
1072
|
scale: P,
|
|
1073
1073
|
baseSize: _
|
|
1074
1074
|
};
|
|
1075
|
-
|
|
1075
|
+
n.push(Y);
|
|
1076
1076
|
}
|
|
1077
|
-
return
|
|
1077
|
+
return n;
|
|
1078
1078
|
}
|
|
1079
1079
|
/**
|
|
1080
1080
|
* Utility: Generate random number between min and max
|
|
@@ -1086,7 +1086,7 @@ class ne {
|
|
|
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,16 +1098,16 @@ class oe {
|
|
|
1098
1098
|
* @returns Array of layout objects with position, rotation, scale
|
|
1099
1099
|
*/
|
|
1100
1100
|
generate(t, e, i = {}) {
|
|
1101
|
-
const
|
|
1101
|
+
const n = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, l = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, m = l !== 1 || d !== 1, b = this.config.scaleDecay ?? 0, p = i.fixedHeight ?? a, g = s / 2, f = r / 2, S = Math.ceil(Math.sqrt(t));
|
|
1102
1102
|
if (t > 0) {
|
|
1103
|
-
const
|
|
1104
|
-
|
|
1103
|
+
const E = m ? this.random(l, d) : 1, x = p * E;
|
|
1104
|
+
n.push({
|
|
1105
1105
|
id: 0,
|
|
1106
1106
|
x: g,
|
|
1107
|
-
y:
|
|
1107
|
+
y: f,
|
|
1108
1108
|
rotation: h === "random" ? this.random(c * 0.33, u * 0.33) : 0,
|
|
1109
1109
|
// Less rotation for center
|
|
1110
|
-
scale:
|
|
1110
|
+
scale: E,
|
|
1111
1111
|
baseSize: x,
|
|
1112
1112
|
zIndex: 100
|
|
1113
1113
|
// Center image is highest
|
|
@@ -1115,32 +1115,32 @@ class oe {
|
|
|
1115
1115
|
}
|
|
1116
1116
|
let v = 1, w = 1;
|
|
1117
1117
|
for (; v < t; ) {
|
|
1118
|
-
const
|
|
1118
|
+
const E = w / S, x = b > 0 ? 1 - E * b * 0.5 : 1, A = w * (p * 0.8), M = A * 1.5, z = Math.PI * (3 * (M + A) - Math.sqrt((3 * M + A) * (M + 3 * A))), P = this.estimateWidth(p), _ = Math.floor(z / (P * 0.7));
|
|
1119
1119
|
if (_ === 0) {
|
|
1120
1120
|
w++;
|
|
1121
1121
|
continue;
|
|
1122
1122
|
}
|
|
1123
1123
|
const Y = 2 * Math.PI / _, N = w * (20 * Math.PI / 180);
|
|
1124
|
-
for (let
|
|
1125
|
-
const D =
|
|
1126
|
-
let C = g + Math.cos(D) * M, O =
|
|
1127
|
-
const $ = this.config.spacing.padding ?? 50, U =
|
|
1124
|
+
for (let T = 0; T < _ && v < t; T++) {
|
|
1125
|
+
const D = T * Y + N, k = m ? this.random(l, d) : 1, H = x * k, R = p * H;
|
|
1126
|
+
let C = g + Math.cos(D) * M, O = f + Math.sin(D) * A;
|
|
1127
|
+
const $ = this.config.spacing.padding ?? 50, U = R * 1.5 / 2, L = R / 2;
|
|
1128
1128
|
C - U < $ ? C = $ + U : C + U > s - $ && (C = s - $ - U), O - L < $ ? O = $ + L : O + L > r - $ && (O = r - $ - L);
|
|
1129
|
-
const
|
|
1130
|
-
|
|
1129
|
+
const G = h === "random" ? this.random(c, u) : 0;
|
|
1130
|
+
n.push({
|
|
1131
1131
|
id: v,
|
|
1132
1132
|
x: C,
|
|
1133
1133
|
y: O,
|
|
1134
|
-
rotation:
|
|
1134
|
+
rotation: G,
|
|
1135
1135
|
scale: H,
|
|
1136
|
-
baseSize:
|
|
1136
|
+
baseSize: R,
|
|
1137
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
|
-
return
|
|
1143
|
+
return n;
|
|
1144
1144
|
}
|
|
1145
1145
|
/**
|
|
1146
1146
|
* Estimate image width based on height
|
|
@@ -1161,7 +1161,7 @@ class oe {
|
|
|
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",
|
|
@@ -1171,7 +1171,7 @@ const se = {
|
|
|
1171
1171
|
alignment: "center",
|
|
1172
1172
|
gap: 10,
|
|
1173
1173
|
overflowOffset: 0.25
|
|
1174
|
-
},
|
|
1174
|
+
}, At = [
|
|
1175
1175
|
{ x: 1, y: 1 },
|
|
1176
1176
|
// bottom-right
|
|
1177
1177
|
{ x: -1, y: -1 },
|
|
@@ -1189,7 +1189,7 @@ const se = {
|
|
|
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,73 +1201,73 @@ class ae {
|
|
|
1201
1201
|
* @returns Array of layout objects with position, rotation, scale
|
|
1202
1202
|
*/
|
|
1203
1203
|
generate(t, e, i = {}) {
|
|
1204
|
-
const
|
|
1204
|
+
const n = [], { 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
|
-
),
|
|
1210
|
+
), S = a.stagger === "row", v = a.stagger === "column", w = S ? g + 0.5 : g, E = v ? f + 0.5 : f, x = (b - a.gap * (g - 1)) / w, A = (p - a.gap * (f - 1)) / E, M = S ? x / 2 : 0, z = v ? A / 2 : 0, P = 1 + a.overlap, _ = Math.min(x, A) * P, Y = i.fixedHeight ? Math.min(i.fixedHeight, _) : _, N = g * x + (g - 1) * a.gap + M, T = f * A + (f - 1) * a.gap + z, D = h + (b - N) / 2, k = h + (p - T) / 2, H = g * f, R = a.columns !== "auto" && a.rows !== "auto", C = R && t > H;
|
|
1211
1211
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1212
1212
|
gridConfigColumns: a.columns,
|
|
1213
1213
|
gridConfigRows: a.rows,
|
|
1214
1214
|
columns: g,
|
|
1215
|
-
rows:
|
|
1215
|
+
rows: f,
|
|
1216
1216
|
cellCount: H,
|
|
1217
|
-
hasFixedGrid:
|
|
1217
|
+
hasFixedGrid: R,
|
|
1218
1218
|
imageCount: t,
|
|
1219
1219
|
isOverflowMode: C
|
|
1220
1220
|
});
|
|
1221
|
-
const O = C ? new Array(H).fill(0) : [], $ = Math.min(x,
|
|
1221
|
+
const O = C ? new Array(H).fill(0) : [], $ = Math.min(x, A) * a.overflowOffset;
|
|
1222
1222
|
for (let F = 0; F < t; F++) {
|
|
1223
|
-
let U, L,
|
|
1223
|
+
let U, L, G = 0;
|
|
1224
1224
|
if (C && F >= H) {
|
|
1225
1225
|
const q = F - H, j = q % H;
|
|
1226
|
-
|
|
1226
|
+
G = Math.floor(q / H) + 1, O[j]++, a.fillDirection === "row" ? (U = j % g, L = Math.floor(j / g)) : (L = j % f, U = Math.floor(j / f));
|
|
1227
1227
|
} else
|
|
1228
|
-
a.fillDirection === "row" ? (U = F % g, L = Math.floor(F / g)) : (L = F %
|
|
1229
|
-
let
|
|
1230
|
-
if (a.stagger === "row" && L % 2 === 1 ?
|
|
1231
|
-
const q = (
|
|
1232
|
-
|
|
1228
|
+
a.fillDirection === "row" ? (U = F % g, L = Math.floor(F / g)) : (L = F % f, U = Math.floor(F / f));
|
|
1229
|
+
let W = D + U * (x + a.gap) + x / 2, X = k + L * (A + a.gap) + A / 2;
|
|
1230
|
+
if (a.stagger === "row" && L % 2 === 1 ? W += x / 2 : a.stagger === "column" && U % 2 === 1 && (X += A / 2), G > 0) {
|
|
1231
|
+
const q = (G - 1) % At.length, j = At[q];
|
|
1232
|
+
W += j.x * $, X += j.y * $;
|
|
1233
1233
|
}
|
|
1234
1234
|
if (a.jitter > 0) {
|
|
1235
|
-
const q = x / 2 * a.jitter, j =
|
|
1236
|
-
|
|
1235
|
+
const q = x / 2 * a.jitter, j = A / 2 * a.jitter;
|
|
1236
|
+
W += this.random(-q, q), X += this.random(-j, j);
|
|
1237
1237
|
}
|
|
1238
|
-
let B =
|
|
1238
|
+
let B = W, J = X;
|
|
1239
1239
|
if (!C && a.fillDirection === "row") {
|
|
1240
1240
|
const q = t % g || g;
|
|
1241
1241
|
if (L === Math.floor((t - 1) / g) && q < g) {
|
|
1242
|
-
const
|
|
1243
|
-
let
|
|
1244
|
-
a.alignment === "center" ?
|
|
1242
|
+
const xt = q * x + (q - 1) * a.gap;
|
|
1243
|
+
let ft = 0;
|
|
1244
|
+
a.alignment === "center" ? ft = (N - xt) / 2 : a.alignment === "end" && (ft = N - xt), B += ft;
|
|
1245
1245
|
}
|
|
1246
1246
|
}
|
|
1247
|
-
const
|
|
1248
|
-
B = Math.max(
|
|
1249
|
-
let
|
|
1247
|
+
const lt = m ? this.random(l, d) : 1, K = Y * lt, ot = K * 1.5 / 2, st = K / 2, dt = h + ot, ut = s - h - ot, Dt = h + st, Ot = r - h - st;
|
|
1248
|
+
B = Math.max(dt, Math.min(B, ut)), J = Math.max(Dt, Math.min(J, Ot));
|
|
1249
|
+
let gt = 0;
|
|
1250
1250
|
if (u === "random") {
|
|
1251
1251
|
const q = this.imageConfig.rotation?.range?.min ?? -15, j = this.imageConfig.rotation?.range?.max ?? 15;
|
|
1252
|
-
a.jitter > 0 ?
|
|
1252
|
+
a.jitter > 0 ? gt = this.random(q * a.jitter, j * a.jitter) : gt = this.random(q, j);
|
|
1253
1253
|
}
|
|
1254
|
-
let
|
|
1255
|
-
C &&
|
|
1254
|
+
let mt;
|
|
1255
|
+
C && G > 0 ? mt = 50 - G : mt = C ? 100 + F : F + 1, n.push({
|
|
1256
1256
|
id: F,
|
|
1257
1257
|
x: B,
|
|
1258
1258
|
y: J,
|
|
1259
|
-
rotation:
|
|
1260
|
-
scale:
|
|
1259
|
+
rotation: gt,
|
|
1260
|
+
scale: lt,
|
|
1261
1261
|
baseSize: K,
|
|
1262
|
-
zIndex:
|
|
1262
|
+
zIndex: mt
|
|
1263
1263
|
});
|
|
1264
1264
|
}
|
|
1265
|
-
return
|
|
1265
|
+
return n;
|
|
1266
1266
|
}
|
|
1267
1267
|
/**
|
|
1268
1268
|
* Calculate optimal grid dimensions based on image count and container
|
|
1269
1269
|
*/
|
|
1270
|
-
calculateGridDimensions(t, e, i,
|
|
1270
|
+
calculateGridDimensions(t, e, i, n, s) {
|
|
1271
1271
|
let r, a;
|
|
1272
1272
|
if (s.columns !== "auto" && s.rows !== "auto")
|
|
1273
1273
|
r = s.columns, a = s.rows;
|
|
@@ -1289,14 +1289,14 @@ class ae {
|
|
|
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,79 +1308,79 @@ class le {
|
|
|
1308
1308
|
* @returns Array of layout objects with position, rotation, scale
|
|
1309
1309
|
*/
|
|
1310
1310
|
generate(t, e, i = {}) {
|
|
1311
|
-
const
|
|
1312
|
-
|
|
1313
|
-
|
|
1311
|
+
const n = [], { 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, S = r / 2, v = Math.min(
|
|
1312
|
+
f - h - c / 2,
|
|
1313
|
+
S - h - c / 2
|
|
1314
1314
|
), w = a.direction === "clockwise" ? -1 : 1;
|
|
1315
|
-
for (let
|
|
1316
|
-
let x,
|
|
1315
|
+
for (let E = 0; E < t; E++) {
|
|
1316
|
+
let x, A;
|
|
1317
1317
|
if (a.spiralType === "golden")
|
|
1318
|
-
x =
|
|
1318
|
+
x = E * le * w + a.startAngle, A = this.calculateGoldenRadius(E, t, v, a.tightness);
|
|
1319
1319
|
else if (a.spiralType === "archimedean") {
|
|
1320
|
-
const
|
|
1321
|
-
x =
|
|
1320
|
+
const W = E * 0.5 * a.tightness;
|
|
1321
|
+
x = W * w + a.startAngle, A = this.calculateArchimedeanRadius(W, t, v, a.tightness);
|
|
1322
1322
|
} else {
|
|
1323
|
-
const
|
|
1324
|
-
x =
|
|
1323
|
+
const W = E * 0.3 * a.tightness;
|
|
1324
|
+
x = W * w + a.startAngle, A = this.calculateLogarithmicRadius(W, t, v, a.tightness);
|
|
1325
1325
|
}
|
|
1326
|
-
const M =
|
|
1326
|
+
const M = f + Math.cos(x) * A, z = S + Math.sin(x) * A, P = A / v, _ = g > 0 ? 1 - P * g * 0.5 : 1, Y = p ? this.random(m, b) : 1, N = _ * Y, T = c * N, k = T * 1.5 / 2, H = T / 2, R = h + k, C = s - h - k, O = h + H, $ = r - h - H, F = Math.max(R, Math.min(M, C)), U = Math.max(O, Math.min(z, $));
|
|
1327
1327
|
let L = 0;
|
|
1328
1328
|
if (u === "random") {
|
|
1329
|
-
const
|
|
1330
|
-
L = a.spiralType === "golden" ? X :
|
|
1331
|
-
} else u === "tangent" && (L = this.calculateSpiralTangent(x,
|
|
1332
|
-
const
|
|
1333
|
-
|
|
1334
|
-
id:
|
|
1329
|
+
const W = x * 180 / Math.PI % 360, X = this.random(l, d);
|
|
1330
|
+
L = a.spiralType === "golden" ? X : W * 0.1 + X * 0.9;
|
|
1331
|
+
} else u === "tangent" && (L = this.calculateSpiralTangent(x, A, a));
|
|
1332
|
+
const G = t - E;
|
|
1333
|
+
n.push({
|
|
1334
|
+
id: E,
|
|
1335
1335
|
x: F,
|
|
1336
1336
|
y: U,
|
|
1337
1337
|
rotation: L,
|
|
1338
1338
|
scale: N,
|
|
1339
|
-
baseSize:
|
|
1340
|
-
zIndex:
|
|
1339
|
+
baseSize: T,
|
|
1340
|
+
zIndex: G
|
|
1341
1341
|
});
|
|
1342
1342
|
}
|
|
1343
|
-
return
|
|
1343
|
+
return n;
|
|
1344
1344
|
}
|
|
1345
1345
|
/**
|
|
1346
1346
|
* Calculate tangent angle for spiral curve at given position
|
|
1347
1347
|
* This aligns the image along the spiral's direction of travel
|
|
1348
1348
|
*/
|
|
1349
1349
|
calculateSpiralTangent(t, e, i) {
|
|
1350
|
-
let
|
|
1350
|
+
let n;
|
|
1351
1351
|
if (i.spiralType === "golden")
|
|
1352
|
-
|
|
1352
|
+
n = t + Math.PI / 2;
|
|
1353
1353
|
else if (i.spiralType === "archimedean") {
|
|
1354
1354
|
const r = 1 / i.tightness, a = Math.atan(e / r);
|
|
1355
|
-
|
|
1355
|
+
n = t + a;
|
|
1356
1356
|
} else {
|
|
1357
1357
|
const r = 0.15 / i.tightness, a = Math.atan(1 / r);
|
|
1358
|
-
|
|
1358
|
+
n = t + a;
|
|
1359
1359
|
}
|
|
1360
|
-
return
|
|
1360
|
+
return n * 180 / Math.PI % 360 - 90;
|
|
1361
1361
|
}
|
|
1362
1362
|
/**
|
|
1363
1363
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1364
1364
|
* Creates even distribution like sunflower seeds
|
|
1365
1365
|
*/
|
|
1366
|
-
calculateGoldenRadius(t, e, i,
|
|
1367
|
-
const r = i / Math.sqrt(e) * Math.sqrt(t) /
|
|
1366
|
+
calculateGoldenRadius(t, e, i, n) {
|
|
1367
|
+
const r = i / Math.sqrt(e) * Math.sqrt(t) / n;
|
|
1368
1368
|
return Math.min(r, i);
|
|
1369
1369
|
}
|
|
1370
1370
|
/**
|
|
1371
1371
|
* Calculate radius for Archimedean spiral
|
|
1372
1372
|
* r = a + b*θ (constant spacing between arms)
|
|
1373
1373
|
*/
|
|
1374
|
-
calculateArchimedeanRadius(t, e, i,
|
|
1375
|
-
const s = e * 0.5 *
|
|
1374
|
+
calculateArchimedeanRadius(t, e, i, n) {
|
|
1375
|
+
const s = e * 0.5 * n;
|
|
1376
1376
|
return t / s * i;
|
|
1377
1377
|
}
|
|
1378
1378
|
/**
|
|
1379
1379
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1380
1380
|
* r = a * e^(b*θ)
|
|
1381
1381
|
*/
|
|
1382
|
-
calculateLogarithmicRadius(t, e, i,
|
|
1383
|
-
const s = i * 0.05, r = 0.15 /
|
|
1382
|
+
calculateLogarithmicRadius(t, e, i, n) {
|
|
1383
|
+
const s = i * 0.05, r = 0.15 / n, a = s * Math.exp(r * t), h = e * 0.3 * n, c = s * Math.exp(r * h);
|
|
1384
1384
|
return a / c * i;
|
|
1385
1385
|
}
|
|
1386
1386
|
/**
|
|
@@ -1390,7 +1390,7 @@ class le {
|
|
|
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 he = {
|
|
|
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,85 +1410,85 @@ class de {
|
|
|
1410
1410
|
* @returns Array of layout objects with position, rotation, scale
|
|
1411
1411
|
*/
|
|
1412
1412
|
generate(t, e, i = {}) {
|
|
1413
|
-
const
|
|
1413
|
+
const n = [], { 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,
|
|
1417
1417
|
r,
|
|
1418
1418
|
a.clusterSpacing
|
|
1419
|
-
),
|
|
1419
|
+
), f = this.generateClusterCenters(
|
|
1420
1420
|
g,
|
|
1421
1421
|
s,
|
|
1422
1422
|
r,
|
|
1423
1423
|
h,
|
|
1424
1424
|
a
|
|
1425
|
-
),
|
|
1425
|
+
), S = new Array(g).fill(0);
|
|
1426
1426
|
for (let w = 0; w < t; w++)
|
|
1427
|
-
|
|
1427
|
+
S[w % g]++;
|
|
1428
1428
|
let v = 0;
|
|
1429
1429
|
for (let w = 0; w < g; w++) {
|
|
1430
|
-
const
|
|
1431
|
-
for (let
|
|
1430
|
+
const E = f[w], x = S[w];
|
|
1431
|
+
for (let A = 0; A < x; A++) {
|
|
1432
1432
|
let M, z;
|
|
1433
1433
|
if (a.distribution === "gaussian")
|
|
1434
|
-
M = this.gaussianRandom() *
|
|
1434
|
+
M = this.gaussianRandom() * E.spread, z = this.gaussianRandom() * E.spread;
|
|
1435
1435
|
else {
|
|
1436
|
-
const L = this.random(0, Math.PI * 2),
|
|
1437
|
-
M = Math.cos(L) *
|
|
1436
|
+
const L = this.random(0, Math.PI * 2), G = this.random(0, E.spread);
|
|
1437
|
+
M = Math.cos(L) * G, z = Math.sin(L) * G;
|
|
1438
1438
|
}
|
|
1439
1439
|
const P = 1 + a.overlap * 0.5, _ = 1 + a.overlap * 0.3;
|
|
1440
1440
|
M /= P, z /= P;
|
|
1441
|
-
const Y = p ? this.random(
|
|
1442
|
-
let D =
|
|
1443
|
-
const
|
|
1444
|
-
D = Math.max(h +
|
|
1445
|
-
const O = u === "random" ? this.random(l, d) : 0, F = Math.sqrt(M * M + z * z) /
|
|
1446
|
-
|
|
1441
|
+
const Y = p ? this.random(m, b) : 1, N = _ * Y, T = c * N;
|
|
1442
|
+
let D = E.x + M, k = E.y + z;
|
|
1443
|
+
const R = T * 1.5 / 2, C = T / 2;
|
|
1444
|
+
D = Math.max(h + R, Math.min(D, s - h - R)), k = Math.max(h + C, Math.min(k, r - h - C));
|
|
1445
|
+
const O = u === "random" ? this.random(l, d) : 0, F = Math.sqrt(M * M + z * z) / E.spread, U = Math.round((1 - F) * 50) + 1;
|
|
1446
|
+
n.push({
|
|
1447
1447
|
id: v,
|
|
1448
1448
|
x: D,
|
|
1449
1449
|
y: k,
|
|
1450
1450
|
rotation: O,
|
|
1451
1451
|
scale: N,
|
|
1452
|
-
baseSize:
|
|
1452
|
+
baseSize: T,
|
|
1453
1453
|
zIndex: U
|
|
1454
1454
|
}), v++;
|
|
1455
1455
|
}
|
|
1456
1456
|
}
|
|
1457
|
-
return
|
|
1457
|
+
return n;
|
|
1458
1458
|
}
|
|
1459
1459
|
/**
|
|
1460
1460
|
* Calculate optimal number of clusters based on image count and container
|
|
1461
1461
|
*/
|
|
1462
|
-
calculateClusterCount(t, e, i,
|
|
1462
|
+
calculateClusterCount(t, e, i, n, s) {
|
|
1463
1463
|
if (e !== "auto")
|
|
1464
1464
|
return Math.max(1, Math.min(e, t));
|
|
1465
1465
|
const a = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
|
|
1466
|
-
i / s * (
|
|
1466
|
+
i / s * (n / s) * 0.6
|
|
1467
1467
|
);
|
|
1468
1468
|
return Math.max(1, Math.min(a, h, 10));
|
|
1469
1469
|
}
|
|
1470
1470
|
/**
|
|
1471
1471
|
* Generate cluster center positions with spacing constraints
|
|
1472
1472
|
*/
|
|
1473
|
-
generateClusterCenters(t, e, i,
|
|
1474
|
-
const r = [], h =
|
|
1473
|
+
generateClusterCenters(t, e, i, n, s) {
|
|
1474
|
+
const r = [], h = n + s.clusterSpread, c = e - n - s.clusterSpread, u = n + s.clusterSpread, l = i - n - s.clusterSpread;
|
|
1475
1475
|
for (let d = 0; d < t; d++) {
|
|
1476
|
-
let
|
|
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
1480
|
y: this.random(u, l),
|
|
1481
1481
|
spread: this.calculateClusterSpread(s)
|
|
1482
1482
|
};
|
|
1483
|
-
let
|
|
1484
|
-
for (const
|
|
1485
|
-
const v = g.x -
|
|
1486
|
-
|
|
1483
|
+
let f = 1 / 0;
|
|
1484
|
+
for (const S of r) {
|
|
1485
|
+
const v = g.x - S.x, w = g.y - S.y, E = Math.sqrt(v * v + w * w);
|
|
1486
|
+
f = Math.min(f, E);
|
|
1487
1487
|
}
|
|
1488
|
-
if ((r.length === 0 ||
|
|
1488
|
+
if ((r.length === 0 || f > b) && (m = g, b = f), f >= s.clusterSpacing)
|
|
1489
1489
|
break;
|
|
1490
1490
|
}
|
|
1491
|
-
|
|
1491
|
+
m && r.push(m);
|
|
1492
1492
|
}
|
|
1493
1493
|
return r;
|
|
1494
1494
|
}
|
|
@@ -1516,7 +1516,7 @@ class de {
|
|
|
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,32 +1528,32 @@ class ue {
|
|
|
1528
1528
|
* @returns Array of layout objects with position, rotation, scale
|
|
1529
1529
|
*/
|
|
1530
1530
|
generate(t, e, i = {}) {
|
|
1531
|
-
const
|
|
1532
|
-
|
|
1531
|
+
const n = [], { 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:
|
|
1535
|
-
let
|
|
1536
|
-
for (let C = 0; C <
|
|
1537
|
-
const O =
|
|
1534
|
+
}, { rows: f, amplitude: S, frequency: v, phaseShift: w, synchronization: E } = g, x = Math.ceil(t / f), z = p * 1.5 / 2, P = h + z, _ = s - h - z, Y = _ - P, N = x > 1 ? Y / (x - 1) : 0, T = h + S + p / 2, D = r - h - S - p / 2, k = D - T, H = f > 1 ? k / (f - 1) : 0;
|
|
1535
|
+
let R = 0;
|
|
1536
|
+
for (let C = 0; C < f && R < t; C++) {
|
|
1537
|
+
const O = f === 1 ? (T + D) / 2 : T + C * H;
|
|
1538
1538
|
let $ = 0;
|
|
1539
|
-
|
|
1540
|
-
for (let F = 0; F < x &&
|
|
1541
|
-
const U = x === 1 ? (P + _) / 2 : P + F * N, L = this.calculateWaveY(U, s,
|
|
1539
|
+
E === "offset" ? $ = C * w : E === "alternating" && ($ = C * Math.PI);
|
|
1540
|
+
for (let F = 0; F < x && R < t; F++) {
|
|
1541
|
+
const U = x === 1 ? (P + _) / 2 : P + F * N, L = this.calculateWaveY(U, s, S, v, $), G = U, W = O + L, X = b ? this.random(d, m) : 1, B = p * X;
|
|
1542
1542
|
let J = 0;
|
|
1543
|
-
c === "tangent" ? J = this.calculateRotation(U, s,
|
|
1544
|
-
const K = B * 1.5 / 2,
|
|
1545
|
-
|
|
1546
|
-
id:
|
|
1547
|
-
x: Math.max(
|
|
1548
|
-
y: Math.max(
|
|
1543
|
+
c === "tangent" ? J = this.calculateRotation(U, s, S, v, $) : c === "random" && (J = this.random(u, l));
|
|
1544
|
+
const K = B * 1.5 / 2, ht = B / 2, ot = h + K, st = s - h - K, dt = h + ht, ut = r - h - ht;
|
|
1545
|
+
n.push({
|
|
1546
|
+
id: R,
|
|
1547
|
+
x: Math.max(ot, Math.min(G, st)),
|
|
1548
|
+
y: Math.max(dt, Math.min(W, ut)),
|
|
1549
1549
|
rotation: J,
|
|
1550
1550
|
scale: X,
|
|
1551
1551
|
baseSize: B,
|
|
1552
|
-
zIndex:
|
|
1553
|
-
}),
|
|
1552
|
+
zIndex: R + 1
|
|
1553
|
+
}), R++;
|
|
1554
1554
|
}
|
|
1555
1555
|
}
|
|
1556
|
-
return
|
|
1556
|
+
return n;
|
|
1557
1557
|
}
|
|
1558
1558
|
/**
|
|
1559
1559
|
* Calculate Y position displacement on wave curve
|
|
@@ -1564,9 +1564,9 @@ class ue {
|
|
|
1564
1564
|
* @param phase - Phase offset
|
|
1565
1565
|
* @returns Y displacement from baseline
|
|
1566
1566
|
*/
|
|
1567
|
-
calculateWaveY(t, e, i,
|
|
1567
|
+
calculateWaveY(t, e, i, n, s) {
|
|
1568
1568
|
const r = t / e;
|
|
1569
|
-
return i * Math.sin(
|
|
1569
|
+
return i * Math.sin(n * r * 2 * Math.PI + s);
|
|
1570
1570
|
}
|
|
1571
1571
|
/**
|
|
1572
1572
|
* Calculate rotation based on wave tangent
|
|
@@ -1577,8 +1577,8 @@ class ue {
|
|
|
1577
1577
|
* @param phase - Phase offset
|
|
1578
1578
|
* @returns Rotation angle in degrees
|
|
1579
1579
|
*/
|
|
1580
|
-
calculateRotation(t, e, i,
|
|
1581
|
-
const r = t / e, a = i *
|
|
1580
|
+
calculateRotation(t, e, i, n, s) {
|
|
1581
|
+
const r = t / e, a = i * n * 2 * Math.PI * Math.cos(n * r * 2 * Math.PI + s) / e;
|
|
1582
1582
|
return Math.atan(a) * (180 / Math.PI);
|
|
1583
1583
|
}
|
|
1584
1584
|
/**
|
|
@@ -1593,7 +1593,7 @@ class ue {
|
|
|
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 ge {
|
|
|
1604
1604
|
initLayout() {
|
|
1605
1605
|
switch (this.config.algorithm) {
|
|
1606
1606
|
case "radial":
|
|
1607
|
-
return new oe(this.config, this.imageConfig);
|
|
1608
|
-
case "grid":
|
|
1609
1607
|
return new ae(this.config, this.imageConfig);
|
|
1608
|
+
case "grid":
|
|
1609
|
+
return new ce(this.config, this.imageConfig);
|
|
1610
1610
|
case "spiral":
|
|
1611
|
-
return new le(this.config, this.imageConfig);
|
|
1612
|
-
case "cluster":
|
|
1613
1611
|
return new de(this.config, this.imageConfig);
|
|
1612
|
+
case "cluster":
|
|
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
|
/**
|
|
@@ -1625,10 +1625,10 @@ class ge {
|
|
|
1625
1625
|
* @returns Array of layout objects with position, rotation, scale
|
|
1626
1626
|
*/
|
|
1627
1627
|
generateLayout(t, e, i = {}) {
|
|
1628
|
-
const
|
|
1629
|
-
return
|
|
1628
|
+
const n = this.placementLayout.generate(t, e, i);
|
|
1629
|
+
return n.forEach((s) => {
|
|
1630
1630
|
this.layouts.set(s.id, s);
|
|
1631
|
-
}),
|
|
1631
|
+
}), n;
|
|
1632
1632
|
}
|
|
1633
1633
|
/**
|
|
1634
1634
|
* Get the original layout state for an image
|
|
@@ -1681,8 +1681,8 @@ class ge {
|
|
|
1681
1681
|
return;
|
|
1682
1682
|
if (typeof i == "number")
|
|
1683
1683
|
return i;
|
|
1684
|
-
const
|
|
1685
|
-
return s === "mobile" ?
|
|
1684
|
+
const n = i, s = this.resolveBreakpoint(t);
|
|
1685
|
+
return s === "mobile" ? n.mobile ?? n.tablet ?? n.screen : s === "tablet" ? n.tablet ?? n.screen ?? n.mobile : n.screen ?? n.tablet ?? n.mobile;
|
|
1686
1686
|
}
|
|
1687
1687
|
/**
|
|
1688
1688
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1692,19 +1692,19 @@ class ge {
|
|
|
1692
1692
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1693
1693
|
* @returns Calculated sizing result with height
|
|
1694
1694
|
*/
|
|
1695
|
-
calculateAdaptiveSize(t, e, i,
|
|
1696
|
-
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1695
|
+
calculateAdaptiveSize(t, e, i, n) {
|
|
1696
|
+
const s = this.imageConfig.sizing, r = this.resolveBaseHeight(n);
|
|
1697
1697
|
if (r !== void 0)
|
|
1698
1698
|
return { height: r };
|
|
1699
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
|
-
let
|
|
1701
|
-
|
|
1702
|
-
let
|
|
1703
|
-
if (
|
|
1700
|
+
let f = Math.sqrt(p / 1.4);
|
|
1701
|
+
f *= u, f = Math.min(f, i);
|
|
1702
|
+
let S = this.clamp(f, a, h);
|
|
1703
|
+
if (S === a && f < a) {
|
|
1704
1704
|
const v = Math.max(a * 0.05, 20);
|
|
1705
|
-
|
|
1705
|
+
S = Math.max(v, f);
|
|
1706
1706
|
}
|
|
1707
|
-
return { height:
|
|
1707
|
+
return { height: S };
|
|
1708
1708
|
}
|
|
1709
1709
|
/**
|
|
1710
1710
|
* Utility: Clamp a value between min and max
|
|
@@ -1713,75 +1713,109 @@ class ge {
|
|
|
1713
1713
|
return Math.max(e, Math.min(i, t));
|
|
1714
1714
|
}
|
|
1715
1715
|
}
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
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
|
+
var I = /* @__PURE__ */ ((o) => (o.IDLE = "idle", o.FOCUSING = "focusing", o.FOCUSED = "focused", o.UNFOCUSING = "unfocusing", o.CROSS_ANIMATING = "cross_animating", o))(I || {});
|
|
1751
|
+
function pe(o) {
|
|
1752
|
+
return o in pt;
|
|
1719
1753
|
}
|
|
1720
|
-
function
|
|
1721
|
-
return
|
|
1754
|
+
function be(o) {
|
|
1755
|
+
return o ? pe(o) ? pt[o] : o : pt.md;
|
|
1722
1756
|
}
|
|
1723
|
-
function
|
|
1724
|
-
if (!
|
|
1757
|
+
function ye(o) {
|
|
1758
|
+
if (!o) return "";
|
|
1725
1759
|
const t = [];
|
|
1726
|
-
if (
|
|
1727
|
-
if (typeof
|
|
1728
|
-
t.push(`drop-shadow(${
|
|
1760
|
+
if (o.grayscale !== void 0 && t.push(`grayscale(${o.grayscale})`), o.blur !== void 0 && t.push(`blur(${o.blur}px)`), o.brightness !== void 0 && t.push(`brightness(${o.brightness})`), o.contrast !== void 0 && t.push(`contrast(${o.contrast})`), o.saturate !== void 0 && t.push(`saturate(${o.saturate})`), o.opacity !== void 0 && t.push(`opacity(${o.opacity})`), o.sepia !== void 0 && t.push(`sepia(${o.sepia})`), o.hueRotate !== void 0 && t.push(`hue-rotate(${o.hueRotate}deg)`), o.invert !== void 0 && t.push(`invert(${o.invert})`), o.dropShadow !== void 0)
|
|
1761
|
+
if (typeof o.dropShadow == "string")
|
|
1762
|
+
t.push(`drop-shadow(${o.dropShadow})`);
|
|
1729
1763
|
else {
|
|
1730
|
-
const e =
|
|
1764
|
+
const e = o.dropShadow;
|
|
1731
1765
|
t.push(`drop-shadow(${e.x}px ${e.y}px ${e.blur}px ${e.color})`);
|
|
1732
1766
|
}
|
|
1733
1767
|
return t.join(" ");
|
|
1734
1768
|
}
|
|
1735
|
-
function
|
|
1736
|
-
if (!
|
|
1769
|
+
function tt(o) {
|
|
1770
|
+
if (!o || o.style === "none" || o.width === 0)
|
|
1737
1771
|
return "none";
|
|
1738
|
-
const t =
|
|
1772
|
+
const t = o.width ?? 0, e = o.style ?? "solid", i = o.color ?? "#000000";
|
|
1739
1773
|
return `${t}px ${e} ${i}`;
|
|
1740
1774
|
}
|
|
1741
|
-
function
|
|
1742
|
-
if (!
|
|
1775
|
+
function rt(o) {
|
|
1776
|
+
if (!o) return {};
|
|
1743
1777
|
const t = {};
|
|
1744
|
-
if (
|
|
1745
|
-
const s =
|
|
1746
|
-
|
|
1747
|
-
} else
|
|
1748
|
-
if (
|
|
1749
|
-
const s =
|
|
1750
|
-
t.borderTop =
|
|
1751
|
-
} else
|
|
1752
|
-
|
|
1753
|
-
const
|
|
1754
|
-
if (t.filter =
|
|
1755
|
-
const s =
|
|
1756
|
-
t.outline = `${s}px ${r} ${a}`,
|
|
1757
|
-
}
|
|
1758
|
-
return
|
|
1778
|
+
if (o.borderRadiusTopLeft !== void 0 || o.borderRadiusTopRight !== void 0 || o.borderRadiusBottomRight !== void 0 || o.borderRadiusBottomLeft !== void 0) {
|
|
1779
|
+
const s = o.border?.radius ?? 0;
|
|
1780
|
+
o.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${o.borderRadiusTopLeft}px` : s && (t.borderTopLeftRadius = `${s}px`), o.borderRadiusTopRight !== void 0 ? t.borderTopRightRadius = `${o.borderRadiusTopRight}px` : s && (t.borderTopRightRadius = `${s}px`), o.borderRadiusBottomRight !== void 0 ? t.borderBottomRightRadius = `${o.borderRadiusBottomRight}px` : s && (t.borderBottomRightRadius = `${s}px`), o.borderRadiusBottomLeft !== void 0 ? t.borderBottomLeftRadius = `${o.borderRadiusBottomLeft}px` : s && (t.borderBottomLeftRadius = `${s}px`);
|
|
1781
|
+
} else o.border?.radius !== void 0 && (t.borderRadius = `${o.border.radius}px`);
|
|
1782
|
+
if (o.borderTop || o.borderRight || o.borderBottom || o.borderLeft) {
|
|
1783
|
+
const s = o.border || {}, r = { ...s, ...o.borderTop }, a = { ...s, ...o.borderRight }, h = { ...s, ...o.borderBottom }, c = { ...s, ...o.borderLeft };
|
|
1784
|
+
t.borderTop = tt(r), t.borderRight = tt(a), t.borderBottom = tt(h), t.borderLeft = tt(c);
|
|
1785
|
+
} else o.border && (t.border = tt(o.border));
|
|
1786
|
+
o.shadow !== void 0 && (t.boxShadow = be(o.shadow));
|
|
1787
|
+
const n = ye(o.filter);
|
|
1788
|
+
if (t.filter = n || "none", o.opacity !== void 0 && (t.opacity = String(o.opacity)), o.cursor !== void 0 && (t.cursor = o.cursor), o.outline && o.outline.style !== "none" && (o.outline.width ?? 0) > 0) {
|
|
1789
|
+
const s = o.outline.width ?? 0, r = o.outline.style ?? "solid", a = o.outline.color ?? "#000000";
|
|
1790
|
+
t.outline = `${s}px ${r} ${a}`, o.outline.offset !== void 0 && (t.outlineOffset = `${o.outline.offset}px`);
|
|
1791
|
+
}
|
|
1792
|
+
return o.objectFit !== void 0 && (t.objectFit = o.objectFit), o.aspectRatio !== void 0 && (t.aspectRatio = o.aspectRatio), t;
|
|
1759
1793
|
}
|
|
1760
|
-
function
|
|
1761
|
-
t.borderRadius !== void 0 && (
|
|
1794
|
+
function it(o, t) {
|
|
1795
|
+
t.borderRadius !== void 0 && (o.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (o.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (o.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (o.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (o.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (o.style.border = t.border), t.borderTop !== void 0 && (o.style.borderTop = t.borderTop), t.borderRight !== void 0 && (o.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (o.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (o.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (o.style.boxShadow = t.boxShadow), t.filter !== void 0 && (o.style.filter = t.filter), t.opacity !== void 0 && (o.style.opacity = t.opacity), t.cursor !== void 0 && (o.style.cursor = t.cursor), t.outline !== void 0 && (o.style.outline = t.outline), t.outlineOffset !== void 0 && (o.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (o.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (o.style.aspectRatio = t.aspectRatio);
|
|
1762
1796
|
}
|
|
1763
|
-
function
|
|
1764
|
-
return
|
|
1797
|
+
function zt(o) {
|
|
1798
|
+
return o ? Array.isArray(o) ? o.join(" ") : o : "";
|
|
1765
1799
|
}
|
|
1766
|
-
function
|
|
1767
|
-
const e =
|
|
1800
|
+
function nt(o, t) {
|
|
1801
|
+
const e = zt(t);
|
|
1768
1802
|
e && e.split(" ").forEach((i) => {
|
|
1769
|
-
i.trim() &&
|
|
1803
|
+
i.trim() && o.classList.add(i.trim());
|
|
1770
1804
|
});
|
|
1771
1805
|
}
|
|
1772
|
-
function
|
|
1773
|
-
const e =
|
|
1806
|
+
function Ft(o, t) {
|
|
1807
|
+
const e = zt(t);
|
|
1774
1808
|
e && e.split(" ").forEach((i) => {
|
|
1775
|
-
i.trim() &&
|
|
1809
|
+
i.trim() && o.classList.remove(i.trim());
|
|
1776
1810
|
});
|
|
1777
1811
|
}
|
|
1778
|
-
const
|
|
1812
|
+
const Tt = {
|
|
1779
1813
|
UNFOCUSING: 999,
|
|
1780
1814
|
FOCUSING: 1e3
|
|
1781
1815
|
};
|
|
1782
|
-
class
|
|
1816
|
+
class ve {
|
|
1783
1817
|
constructor(t, e, i) {
|
|
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 =
|
|
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 = rt(i?.default), this.focusedStyles = rt(i?.focused), this.defaultClassName = i?.default?.className, this.focusedClassName = i?.focused?.className;
|
|
1785
1819
|
}
|
|
1786
1820
|
/**
|
|
1787
1821
|
* Get current state machine state
|
|
@@ -1806,9 +1840,9 @@ class be {
|
|
|
1806
1840
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
1807
1841
|
*/
|
|
1808
1842
|
calculateFocusDimensions(t, e, i) {
|
|
1809
|
-
const
|
|
1843
|
+
const n = this.normalizeScalePercent(this.config.scalePercent), s = i.height * n, r = t / e;
|
|
1810
1844
|
let a = s, h = a * r;
|
|
1811
|
-
const c = i.width *
|
|
1845
|
+
const c = i.width * n;
|
|
1812
1846
|
return h > c && (h = c, a = h / r), { width: h, height: a };
|
|
1813
1847
|
}
|
|
1814
1848
|
/**
|
|
@@ -1816,7 +1850,7 @@ class be {
|
|
|
1816
1850
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
1817
1851
|
*/
|
|
1818
1852
|
calculateFocusTransform(t, e) {
|
|
1819
|
-
const i = t.width / 2,
|
|
1853
|
+
const i = t.width / 2, n = t.height / 2, s = i - e.x, r = n - e.y;
|
|
1820
1854
|
return {
|
|
1821
1855
|
x: s,
|
|
1822
1856
|
y: r,
|
|
@@ -1831,8 +1865,8 @@ class be {
|
|
|
1831
1865
|
buildDimensionZoomTransform(t) {
|
|
1832
1866
|
const e = ["translate(-50%, -50%)"];
|
|
1833
1867
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
1834
|
-
const i = t.x ?? 0,
|
|
1835
|
-
e.push(`translate(${i}px, ${
|
|
1868
|
+
const i = t.x ?? 0, n = t.y ?? 0;
|
|
1869
|
+
e.push(`translate(${i}px, ${n}px)`);
|
|
1836
1870
|
}
|
|
1837
1871
|
return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), e.join(" ");
|
|
1838
1872
|
}
|
|
@@ -1840,13 +1874,13 @@ class be {
|
|
|
1840
1874
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
1841
1875
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
1842
1876
|
*/
|
|
1843
|
-
animateWithDimensions(t, e, i,
|
|
1877
|
+
animateWithDimensions(t, e, i, n, s, r, a, h) {
|
|
1844
1878
|
const c = this.buildDimensionZoomTransform(e), u = this.buildDimensionZoomTransform(i);
|
|
1845
1879
|
return t.style.transition = "none", t.animate(
|
|
1846
1880
|
[
|
|
1847
1881
|
{
|
|
1848
1882
|
transform: c,
|
|
1849
|
-
width: `${
|
|
1883
|
+
width: `${n}px`,
|
|
1850
1884
|
height: `${s}px`
|
|
1851
1885
|
},
|
|
1852
1886
|
{
|
|
@@ -1866,13 +1900,13 @@ class be {
|
|
|
1866
1900
|
* Apply focused styling to an element
|
|
1867
1901
|
*/
|
|
1868
1902
|
applyFocusedStyling(t, e) {
|
|
1869
|
-
t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"),
|
|
1903
|
+
t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"), it(t, this.focusedStyles), nt(t, this.focusedClassName);
|
|
1870
1904
|
}
|
|
1871
1905
|
/**
|
|
1872
1906
|
* Remove focused styling from an element
|
|
1873
1907
|
*/
|
|
1874
1908
|
removeFocusedStyling(t, e) {
|
|
1875
|
-
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"),
|
|
1909
|
+
t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), Ft(t, this.focusedClassName), it(t, this.defaultStyles), nt(t, this.defaultClassName);
|
|
1876
1910
|
}
|
|
1877
1911
|
/**
|
|
1878
1912
|
* Start focus animation for an image using dimension-based zoom
|
|
@@ -1880,21 +1914,21 @@ class be {
|
|
|
1880
1914
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
1881
1915
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1882
1916
|
*/
|
|
1883
|
-
startFocusAnimation(t, e, i,
|
|
1917
|
+
startFocusAnimation(t, e, i, n, s) {
|
|
1884
1918
|
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,
|
|
1886
|
-
const l =
|
|
1919
|
+
this.applyFocusedStyling(t, Tt.FOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1920
|
+
const l = n ?? {
|
|
1887
1921
|
x: 0,
|
|
1888
1922
|
y: 0,
|
|
1889
1923
|
rotation: i.rotation,
|
|
1890
1924
|
scale: 1
|
|
1891
1925
|
// No scale - using dimensions
|
|
1892
|
-
}, d = s?.width ?? a,
|
|
1926
|
+
}, d = s?.width ?? a, m = s?.height ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
|
|
1893
1927
|
t,
|
|
1894
1928
|
l,
|
|
1895
1929
|
u,
|
|
1896
1930
|
d,
|
|
1897
|
-
|
|
1931
|
+
m,
|
|
1898
1932
|
c.width,
|
|
1899
1933
|
c.height,
|
|
1900
1934
|
b
|
|
@@ -1930,9 +1964,9 @@ class be {
|
|
|
1930
1964
|
* Animates back to original dimensions for consistent behavior
|
|
1931
1965
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
1932
1966
|
*/
|
|
1933
|
-
startUnfocusAnimation(t, e, i,
|
|
1934
|
-
t.style.zIndex = String(
|
|
1935
|
-
const s = i ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r =
|
|
1967
|
+
startUnfocusAnimation(t, e, i, n) {
|
|
1968
|
+
t.style.zIndex = String(Tt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
1969
|
+
const s = i ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, a = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, h = {
|
|
1936
1970
|
x: 0,
|
|
1937
1971
|
y: 0,
|
|
1938
1972
|
rotation: e.rotation,
|
|
@@ -1947,7 +1981,7 @@ class be {
|
|
|
1947
1981
|
c,
|
|
1948
1982
|
u,
|
|
1949
1983
|
l
|
|
1950
|
-
),
|
|
1984
|
+
), m = {
|
|
1951
1985
|
id: `unfocus-${Date.now()}`,
|
|
1952
1986
|
element: t,
|
|
1953
1987
|
animation: d,
|
|
@@ -1959,12 +1993,33 @@ class be {
|
|
|
1959
1993
|
return {
|
|
1960
1994
|
element: t,
|
|
1961
1995
|
originalState: e,
|
|
1962
|
-
animationHandle:
|
|
1996
|
+
animationHandle: m,
|
|
1963
1997
|
direction: "out",
|
|
1964
1998
|
originalWidth: c,
|
|
1965
1999
|
originalHeight: u
|
|
1966
2000
|
};
|
|
1967
2001
|
}
|
|
2002
|
+
/**
|
|
2003
|
+
* Capture the current visual state of an element mid-animation, BEFORE cancelling.
|
|
2004
|
+
*
|
|
2005
|
+
* The computed matrix.e/f include the -50%/-50% centering offset resolved to pixels.
|
|
2006
|
+
* buildDimensionZoomTransform prepends its own translate(-50%,-50%), so passing raw
|
|
2007
|
+
* matrix.e/f doubles the centering and produces the wrong starting position.
|
|
2008
|
+
*
|
|
2009
|
+
* This method extracts the PURE positional offset (pureX = matrix.e + 0.5*midWidth)
|
|
2010
|
+
* and commits width/height/transform to inline styles before the animation is cancelled,
|
|
2011
|
+
* preventing any visual snap.
|
|
2012
|
+
*
|
|
2013
|
+
* Must be called while the animation is still running (offsetWidth reflects animated size).
|
|
2014
|
+
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2015
|
+
*/
|
|
2016
|
+
captureMidAnimationState(t) {
|
|
2017
|
+
const e = getComputedStyle(t), i = new DOMMatrix(e.transform), n = t.offsetWidth, s = t.offsetHeight, r = i.e + n * 0.5, a = i.f + s * 0.5, h = Math.atan2(i.b, i.a) * (180 / Math.PI);
|
|
2018
|
+
return t.style.width = `${n}px`, t.style.height = `${s}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${a}px) rotate(${h}deg)`, t.style.transition = "none", {
|
|
2019
|
+
transform: { x: r, y: a, rotation: h, scale: 1 },
|
|
2020
|
+
dimensions: { width: n, height: s }
|
|
2021
|
+
};
|
|
2022
|
+
}
|
|
1968
2023
|
/**
|
|
1969
2024
|
* Handle animation completion
|
|
1970
2025
|
*/
|
|
@@ -1977,10 +2032,10 @@ class be {
|
|
|
1977
2032
|
/**
|
|
1978
2033
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
1979
2034
|
*/
|
|
1980
|
-
resetElementInstantly(t, e, i,
|
|
2035
|
+
resetElementInstantly(t, e, i, n, s) {
|
|
1981
2036
|
this.animationEngine.cancelAllAnimations(t);
|
|
1982
2037
|
const r = ["translate(-50%, -50%)"];
|
|
1983
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2038
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), n !== void 0 && s !== void 0 && (t.style.width = `${n}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, i);
|
|
1984
2039
|
}
|
|
1985
2040
|
/**
|
|
1986
2041
|
* Focus (zoom) an image to center of container
|
|
@@ -1990,28 +2045,19 @@ class be {
|
|
|
1990
2045
|
if (this.currentFocus === t && this.state === I.FOCUSED)
|
|
1991
2046
|
return this.unfocusImage();
|
|
1992
2047
|
if (this.incoming?.element === t && this.state === I.FOCUSING) {
|
|
1993
|
-
const
|
|
1994
|
-
|
|
1995
|
-
y: s.y,
|
|
1996
|
-
rotation: s.rotation,
|
|
1997
|
-
scale: 1
|
|
1998
|
-
// No scale transform - using dimensions
|
|
1999
|
-
}, a = {
|
|
2000
|
-
width: t.offsetWidth,
|
|
2001
|
-
height: t.offsetHeight
|
|
2002
|
-
};
|
|
2003
|
-
this.outgoing = this.startUnfocusAnimation(
|
|
2048
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
|
|
2049
|
+
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2004
2050
|
t,
|
|
2005
2051
|
this.incoming.originalState,
|
|
2006
|
-
|
|
2007
|
-
|
|
2052
|
+
s,
|
|
2053
|
+
r
|
|
2008
2054
|
), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE;
|
|
2009
2055
|
return;
|
|
2010
2056
|
}
|
|
2011
|
-
const
|
|
2057
|
+
const n = ++this.focusGeneration;
|
|
2012
2058
|
switch (this.state) {
|
|
2013
2059
|
case I.IDLE:
|
|
2014
|
-
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2060
|
+
if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2015
2061
|
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2016
2062
|
break;
|
|
2017
2063
|
case I.FOCUSED:
|
|
@@ -2021,7 +2067,7 @@ class be {
|
|
|
2021
2067
|
)), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2022
2068
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2023
2069
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2024
|
-
]), this.focusGeneration !==
|
|
2070
|
+
]), this.focusGeneration !== n)
|
|
2025
2071
|
return;
|
|
2026
2072
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2027
2073
|
break;
|
|
@@ -2032,53 +2078,35 @@ class be {
|
|
|
2032
2078
|
this.focusData?.originalZIndex || "",
|
|
2033
2079
|
this.focusData?.originalWidth,
|
|
2034
2080
|
this.focusData?.originalHeight
|
|
2035
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2081
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== n) return;
|
|
2036
2082
|
this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2037
2083
|
break;
|
|
2038
2084
|
case I.UNFOCUSING:
|
|
2039
2085
|
if (this.state = I.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2040
2086
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2041
2087
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2042
|
-
]), this.focusGeneration !==
|
|
2088
|
+
]), this.focusGeneration !== n) return;
|
|
2043
2089
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2044
2090
|
break;
|
|
2045
2091
|
case I.CROSS_ANIMATING:
|
|
2046
2092
|
if (this.incoming?.element === t)
|
|
2047
2093
|
return;
|
|
2048
2094
|
if (this.outgoing?.element === t) {
|
|
2049
|
-
const
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
scale: 1
|
|
2054
|
-
// No scale - using dimensions
|
|
2055
|
-
}, a = {
|
|
2056
|
-
width: t.offsetWidth,
|
|
2057
|
-
height: t.offsetHeight
|
|
2058
|
-
};
|
|
2059
|
-
if (this.incoming) {
|
|
2060
|
-
const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), c = {
|
|
2061
|
-
x: h.x,
|
|
2062
|
-
y: h.y,
|
|
2063
|
-
rotation: h.rotation,
|
|
2064
|
-
scale: 1
|
|
2065
|
-
// No scale - using dimensions
|
|
2066
|
-
}, u = {
|
|
2067
|
-
width: this.incoming.element.offsetWidth,
|
|
2068
|
-
height: this.incoming.element.offsetHeight
|
|
2069
|
-
};
|
|
2070
|
-
this.outgoing = this.startUnfocusAnimation(
|
|
2095
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
|
|
2096
|
+
if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
|
|
2097
|
+
const { transform: a, dimensions: h } = this.captureMidAnimationState(this.incoming.element);
|
|
2098
|
+
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2071
2099
|
this.incoming.element,
|
|
2072
2100
|
this.incoming.originalState,
|
|
2073
|
-
|
|
2074
|
-
|
|
2101
|
+
a,
|
|
2102
|
+
h
|
|
2075
2103
|
);
|
|
2076
2104
|
} else
|
|
2077
2105
|
this.outgoing = null;
|
|
2078
|
-
if (this.incoming = this.startFocusAnimation(t, e, i,
|
|
2106
|
+
if (this.incoming = this.startFocusAnimation(t, e, i, s, r), await Promise.all([
|
|
2079
2107
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2080
2108
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2081
|
-
]), this.focusGeneration !==
|
|
2109
|
+
]), this.focusGeneration !== n) return;
|
|
2082
2110
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2083
2111
|
return;
|
|
2084
2112
|
}
|
|
@@ -2089,27 +2117,18 @@ class be {
|
|
|
2089
2117
|
this.outgoing.originalWidth,
|
|
2090
2118
|
this.outgoing.originalHeight
|
|
2091
2119
|
), this.outgoing = null), this.incoming) {
|
|
2092
|
-
const s = this.
|
|
2093
|
-
|
|
2094
|
-
y: s.y,
|
|
2095
|
-
rotation: s.rotation,
|
|
2096
|
-
scale: 1
|
|
2097
|
-
// No scale - using dimensions
|
|
2098
|
-
}, a = {
|
|
2099
|
-
width: this.incoming.element.offsetWidth,
|
|
2100
|
-
height: this.incoming.element.offsetHeight
|
|
2101
|
-
};
|
|
2102
|
-
this.outgoing = this.startUnfocusAnimation(
|
|
2120
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2121
|
+
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2103
2122
|
this.incoming.element,
|
|
2104
2123
|
this.incoming.originalState,
|
|
2105
|
-
|
|
2106
|
-
|
|
2124
|
+
s,
|
|
2125
|
+
r
|
|
2107
2126
|
);
|
|
2108
2127
|
}
|
|
2109
2128
|
if (this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
|
|
2110
2129
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2111
2130
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2112
|
-
]), this.focusGeneration !==
|
|
2131
|
+
]), this.focusGeneration !== n) return;
|
|
2113
2132
|
this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
|
|
2114
2133
|
break;
|
|
2115
2134
|
}
|
|
@@ -2118,55 +2137,41 @@ class be {
|
|
|
2118
2137
|
* Unfocus current image, returning it to original position
|
|
2119
2138
|
*/
|
|
2120
2139
|
async unfocusImage() {
|
|
2140
|
+
if (this.state === I.UNFOCUSING)
|
|
2141
|
+
return;
|
|
2121
2142
|
const t = ++this.focusGeneration;
|
|
2122
2143
|
if (!this.currentFocus || !this.focusData) {
|
|
2123
2144
|
if (this.incoming && this.state === I.FOCUSING) {
|
|
2124
|
-
const s = this.
|
|
2125
|
-
|
|
2126
|
-
y: s.y,
|
|
2127
|
-
rotation: s.rotation,
|
|
2128
|
-
scale: 1
|
|
2129
|
-
// No scale - using dimensions
|
|
2130
|
-
}, a = {
|
|
2131
|
-
width: this.incoming.element.offsetWidth,
|
|
2132
|
-
height: this.incoming.element.offsetHeight
|
|
2133
|
-
};
|
|
2134
|
-
if (this.outgoing = this.startUnfocusAnimation(
|
|
2145
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2146
|
+
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2135
2147
|
this.incoming.element,
|
|
2136
2148
|
this.incoming.originalState,
|
|
2137
|
-
|
|
2138
|
-
|
|
2149
|
+
s,
|
|
2150
|
+
r
|
|
2139
2151
|
), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2140
2152
|
this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = I.IDLE;
|
|
2141
2153
|
}
|
|
2142
2154
|
return;
|
|
2143
2155
|
}
|
|
2144
2156
|
if (this.state === I.CROSS_ANIMATING && this.incoming) {
|
|
2145
|
-
const s = this.
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
rotation: s.rotation,
|
|
2149
|
-
scale: 1
|
|
2150
|
-
// No scale - using dimensions
|
|
2151
|
-
}, a = {
|
|
2152
|
-
width: this.incoming.element.offsetWidth,
|
|
2153
|
-
height: this.incoming.element.offsetHeight
|
|
2154
|
-
}, h = this.startUnfocusAnimation(
|
|
2157
|
+
const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2158
|
+
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2159
|
+
const a = this.startUnfocusAnimation(
|
|
2155
2160
|
this.incoming.element,
|
|
2156
2161
|
this.incoming.originalState,
|
|
2157
|
-
|
|
2158
|
-
|
|
2162
|
+
s,
|
|
2163
|
+
r
|
|
2159
2164
|
);
|
|
2160
2165
|
if (await Promise.all([
|
|
2161
2166
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2162
|
-
this.waitForAnimation(
|
|
2167
|
+
this.waitForAnimation(a.animationHandle)
|
|
2163
2168
|
]), this.focusGeneration !== t) return;
|
|
2164
|
-
this.outgoing && this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.removeFocusedStyling(
|
|
2169
|
+
this.outgoing && this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.removeFocusedStyling(a.element, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE;
|
|
2165
2170
|
return;
|
|
2166
2171
|
}
|
|
2167
2172
|
this.state = I.UNFOCUSING;
|
|
2168
|
-
const e = this.currentFocus, i = this.focusData.originalState,
|
|
2169
|
-
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e,
|
|
2173
|
+
const e = this.currentFocus, i = this.focusData.originalState, n = this.focusData.originalZIndex;
|
|
2174
|
+
this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, n), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE);
|
|
2170
2175
|
}
|
|
2171
2176
|
/**
|
|
2172
2177
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2206,8 +2211,8 @@ class be {
|
|
|
2206
2211
|
*/
|
|
2207
2212
|
setDragOffset(t) {
|
|
2208
2213
|
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2209
|
-
const e = this.currentFocus, i = this.focusData.focusTransform,
|
|
2210
|
-
|
|
2214
|
+
const e = this.currentFocus, i = this.focusData.focusTransform, n = ["translate(-50%, -50%)"], s = (i.x ?? 0) + t, r = i.y ?? 0;
|
|
2215
|
+
n.push(`translate(${s}px, ${r}px)`), i.rotation !== void 0 && n.push(`rotate(${i.rotation}deg)`), e.style.transition = "none", e.style.transform = n.join(" ");
|
|
2211
2216
|
}
|
|
2212
2217
|
/**
|
|
2213
2218
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2216,8 +2221,8 @@ class be {
|
|
|
2216
2221
|
*/
|
|
2217
2222
|
clearDragOffset(t, e = 150) {
|
|
2218
2223
|
if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
|
|
2219
|
-
const i = this.currentFocus,
|
|
2220
|
-
s.push(`translate(${r}px, ${a}px)`),
|
|
2224
|
+
const i = this.currentFocus, n = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = n.x ?? 0, a = n.y ?? 0;
|
|
2225
|
+
s.push(`translate(${r}px, ${a}px)`), n.rotation !== void 0 && s.push(`rotate(${n.rotation}deg)`);
|
|
2221
2226
|
const h = s.join(" ");
|
|
2222
2227
|
t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform = h, setTimeout(() => {
|
|
2223
2228
|
this.currentFocus === i && (i.style.transition = "none");
|
|
@@ -2248,7 +2253,7 @@ class be {
|
|
|
2248
2253
|
), this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2249
2254
|
}
|
|
2250
2255
|
}
|
|
2251
|
-
const
|
|
2256
|
+
const we = 50, xe = 0.5, Se = 20, Ee = 0.3, Ie = 150, Ae = 30, ct = class ct {
|
|
2252
2257
|
constructor(t, e) {
|
|
2253
2258
|
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);
|
|
2254
2259
|
}
|
|
@@ -2275,7 +2280,7 @@ const ye = 50, ve = 0.5, we = 20, xe = 0.3, Ee = 150, Se = 30, at = class at {
|
|
|
2275
2280
|
* Used to prevent click-outside from unfocusing immediately after touch
|
|
2276
2281
|
*/
|
|
2277
2282
|
hadRecentTouch() {
|
|
2278
|
-
return Date.now() - this.recentTouchTimestamp <
|
|
2283
|
+
return Date.now() - this.recentTouchTimestamp < ct.TOUCH_CLICK_DELAY;
|
|
2279
2284
|
}
|
|
2280
2285
|
handleTouchStart(t) {
|
|
2281
2286
|
if (t.touches.length !== 1) return;
|
|
@@ -2292,472 +2297,532 @@ const ye = 50, ve = 0.5, we = 20, xe = 0.3, Ee = 150, Se = 30, at = class at {
|
|
|
2292
2297
|
}
|
|
2293
2298
|
handleTouchMove(t) {
|
|
2294
2299
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2295
|
-
const e = t.touches[0], i = e.clientX - this.touchState.startX,
|
|
2296
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i +
|
|
2297
|
-
const a = Math.atan2(Math.abs(
|
|
2298
|
-
this.touchState.isHorizontalSwipe = a <=
|
|
2300
|
+
const e = t.touches[0], i = e.clientX - this.touchState.startX, n = e.clientY - this.touchState.startY;
|
|
2301
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + n * n) > 10) {
|
|
2302
|
+
const a = Math.atan2(Math.abs(n), Math.abs(i)) * (180 / Math.PI);
|
|
2303
|
+
this.touchState.isHorizontalSwipe = a <= Ae;
|
|
2299
2304
|
}
|
|
2300
2305
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
2301
2306
|
t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
|
|
2302
|
-
const s = i *
|
|
2307
|
+
const s = i * Ee;
|
|
2303
2308
|
this.callbacks.onDragOffset(s);
|
|
2304
2309
|
}
|
|
2305
2310
|
}
|
|
2306
2311
|
handleTouchEnd(t) {
|
|
2307
2312
|
if (!this.touchState) return;
|
|
2308
2313
|
this.recentTouchTimestamp = Date.now();
|
|
2309
|
-
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime,
|
|
2314
|
+
const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, n = Math.abs(e) / i, s = Math.abs(e);
|
|
2310
2315
|
let r = !1;
|
|
2311
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >=
|
|
2316
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= we || n >= xe && s >= Se) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2312
2317
|
}
|
|
2313
2318
|
handleTouchCancel(t) {
|
|
2314
2319
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2315
2320
|
}
|
|
2316
2321
|
};
|
|
2317
|
-
|
|
2318
|
-
let
|
|
2319
|
-
class
|
|
2320
|
-
constructor(t) {
|
|
2321
|
-
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)
|
|
2322
|
-
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
2323
|
-
}
|
|
2322
|
+
ct.TOUCH_CLICK_DELAY = 300;
|
|
2323
|
+
let bt = ct;
|
|
2324
|
+
class Te {
|
|
2324
2325
|
/**
|
|
2325
|
-
*
|
|
2326
|
-
* @param
|
|
2326
|
+
* Create a new ImageFilter
|
|
2327
|
+
* @param extensions - Array of allowed file extensions (without dots)
|
|
2328
|
+
* Defaults to common image formats if not provided
|
|
2327
2329
|
*/
|
|
2328
|
-
|
|
2329
|
-
this.
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
const i = await this.loadFiles(e.files, t);
|
|
2338
|
-
this._discoveredUrls.push(...i);
|
|
2339
|
-
}
|
|
2340
|
-
this._prepared = !0;
|
|
2330
|
+
constructor(t) {
|
|
2331
|
+
this.allowedExtensions = t || [
|
|
2332
|
+
"jpg",
|
|
2333
|
+
"jpeg",
|
|
2334
|
+
"png",
|
|
2335
|
+
"gif",
|
|
2336
|
+
"webp",
|
|
2337
|
+
"bmp"
|
|
2338
|
+
];
|
|
2341
2339
|
}
|
|
2342
2340
|
/**
|
|
2343
|
-
*
|
|
2344
|
-
* @
|
|
2341
|
+
* Check if a filename has an allowed extension
|
|
2342
|
+
* @param filename - The filename to check (can include path or query string)
|
|
2343
|
+
* @returns True if the file extension is allowed
|
|
2345
2344
|
*/
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
return this._discoveredUrls.length;
|
|
2345
|
+
isAllowed(t) {
|
|
2346
|
+
const i = t.split("?")[0].split(".").pop()?.toLowerCase();
|
|
2347
|
+
return i ? this.allowedExtensions.includes(i) : !1;
|
|
2350
2348
|
}
|
|
2351
2349
|
/**
|
|
2352
|
-
* Get the
|
|
2353
|
-
* @
|
|
2350
|
+
* Get the list of allowed extensions
|
|
2351
|
+
* @returns Array of allowed extensions
|
|
2354
2352
|
*/
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
throw new Error("GoogleDriveLoader.imageURLs() called before prepare()");
|
|
2358
|
-
return [...this._discoveredUrls];
|
|
2353
|
+
getAllowedExtensions() {
|
|
2354
|
+
return [...this.allowedExtensions];
|
|
2359
2355
|
}
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2356
|
+
// Future expansion methods:
|
|
2357
|
+
// isAllowedSize(sizeBytes: number): boolean
|
|
2358
|
+
// isAllowedDate(date: Date): boolean
|
|
2359
|
+
// isAllowedDimensions(width: number, height: number): boolean
|
|
2360
|
+
}
|
|
2361
|
+
const Ce = `
|
|
2362
|
+
.fbn-ic-gallery {
|
|
2363
|
+
position: relative;
|
|
2364
|
+
width: 100%;
|
|
2365
|
+
height: 100%;
|
|
2366
|
+
overflow: hidden;
|
|
2367
|
+
perspective: 1000px;
|
|
2368
|
+
}
|
|
2369
|
+
|
|
2370
|
+
.fbn-ic-image {
|
|
2371
|
+
position: absolute;
|
|
2372
|
+
cursor: pointer;
|
|
2373
|
+
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2374
|
+
box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2375
|
+
filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2376
|
+
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2377
|
+
border 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2378
|
+
outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2379
|
+
z-index 0s 0.6s;
|
|
2380
|
+
will-change: transform;
|
|
2381
|
+
user-select: none;
|
|
2382
|
+
backface-visibility: hidden;
|
|
2383
|
+
-webkit-backface-visibility: hidden;
|
|
2384
|
+
}
|
|
2385
|
+
|
|
2386
|
+
.fbn-ic-image.fbn-ic-focused {
|
|
2387
|
+
z-index: 1000;
|
|
2388
|
+
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2389
|
+
box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2390
|
+
filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2391
|
+
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2392
|
+
border 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2393
|
+
outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2394
|
+
z-index 0s 0s;
|
|
2395
|
+
will-change: auto;
|
|
2396
|
+
}
|
|
2397
|
+
|
|
2398
|
+
.fbn-ic-counter {
|
|
2399
|
+
position: fixed;
|
|
2400
|
+
bottom: 24px;
|
|
2401
|
+
left: 50%;
|
|
2402
|
+
transform: translateX(-50%);
|
|
2403
|
+
z-index: 10001;
|
|
2404
|
+
pointer-events: none;
|
|
2405
|
+
}
|
|
2406
|
+
|
|
2407
|
+
.fbn-ic-hidden {
|
|
2408
|
+
display: none !important;
|
|
2409
|
+
}
|
|
2410
|
+
`;
|
|
2411
|
+
function Re() {
|
|
2412
|
+
if (typeof document > "u") return;
|
|
2413
|
+
const o = "fbn-ic-functional-styles";
|
|
2414
|
+
if (document.getElementById(o)) return;
|
|
2415
|
+
const t = document.createElement("style");
|
|
2416
|
+
t.id = o, t.textContent = Ce, document.head.appendChild(t);
|
|
2417
|
+
}
|
|
2418
|
+
class Le {
|
|
2419
|
+
constructor(t = {}) {
|
|
2420
|
+
this.fullConfig = Gt(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
|
+
layout: this.fullConfig.layout,
|
|
2422
|
+
image: this.fullConfig.image
|
|
2423
|
+
}), this.zoomEngine = new ve(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = rt(this.fullConfig.styling?.default), this.hoverStyles = rt(this.fullConfig.styling?.hover), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
2424
|
+
const e = this.fullConfig.animation.entry || y.animation.entry;
|
|
2425
|
+
this.entryAnimationEngine = new oe(
|
|
2426
|
+
e,
|
|
2427
|
+
this.fullConfig.layout.algorithm
|
|
2428
|
+
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2365
2429
|
}
|
|
2366
2430
|
/**
|
|
2367
|
-
*
|
|
2368
|
-
* @param folderUrl - Google Drive folder URL
|
|
2369
|
-
* @returns Folder ID or null if invalid
|
|
2431
|
+
* Create image filter based on shared loader config
|
|
2370
2432
|
*/
|
|
2371
|
-
|
|
2372
|
-
const
|
|
2373
|
-
|
|
2374
|
-
// Standard format
|
|
2375
|
-
/id=([a-zA-Z0-9_-]+)/
|
|
2376
|
-
// Alternative format
|
|
2377
|
-
];
|
|
2378
|
-
for (const i of e) {
|
|
2379
|
-
const o = t.match(i);
|
|
2380
|
-
if (o && o[1])
|
|
2381
|
-
return o[1];
|
|
2382
|
-
}
|
|
2383
|
-
return null;
|
|
2433
|
+
createImageFilter() {
|
|
2434
|
+
const t = this.fullConfig.config.loaders?.allowedExtensions;
|
|
2435
|
+
return new Te(t);
|
|
2384
2436
|
}
|
|
2385
2437
|
/**
|
|
2386
|
-
*
|
|
2387
|
-
*
|
|
2388
|
-
*
|
|
2389
|
-
* @param recursive - Whether to include images from subfolders
|
|
2390
|
-
* @returns Promise resolving to array of image URLs
|
|
2438
|
+
* Create appropriate image loader based on config
|
|
2439
|
+
* Processes loaders array, merges shared config, wraps in CompositeLoader if needed
|
|
2440
|
+
* Uses dynamic imports to trigger loader registration and enable tree-shaking
|
|
2391
2441
|
*/
|
|
2392
|
-
async
|
|
2393
|
-
const
|
|
2394
|
-
if (!
|
|
2395
|
-
throw new Error("
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2442
|
+
async createLoader() {
|
|
2443
|
+
const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
|
|
2444
|
+
if (!t || t.length === 0)
|
|
2445
|
+
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
2446
|
+
const i = await Promise.all(
|
|
2447
|
+
t.map((s) => this.createLoaderFromEntry(s, e))
|
|
2448
|
+
);
|
|
2449
|
+
if (i.length === 1)
|
|
2450
|
+
return i[0];
|
|
2451
|
+
await import("@frybynite/image-cloud/loaders/composite");
|
|
2452
|
+
const n = et.getLoader("composite");
|
|
2453
|
+
return new n({
|
|
2454
|
+
loaders: i,
|
|
2455
|
+
debugLogging: this.fullConfig.config.debug?.loaders
|
|
2456
|
+
});
|
|
2403
2457
|
}
|
|
2404
2458
|
/**
|
|
2405
|
-
*
|
|
2406
|
-
*
|
|
2407
|
-
* @param filter - Filter to apply to discovered images
|
|
2408
|
-
* @returns Promise resolving to array of image URLs
|
|
2459
|
+
* Create a single loader from a LoaderEntry, merging shared config
|
|
2460
|
+
* Uses dynamic imports to trigger loader registration and enable tree-shaking
|
|
2409
2461
|
*/
|
|
2410
|
-
async
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2462
|
+
async createLoaderFromEntry(t, e) {
|
|
2463
|
+
if ("static" in t) {
|
|
2464
|
+
await import("@frybynite/image-cloud/loaders/static");
|
|
2465
|
+
const i = et.getLoader("static"), n = t.static, s = {
|
|
2466
|
+
...n,
|
|
2467
|
+
validateUrls: n.validateUrls ?? e.validateUrls,
|
|
2468
|
+
validationTimeout: n.validationTimeout ?? e.validationTimeout,
|
|
2469
|
+
validationMethod: n.validationMethod ?? e.validationMethod,
|
|
2470
|
+
allowedExtensions: n.allowedExtensions ?? e.allowedExtensions,
|
|
2471
|
+
debugLogging: n.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2472
|
+
};
|
|
2473
|
+
return new i(s);
|
|
2474
|
+
} else if ("googleDrive" in t) {
|
|
2475
|
+
await import("@frybynite/image-cloud/loaders/google-drive");
|
|
2476
|
+
const i = et.getLoader("google-drive"), n = t.googleDrive, s = {
|
|
2477
|
+
...n,
|
|
2478
|
+
allowedExtensions: n.allowedExtensions ?? e.allowedExtensions,
|
|
2479
|
+
debugLogging: n.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
2480
|
+
};
|
|
2481
|
+
return new i(s);
|
|
2482
|
+
} else
|
|
2483
|
+
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2420
2484
|
}
|
|
2421
2485
|
/**
|
|
2422
|
-
*
|
|
2423
|
-
* @param fileUrls - Array of Google Drive file URLs or IDs
|
|
2424
|
-
* @param filter - Filter to apply to discovered images
|
|
2425
|
-
* @returns Promise resolving to array of image URLs
|
|
2486
|
+
* Initialize the gallery
|
|
2426
2487
|
*/
|
|
2427
|
-
async
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
if (!
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
const h = await a.json();
|
|
2440
|
-
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})`);
|
|
2441
|
-
} else
|
|
2442
|
-
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2443
|
-
} catch (r) {
|
|
2444
|
-
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2488
|
+
async init() {
|
|
2489
|
+
try {
|
|
2490
|
+
if (Re(), this.containerRef)
|
|
2491
|
+
this.containerEl = this.containerRef;
|
|
2492
|
+
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
2493
|
+
throw new Error(`Container #${this.containerId} not found`);
|
|
2494
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new bt(this.containerEl, {
|
|
2495
|
+
onNext: () => this.navigateToNextImage(),
|
|
2496
|
+
onPrev: () => this.navigateToPreviousImage(),
|
|
2497
|
+
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
2498
|
+
onDragEnd: (t) => {
|
|
2499
|
+
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Ie);
|
|
2445
2500
|
}
|
|
2446
|
-
|
|
2447
|
-
|
|
2501
|
+
}), this.setupUI(), this.setupEventListeners(), this.imageLoader = await this.createLoader(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
2502
|
+
} catch (t) {
|
|
2503
|
+
console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
|
|
2448
2504
|
}
|
|
2449
|
-
return i;
|
|
2450
2505
|
}
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
* @returns File ID or null if invalid
|
|
2455
|
-
*/
|
|
2456
|
-
extractFileId(t) {
|
|
2457
|
-
if (!/[/:.]/.test(t))
|
|
2458
|
-
return t;
|
|
2459
|
-
const e = [
|
|
2460
|
-
/\/file\/d\/([a-zA-Z0-9_-]+)/,
|
|
2461
|
-
// Standard file format
|
|
2462
|
-
/\/open\?id=([a-zA-Z0-9_-]+)/,
|
|
2463
|
-
// Alternative format
|
|
2464
|
-
/id=([a-zA-Z0-9_-]+)/
|
|
2465
|
-
// Generic id parameter
|
|
2466
|
-
];
|
|
2467
|
-
for (const i of e) {
|
|
2468
|
-
const o = t.match(i);
|
|
2469
|
-
if (o && o[1])
|
|
2470
|
-
return o[1];
|
|
2471
|
-
}
|
|
2472
|
-
return null;
|
|
2473
|
-
}
|
|
2474
|
-
/**
|
|
2475
|
-
* Recursively load images from a folder and all its subfolders
|
|
2476
|
-
* @param folderId - Google Drive folder ID
|
|
2477
|
-
* @param filter - Filter to apply to discovered images
|
|
2478
|
-
* @returns Promise resolving to array of image URLs
|
|
2479
|
-
*/
|
|
2480
|
-
async loadImagesRecursively(t, e) {
|
|
2481
|
-
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);
|
|
2482
|
-
if (!a.ok)
|
|
2483
|
-
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2484
|
-
const h = await a.json(), c = h.files.filter(
|
|
2485
|
-
(l) => l.mimeType.startsWith("image/") && e.isAllowed(l.name)
|
|
2486
|
-
), u = h.files.filter(
|
|
2487
|
-
(l) => l.mimeType === "application/vnd.google-apps.folder"
|
|
2488
|
-
);
|
|
2489
|
-
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) => {
|
|
2490
|
-
i.push(`https://lh3.googleusercontent.com/d/${l.id}=s1600`), this.log(`Added file: ${l.name}`);
|
|
2491
|
-
});
|
|
2492
|
-
for (const l of u) {
|
|
2493
|
-
this.log(`Loading images from subfolder: ${l.name}`);
|
|
2494
|
-
const d = await this.loadImagesRecursively(l.id, e);
|
|
2495
|
-
i.push(...d);
|
|
2496
|
-
}
|
|
2497
|
-
return i;
|
|
2506
|
+
setupUI() {
|
|
2507
|
+
const t = this.fullConfig.rendering.ui;
|
|
2508
|
+
t.showLoadingSpinner && (t.loadingElement ? (this.loadingEl = this.resolveElement(t.loadingElement), this.loadingElAutoCreated = !1) : (this.loadingEl = this.createDefaultLoadingElement(), this.loadingElAutoCreated = !0)), t.errorElement ? (this.errorEl = this.resolveElement(t.errorElement), this.errorElAutoCreated = !1) : (this.errorEl = this.createDefaultErrorElement(), this.errorElAutoCreated = !0), t.showImageCounter && (t.counterElement ? (this.counterEl = this.resolveElement(t.counterElement), this.counterElAutoCreated = !1) : (this.counterEl = this.createDefaultCounterElement(), this.counterElAutoCreated = !0));
|
|
2498
2509
|
}
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
* Uses embedded folder view to scrape image IDs
|
|
2502
|
-
* @param folderId - Google Drive folder ID
|
|
2503
|
-
* @param filter - Filter to apply (not used in fallback mode)
|
|
2504
|
-
* @returns Promise resolving to array of image URLs
|
|
2505
|
-
*/
|
|
2506
|
-
async loadImagesDirectly(t, e) {
|
|
2507
|
-
try {
|
|
2508
|
-
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(i, { mode: "cors" });
|
|
2509
|
-
if (!o.ok)
|
|
2510
|
-
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2511
|
-
const s = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2512
|
-
return [...new Set(a.map((u) => u[1]))].map(
|
|
2513
|
-
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2514
|
-
);
|
|
2515
|
-
} catch (i) {
|
|
2516
|
-
throw console.error("Direct loading failed:", i), new Error(
|
|
2517
|
-
`Unable to load images. Please ensure:
|
|
2518
|
-
1. The folder is shared publicly (Anyone with the link can view)
|
|
2519
|
-
2. The folder contains image files
|
|
2520
|
-
3. Consider adding a Google Drive API key in config.js for better reliability`
|
|
2521
|
-
);
|
|
2522
|
-
}
|
|
2510
|
+
resolveElement(t) {
|
|
2511
|
+
return t instanceof HTMLElement ? t : document.getElementById(t);
|
|
2523
2512
|
}
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
return t.
|
|
2513
|
+
createDefaultLoadingElement() {
|
|
2514
|
+
const t = document.createElement("div");
|
|
2515
|
+
t.className = "fbn-ic-loading fbn-ic-hidden";
|
|
2516
|
+
const e = document.createElement("div");
|
|
2517
|
+
e.className = "fbn-ic-spinner", t.appendChild(e);
|
|
2518
|
+
const i = document.createElement("p");
|
|
2519
|
+
return i.textContent = "Loading images...", t.appendChild(i), this.containerEl.appendChild(t), t;
|
|
2531
2520
|
}
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
*/
|
|
2536
|
-
log(...t) {
|
|
2537
|
-
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2521
|
+
createDefaultErrorElement() {
|
|
2522
|
+
const t = document.createElement("div");
|
|
2523
|
+
return t.className = "fbn-ic-error fbn-ic-hidden", this.containerEl.appendChild(t), t;
|
|
2538
2524
|
}
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
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)
|
|
2543
|
-
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
2544
|
-
this.log("StaticImageLoader initialized with config:", t);
|
|
2525
|
+
createDefaultCounterElement() {
|
|
2526
|
+
const t = document.createElement("div");
|
|
2527
|
+
return t.className = "fbn-ic-counter fbn-ic-hidden", this.containerEl.appendChild(t), t;
|
|
2545
2528
|
}
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
for (const e of this.sources)
|
|
2553
|
-
try {
|
|
2554
|
-
const i = await this.processSource(e, t);
|
|
2555
|
-
this._discoveredUrls.push(...i);
|
|
2556
|
-
} catch (i) {
|
|
2557
|
-
console.warn("Failed to process source:", e, i);
|
|
2558
|
-
}
|
|
2559
|
-
this._prepared = !0, this.log(`Successfully loaded ${this._discoveredUrls.length} image(s)`);
|
|
2529
|
+
setupEventListeners() {
|
|
2530
|
+
document.addEventListener("keydown", (t) => {
|
|
2531
|
+
t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
|
|
2532
|
+
}), document.addEventListener("click", (t) => {
|
|
2533
|
+
this.swipeEngine?.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter());
|
|
2534
|
+
}), window.addEventListener("resize", () => this.handleResize());
|
|
2560
2535
|
}
|
|
2561
2536
|
/**
|
|
2562
|
-
*
|
|
2563
|
-
* @throws Error if called before prepare()
|
|
2537
|
+
* Navigate to the next image (Right arrow)
|
|
2564
2538
|
*/
|
|
2565
|
-
|
|
2566
|
-
if (
|
|
2567
|
-
|
|
2568
|
-
|
|
2539
|
+
navigateToNextImage() {
|
|
2540
|
+
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
2541
|
+
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, e = this.imageElements.find(
|
|
2542
|
+
(n) => n.dataset.imageId === String(t)
|
|
2543
|
+
);
|
|
2544
|
+
if (!e) return;
|
|
2545
|
+
const i = this.imageLayouts[t];
|
|
2546
|
+
i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
|
|
2569
2547
|
}
|
|
2570
2548
|
/**
|
|
2571
|
-
*
|
|
2572
|
-
* @throws Error if called before prepare()
|
|
2549
|
+
* Navigate to the previous image (Left arrow)
|
|
2573
2550
|
*/
|
|
2574
|
-
|
|
2575
|
-
if (
|
|
2576
|
-
|
|
2577
|
-
|
|
2551
|
+
navigateToPreviousImage() {
|
|
2552
|
+
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
2553
|
+
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, e = this.imageElements.find(
|
|
2554
|
+
(n) => n.dataset.imageId === String(t)
|
|
2555
|
+
);
|
|
2556
|
+
if (!e) return;
|
|
2557
|
+
const i = this.imageLayouts[t];
|
|
2558
|
+
i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
|
|
2578
2559
|
}
|
|
2579
2560
|
/**
|
|
2580
|
-
*
|
|
2561
|
+
* Navigate to a specific image by index
|
|
2581
2562
|
*/
|
|
2582
|
-
|
|
2583
|
-
|
|
2563
|
+
handleResize() {
|
|
2564
|
+
this.imagesLoaded && (this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.resizeTimeout = window.setTimeout(() => {
|
|
2565
|
+
const t = this.getImageHeight();
|
|
2566
|
+
t !== this.currentImageHeight ? (this.logDebug(`Window resized to new breakpoint (height: ${t}px). Reloading images...`), this.loadImages()) : this.logDebug("Window resized (no breakpoint change)");
|
|
2567
|
+
}, 500));
|
|
2584
2568
|
}
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
* @param filter - Filter to apply to discovered images
|
|
2589
|
-
* @returns Promise resolving to array of valid URLs from this source
|
|
2590
|
-
*/
|
|
2591
|
-
async processSource(t, e) {
|
|
2592
|
-
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), []);
|
|
2569
|
+
getImageHeight() {
|
|
2570
|
+
const t = window.innerWidth, e = this.fullConfig.layout.responsive, n = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
2571
|
+
return e ? t <= e.mobile.maxWidth ? Math.min(100, n) : t <= e.tablet.maxWidth ? Math.min(180, n) : Math.min(225, n) : t <= 767 ? Math.min(100, n) : t <= 1199 ? Math.min(180, n) : Math.min(225, n);
|
|
2593
2572
|
}
|
|
2594
2573
|
/**
|
|
2595
|
-
*
|
|
2596
|
-
* @param urls - Array of image URLs
|
|
2597
|
-
* @param filter - Filter to apply to discovered images
|
|
2598
|
-
* @returns Promise resolving to array of validated URLs
|
|
2574
|
+
* Get container bounds for layout calculations
|
|
2599
2575
|
*/
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
const s = o.split("/").pop() || o;
|
|
2606
|
-
if (!e.isAllowed(s)) {
|
|
2607
|
-
this.log(`Skipping filtered URL: ${o}`);
|
|
2608
|
-
continue;
|
|
2609
|
-
}
|
|
2610
|
-
this.validateUrls ? await this.validateUrl(o) ? i.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : i.push(o);
|
|
2611
|
-
}
|
|
2612
|
-
return i;
|
|
2576
|
+
getContainerBounds() {
|
|
2577
|
+
return this.containerEl ? {
|
|
2578
|
+
width: this.containerEl.offsetWidth,
|
|
2579
|
+
height: this.containerEl.offsetHeight || window.innerHeight * 0.7
|
|
2580
|
+
} : { width: window.innerWidth, height: window.innerHeight * 0.7 };
|
|
2613
2581
|
}
|
|
2614
2582
|
/**
|
|
2615
|
-
*
|
|
2616
|
-
* @param basePath - Base path (relative or absolute)
|
|
2617
|
-
* @param files - Array of filenames
|
|
2618
|
-
* @param filter - Filter to apply to discovered images
|
|
2619
|
-
* @returns Promise resolving to array of validated URLs
|
|
2583
|
+
* Load images using the unified loader interface
|
|
2620
2584
|
*/
|
|
2621
|
-
async
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
if (
|
|
2627
|
-
this.
|
|
2628
|
-
|
|
2585
|
+
async loadImages() {
|
|
2586
|
+
try {
|
|
2587
|
+
this.showLoading(!0), this.hideError(), this.clearImageCloud(), await this.imageLoader.prepare(this.imageFilter);
|
|
2588
|
+
const t = this.imageLoader.imagesLength();
|
|
2589
|
+
let e = this.imageLoader.imageURLs();
|
|
2590
|
+
if (t === 0) {
|
|
2591
|
+
this.showError("No images found."), this.showLoading(!1);
|
|
2592
|
+
return;
|
|
2629
2593
|
}
|
|
2630
|
-
const
|
|
2631
|
-
this.
|
|
2594
|
+
const i = this.getContainerBounds(), n = this.getImageHeight(), s = window.innerWidth;
|
|
2595
|
+
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${n}px`);
|
|
2596
|
+
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
2597
|
+
i,
|
|
2598
|
+
t,
|
|
2599
|
+
n,
|
|
2600
|
+
s
|
|
2601
|
+
);
|
|
2602
|
+
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
2603
|
+
} catch (t) {
|
|
2604
|
+
console.error("Error loading images:", t), t instanceof Error && this.showError(t.message || "Failed to load images."), this.showLoading(!1);
|
|
2632
2605
|
}
|
|
2633
|
-
return o;
|
|
2634
2606
|
}
|
|
2635
2607
|
/**
|
|
2636
|
-
*
|
|
2637
|
-
* Fetches a JSON endpoint that returns { images: string[] }
|
|
2638
|
-
* @param url - JSON endpoint URL
|
|
2639
|
-
* @param filter - Filter to apply to discovered images
|
|
2640
|
-
* @returns Promise resolving to array of validated URLs
|
|
2608
|
+
* Helper for debug logging
|
|
2641
2609
|
*/
|
|
2642
|
-
|
|
2643
|
-
this.
|
|
2644
|
-
const i = new AbortController(), o = setTimeout(() => i.abort(), 1e4);
|
|
2645
|
-
try {
|
|
2646
|
-
const s = await fetch(t, { signal: i.signal });
|
|
2647
|
-
if (clearTimeout(o), !s.ok)
|
|
2648
|
-
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
2649
|
-
const r = await s.json();
|
|
2650
|
-
if (!r || !Array.isArray(r.images))
|
|
2651
|
-
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
2652
|
-
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
2653
|
-
} catch (s) {
|
|
2654
|
-
throw clearTimeout(o), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
2655
|
-
}
|
|
2610
|
+
logDebug(...t) {
|
|
2611
|
+
this.fullConfig.config.debug?.enabled && typeof console < "u" && console.log(...t);
|
|
2656
2612
|
}
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2613
|
+
async createImageCloud(t, e) {
|
|
2614
|
+
if (!this.containerEl) return;
|
|
2615
|
+
const i = this.getContainerBounds();
|
|
2616
|
+
this.currentImageHeight = e;
|
|
2617
|
+
const n = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
|
|
2618
|
+
this.imageLayouts = s, this.displayQueue = [];
|
|
2619
|
+
let r = 0;
|
|
2620
|
+
const a = (c) => {
|
|
2621
|
+
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
2622
|
+
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 d = {
|
|
2624
|
+
x: parseFloat(c.dataset.startX),
|
|
2625
|
+
y: parseFloat(c.dataset.startY)
|
|
2626
|
+
}, m = {
|
|
2627
|
+
x: parseFloat(c.dataset.endX),
|
|
2628
|
+
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), S = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, v = c.dataset.startScale ? parseFloat(c.dataset.startScale) : f, w = this.entryAnimationEngine.getTiming();
|
|
2630
|
+
ee({
|
|
2631
|
+
element: c,
|
|
2632
|
+
startPosition: d,
|
|
2633
|
+
endPosition: m,
|
|
2634
|
+
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
2635
|
+
duration: w.duration,
|
|
2636
|
+
imageWidth: b,
|
|
2637
|
+
imageHeight: p,
|
|
2638
|
+
rotation: g,
|
|
2639
|
+
scale: f,
|
|
2640
|
+
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
2641
|
+
startRotation: S,
|
|
2642
|
+
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
2643
|
+
startScale: v
|
|
2644
|
+
});
|
|
2645
|
+
} else {
|
|
2646
|
+
const d = c.dataset.finalTransform || "";
|
|
2647
|
+
c.style.transform = d;
|
|
2648
|
+
}
|
|
2649
|
+
const l = parseInt(c.dataset.imageId || "0");
|
|
2650
|
+
if (this.fullConfig.config.debug?.enabled && l < 3) {
|
|
2651
|
+
const d = c.dataset.finalTransform || "";
|
|
2652
|
+
console.log(`Image ${l} final state:`, {
|
|
2653
|
+
left: c.style.left,
|
|
2654
|
+
top: c.style.top,
|
|
2655
|
+
width: c.style.width,
|
|
2656
|
+
height: c.style.height,
|
|
2657
|
+
computedWidth: c.offsetWidth,
|
|
2658
|
+
computedHeight: c.offsetHeight,
|
|
2659
|
+
transform: d,
|
|
2660
|
+
pathType: this.entryAnimationEngine.getPathType()
|
|
2661
|
+
});
|
|
2662
|
+
}
|
|
2663
|
+
}), r++);
|
|
2664
|
+
}, h = () => {
|
|
2665
|
+
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
2666
|
+
for (; this.displayQueue.length > 0; ) {
|
|
2667
|
+
const c = this.displayQueue.shift();
|
|
2668
|
+
c && a(c);
|
|
2669
|
+
}
|
|
2670
|
+
return;
|
|
2671
|
+
}
|
|
2672
|
+
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
2673
|
+
if (n !== this.loadGeneration) {
|
|
2674
|
+
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
2675
|
+
return;
|
|
2676
|
+
}
|
|
2677
|
+
if (this.displayQueue.length > 0) {
|
|
2678
|
+
const c = this.displayQueue.shift();
|
|
2679
|
+
c && a(c);
|
|
2680
|
+
}
|
|
2681
|
+
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
2682
|
+
}, this.fullConfig.animation.queue.interval);
|
|
2683
|
+
};
|
|
2684
|
+
if ("IntersectionObserver" in window && this.containerEl) {
|
|
2685
|
+
const c = new IntersectionObserver((u) => {
|
|
2686
|
+
u.forEach((l) => {
|
|
2687
|
+
l.isIntersecting && (h(), c.disconnect());
|
|
2688
|
+
});
|
|
2689
|
+
}, { threshold: 0.1, rootMargin: "50px" });
|
|
2690
|
+
c.observe(this.containerEl);
|
|
2691
|
+
} else
|
|
2692
|
+
h();
|
|
2693
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), s.forEach((c, u) => {
|
|
2694
|
+
const l = document.createElement("div");
|
|
2695
|
+
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 d = c.x, m = c.y;
|
|
2697
|
+
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);
|
|
2698
|
+
})), t.forEach((c, u) => {
|
|
2699
|
+
const l = document.createElement("img");
|
|
2700
|
+
l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(u);
|
|
2701
|
+
const d = s[u];
|
|
2702
|
+
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)), it(l, this.defaultStyles), nt(l, this.defaultClassName), l.addEventListener("mouseenter", () => {
|
|
2703
|
+
this.hoveredImage = { element: l, layout: d }, this.zoomEngine.isInvolved(l) || (it(l, this.hoverStyles), nt(l, this.hoverClassName));
|
|
2704
|
+
}), l.addEventListener("mouseleave", () => {
|
|
2705
|
+
this.hoveredImage = null, this.zoomEngine.isInvolved(l) || (it(l, this.defaultStyles), Ft(l, this.hoverClassName), nt(l, this.defaultClassName));
|
|
2706
|
+
}), l.addEventListener("click", (m) => {
|
|
2707
|
+
m.stopPropagation(), this.handleImageClick(l, d);
|
|
2708
|
+
}), l.style.opacity = "0", l.style.transition = this.entryAnimationEngine.getTransitionCSS(), l.onload = () => {
|
|
2709
|
+
if (n !== this.loadGeneration)
|
|
2710
|
+
return;
|
|
2711
|
+
const m = l.naturalWidth / l.naturalHeight, b = e * m;
|
|
2712
|
+
l.style.width = `${b}px`;
|
|
2713
|
+
const p = { x: d.x, y: d.y }, g = { width: b, height: e }, f = this.entryAnimationEngine.calculateStartPosition(
|
|
2714
|
+
p,
|
|
2715
|
+
g,
|
|
2716
|
+
i,
|
|
2717
|
+
u,
|
|
2718
|
+
t.length
|
|
2719
|
+
), S = this.entryAnimationEngine.calculateStartRotation(d.rotation), v = this.entryAnimationEngine.calculateStartScale(d.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
2720
|
+
d.rotation,
|
|
2721
|
+
d.scale,
|
|
2722
|
+
b,
|
|
2723
|
+
e
|
|
2724
|
+
), E = this.entryAnimationEngine.buildStartTransform(
|
|
2725
|
+
f,
|
|
2726
|
+
p,
|
|
2727
|
+
d.rotation,
|
|
2728
|
+
d.scale,
|
|
2729
|
+
b,
|
|
2730
|
+
e,
|
|
2731
|
+
S,
|
|
2732
|
+
v
|
|
2733
|
+
);
|
|
2734
|
+
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
2735
|
+
finalPosition: p,
|
|
2736
|
+
imageSize: g,
|
|
2737
|
+
left: d.x,
|
|
2738
|
+
top: d.y,
|
|
2739
|
+
finalTransform: w,
|
|
2740
|
+
renderedWidth: b,
|
|
2741
|
+
renderedHeight: e
|
|
2742
|
+
}), l.style.transform = E, l.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || S !== d.rotation || v !== d.scale) && (l.dataset.startX = String(f.x), l.dataset.startY = String(f.y), l.dataset.endX = String(p.x), l.dataset.endY = String(p.y), l.dataset.imageWidth = String(b), l.dataset.imageHeight = String(e), l.dataset.rotation = String(d.rotation), l.dataset.scale = String(d.scale), l.dataset.startRotation = String(S), l.dataset.startScale = String(v)), this.displayQueue.push(l);
|
|
2743
|
+
}, l.onerror = () => r++, l.src = c;
|
|
2744
|
+
});
|
|
2745
|
+
}
|
|
2746
|
+
async handleImageClick(t, e) {
|
|
2747
|
+
if (!this.containerEl) return;
|
|
2748
|
+
const i = this.zoomEngine.isFocused(t), n = {
|
|
2749
|
+
width: this.containerEl.offsetWidth,
|
|
2750
|
+
height: this.containerEl.offsetHeight
|
|
2751
|
+
};
|
|
2752
|
+
if (i)
|
|
2753
|
+
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter();
|
|
2754
|
+
else {
|
|
2755
|
+
const s = t.dataset.imageId;
|
|
2756
|
+
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, n, e), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
2683
2757
|
}
|
|
2684
2758
|
}
|
|
2685
2759
|
/**
|
|
2686
|
-
*
|
|
2687
|
-
* @param basePath - Base path (relative or absolute)
|
|
2688
|
-
* @param filename - Filename to append
|
|
2689
|
-
* @returns Complete URL
|
|
2760
|
+
* Clear the image cloud and reset state
|
|
2690
2761
|
*/
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
if (this.isAbsoluteUrl(t))
|
|
2694
|
-
return `${i}/${e}`;
|
|
2695
|
-
if (typeof window > "u")
|
|
2696
|
-
return `${i}/${e}`;
|
|
2697
|
-
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
2698
|
-
return `${o}${r}/${e}`;
|
|
2762
|
+
clearImageCloud() {
|
|
2763
|
+
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null), this.loadGeneration++, this.displayQueue = [], this.containerEl && this.containerEl.querySelectorAll(".fbn-ic-image, .fbn-ic-debug-center").forEach((t) => t.remove()), this.imageElements = [], this.imageLayouts = [], this.currentFocusIndex = null, this.hoveredImage = null, this.layoutEngine.reset(), this.zoomEngine.reset(), this.imagesLoaded = !1;
|
|
2699
2764
|
}
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
}
|
|
2765
|
+
showLoading(t) {
|
|
2766
|
+
!this.fullConfig.rendering.ui.showLoadingSpinner || !this.loadingEl || (t ? this.loadingEl.classList.remove("fbn-ic-hidden") : this.loadingEl.classList.add("fbn-ic-hidden"));
|
|
2767
|
+
}
|
|
2768
|
+
showError(t) {
|
|
2769
|
+
this.errorEl && (this.errorEl.textContent = t, this.errorEl.classList.remove("fbn-ic-hidden"));
|
|
2770
|
+
}
|
|
2771
|
+
hideError() {
|
|
2772
|
+
this.errorEl && this.errorEl.classList.add("fbn-ic-hidden");
|
|
2773
|
+
}
|
|
2774
|
+
updateCounter(t) {
|
|
2775
|
+
!this.fullConfig.rendering.ui.showImageCounter || !this.counterEl || (this.counterEl.textContent = `${t + 1} of ${this.imageElements.length}`, this.counterEl.classList.remove("fbn-ic-hidden"));
|
|
2776
|
+
}
|
|
2777
|
+
hideCounter() {
|
|
2778
|
+
this.counterEl && this.counterEl.classList.add("fbn-ic-hidden");
|
|
2711
2779
|
}
|
|
2712
2780
|
/**
|
|
2713
|
-
*
|
|
2714
|
-
* @param args - Arguments to log
|
|
2781
|
+
* Destroy the gallery and clean up resources
|
|
2715
2782
|
*/
|
|
2716
|
-
|
|
2717
|
-
this.
|
|
2783
|
+
destroy() {
|
|
2784
|
+
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();
|
|
2718
2785
|
}
|
|
2719
2786
|
}
|
|
2720
|
-
class
|
|
2787
|
+
class Me {
|
|
2721
2788
|
constructor(t) {
|
|
2722
|
-
if (this._prepared = !1, this._discoveredUrls = [], this.
|
|
2723
|
-
throw new Error("
|
|
2724
|
-
this.log(`CompositeLoader initialized with ${this.loaders.length} loader(s)`);
|
|
2789
|
+
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)
|
|
2790
|
+
throw new Error("GoogleDriveLoader requires at least one source to be configured");
|
|
2725
2791
|
}
|
|
2726
2792
|
/**
|
|
2727
|
-
* Prepare
|
|
2793
|
+
* Prepare the loader by discovering all images from configured sources
|
|
2728
2794
|
* @param filter - Filter to apply to discovered images
|
|
2729
2795
|
*/
|
|
2730
2796
|
async prepare(t) {
|
|
2731
|
-
this._discoveredUrls = []
|
|
2732
|
-
const e
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
this._discoveredUrls.push(...o);
|
|
2797
|
+
this._discoveredUrls = [];
|
|
2798
|
+
for (const e of this.sources)
|
|
2799
|
+
if ("folders" in e)
|
|
2800
|
+
for (const i of e.folders) {
|
|
2801
|
+
const n = e.recursive !== void 0 ? e.recursive : !0, s = await this.loadFromFolder(i, t, n);
|
|
2802
|
+
this._discoveredUrls.push(...s);
|
|
2803
|
+
}
|
|
2804
|
+
else if ("files" in e) {
|
|
2805
|
+
const i = await this.loadFiles(e.files, t);
|
|
2806
|
+
this._discoveredUrls.push(...i);
|
|
2742
2807
|
}
|
|
2743
|
-
this._prepared = !0
|
|
2808
|
+
this._prepared = !0;
|
|
2744
2809
|
}
|
|
2745
2810
|
/**
|
|
2746
|
-
* Get the
|
|
2811
|
+
* Get the number of discovered images
|
|
2747
2812
|
* @throws Error if called before prepare()
|
|
2748
2813
|
*/
|
|
2749
2814
|
imagesLength() {
|
|
2750
2815
|
if (!this._prepared)
|
|
2751
|
-
throw new Error("
|
|
2816
|
+
throw new Error("GoogleDriveLoader.imagesLength() called before prepare()");
|
|
2752
2817
|
return this._discoveredUrls.length;
|
|
2753
2818
|
}
|
|
2754
2819
|
/**
|
|
2755
|
-
* Get the
|
|
2820
|
+
* Get the ordered list of image URLs
|
|
2756
2821
|
* @throws Error if called before prepare()
|
|
2757
2822
|
*/
|
|
2758
2823
|
imageURLs() {
|
|
2759
2824
|
if (!this._prepared)
|
|
2760
|
-
throw new Error("
|
|
2825
|
+
throw new Error("GoogleDriveLoader.imageURLs() called before prepare()");
|
|
2761
2826
|
return [...this._discoveredUrls];
|
|
2762
2827
|
}
|
|
2763
2828
|
/**
|
|
@@ -2767,491 +2832,441 @@ class Re {
|
|
|
2767
2832
|
return this._prepared;
|
|
2768
2833
|
}
|
|
2769
2834
|
/**
|
|
2770
|
-
*
|
|
2771
|
-
* @param
|
|
2772
|
-
|
|
2773
|
-
log(...t) {
|
|
2774
|
-
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
2775
|
-
}
|
|
2776
|
-
}
|
|
2777
|
-
class Ce {
|
|
2778
|
-
/**
|
|
2779
|
-
* Create a new ImageFilter
|
|
2780
|
-
* @param extensions - Array of allowed file extensions (without dots)
|
|
2781
|
-
* Defaults to common image formats if not provided
|
|
2835
|
+
* Extract folder ID from various Google Drive URL formats
|
|
2836
|
+
* @param folderUrl - Google Drive folder URL
|
|
2837
|
+
* @returns Folder ID or null if invalid
|
|
2782
2838
|
*/
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
"webp",
|
|
2790
|
-
"bmp"
|
|
2839
|
+
extractFolderId(t) {
|
|
2840
|
+
const e = [
|
|
2841
|
+
/\/folders\/([a-zA-Z0-9_-]+)/,
|
|
2842
|
+
// Standard format
|
|
2843
|
+
/id=([a-zA-Z0-9_-]+)/
|
|
2844
|
+
// Alternative format
|
|
2791
2845
|
];
|
|
2846
|
+
for (const i of e) {
|
|
2847
|
+
const n = t.match(i);
|
|
2848
|
+
if (n && n[1])
|
|
2849
|
+
return n[1];
|
|
2850
|
+
}
|
|
2851
|
+
return null;
|
|
2792
2852
|
}
|
|
2793
2853
|
/**
|
|
2794
|
-
*
|
|
2795
|
-
* @param
|
|
2796
|
-
* @
|
|
2854
|
+
* Load images from a Google Drive folder
|
|
2855
|
+
* @param folderUrl - Google Drive folder URL
|
|
2856
|
+
* @param filter - Filter to apply to discovered images
|
|
2857
|
+
* @param recursive - Whether to include images from subfolders
|
|
2858
|
+
* @returns Promise resolving to array of image URLs
|
|
2797
2859
|
*/
|
|
2798
|
-
|
|
2799
|
-
const
|
|
2800
|
-
|
|
2860
|
+
async loadFromFolder(t, e, i = !0) {
|
|
2861
|
+
const n = this.extractFolderId(t);
|
|
2862
|
+
if (!n)
|
|
2863
|
+
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2864
|
+
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2865
|
+
return this.loadImagesDirectly(n, e);
|
|
2866
|
+
try {
|
|
2867
|
+
return i ? await this.loadImagesRecursively(n, e) : await this.loadImagesFromSingleFolder(n, e);
|
|
2868
|
+
} catch (s) {
|
|
2869
|
+
return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(n, e);
|
|
2870
|
+
}
|
|
2801
2871
|
}
|
|
2802
2872
|
/**
|
|
2803
|
-
*
|
|
2804
|
-
* @
|
|
2873
|
+
* Load images from a single folder (non-recursive)
|
|
2874
|
+
* @param folderId - Google Drive folder ID
|
|
2875
|
+
* @param filter - Filter to apply to discovered images
|
|
2876
|
+
* @returns Promise resolving to array of image URLs
|
|
2805
2877
|
*/
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
}
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
position: relative;
|
|
2817
|
-
width: 100%;
|
|
2818
|
-
height: 100%;
|
|
2819
|
-
overflow: hidden;
|
|
2820
|
-
perspective: 1000px;
|
|
2821
|
-
}
|
|
2822
|
-
|
|
2823
|
-
.fbn-ic-image {
|
|
2824
|
-
position: absolute;
|
|
2825
|
-
cursor: pointer;
|
|
2826
|
-
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2827
|
-
box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2828
|
-
filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2829
|
-
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2830
|
-
border 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2831
|
-
outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2832
|
-
z-index 0s 0.6s;
|
|
2833
|
-
will-change: transform;
|
|
2834
|
-
user-select: none;
|
|
2835
|
-
backface-visibility: hidden;
|
|
2836
|
-
-webkit-backface-visibility: hidden;
|
|
2837
|
-
}
|
|
2838
|
-
|
|
2839
|
-
.fbn-ic-image.fbn-ic-focused {
|
|
2840
|
-
z-index: 1000;
|
|
2841
|
-
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2842
|
-
box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2843
|
-
filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2844
|
-
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2845
|
-
border 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2846
|
-
outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
2847
|
-
z-index 0s 0s;
|
|
2848
|
-
will-change: auto;
|
|
2849
|
-
}
|
|
2850
|
-
|
|
2851
|
-
.fbn-ic-counter {
|
|
2852
|
-
position: fixed;
|
|
2853
|
-
bottom: 24px;
|
|
2854
|
-
left: 50%;
|
|
2855
|
-
transform: translateX(-50%);
|
|
2856
|
-
z-index: 10001;
|
|
2857
|
-
pointer-events: none;
|
|
2858
|
-
}
|
|
2859
|
-
|
|
2860
|
-
.fbn-ic-hidden {
|
|
2861
|
-
display: none !important;
|
|
2862
|
-
}
|
|
2863
|
-
`;
|
|
2864
|
-
function Le() {
|
|
2865
|
-
if (typeof document > "u") return;
|
|
2866
|
-
const n = "fbn-ic-functional-styles";
|
|
2867
|
-
if (document.getElementById(n)) return;
|
|
2868
|
-
const t = document.createElement("style");
|
|
2869
|
-
t.id = n, t.textContent = Ae, document.head.appendChild(t);
|
|
2870
|
-
}
|
|
2871
|
-
class Me {
|
|
2872
|
-
constructor(t = {}) {
|
|
2873
|
-
this.fullConfig = jt(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 qt(this.fullConfig.animation), this.layoutEngine = new ge({
|
|
2874
|
-
layout: this.fullConfig.layout,
|
|
2875
|
-
image: this.fullConfig.image
|
|
2876
|
-
}), this.zoomEngine = new be(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;
|
|
2877
|
-
const e = this.fullConfig.animation.entry || y.animation.entry;
|
|
2878
|
-
this.entryAnimationEngine = new ie(
|
|
2879
|
-
e,
|
|
2880
|
-
this.fullConfig.layout.algorithm
|
|
2881
|
-
), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
2878
|
+
async loadImagesFromSingleFolder(t, e) {
|
|
2879
|
+
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2880
|
+
if (!a.ok)
|
|
2881
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2882
|
+
const c = (await a.json()).files.filter(
|
|
2883
|
+
(u) => u.mimeType.startsWith("image/") && e.isAllowed(u.name)
|
|
2884
|
+
);
|
|
2885
|
+
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
|
|
2886
|
+
i.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2887
|
+
}), i;
|
|
2882
2888
|
}
|
|
2883
2889
|
/**
|
|
2884
|
-
*
|
|
2890
|
+
* Load specific files by their URLs or IDs
|
|
2891
|
+
* @param fileUrls - Array of Google Drive file URLs or IDs
|
|
2892
|
+
* @param filter - Filter to apply to discovered images
|
|
2893
|
+
* @returns Promise resolving to array of image URLs
|
|
2885
2894
|
*/
|
|
2886
|
-
|
|
2887
|
-
const
|
|
2888
|
-
|
|
2895
|
+
async loadFiles(t, e) {
|
|
2896
|
+
const i = [];
|
|
2897
|
+
for (const n of t) {
|
|
2898
|
+
const s = this.extractFileId(n);
|
|
2899
|
+
if (!s) {
|
|
2900
|
+
this.log(`Skipping invalid file URL: ${n}`);
|
|
2901
|
+
continue;
|
|
2902
|
+
}
|
|
2903
|
+
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2904
|
+
try {
|
|
2905
|
+
const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
|
|
2906
|
+
if (a.ok) {
|
|
2907
|
+
const h = await a.json();
|
|
2908
|
+
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})`);
|
|
2909
|
+
} else
|
|
2910
|
+
this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
|
|
2911
|
+
} catch (r) {
|
|
2912
|
+
this.log(`Error fetching metadata for file ${s}:`, r);
|
|
2913
|
+
}
|
|
2914
|
+
else
|
|
2915
|
+
i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
|
|
2916
|
+
}
|
|
2917
|
+
return i;
|
|
2889
2918
|
}
|
|
2890
2919
|
/**
|
|
2891
|
-
*
|
|
2892
|
-
*
|
|
2920
|
+
* Extract file ID from Google Drive file URL
|
|
2921
|
+
* @param fileUrl - Google Drive file URL or file ID
|
|
2922
|
+
* @returns File ID or null if invalid
|
|
2893
2923
|
*/
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2924
|
+
extractFileId(t) {
|
|
2925
|
+
if (!/[/:.]/.test(t))
|
|
2926
|
+
return t;
|
|
2927
|
+
const e = [
|
|
2928
|
+
/\/file\/d\/([a-zA-Z0-9_-]+)/,
|
|
2929
|
+
// Standard file format
|
|
2930
|
+
/\/open\?id=([a-zA-Z0-9_-]+)/,
|
|
2931
|
+
// Alternative format
|
|
2932
|
+
/id=([a-zA-Z0-9_-]+)/
|
|
2933
|
+
// Generic id parameter
|
|
2934
|
+
];
|
|
2935
|
+
for (const i of e) {
|
|
2936
|
+
const n = t.match(i);
|
|
2937
|
+
if (n && n[1])
|
|
2938
|
+
return n[1];
|
|
2939
|
+
}
|
|
2940
|
+
return null;
|
|
2903
2941
|
}
|
|
2904
2942
|
/**
|
|
2905
|
-
*
|
|
2943
|
+
* Recursively load images from a folder and all its subfolders
|
|
2944
|
+
* @param folderId - Google Drive folder ID
|
|
2945
|
+
* @param filter - Filter to apply to discovered images
|
|
2946
|
+
* @returns Promise resolving to array of image URLs
|
|
2906
2947
|
*/
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
}
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
} else
|
|
2926
|
-
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
2948
|
+
async loadImagesRecursively(t, e) {
|
|
2949
|
+
const i = [], n = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(n)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
|
|
2950
|
+
if (!a.ok)
|
|
2951
|
+
throw new Error(`API request failed: ${a.status} ${a.statusText}`);
|
|
2952
|
+
const h = await a.json(), c = h.files.filter(
|
|
2953
|
+
(l) => l.mimeType.startsWith("image/") && e.isAllowed(l.name)
|
|
2954
|
+
), u = h.files.filter(
|
|
2955
|
+
(l) => l.mimeType === "application/vnd.google-apps.folder"
|
|
2956
|
+
);
|
|
2957
|
+
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) => {
|
|
2958
|
+
i.push(`https://lh3.googleusercontent.com/d/${l.id}=s1600`), this.log(`Added file: ${l.name}`);
|
|
2959
|
+
});
|
|
2960
|
+
for (const l of u) {
|
|
2961
|
+
this.log(`Loading images from subfolder: ${l.name}`);
|
|
2962
|
+
const d = await this.loadImagesRecursively(l.id, e);
|
|
2963
|
+
i.push(...d);
|
|
2964
|
+
}
|
|
2965
|
+
return i;
|
|
2927
2966
|
}
|
|
2928
2967
|
/**
|
|
2929
|
-
*
|
|
2968
|
+
* Direct loading method (no API key required, but less reliable)
|
|
2969
|
+
* Uses embedded folder view to scrape image IDs
|
|
2970
|
+
* @param folderId - Google Drive folder ID
|
|
2971
|
+
* @param filter - Filter to apply (not used in fallback mode)
|
|
2972
|
+
* @returns Promise resolving to array of image URLs
|
|
2930
2973
|
*/
|
|
2931
|
-
async
|
|
2974
|
+
async loadImagesDirectly(t, e) {
|
|
2932
2975
|
try {
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2976
|
+
const i = `https://drive.google.com/embeddedfolderview?id=${t}`, n = await fetch(i, { mode: "cors" });
|
|
2977
|
+
if (!n.ok)
|
|
2978
|
+
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2979
|
+
const s = await n.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
|
|
2980
|
+
return [...new Set(a.map((u) => u[1]))].map(
|
|
2981
|
+
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2982
|
+
);
|
|
2983
|
+
} catch (i) {
|
|
2984
|
+
throw console.error("Direct loading failed:", i), new Error(
|
|
2985
|
+
`Unable to load images. Please ensure:
|
|
2986
|
+
1. The folder is shared publicly (Anyone with the link can view)
|
|
2987
|
+
2. The folder contains image files
|
|
2988
|
+
3. Consider adding a Google Drive API key in config.js for better reliability`
|
|
2989
|
+
);
|
|
2947
2990
|
}
|
|
2948
2991
|
}
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2992
|
+
/**
|
|
2993
|
+
* Manually add image URLs (for testing or when auto-loading fails)
|
|
2994
|
+
* @param imageIds - Array of Google Drive file IDs
|
|
2995
|
+
* @returns Array of direct image URLs
|
|
2996
|
+
*/
|
|
2997
|
+
manualImageUrls(t) {
|
|
2998
|
+
return t.map((e) => `https://drive.google.com/uc?export=view&id=${e}`);
|
|
2952
2999
|
}
|
|
2953
|
-
|
|
2954
|
-
|
|
3000
|
+
/**
|
|
3001
|
+
* Debug logging helper
|
|
3002
|
+
* @param args - Arguments to log
|
|
3003
|
+
*/
|
|
3004
|
+
log(...t) {
|
|
3005
|
+
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
2955
3006
|
}
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
return i.textContent = "Loading images...", t.appendChild(i), this.containerEl.appendChild(t), t;
|
|
3007
|
+
}
|
|
3008
|
+
class ze {
|
|
3009
|
+
constructor(t) {
|
|
3010
|
+
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)
|
|
3011
|
+
throw new Error("StaticImageLoader requires at least one source to be configured");
|
|
3012
|
+
this.log("StaticImageLoader initialized with config:", t);
|
|
2963
3013
|
}
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
3014
|
+
/**
|
|
3015
|
+
* Prepare the loader by discovering all images from configured sources
|
|
3016
|
+
* @param filter - Filter to apply to discovered images
|
|
3017
|
+
*/
|
|
3018
|
+
async prepare(t) {
|
|
3019
|
+
this._discoveredUrls = [], this.log(`Processing ${this.sources.length} source(s)`);
|
|
3020
|
+
for (const e of this.sources)
|
|
3021
|
+
try {
|
|
3022
|
+
const i = await this.processSource(e, t);
|
|
3023
|
+
this._discoveredUrls.push(...i);
|
|
3024
|
+
} catch (i) {
|
|
3025
|
+
console.warn("Failed to process source:", e, i);
|
|
3026
|
+
}
|
|
3027
|
+
this._prepared = !0, this.log(`Successfully loaded ${this._discoveredUrls.length} image(s)`);
|
|
2967
3028
|
}
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
3029
|
+
/**
|
|
3030
|
+
* Get the number of discovered images
|
|
3031
|
+
* @throws Error if called before prepare()
|
|
3032
|
+
*/
|
|
3033
|
+
imagesLength() {
|
|
3034
|
+
if (!this._prepared)
|
|
3035
|
+
throw new Error("StaticImageLoader.imagesLength() called before prepare()");
|
|
3036
|
+
return this._discoveredUrls.length;
|
|
2971
3037
|
}
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
3038
|
+
/**
|
|
3039
|
+
* Get the ordered list of image URLs
|
|
3040
|
+
* @throws Error if called before prepare()
|
|
3041
|
+
*/
|
|
3042
|
+
imageURLs() {
|
|
3043
|
+
if (!this._prepared)
|
|
3044
|
+
throw new Error("StaticImageLoader.imageURLs() called before prepare()");
|
|
3045
|
+
return [...this._discoveredUrls];
|
|
3046
|
+
}
|
|
3047
|
+
/**
|
|
3048
|
+
* Check if the loader has been prepared
|
|
3049
|
+
*/
|
|
3050
|
+
isPrepared() {
|
|
3051
|
+
return this._prepared;
|
|
3052
|
+
}
|
|
3053
|
+
/**
|
|
3054
|
+
* Process a single source object using shape-based detection
|
|
3055
|
+
* @param source - Source configuration detected by key presence
|
|
3056
|
+
* @param filter - Filter to apply to discovered images
|
|
3057
|
+
* @returns Promise resolving to array of valid URLs from this source
|
|
3058
|
+
*/
|
|
3059
|
+
async processSource(t, e) {
|
|
3060
|
+
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), []);
|
|
3061
|
+
}
|
|
3062
|
+
/**
|
|
3063
|
+
* Process a list of direct URLs
|
|
3064
|
+
* @param urls - Array of image URLs
|
|
3065
|
+
* @param filter - Filter to apply to discovered images
|
|
3066
|
+
* @returns Promise resolving to array of validated URLs
|
|
3067
|
+
*/
|
|
3068
|
+
async processUrls(t, e) {
|
|
3069
|
+
if (!Array.isArray(t))
|
|
3070
|
+
return console.warn("URLs must be an array:", t), [];
|
|
3071
|
+
const i = [];
|
|
3072
|
+
for (const n of t) {
|
|
3073
|
+
const s = n.split("/").pop() || n;
|
|
3074
|
+
if (!e.isAllowed(s)) {
|
|
3075
|
+
this.log(`Skipping filtered URL: ${n}`);
|
|
3076
|
+
continue;
|
|
3077
|
+
}
|
|
3078
|
+
this.validateUrls ? await this.validateUrl(n) ? i.push(n) : console.warn(`Skipping invalid/missing URL: ${n}`) : i.push(n);
|
|
3079
|
+
}
|
|
3080
|
+
return i;
|
|
3081
|
+
}
|
|
3082
|
+
/**
|
|
3083
|
+
* Process a path-based source
|
|
3084
|
+
* @param basePath - Base path (relative or absolute)
|
|
3085
|
+
* @param files - Array of filenames
|
|
3086
|
+
* @param filter - Filter to apply to discovered images
|
|
3087
|
+
* @returns Promise resolving to array of validated URLs
|
|
3088
|
+
*/
|
|
3089
|
+
async processPath(t, e, i) {
|
|
3090
|
+
if (!Array.isArray(e))
|
|
3091
|
+
return console.warn("files must be an array:", e), [];
|
|
3092
|
+
const n = [];
|
|
3093
|
+
for (const s of e) {
|
|
3094
|
+
if (!i.isAllowed(s)) {
|
|
3095
|
+
this.log(`Skipping filtered file: ${s}`);
|
|
3096
|
+
continue;
|
|
3097
|
+
}
|
|
3098
|
+
const r = this.constructUrl(t, s);
|
|
3099
|
+
this.validateUrls ? await this.validateUrl(r) ? n.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : n.push(r);
|
|
3100
|
+
}
|
|
3101
|
+
return n;
|
|
3102
|
+
}
|
|
3103
|
+
/**
|
|
3104
|
+
* Process a JSON endpoint source
|
|
3105
|
+
* Fetches a JSON endpoint that returns { images: string[] }
|
|
3106
|
+
* @param url - JSON endpoint URL
|
|
3107
|
+
* @param filter - Filter to apply to discovered images
|
|
3108
|
+
* @returns Promise resolving to array of validated URLs
|
|
3109
|
+
*/
|
|
3110
|
+
async processJson(t, e) {
|
|
3111
|
+
this.log(`Fetching JSON endpoint: ${t}`);
|
|
3112
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), 1e4);
|
|
3113
|
+
try {
|
|
3114
|
+
const s = await fetch(t, { signal: i.signal });
|
|
3115
|
+
if (clearTimeout(n), !s.ok)
|
|
3116
|
+
throw new Error(`HTTP ${s.status} fetching ${t}`);
|
|
3117
|
+
const r = await s.json();
|
|
3118
|
+
if (!r || !Array.isArray(r.images))
|
|
3119
|
+
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3120
|
+
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
|
|
3121
|
+
} catch (s) {
|
|
3122
|
+
throw clearTimeout(n), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
|
|
3123
|
+
}
|
|
3124
|
+
}
|
|
3125
|
+
/**
|
|
3126
|
+
* Validate a single URL using HEAD request
|
|
3127
|
+
* @param url - URL to validate
|
|
3128
|
+
* @returns Promise resolving to true if valid and accessible
|
|
3129
|
+
*/
|
|
3130
|
+
async validateUrl(t) {
|
|
3131
|
+
if (this.validationMethod === "none")
|
|
3132
|
+
return !0;
|
|
3133
|
+
if (this.validationMethod === "simple")
|
|
3134
|
+
try {
|
|
3135
|
+
return typeof window < "u" ? new URL(t, window.location.origin) : new URL(t), !0;
|
|
3136
|
+
} catch {
|
|
3137
|
+
return !1;
|
|
3138
|
+
}
|
|
3139
|
+
if (typeof window > "u")
|
|
3140
|
+
return !0;
|
|
3141
|
+
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3142
|
+
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3143
|
+
try {
|
|
3144
|
+
const i = new AbortController(), n = setTimeout(() => i.abort(), this.validationTimeout), s = await fetch(t, {
|
|
3145
|
+
method: "HEAD",
|
|
3146
|
+
signal: i.signal
|
|
3147
|
+
});
|
|
3148
|
+
return clearTimeout(n), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
|
|
3149
|
+
} catch (i) {
|
|
3150
|
+
return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
|
|
3151
|
+
}
|
|
2978
3152
|
}
|
|
2979
3153
|
/**
|
|
2980
|
-
*
|
|
3154
|
+
* Construct full URL from basePath and filename
|
|
3155
|
+
* @param basePath - Base path (relative or absolute)
|
|
3156
|
+
* @param filename - Filename to append
|
|
3157
|
+
* @returns Complete URL
|
|
2981
3158
|
*/
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
)
|
|
2987
|
-
|
|
2988
|
-
const
|
|
2989
|
-
|
|
3159
|
+
constructUrl(t, e) {
|
|
3160
|
+
const i = t.replace(/\/$/, "");
|
|
3161
|
+
if (this.isAbsoluteUrl(t))
|
|
3162
|
+
return `${i}/${e}`;
|
|
3163
|
+
if (typeof window > "u")
|
|
3164
|
+
return `${i}/${e}`;
|
|
3165
|
+
const n = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
3166
|
+
return `${n}${r}/${e}`;
|
|
2990
3167
|
}
|
|
2991
3168
|
/**
|
|
2992
|
-
*
|
|
3169
|
+
* Check if URL is absolute (contains protocol)
|
|
3170
|
+
* @param url - URL to check
|
|
3171
|
+
* @returns True if absolute URL
|
|
2993
3172
|
*/
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
const i = this.imageLayouts[t];
|
|
3001
|
-
i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
|
|
3173
|
+
isAbsoluteUrl(t) {
|
|
3174
|
+
try {
|
|
3175
|
+
return new URL(t), !0;
|
|
3176
|
+
} catch {
|
|
3177
|
+
return !1;
|
|
3178
|
+
}
|
|
3002
3179
|
}
|
|
3003
3180
|
/**
|
|
3004
|
-
*
|
|
3181
|
+
* Debug logging helper
|
|
3182
|
+
* @param args - Arguments to log
|
|
3005
3183
|
*/
|
|
3006
|
-
|
|
3007
|
-
this.
|
|
3008
|
-
const t = this.getImageHeight();
|
|
3009
|
-
t !== this.currentImageHeight ? (this.logDebug(`Window resized to new breakpoint (height: ${t}px). Reloading images...`), this.loadImages()) : this.logDebug("Window resized (no breakpoint change)");
|
|
3010
|
-
}, 500));
|
|
3184
|
+
log(...t) {
|
|
3185
|
+
this.debugLogging && typeof console < "u" && console.log(...t);
|
|
3011
3186
|
}
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3187
|
+
}
|
|
3188
|
+
class Fe {
|
|
3189
|
+
constructor(t) {
|
|
3190
|
+
if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
|
|
3191
|
+
throw new Error("CompositeLoader requires at least one loader to be configured");
|
|
3192
|
+
this.log(`CompositeLoader initialized with ${this.loaders.length} loader(s)`);
|
|
3015
3193
|
}
|
|
3016
3194
|
/**
|
|
3017
|
-
*
|
|
3195
|
+
* Prepare all loaders in parallel and combine their results
|
|
3196
|
+
* @param filter - Filter to apply to discovered images
|
|
3018
3197
|
*/
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
}
|
|
3198
|
+
async prepare(t) {
|
|
3199
|
+
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3200
|
+
const e = this.loaders.map((i, n) => i.prepare(t).then(() => {
|
|
3201
|
+
this.log(`Loader ${n} prepared with ${i.imagesLength()} images`);
|
|
3202
|
+
}).catch((s) => {
|
|
3203
|
+
console.warn(`Loader ${n} failed to prepare:`, s);
|
|
3204
|
+
}));
|
|
3205
|
+
await Promise.all(e);
|
|
3206
|
+
for (const i of this.loaders)
|
|
3207
|
+
if (i.isPrepared()) {
|
|
3208
|
+
const n = i.imageURLs();
|
|
3209
|
+
this._discoveredUrls.push(...n);
|
|
3210
|
+
}
|
|
3211
|
+
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
3024
3212
|
}
|
|
3025
3213
|
/**
|
|
3026
|
-
*
|
|
3214
|
+
* Get the combined number of discovered images
|
|
3215
|
+
* @throws Error if called before prepare()
|
|
3027
3216
|
*/
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
let e = this.imageLoader.imageURLs();
|
|
3033
|
-
if (t === 0) {
|
|
3034
|
-
this.showError("No images found."), this.showLoading(!1);
|
|
3035
|
-
return;
|
|
3036
|
-
}
|
|
3037
|
-
const i = this.getContainerBounds(), o = this.getImageHeight(), s = window.innerWidth;
|
|
3038
|
-
this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${o}px`);
|
|
3039
|
-
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3040
|
-
i,
|
|
3041
|
-
t,
|
|
3042
|
-
o,
|
|
3043
|
-
s
|
|
3044
|
-
);
|
|
3045
|
-
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
3046
|
-
} catch (t) {
|
|
3047
|
-
console.error("Error loading images:", t), t instanceof Error && this.showError(t.message || "Failed to load images."), this.showLoading(!1);
|
|
3048
|
-
}
|
|
3217
|
+
imagesLength() {
|
|
3218
|
+
if (!this._prepared)
|
|
3219
|
+
throw new Error("CompositeLoader.imagesLength() called before prepare()");
|
|
3220
|
+
return this._discoveredUrls.length;
|
|
3049
3221
|
}
|
|
3050
3222
|
/**
|
|
3051
|
-
*
|
|
3223
|
+
* Get the combined ordered list of image URLs
|
|
3224
|
+
* @throws Error if called before prepare()
|
|
3052
3225
|
*/
|
|
3053
|
-
|
|
3054
|
-
this.
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
if (!this.containerEl) return;
|
|
3058
|
-
const i = this.getContainerBounds();
|
|
3059
|
-
this.currentImageHeight = e;
|
|
3060
|
-
const o = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
|
|
3061
|
-
this.imageLayouts = s, this.displayQueue = [];
|
|
3062
|
-
let r = 0;
|
|
3063
|
-
const a = (c) => {
|
|
3064
|
-
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
3065
|
-
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)) {
|
|
3066
|
-
const d = {
|
|
3067
|
-
x: parseFloat(c.dataset.startX),
|
|
3068
|
-
y: parseFloat(c.dataset.startY)
|
|
3069
|
-
}, f = {
|
|
3070
|
-
x: parseFloat(c.dataset.endX),
|
|
3071
|
-
y: parseFloat(c.dataset.endY)
|
|
3072
|
-
}, b = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale), E = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, v = c.dataset.startScale ? parseFloat(c.dataset.startScale) : m, w = this.entryAnimationEngine.getTiming();
|
|
3073
|
-
Qt({
|
|
3074
|
-
element: c,
|
|
3075
|
-
startPosition: d,
|
|
3076
|
-
endPosition: f,
|
|
3077
|
-
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3078
|
-
duration: w.duration,
|
|
3079
|
-
imageWidth: b,
|
|
3080
|
-
imageHeight: p,
|
|
3081
|
-
rotation: g,
|
|
3082
|
-
scale: m,
|
|
3083
|
-
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3084
|
-
startRotation: E,
|
|
3085
|
-
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3086
|
-
startScale: v
|
|
3087
|
-
});
|
|
3088
|
-
} else {
|
|
3089
|
-
const d = c.dataset.finalTransform || "";
|
|
3090
|
-
c.style.transform = d;
|
|
3091
|
-
}
|
|
3092
|
-
const l = parseInt(c.dataset.imageId || "0");
|
|
3093
|
-
if (this.fullConfig.config.debug?.enabled && l < 3) {
|
|
3094
|
-
const d = c.dataset.finalTransform || "";
|
|
3095
|
-
console.log(`Image ${l} final state:`, {
|
|
3096
|
-
left: c.style.left,
|
|
3097
|
-
top: c.style.top,
|
|
3098
|
-
width: c.style.width,
|
|
3099
|
-
height: c.style.height,
|
|
3100
|
-
computedWidth: c.offsetWidth,
|
|
3101
|
-
computedHeight: c.offsetHeight,
|
|
3102
|
-
transform: d,
|
|
3103
|
-
pathType: this.entryAnimationEngine.getPathType()
|
|
3104
|
-
});
|
|
3105
|
-
}
|
|
3106
|
-
}), r++);
|
|
3107
|
-
}, h = () => {
|
|
3108
|
-
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3109
|
-
for (; this.displayQueue.length > 0; ) {
|
|
3110
|
-
const c = this.displayQueue.shift();
|
|
3111
|
-
c && a(c);
|
|
3112
|
-
}
|
|
3113
|
-
return;
|
|
3114
|
-
}
|
|
3115
|
-
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3116
|
-
if (o !== this.loadGeneration) {
|
|
3117
|
-
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3118
|
-
return;
|
|
3119
|
-
}
|
|
3120
|
-
if (this.displayQueue.length > 0) {
|
|
3121
|
-
const c = this.displayQueue.shift();
|
|
3122
|
-
c && a(c);
|
|
3123
|
-
}
|
|
3124
|
-
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3125
|
-
}, this.fullConfig.animation.queue.interval);
|
|
3126
|
-
};
|
|
3127
|
-
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3128
|
-
const c = new IntersectionObserver((u) => {
|
|
3129
|
-
u.forEach((l) => {
|
|
3130
|
-
l.isIntersecting && (h(), c.disconnect());
|
|
3131
|
-
});
|
|
3132
|
-
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3133
|
-
c.observe(this.containerEl);
|
|
3134
|
-
} else
|
|
3135
|
-
h();
|
|
3136
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), s.forEach((c, u) => {
|
|
3137
|
-
const l = document.createElement("div");
|
|
3138
|
-
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";
|
|
3139
|
-
const d = c.x, f = c.y;
|
|
3140
|
-
l.style.left = `${d - 6}px`, l.style.top = `${f - 6}px`, l.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(l);
|
|
3141
|
-
})), t.forEach((c, u) => {
|
|
3142
|
-
const l = document.createElement("img");
|
|
3143
|
-
l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(u);
|
|
3144
|
-
const d = s[u];
|
|
3145
|
-
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", () => {
|
|
3146
|
-
this.hoveredImage = { element: l, layout: d }, this.zoomEngine.isInvolved(l) || (tt(l, this.hoverStyles), et(l, this.hoverClassName));
|
|
3147
|
-
}), l.addEventListener("mouseleave", () => {
|
|
3148
|
-
this.hoveredImage = null, this.zoomEngine.isInvolved(l) || (tt(l, this.defaultStyles), Mt(l, this.hoverClassName), et(l, this.defaultClassName));
|
|
3149
|
-
}), l.addEventListener("click", (f) => {
|
|
3150
|
-
f.stopPropagation(), this.handleImageClick(l, d);
|
|
3151
|
-
}), l.style.opacity = "0", l.style.transition = this.entryAnimationEngine.getTransitionCSS(), l.onload = () => {
|
|
3152
|
-
if (o !== this.loadGeneration)
|
|
3153
|
-
return;
|
|
3154
|
-
const f = l.naturalWidth / l.naturalHeight, b = e * f;
|
|
3155
|
-
l.style.width = `${b}px`;
|
|
3156
|
-
const p = { x: d.x, y: d.y }, g = { width: b, height: e }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3157
|
-
p,
|
|
3158
|
-
g,
|
|
3159
|
-
i,
|
|
3160
|
-
u,
|
|
3161
|
-
t.length
|
|
3162
|
-
), E = this.entryAnimationEngine.calculateStartRotation(d.rotation), v = this.entryAnimationEngine.calculateStartScale(d.scale), w = this.entryAnimationEngine.buildFinalTransform(
|
|
3163
|
-
d.rotation,
|
|
3164
|
-
d.scale,
|
|
3165
|
-
b,
|
|
3166
|
-
e
|
|
3167
|
-
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3168
|
-
m,
|
|
3169
|
-
p,
|
|
3170
|
-
d.rotation,
|
|
3171
|
-
d.scale,
|
|
3172
|
-
b,
|
|
3173
|
-
e,
|
|
3174
|
-
E,
|
|
3175
|
-
v
|
|
3176
|
-
);
|
|
3177
|
-
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
3178
|
-
finalPosition: p,
|
|
3179
|
-
imageSize: g,
|
|
3180
|
-
left: d.x,
|
|
3181
|
-
top: d.y,
|
|
3182
|
-
finalTransform: w,
|
|
3183
|
-
renderedWidth: b,
|
|
3184
|
-
renderedHeight: e
|
|
3185
|
-
}), 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(m.x), l.dataset.startY = String(m.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);
|
|
3186
|
-
}, l.onerror = () => r++, l.src = c;
|
|
3187
|
-
});
|
|
3188
|
-
}
|
|
3189
|
-
async handleImageClick(t, e) {
|
|
3190
|
-
if (!this.containerEl) return;
|
|
3191
|
-
const i = this.zoomEngine.isFocused(t), o = {
|
|
3192
|
-
width: this.containerEl.offsetWidth,
|
|
3193
|
-
height: this.containerEl.offsetHeight
|
|
3194
|
-
};
|
|
3195
|
-
if (i)
|
|
3196
|
-
await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter();
|
|
3197
|
-
else {
|
|
3198
|
-
const s = t.dataset.imageId;
|
|
3199
|
-
this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, o, e), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3200
|
-
}
|
|
3226
|
+
imageURLs() {
|
|
3227
|
+
if (!this._prepared)
|
|
3228
|
+
throw new Error("CompositeLoader.imageURLs() called before prepare()");
|
|
3229
|
+
return [...this._discoveredUrls];
|
|
3201
3230
|
}
|
|
3202
3231
|
/**
|
|
3203
|
-
*
|
|
3232
|
+
* Check if the loader has been prepared
|
|
3204
3233
|
*/
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
}
|
|
3208
|
-
showLoading(t) {
|
|
3209
|
-
!this.fullConfig.rendering.ui.showLoadingSpinner || !this.loadingEl || (t ? this.loadingEl.classList.remove("fbn-ic-hidden") : this.loadingEl.classList.add("fbn-ic-hidden"));
|
|
3210
|
-
}
|
|
3211
|
-
showError(t) {
|
|
3212
|
-
this.errorEl && (this.errorEl.textContent = t, this.errorEl.classList.remove("fbn-ic-hidden"));
|
|
3213
|
-
}
|
|
3214
|
-
hideError() {
|
|
3215
|
-
this.errorEl && this.errorEl.classList.add("fbn-ic-hidden");
|
|
3216
|
-
}
|
|
3217
|
-
updateCounter(t) {
|
|
3218
|
-
!this.fullConfig.rendering.ui.showImageCounter || !this.counterEl || (this.counterEl.textContent = `${t + 1} of ${this.imageElements.length}`, this.counterEl.classList.remove("fbn-ic-hidden"));
|
|
3219
|
-
}
|
|
3220
|
-
hideCounter() {
|
|
3221
|
-
this.counterEl && this.counterEl.classList.add("fbn-ic-hidden");
|
|
3234
|
+
isPrepared() {
|
|
3235
|
+
return this._prepared;
|
|
3222
3236
|
}
|
|
3223
3237
|
/**
|
|
3224
|
-
*
|
|
3238
|
+
* Debug logging helper
|
|
3239
|
+
* @param args - Arguments to log
|
|
3225
3240
|
*/
|
|
3226
|
-
|
|
3227
|
-
this.
|
|
3241
|
+
log(...t) {
|
|
3242
|
+
this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
|
|
3228
3243
|
}
|
|
3229
3244
|
}
|
|
3230
3245
|
export {
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3246
|
+
Xt as AnimationEngine,
|
|
3247
|
+
St as BOUNCE_PRESETS,
|
|
3248
|
+
ge as ClusterPlacementLayout,
|
|
3249
|
+
Fe as CompositeLoader,
|
|
3235
3250
|
y as DEFAULT_CONFIG,
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3251
|
+
Lt as DEFAULT_SHARED_LOADER_CONFIG,
|
|
3252
|
+
Et as ELASTIC_PRESETS,
|
|
3253
|
+
oe as EntryAnimationEngine,
|
|
3254
|
+
Ce as FUNCTIONAL_CSS,
|
|
3255
|
+
Me as GoogleDriveLoader,
|
|
3256
|
+
ce as GridPlacementLayout,
|
|
3257
|
+
Le as ImageCloud,
|
|
3258
|
+
Te as ImageFilter,
|
|
3259
|
+
Le as ImageGallery,
|
|
3260
|
+
fe as LayoutEngine,
|
|
3261
|
+
ae as RadialPlacementLayout,
|
|
3262
|
+
se as RandomPlacementLayout,
|
|
3263
|
+
de as SpiralPlacementLayout,
|
|
3264
|
+
ze as StaticImageLoader,
|
|
3265
|
+
It as WAVE_PATH_PRESETS,
|
|
3266
|
+
me as WavePlacementLayout,
|
|
3267
|
+
ve as ZoomEngine,
|
|
3268
|
+
ee as animatePath,
|
|
3269
|
+
Re as injectFunctionalStyles,
|
|
3270
|
+
ie as requiresJSAnimation
|
|
3256
3271
|
};
|
|
3257
3272
|
//# sourceMappingURL=image-cloud.js.map
|