@frybynite/image-cloud 0.9.1 → 0.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/image-cloud-auto-init.js +639 -678
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +679 -717
- package/dist/image-cloud.js.map +1 -1
- package/dist/image-cloud.umd.js +3 -3
- package/dist/image-cloud.umd.js.map +1 -1
- package/dist/index.d.ts +16 -31
- package/dist/react.d.ts +16 -31
- package/dist/react.js +572 -611
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +16 -31
- package/dist/vue.js +682 -721
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +16 -31
- package/dist/web-component.js +389 -428
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/image-cloud.js
CHANGED
|
@@ -18,7 +18,7 @@ const mt = Object.freeze({
|
|
|
18
18
|
playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
|
|
19
19
|
serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
|
|
20
20
|
flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
|
|
21
|
-
}),
|
|
21
|
+
}), bt = Object.freeze({
|
|
22
22
|
type: "linear"
|
|
23
23
|
}), vt = Object.freeze({
|
|
24
24
|
mode: "none"
|
|
@@ -59,9 +59,9 @@ const mt = Object.freeze({
|
|
|
59
59
|
phaseShift: 0,
|
|
60
60
|
synchronization: "offset"
|
|
61
61
|
// Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
|
|
62
|
-
}), kt = Object.freeze({
|
|
63
|
-
spacing: 0
|
|
64
62
|
}), Nt = Object.freeze({
|
|
63
|
+
spacing: 0
|
|
64
|
+
}), kt = Object.freeze({
|
|
65
65
|
mobile: Object.freeze({ maxWidth: 767 }),
|
|
66
66
|
tablet: Object.freeze({ maxWidth: 1199 })
|
|
67
67
|
}), jt = Object.freeze({
|
|
@@ -94,7 +94,7 @@ const mt = Object.freeze({
|
|
|
94
94
|
enabled: !1,
|
|
95
95
|
centers: !1,
|
|
96
96
|
loaders: !1
|
|
97
|
-
}), Gt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), qt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Bt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Xt = Object.freeze({ speed: 4e3, direction: "clockwise" }), Dt = Object.freeze({ type: "none" }),
|
|
97
|
+
}), Gt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), qt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Bt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Xt = Object.freeze({ speed: 4e3, direction: "clockwise" }), Dt = Object.freeze({ type: "none" }), R = Object.freeze({
|
|
98
98
|
// Loader configuration (always an array, composite behavior is implicit)
|
|
99
99
|
loaders: [],
|
|
100
100
|
// Shared loader settings and debug config
|
|
@@ -109,16 +109,14 @@ const mt = Object.freeze({
|
|
|
109
109
|
algorithm: "radial",
|
|
110
110
|
scaleDecay: 0,
|
|
111
111
|
// No decay by default (0-1 for radial/spiral)
|
|
112
|
-
responsive:
|
|
112
|
+
responsive: kt,
|
|
113
113
|
targetCoverage: 0.6,
|
|
114
114
|
// Target 60% of container area
|
|
115
115
|
densityFactor: 1,
|
|
116
116
|
// Default density
|
|
117
117
|
spacing: Object.freeze({
|
|
118
|
-
padding: 50
|
|
118
|
+
padding: 50
|
|
119
119
|
// padding from viewport edges
|
|
120
|
-
minGap: 20
|
|
121
|
-
// minimum spacing between images
|
|
122
120
|
})
|
|
123
121
|
}),
|
|
124
122
|
// Pattern-based animation configuration
|
|
@@ -139,12 +137,6 @@ const mt = Object.freeze({
|
|
|
139
137
|
interval: 150
|
|
140
138
|
// ms between processing queue items (when enabled)
|
|
141
139
|
}),
|
|
142
|
-
performance: Object.freeze({
|
|
143
|
-
useGPU: void 0,
|
|
144
|
-
// STUB: Not implemented yet
|
|
145
|
-
reduceMotion: void 0
|
|
146
|
-
// STUB: Not implemented yet
|
|
147
|
-
}),
|
|
148
140
|
entry: Object.freeze({
|
|
149
141
|
start: Object.freeze({
|
|
150
142
|
position: "nearest-edge",
|
|
@@ -163,7 +155,7 @@ const mt = Object.freeze({
|
|
|
163
155
|
}),
|
|
164
156
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
165
157
|
// smooth deceleration
|
|
166
|
-
path:
|
|
158
|
+
path: bt,
|
|
167
159
|
rotation: vt,
|
|
168
160
|
scale: wt
|
|
169
161
|
}),
|
|
@@ -179,83 +171,63 @@ const mt = Object.freeze({
|
|
|
179
171
|
// Use default animation duration
|
|
180
172
|
}),
|
|
181
173
|
navigation: Object.freeze({
|
|
182
|
-
keyboard:
|
|
183
|
-
|
|
184
|
-
swipe: void 0,
|
|
185
|
-
// STUB: Not implemented yet
|
|
174
|
+
keyboard: !0,
|
|
175
|
+
swipe: !0,
|
|
186
176
|
mouseWheel: void 0
|
|
187
177
|
// STUB: Not implemented yet
|
|
188
178
|
}),
|
|
189
|
-
|
|
190
|
-
pinchToZoom: void 0,
|
|
191
|
-
// STUB: Not implemented yet
|
|
192
|
-
doubleTapToFocus: void 0
|
|
193
|
-
// STUB: Not implemented yet
|
|
194
|
-
}),
|
|
195
|
-
disableDragging: !1
|
|
179
|
+
dragging: !0
|
|
196
180
|
}),
|
|
197
|
-
//
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
mobile: 768,
|
|
202
|
-
tablet: void 0,
|
|
203
|
-
// STUB: Not implemented yet
|
|
204
|
-
desktop: void 0
|
|
205
|
-
// STUB: Not implemented yet
|
|
206
|
-
}),
|
|
207
|
-
mobileDetection: () => typeof window > "u" ? !1 : window.innerWidth <= 768
|
|
208
|
-
}),
|
|
209
|
-
ui: Object.freeze({
|
|
210
|
-
showLoadingSpinner: !1,
|
|
211
|
-
showImageCounter: !1
|
|
212
|
-
})
|
|
181
|
+
// UI configuration
|
|
182
|
+
ui: Object.freeze({
|
|
183
|
+
showLoadingSpinner: !1,
|
|
184
|
+
showImageCounter: !1
|
|
213
185
|
}),
|
|
214
186
|
// Image styling
|
|
215
187
|
styling: Mt
|
|
216
188
|
});
|
|
217
|
-
function Z(
|
|
218
|
-
if (!
|
|
219
|
-
if (!t) return { ...
|
|
220
|
-
const i = { ...
|
|
221
|
-
return t.border !== void 0 && (i.border = { ...
|
|
189
|
+
function Z(n, t) {
|
|
190
|
+
if (!n) return t || {};
|
|
191
|
+
if (!t) return { ...n };
|
|
192
|
+
const i = { ...n };
|
|
193
|
+
return t.border !== void 0 && (i.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (i.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (i.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (i.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (i.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (i.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (i.outline = { ...n.outline, ...t.outline }), t.shadow !== void 0 && (i.shadow = t.shadow), t.clipPath !== void 0 && (i.clipPath = t.clipPath), t.opacity !== void 0 && (i.opacity = t.opacity), t.cursor !== void 0 && (i.cursor = t.cursor), t.className !== void 0 && (i.className = t.className), t.objectFit !== void 0 && (i.objectFit = t.objectFit), t.aspectRatio !== void 0 && (i.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (i.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (i.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (i.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (i.borderRadiusBottomLeft = t.borderRadiusBottomLeft), i;
|
|
222
194
|
}
|
|
223
|
-
function Yt(
|
|
224
|
-
if (!t) return { ...
|
|
225
|
-
const i = Z(
|
|
226
|
-
Z(i,
|
|
195
|
+
function Yt(n, t) {
|
|
196
|
+
if (!t) return { ...n };
|
|
197
|
+
const i = Z(n.default, t.default), e = Z(
|
|
198
|
+
Z(i, n.hover),
|
|
227
199
|
t.hover
|
|
228
|
-
),
|
|
229
|
-
Z(i,
|
|
200
|
+
), o = Z(
|
|
201
|
+
Z(i, n.focused),
|
|
230
202
|
t.focused
|
|
231
203
|
);
|
|
232
204
|
return {
|
|
233
205
|
default: i,
|
|
234
206
|
hover: e,
|
|
235
|
-
focused:
|
|
207
|
+
focused: o
|
|
236
208
|
};
|
|
237
209
|
}
|
|
238
|
-
function Vt(
|
|
239
|
-
if (!t) return { ...
|
|
240
|
-
const i = { ...
|
|
210
|
+
function Vt(n, t) {
|
|
211
|
+
if (!t) return { ...n };
|
|
212
|
+
const i = { ...n };
|
|
241
213
|
if (t.sizing !== void 0 && (i.sizing = {
|
|
242
|
-
...
|
|
214
|
+
...n.sizing,
|
|
243
215
|
...t.sizing
|
|
244
216
|
}, t.sizing.variance)) {
|
|
245
|
-
const e = t.sizing.variance,
|
|
246
|
-
i.sizing.variance = { min:
|
|
217
|
+
const e = t.sizing.variance, o = e.min !== void 0 && e.min >= 0.25 && e.min <= 1 ? e.min : n.sizing?.variance?.min ?? 1, a = e.max !== void 0 && e.max >= 1 && e.max <= 1.75 ? e.max : n.sizing?.variance?.max ?? 1;
|
|
218
|
+
i.sizing.variance = { min: o, max: a };
|
|
247
219
|
}
|
|
248
220
|
if (t.rotation !== void 0 && (i.rotation = {
|
|
249
|
-
...
|
|
221
|
+
...n.rotation,
|
|
250
222
|
...t.rotation
|
|
251
223
|
}, t.rotation.range)) {
|
|
252
|
-
const e = t.rotation.range,
|
|
253
|
-
i.rotation.range = { min:
|
|
224
|
+
const e = t.rotation.range, o = e.min !== void 0 && e.min >= -180 && e.min <= 0 ? e.min : n.rotation?.range?.min ?? -15, a = e.max !== void 0 && e.max >= 0 && e.max <= 180 ? e.max : n.rotation?.range?.max ?? 15;
|
|
225
|
+
i.rotation.range = { min: o, max: a };
|
|
254
226
|
}
|
|
255
227
|
return i;
|
|
256
228
|
}
|
|
257
|
-
function Jt(
|
|
258
|
-
const t =
|
|
229
|
+
function Jt(n) {
|
|
230
|
+
const t = n.layout?.rotation;
|
|
259
231
|
if (t && "enabled" in t)
|
|
260
232
|
return {
|
|
261
233
|
rotation: {
|
|
@@ -264,8 +236,8 @@ function Jt(o) {
|
|
|
264
236
|
}
|
|
265
237
|
};
|
|
266
238
|
}
|
|
267
|
-
function Kt(
|
|
268
|
-
const t =
|
|
239
|
+
function Kt(n) {
|
|
240
|
+
const t = n.layout?.sizing?.variance;
|
|
269
241
|
if (t)
|
|
270
242
|
return {
|
|
271
243
|
sizing: {
|
|
@@ -275,101 +247,90 @@ function Kt(o) {
|
|
|
275
247
|
}
|
|
276
248
|
};
|
|
277
249
|
}
|
|
278
|
-
function Zt(
|
|
279
|
-
const t = Jt(
|
|
280
|
-
let e =
|
|
250
|
+
function Zt(n = {}) {
|
|
251
|
+
const t = Jt(n), i = Kt(n);
|
|
252
|
+
let e = n.image;
|
|
281
253
|
(t || i) && (e = {
|
|
282
254
|
...i || {},
|
|
283
255
|
...t || {},
|
|
284
256
|
...e
|
|
285
|
-
}, e.rotation && t?.rotation &&
|
|
257
|
+
}, e.rotation && t?.rotation && n.image?.rotation && (e.rotation = {
|
|
286
258
|
...t.rotation,
|
|
287
|
-
...
|
|
259
|
+
...n.image.rotation
|
|
288
260
|
}));
|
|
289
|
-
const
|
|
290
|
-
|
|
261
|
+
const o = [...n.loaders ?? []];
|
|
262
|
+
n.images && n.images.length > 0 && o.unshift({
|
|
291
263
|
static: {
|
|
292
|
-
sources: [{ urls:
|
|
264
|
+
sources: [{ urls: n.images }]
|
|
293
265
|
}
|
|
294
266
|
});
|
|
295
267
|
const r = {
|
|
296
268
|
loaders: {
|
|
297
269
|
...zt,
|
|
298
|
-
...
|
|
270
|
+
...n.config?.loaders ?? {}
|
|
299
271
|
}
|
|
300
272
|
}, s = {
|
|
301
|
-
loaders:
|
|
273
|
+
loaders: o,
|
|
302
274
|
config: r,
|
|
303
275
|
image: Vt(Ft, e),
|
|
304
|
-
layout: { ...
|
|
305
|
-
animation: { ...
|
|
306
|
-
interaction: { ...
|
|
307
|
-
|
|
308
|
-
styling: Yt(Mt,
|
|
276
|
+
layout: { ...R.layout },
|
|
277
|
+
animation: { ...R.animation },
|
|
278
|
+
interaction: { ...R.interaction },
|
|
279
|
+
ui: { ...R.ui },
|
|
280
|
+
styling: Yt(Mt, n.styling)
|
|
309
281
|
};
|
|
310
|
-
|
|
311
|
-
...
|
|
312
|
-
...
|
|
313
|
-
},
|
|
314
|
-
...
|
|
315
|
-
mobile:
|
|
316
|
-
tablet:
|
|
317
|
-
}),
|
|
318
|
-
...
|
|
319
|
-
...
|
|
320
|
-
})),
|
|
321
|
-
...
|
|
322
|
-
...
|
|
323
|
-
},
|
|
324
|
-
...
|
|
325
|
-
...
|
|
326
|
-
}),
|
|
327
|
-
...
|
|
328
|
-
...
|
|
329
|
-
}),
|
|
330
|
-
...
|
|
331
|
-
...
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
} :
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : E.animation.entry.rotation,
|
|
343
|
-
scale: o.animation.entry.scale ? { ...wt, ...o.animation.entry.scale } : E.animation.entry.scale
|
|
344
|
-
}), o.animation.idle && (s.animation.idle = {
|
|
282
|
+
n.layout && (s.layout = {
|
|
283
|
+
...R.layout,
|
|
284
|
+
...n.layout
|
|
285
|
+
}, n.layout.responsive && (s.layout.responsive = {
|
|
286
|
+
...R.layout.responsive,
|
|
287
|
+
mobile: n.layout.responsive.mobile ? { ...R.layout.responsive.mobile, ...n.layout.responsive.mobile } : R.layout.responsive.mobile,
|
|
288
|
+
tablet: n.layout.responsive.tablet ? { ...R.layout.responsive.tablet, ...n.layout.responsive.tablet } : R.layout.responsive.tablet
|
|
289
|
+
}), n.layout.spacing && (s.layout.spacing = {
|
|
290
|
+
...R.layout.spacing,
|
|
291
|
+
...n.layout.spacing
|
|
292
|
+
})), n.animation && (s.animation = {
|
|
293
|
+
...R.animation,
|
|
294
|
+
...n.animation
|
|
295
|
+
}, n.animation.easing && (s.animation.easing = {
|
|
296
|
+
...R.animation.easing,
|
|
297
|
+
...n.animation.easing
|
|
298
|
+
}), n.animation.queue && (s.animation.queue = {
|
|
299
|
+
...R.animation.queue,
|
|
300
|
+
...n.animation.queue
|
|
301
|
+
}), n.animation.entry && (s.animation.entry = {
|
|
302
|
+
...R.animation.entry,
|
|
303
|
+
...n.animation.entry,
|
|
304
|
+
start: n.animation.entry.start ? {
|
|
305
|
+
...R.animation.entry.start,
|
|
306
|
+
...n.animation.entry.start,
|
|
307
|
+
circular: n.animation.entry.start.circular ? { ...R.animation.entry.start.circular, ...n.animation.entry.start.circular } : R.animation.entry.start.circular
|
|
308
|
+
} : R.animation.entry.start,
|
|
309
|
+
timing: n.animation.entry.timing ? { ...R.animation.entry.timing, ...n.animation.entry.timing } : R.animation.entry.timing,
|
|
310
|
+
path: n.animation.entry.path ? { ...bt, ...n.animation.entry.path } : R.animation.entry.path,
|
|
311
|
+
rotation: n.animation.entry.rotation ? { ...vt, ...n.animation.entry.rotation } : R.animation.entry.rotation,
|
|
312
|
+
scale: n.animation.entry.scale ? { ...wt, ...n.animation.entry.scale } : R.animation.entry.scale
|
|
313
|
+
}), n.animation.idle && (s.animation.idle = {
|
|
345
314
|
...Dt,
|
|
346
|
-
...
|
|
347
|
-
})),
|
|
348
|
-
...
|
|
349
|
-
...
|
|
350
|
-
},
|
|
351
|
-
...
|
|
352
|
-
...
|
|
353
|
-
}),
|
|
354
|
-
...
|
|
355
|
-
...
|
|
356
|
-
})
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
...
|
|
361
|
-
...
|
|
362
|
-
},
|
|
363
|
-
...E.rendering.responsive,
|
|
364
|
-
...o.rendering.responsive,
|
|
365
|
-
breakpoints: o.rendering.responsive.breakpoints ? { ...E.rendering.responsive.breakpoints, ...o.rendering.responsive.breakpoints } : E.rendering.responsive.breakpoints,
|
|
366
|
-
mobileDetection: o.rendering.responsive.mobileDetection ? o.rendering.responsive.mobileDetection : E.rendering.responsive.mobileDetection
|
|
367
|
-
}), o.rendering.ui && (s.rendering.ui = {
|
|
368
|
-
...E.rendering.ui,
|
|
369
|
-
...o.rendering.ui
|
|
370
|
-
})), s.config.debug = {
|
|
315
|
+
...n.animation.idle
|
|
316
|
+
})), n.interaction && (s.interaction = {
|
|
317
|
+
...R.interaction,
|
|
318
|
+
...n.interaction
|
|
319
|
+
}, n.interaction.focus && (s.interaction.focus = {
|
|
320
|
+
...R.interaction.focus,
|
|
321
|
+
...n.interaction.focus
|
|
322
|
+
}), n.interaction.navigation && (s.interaction.navigation = {
|
|
323
|
+
...R.interaction.navigation,
|
|
324
|
+
...n.interaction.navigation
|
|
325
|
+
}));
|
|
326
|
+
const l = n.rendering?.ui;
|
|
327
|
+
if (l && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), s.ui = {
|
|
328
|
+
...R.ui,
|
|
329
|
+
...l,
|
|
330
|
+
...n.ui
|
|
331
|
+
}, s.config.debug = {
|
|
371
332
|
...Ot,
|
|
372
|
-
...
|
|
333
|
+
...n.config?.debug ?? {}
|
|
373
334
|
}, s.layout.algorithm === "honeycomb" && s.styling) {
|
|
374
335
|
const c = { shape: "hexagon", mode: "height-relative" };
|
|
375
336
|
s.styling = {
|
|
@@ -381,14 +342,14 @@ function Zt(o = {}) {
|
|
|
381
342
|
}
|
|
382
343
|
return s;
|
|
383
344
|
}
|
|
384
|
-
function Qt(
|
|
385
|
-
return { ...
|
|
345
|
+
function Qt(n, t) {
|
|
346
|
+
return { ...n ? It[n] : It.playful, ...t };
|
|
386
347
|
}
|
|
387
|
-
function te(
|
|
388
|
-
return { ...
|
|
348
|
+
function te(n, t) {
|
|
349
|
+
return { ...n ? Rt[n] : Rt.gentle, ...t };
|
|
389
350
|
}
|
|
390
|
-
function ee(
|
|
391
|
-
return { ...
|
|
351
|
+
function ee(n, t) {
|
|
352
|
+
return { ...n ? Tt[n] : Tt.gentle, ...t };
|
|
392
353
|
}
|
|
393
354
|
class ie {
|
|
394
355
|
constructor(t) {
|
|
@@ -401,8 +362,8 @@ class ie {
|
|
|
401
362
|
buildTransformString(t) {
|
|
402
363
|
const i = ["translate(-50%, -50%)"];
|
|
403
364
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
404
|
-
const e = t.x ?? 0,
|
|
405
|
-
i.push(`translate(${e}px, ${
|
|
365
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
366
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
406
367
|
}
|
|
407
368
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && i.push(`scale(${t.scale})`), i.join(" ");
|
|
408
369
|
}
|
|
@@ -415,14 +376,14 @@ class ie {
|
|
|
415
376
|
* @param easing - CSS easing function (optional)
|
|
416
377
|
* @returns AnimationHandle that can be used to cancel or query the animation
|
|
417
378
|
*/
|
|
418
|
-
animateTransformCancellable(t, i, e,
|
|
379
|
+
animateTransformCancellable(t, i, e, o = null, a = null) {
|
|
419
380
|
this.cancelAllAnimations(t);
|
|
420
|
-
const r =
|
|
381
|
+
const r = o ?? this.config.duration, s = a ?? this.config.easing.default, l = this.buildTransformString(i), c = this.buildTransformString(e);
|
|
421
382
|
t.style.transition = "none";
|
|
422
383
|
const u = t.animate(
|
|
423
384
|
[
|
|
424
|
-
{ transform:
|
|
425
|
-
{ transform:
|
|
385
|
+
{ transform: l },
|
|
386
|
+
{ transform: c }
|
|
426
387
|
],
|
|
427
388
|
{
|
|
428
389
|
duration: r,
|
|
@@ -440,7 +401,7 @@ class ie {
|
|
|
440
401
|
duration: r
|
|
441
402
|
};
|
|
442
403
|
return this.activeAnimations.set(t, h), u.finished.then(() => {
|
|
443
|
-
t.style.transform =
|
|
404
|
+
t.style.transform = c, this.activeAnimations.delete(t);
|
|
444
405
|
}).catch(() => {
|
|
445
406
|
this.activeAnimations.delete(t);
|
|
446
407
|
}), h;
|
|
@@ -454,13 +415,13 @@ class ie {
|
|
|
454
415
|
cancelAnimation(t, i = !0) {
|
|
455
416
|
const e = this.getCurrentTransform(t.element);
|
|
456
417
|
if (t.animation.cancel(), i) {
|
|
457
|
-
const
|
|
418
|
+
const o = this.buildTransformString({
|
|
458
419
|
x: e.x,
|
|
459
420
|
y: e.y,
|
|
460
421
|
rotation: e.rotation,
|
|
461
422
|
scale: e.scale
|
|
462
423
|
});
|
|
463
|
-
t.element.style.transform =
|
|
424
|
+
t.element.style.transform = o;
|
|
464
425
|
}
|
|
465
426
|
return this.activeAnimations.delete(t.element), e;
|
|
466
427
|
}
|
|
@@ -473,8 +434,8 @@ class ie {
|
|
|
473
434
|
const i = this.activeAnimations.get(t);
|
|
474
435
|
i && this.cancelAnimation(i, !1);
|
|
475
436
|
const e = t.getAnimations();
|
|
476
|
-
for (const
|
|
477
|
-
|
|
437
|
+
for (const o of e)
|
|
438
|
+
o.cancel();
|
|
478
439
|
}
|
|
479
440
|
/**
|
|
480
441
|
* Get current transform state of an element (works mid-animation)
|
|
@@ -486,8 +447,8 @@ class ie {
|
|
|
486
447
|
const e = getComputedStyle(t).transform;
|
|
487
448
|
if (e === "none" || !e)
|
|
488
449
|
return { x: 0, y: 0, rotation: 0, scale: 1 };
|
|
489
|
-
const
|
|
490
|
-
return { x: s, y:
|
|
450
|
+
const o = new DOMMatrix(e), a = Math.sqrt(o.a * o.a + o.b * o.b), r = Math.atan2(o.b, o.a) * (180 / Math.PI), s = o.e, l = o.f;
|
|
451
|
+
return { x: s, y: l, rotation: r, scale: a };
|
|
491
452
|
}
|
|
492
453
|
/**
|
|
493
454
|
* Check if an element has an active animation
|
|
@@ -513,9 +474,9 @@ class ie {
|
|
|
513
474
|
* @param easing - CSS easing function (optional)
|
|
514
475
|
* @returns Promise that resolves when animation completes
|
|
515
476
|
*/
|
|
516
|
-
animateTransform(t, i, e = null,
|
|
477
|
+
animateTransform(t, i, e = null, o = null) {
|
|
517
478
|
return new Promise((a) => {
|
|
518
|
-
const r = e ?? this.config.duration, s =
|
|
479
|
+
const r = e ?? this.config.duration, s = o ?? this.config.easing.default;
|
|
519
480
|
t.style.transition = `transform ${r}ms ${s}, box-shadow ${r}ms ${s}`, t.style.transform = this.buildTransformString(i), setTimeout(() => {
|
|
520
481
|
a();
|
|
521
482
|
}, r);
|
|
@@ -546,141 +507,141 @@ class ie {
|
|
|
546
507
|
return new Promise((i) => setTimeout(i, t));
|
|
547
508
|
}
|
|
548
509
|
}
|
|
549
|
-
function J(
|
|
550
|
-
return
|
|
510
|
+
function J(n, t, i) {
|
|
511
|
+
return n + (t - n) * i;
|
|
551
512
|
}
|
|
552
|
-
function
|
|
553
|
-
const { overshoot:
|
|
554
|
-
let u = 0, h = 0, d = 1, f =
|
|
555
|
-
for (let g = 0; g <
|
|
556
|
-
if (
|
|
557
|
-
h = g === 0 ? 0 :
|
|
513
|
+
function oe(n, t, i, e) {
|
|
514
|
+
const { overshoot: o, bounces: a, decayRatio: r } = e, s = i.x - t.x, l = i.y - t.y, c = ne(a, r);
|
|
515
|
+
let u = 0, h = 0, d = 1, f = o, y = !1;
|
|
516
|
+
for (let g = 0; g < c.length; g++)
|
|
517
|
+
if (n <= c[g].time) {
|
|
518
|
+
h = g === 0 ? 0 : c[g - 1].time, d = c[g].time, f = c[g].overshoot, y = c[g].isOvershoot;
|
|
558
519
|
break;
|
|
559
520
|
}
|
|
560
|
-
const p = (
|
|
561
|
-
if (
|
|
562
|
-
u = 1 + f *
|
|
521
|
+
const p = (n - h) / (d - h);
|
|
522
|
+
if (y)
|
|
523
|
+
u = 1 + f * nt(p);
|
|
563
524
|
else if (h === 0)
|
|
564
|
-
u =
|
|
525
|
+
u = nt(p);
|
|
565
526
|
else {
|
|
566
|
-
const m = 1 + (
|
|
567
|
-
(
|
|
527
|
+
const m = 1 + (c.find(
|
|
528
|
+
(b, w) => b.time > h && w > 0 && c[w - 1].isOvershoot
|
|
568
529
|
)?.overshoot || f);
|
|
569
|
-
u = J(m, 1,
|
|
530
|
+
u = J(m, 1, nt(p));
|
|
570
531
|
}
|
|
571
532
|
return {
|
|
572
533
|
x: t.x + s * u,
|
|
573
|
-
y: t.y +
|
|
534
|
+
y: t.y + l * u
|
|
574
535
|
};
|
|
575
536
|
}
|
|
576
|
-
function
|
|
537
|
+
function ne(n, t) {
|
|
577
538
|
const i = [];
|
|
578
539
|
let e = 0.6;
|
|
579
540
|
i.push({ time: e, overshoot: 0, isOvershoot: !1 });
|
|
580
|
-
let
|
|
581
|
-
const r = 0.4 / (
|
|
582
|
-
for (let s = 0; s <
|
|
583
|
-
e += r, i.push({ time: e, overshoot:
|
|
541
|
+
let o = 0.15;
|
|
542
|
+
const r = 0.4 / (n * 2);
|
|
543
|
+
for (let s = 0; s < n; s++)
|
|
544
|
+
e += r, i.push({ time: e, overshoot: o, isOvershoot: !0 }), e += r, i.push({ time: e, overshoot: o * t, isOvershoot: !1 }), o *= t;
|
|
584
545
|
return i.push({ time: 1, overshoot: 0, isOvershoot: !1 }), i;
|
|
585
546
|
}
|
|
586
|
-
function se(
|
|
587
|
-
const { stiffness:
|
|
547
|
+
function se(n, t, i, e) {
|
|
548
|
+
const { stiffness: o, damping: a, mass: r, oscillations: s } = e, l = i.x - t.x, c = i.y - t.y, u = Math.sqrt(o / r), h = a / (2 * Math.sqrt(o * r));
|
|
588
549
|
let d;
|
|
589
550
|
if (h < 1) {
|
|
590
|
-
const f = u * Math.sqrt(1 - h * h),
|
|
591
|
-
d = 1 -
|
|
551
|
+
const f = u * Math.sqrt(1 - h * h), y = Math.exp(-h * u * n * 3), p = Math.cos(f * n * s * Math.PI);
|
|
552
|
+
d = 1 - y * p;
|
|
592
553
|
} else
|
|
593
|
-
d = 1 - Math.exp(-u *
|
|
554
|
+
d = 1 - Math.exp(-u * n * 3);
|
|
594
555
|
return d = Math.max(0, Math.min(d, 1.3)), {
|
|
595
|
-
x: t.x +
|
|
596
|
-
y: t.y +
|
|
556
|
+
x: t.x + l * d,
|
|
557
|
+
y: t.y + c * d
|
|
597
558
|
};
|
|
598
559
|
}
|
|
599
|
-
function ae(
|
|
600
|
-
const { amplitude:
|
|
560
|
+
function ae(n, t, i, e) {
|
|
561
|
+
const { amplitude: o, frequency: a, decay: r, decayRate: s, phase: l } = e, c = i.x - t.x, u = i.y - t.y, h = Math.sqrt(c * c + u * u), d = h > 0 ? -u / h : 0, f = h > 0 ? c / h : 1, y = a * Math.PI * 2 * n + l, p = r ? Math.pow(1 - n, s) : 1, g = o * Math.sin(y) * p, m = re(n);
|
|
601
562
|
return {
|
|
602
563
|
x: J(t.x, i.x, m) + g * d,
|
|
603
564
|
y: J(t.y, i.y, m) + g * f
|
|
604
565
|
};
|
|
605
566
|
}
|
|
606
|
-
function
|
|
607
|
-
return 1 - (1 -
|
|
567
|
+
function nt(n) {
|
|
568
|
+
return 1 - (1 - n) * (1 - n);
|
|
608
569
|
}
|
|
609
|
-
function re(
|
|
610
|
-
return 1 - Math.pow(1 -
|
|
570
|
+
function re(n) {
|
|
571
|
+
return 1 - Math.pow(1 - n, 3);
|
|
611
572
|
}
|
|
612
|
-
function ce(
|
|
613
|
-
const { amplitude: e, frequency:
|
|
614
|
-
return t +
|
|
573
|
+
function ce(n, t, i) {
|
|
574
|
+
const { amplitude: e, frequency: o, decay: a } = i, r = Math.sin(n * o * Math.PI * 2), s = a ? Math.pow(1 - n, 2) : 1, l = e * r * s;
|
|
575
|
+
return t + l;
|
|
615
576
|
}
|
|
616
|
-
function le(
|
|
617
|
-
const { overshoot: e, bounces:
|
|
577
|
+
function le(n, t, i) {
|
|
578
|
+
const { overshoot: e, bounces: o } = i, a = [];
|
|
618
579
|
a.push({ time: 0.5, scale: e });
|
|
619
580
|
let r = e;
|
|
620
|
-
const s = 0.5,
|
|
581
|
+
const s = 0.5, c = 0.5 / (o * 2);
|
|
621
582
|
let u = 0.5;
|
|
622
|
-
for (let d = 0; d <
|
|
583
|
+
for (let d = 0; d < o; d++) {
|
|
623
584
|
const f = 1 - (r - 1) * s;
|
|
624
|
-
u +=
|
|
585
|
+
u += c, a.push({ time: u, scale: f }), r = 1 + (r - 1) * s * s, u += c, d < o - 1 && a.push({ time: u, scale: r });
|
|
625
586
|
}
|
|
626
587
|
a.push({ time: 1, scale: 1 });
|
|
627
588
|
let h = 1;
|
|
628
589
|
for (let d = 0; d < a.length; d++)
|
|
629
|
-
if (
|
|
630
|
-
const f = d === 0 ? 0 : a[d - 1].time,
|
|
631
|
-
h =
|
|
590
|
+
if (n <= a[d].time) {
|
|
591
|
+
const f = d === 0 ? 0 : a[d - 1].time, y = d === 0 ? 1 : a[d - 1].scale, p = (n - f) / (a[d].time - f), g = nt(p);
|
|
592
|
+
h = y + (a[d].scale - y) * g;
|
|
632
593
|
break;
|
|
633
594
|
}
|
|
634
595
|
return h * t;
|
|
635
596
|
}
|
|
636
|
-
function he(
|
|
597
|
+
function he(n) {
|
|
637
598
|
const {
|
|
638
599
|
element: t,
|
|
639
600
|
startPosition: i,
|
|
640
601
|
endPosition: e,
|
|
641
|
-
pathConfig:
|
|
602
|
+
pathConfig: o,
|
|
642
603
|
duration: a,
|
|
643
604
|
imageWidth: r,
|
|
644
605
|
imageHeight: s,
|
|
645
|
-
rotation:
|
|
646
|
-
scale:
|
|
606
|
+
rotation: l,
|
|
607
|
+
scale: c,
|
|
647
608
|
onComplete: u,
|
|
648
609
|
rotationConfig: h,
|
|
649
610
|
startRotation: d,
|
|
650
611
|
scaleConfig: f,
|
|
651
|
-
startScale:
|
|
652
|
-
} =
|
|
653
|
-
if ((p === "linear" || p === "arc") && !w && !(v ||
|
|
612
|
+
startScale: y
|
|
613
|
+
} = n, p = o.type, g = d !== void 0 && d !== l, m = h?.mode === "wobble", b = h?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, w = g || m, v = y !== void 0 && y !== c, S = f?.mode === "pop", x = f?.pop || { overshoot: 1.2, bounces: 1 };
|
|
614
|
+
if ((p === "linear" || p === "arc") && !w && !(v || S)) {
|
|
654
615
|
u && u();
|
|
655
616
|
return;
|
|
656
617
|
}
|
|
657
618
|
const z = performance.now(), L = -r / 2, _ = -s / 2;
|
|
658
619
|
function O(H) {
|
|
659
|
-
const
|
|
620
|
+
const N = H - z, T = Math.min(N / a, 1);
|
|
660
621
|
let D;
|
|
661
622
|
switch (p) {
|
|
662
623
|
case "bounce": {
|
|
663
|
-
const
|
|
664
|
-
|
|
665
|
-
|
|
624
|
+
const k = Qt(
|
|
625
|
+
o.bouncePreset,
|
|
626
|
+
o.bounce
|
|
666
627
|
);
|
|
667
|
-
D =
|
|
628
|
+
D = oe(T, i, e, k);
|
|
668
629
|
break;
|
|
669
630
|
}
|
|
670
631
|
case "elastic": {
|
|
671
|
-
const
|
|
672
|
-
|
|
673
|
-
|
|
632
|
+
const k = te(
|
|
633
|
+
o.elasticPreset,
|
|
634
|
+
o.elastic
|
|
674
635
|
);
|
|
675
|
-
D = se(T, i, e,
|
|
636
|
+
D = se(T, i, e, k);
|
|
676
637
|
break;
|
|
677
638
|
}
|
|
678
639
|
case "wave": {
|
|
679
|
-
const
|
|
680
|
-
|
|
681
|
-
|
|
640
|
+
const k = ee(
|
|
641
|
+
o.wavePreset,
|
|
642
|
+
o.wave
|
|
682
643
|
);
|
|
683
|
-
D = ae(T, i, e,
|
|
644
|
+
D = ae(T, i, e, k);
|
|
684
645
|
break;
|
|
685
646
|
}
|
|
686
647
|
default:
|
|
@@ -691,14 +652,14 @@ function he(o) {
|
|
|
691
652
|
}
|
|
692
653
|
const G = D.x - e.x, U = D.y - e.y;
|
|
693
654
|
let M;
|
|
694
|
-
m ? M = ce(T,
|
|
655
|
+
m ? M = ce(T, l, b) : g ? M = J(d, l, T) : M = l;
|
|
695
656
|
let A;
|
|
696
|
-
|
|
657
|
+
S ? A = le(T, c, x) : v ? A = J(y, c, T) : A = c, t.style.transform = `translate(${L}px, ${_}px) translate(${G}px, ${U}px) rotate(${M}deg) scale(${A})`, T < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${l}deg) scale(${c})`, u && u());
|
|
697
658
|
}
|
|
698
659
|
requestAnimationFrame(O);
|
|
699
660
|
}
|
|
700
|
-
function de(
|
|
701
|
-
return
|
|
661
|
+
function de(n) {
|
|
662
|
+
return n === "bounce" || n === "elastic" || n === "wave";
|
|
702
663
|
}
|
|
703
664
|
const ue = {
|
|
704
665
|
radial: "center",
|
|
@@ -711,7 +672,7 @@ const ue = {
|
|
|
711
672
|
};
|
|
712
673
|
class ge {
|
|
713
674
|
constructor(t, i) {
|
|
714
|
-
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path ||
|
|
675
|
+
this.config = t, this.layoutAlgorithm = i, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || bt, this.rotationConfig = t.rotation || vt, this.scaleConfig = t.scale || wt;
|
|
715
676
|
}
|
|
716
677
|
/**
|
|
717
678
|
* Get the effective start position, considering layout-aware defaults
|
|
@@ -722,7 +683,7 @@ class ge {
|
|
|
722
683
|
/**
|
|
723
684
|
* Calculate the starting position for an image's entry animation
|
|
724
685
|
*/
|
|
725
|
-
calculateStartPosition(t, i, e,
|
|
686
|
+
calculateStartPosition(t, i, e, o, a) {
|
|
726
687
|
const r = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
|
|
727
688
|
switch (r) {
|
|
728
689
|
case "nearest-edge":
|
|
@@ -744,7 +705,7 @@ class ge {
|
|
|
744
705
|
t,
|
|
745
706
|
i,
|
|
746
707
|
e,
|
|
747
|
-
|
|
708
|
+
o,
|
|
748
709
|
a
|
|
749
710
|
);
|
|
750
711
|
default:
|
|
@@ -754,28 +715,28 @@ class ge {
|
|
|
754
715
|
/**
|
|
755
716
|
* Calculate start position from the nearest edge (current default behavior)
|
|
756
717
|
*/
|
|
757
|
-
calculateNearestEdge(t, i, e,
|
|
758
|
-
const a = t.x, r = t.y, s = a,
|
|
718
|
+
calculateNearestEdge(t, i, e, o) {
|
|
719
|
+
const a = t.x, r = t.y, s = a, l = e.width - a, c = r, u = e.height - r, h = Math.min(s, l, c, u);
|
|
759
720
|
let d = t.x, f = t.y;
|
|
760
|
-
return h === s ? d = -(i.width +
|
|
721
|
+
return h === s ? d = -(i.width + o) : h === l ? d = e.width + o : h === c ? f = -(i.height + o) : f = e.height + o, { x: d, y: f };
|
|
761
722
|
}
|
|
762
723
|
/**
|
|
763
724
|
* Calculate start position from a specific edge
|
|
764
725
|
*/
|
|
765
|
-
calculateEdgePosition(t, i, e,
|
|
726
|
+
calculateEdgePosition(t, i, e, o, a) {
|
|
766
727
|
let r = i.x, s = i.y;
|
|
767
728
|
switch (t) {
|
|
768
729
|
case "top":
|
|
769
730
|
s = -(e.height + a);
|
|
770
731
|
break;
|
|
771
732
|
case "bottom":
|
|
772
|
-
s =
|
|
733
|
+
s = o.height + a;
|
|
773
734
|
break;
|
|
774
735
|
case "left":
|
|
775
736
|
r = -(e.width + a);
|
|
776
737
|
break;
|
|
777
738
|
case "right":
|
|
778
|
-
r =
|
|
739
|
+
r = o.width + a;
|
|
779
740
|
break;
|
|
780
741
|
}
|
|
781
742
|
return { x: r, y: s };
|
|
@@ -784,9 +745,9 @@ class ge {
|
|
|
784
745
|
* Calculate start position from center with scale animation
|
|
785
746
|
*/
|
|
786
747
|
calculateCenterPosition(t, i, e) {
|
|
787
|
-
const
|
|
748
|
+
const o = t.width / 2, a = t.height / 2;
|
|
788
749
|
return {
|
|
789
|
-
x:
|
|
750
|
+
x: o,
|
|
790
751
|
y: a,
|
|
791
752
|
useScale: !0
|
|
792
753
|
// Signal to use scale animation from 0
|
|
@@ -795,28 +756,28 @@ class ge {
|
|
|
795
756
|
/**
|
|
796
757
|
* Calculate start position from a random edge
|
|
797
758
|
*/
|
|
798
|
-
calculateRandomEdge(t, i, e,
|
|
759
|
+
calculateRandomEdge(t, i, e, o) {
|
|
799
760
|
const a = ["top", "bottom", "left", "right"], r = a[Math.floor(Math.random() * a.length)];
|
|
800
|
-
return this.calculateEdgePosition(r, t, i, e,
|
|
761
|
+
return this.calculateEdgePosition(r, t, i, e, o);
|
|
801
762
|
}
|
|
802
763
|
/**
|
|
803
764
|
* Calculate start position on a circle around the container
|
|
804
765
|
*/
|
|
805
|
-
calculateCircularPosition(t, i, e,
|
|
766
|
+
calculateCircularPosition(t, i, e, o, a) {
|
|
806
767
|
const r = this.config.start.circular || {}, s = r.distribution || "even";
|
|
807
|
-
let
|
|
808
|
-
const
|
|
809
|
-
if (typeof
|
|
810
|
-
const p = parseFloat(
|
|
811
|
-
|
|
768
|
+
let l;
|
|
769
|
+
const c = r.radius || "120%";
|
|
770
|
+
if (typeof c == "string" && c.endsWith("%")) {
|
|
771
|
+
const p = parseFloat(c) / 100;
|
|
772
|
+
l = Math.sqrt(
|
|
812
773
|
e.width ** 2 + e.height ** 2
|
|
813
774
|
) * p / 2;
|
|
814
775
|
} else
|
|
815
|
-
|
|
776
|
+
l = typeof c == "number" ? c : 500;
|
|
816
777
|
let u;
|
|
817
|
-
s === "even" ? u =
|
|
818
|
-
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) *
|
|
819
|
-
return { x: f, y
|
|
778
|
+
s === "even" ? u = o / a * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
|
|
779
|
+
const h = e.width / 2, d = e.height / 2, f = h + Math.cos(u) * l, y = d + Math.sin(u) * l;
|
|
780
|
+
return { x: f, y };
|
|
820
781
|
}
|
|
821
782
|
/**
|
|
822
783
|
* Get animation parameters for an image
|
|
@@ -835,17 +796,17 @@ class ge {
|
|
|
835
796
|
* Build a CSS transform string for the start position
|
|
836
797
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
837
798
|
*/
|
|
838
|
-
buildStartTransform(t, i, e,
|
|
839
|
-
const
|
|
840
|
-
return t.useScale ? `${p} translate(${
|
|
799
|
+
buildStartTransform(t, i, e, o, a, r, s, l) {
|
|
800
|
+
const c = t.x - i.x, u = t.y - i.y, h = s !== void 0 ? s : e, d = l !== void 0 ? l : o, f = a !== void 0 ? -a / 2 : 0, y = r !== void 0 ? -r / 2 : 0, p = a !== void 0 ? `translate(${f}px, ${y}px)` : "translate(-50%, -50%)";
|
|
801
|
+
return t.useScale ? `${p} translate(${c}px, ${u}px) rotate(${h}deg) scale(0)` : `${p} translate(${c}px, ${u}px) rotate(${h}deg) scale(${d})`;
|
|
841
802
|
}
|
|
842
803
|
/**
|
|
843
804
|
* Build the final CSS transform string
|
|
844
805
|
* Uses pixel-based centering offset for reliable cross-browser behavior
|
|
845
806
|
*/
|
|
846
|
-
buildFinalTransform(t, i, e,
|
|
847
|
-
if (e !== void 0 &&
|
|
848
|
-
const a = -e / 2, r = -
|
|
807
|
+
buildFinalTransform(t, i, e, o) {
|
|
808
|
+
if (e !== void 0 && o !== void 0) {
|
|
809
|
+
const a = -e / 2, r = -o / 2;
|
|
849
810
|
return `translate(${a}px, ${r}px) rotate(${t}deg) scale(${i})`;
|
|
850
811
|
}
|
|
851
812
|
return `translate(-50%, -50%) rotate(${t}deg) scale(${i})`;
|
|
@@ -911,12 +872,12 @@ class ge {
|
|
|
911
872
|
return t + (Math.random() - 0.5) * 60;
|
|
912
873
|
if (typeof e == "number")
|
|
913
874
|
return e;
|
|
914
|
-
const
|
|
915
|
-
return e.min + Math.random() *
|
|
875
|
+
const o = e.max - e.min;
|
|
876
|
+
return e.min + Math.random() * o;
|
|
916
877
|
}
|
|
917
878
|
case "spin": {
|
|
918
|
-
const e = this.rotationConfig.spinCount ?? 1,
|
|
919
|
-
return t + e * 360 *
|
|
879
|
+
const e = this.rotationConfig.spinCount ?? 1, o = this.resolveSpinDirection(t);
|
|
880
|
+
return t + e * 360 * o;
|
|
920
881
|
}
|
|
921
882
|
case "random":
|
|
922
883
|
return t + (Math.random() - 0.5) * 60;
|
|
@@ -964,8 +925,8 @@ class ge {
|
|
|
964
925
|
amplitude: 15,
|
|
965
926
|
frequency: 3,
|
|
966
927
|
decay: !0
|
|
967
|
-
}, { amplitude:
|
|
968
|
-
return i +
|
|
928
|
+
}, { amplitude: o, frequency: a, decay: r } = e, s = Math.sin(t * a * Math.PI * 2), l = r ? Math.pow(1 - t, 2) : 1, c = o * s * l;
|
|
929
|
+
return i + c;
|
|
969
930
|
}
|
|
970
931
|
/**
|
|
971
932
|
* Get the scale configuration
|
|
@@ -1021,12 +982,12 @@ class ge {
|
|
|
1021
982
|
const e = this.scaleConfig.pop || {
|
|
1022
983
|
overshoot: 1.2,
|
|
1023
984
|
bounces: 1
|
|
1024
|
-
}, { overshoot:
|
|
985
|
+
}, { overshoot: o, bounces: a } = e, r = this.generateScaleBounceKeyframes(a, o);
|
|
1025
986
|
let s = i;
|
|
1026
|
-
for (let
|
|
1027
|
-
if (t <= r[
|
|
1028
|
-
const
|
|
1029
|
-
s = u + (r[
|
|
987
|
+
for (let l = 0; l < r.length; l++)
|
|
988
|
+
if (t <= r[l].time) {
|
|
989
|
+
const c = l === 0 ? 0 : r[l - 1].time, u = l === 0 ? i : r[l - 1].scale, h = (t - c) / (r[l].time - c), d = this.easeOutQuad(h);
|
|
990
|
+
s = u + (r[l].scale - u) * d;
|
|
1030
991
|
break;
|
|
1031
992
|
}
|
|
1032
993
|
return s * i;
|
|
@@ -1037,12 +998,12 @@ class ge {
|
|
|
1037
998
|
generateScaleBounceKeyframes(t, i) {
|
|
1038
999
|
const e = [];
|
|
1039
1000
|
e.push({ time: 0.5, scale: i });
|
|
1040
|
-
let
|
|
1001
|
+
let o = i;
|
|
1041
1002
|
const a = 0.5, s = 0.5 / (t * 2);
|
|
1042
|
-
let
|
|
1043
|
-
for (let
|
|
1044
|
-
const u = 1 - (
|
|
1045
|
-
|
|
1003
|
+
let l = 0.5;
|
|
1004
|
+
for (let c = 0; c < t; c++) {
|
|
1005
|
+
const u = 1 - (o - 1) * a;
|
|
1006
|
+
l += s, e.push({ time: l, scale: u }), o = 1 + (o - 1) * a * a, l += s, c < t - 1 && e.push({ time: l, scale: o });
|
|
1046
1007
|
}
|
|
1047
1008
|
return e.push({ time: 1, scale: 1 }), e;
|
|
1048
1009
|
}
|
|
@@ -1061,9 +1022,9 @@ class fe {
|
|
|
1061
1022
|
* Register an image element for idle animation.
|
|
1062
1023
|
* Starts animation after entry duration completes.
|
|
1063
1024
|
*/
|
|
1064
|
-
register(t, i, e,
|
|
1025
|
+
register(t, i, e, o) {
|
|
1065
1026
|
if (this.entries.has(t)) return;
|
|
1066
|
-
const a =
|
|
1027
|
+
const a = o ?? this.entryDurationMs, r = this.config.startDelay ?? a, s = {
|
|
1067
1028
|
element: t,
|
|
1068
1029
|
index: i,
|
|
1069
1030
|
totalImages: e,
|
|
@@ -1178,23 +1139,23 @@ class fe {
|
|
|
1178
1139
|
});
|
|
1179
1140
|
}
|
|
1180
1141
|
_startBlink(t) {
|
|
1181
|
-
const i = { ...Bt, ...this.config.blink }, e = -(Math.random() * i.speed),
|
|
1142
|
+
const i = { ...Bt, ...this.config.blink }, e = -(Math.random() * i.speed), o = parseFloat(getComputedStyle(t.element).opacity) || 1;
|
|
1182
1143
|
let a, r;
|
|
1183
1144
|
i.style === "fade" ? (a = [
|
|
1184
|
-
{ opacity:
|
|
1145
|
+
{ opacity: o, offset: 0 },
|
|
1185
1146
|
{ opacity: 0, offset: 0.5 },
|
|
1186
|
-
{ opacity:
|
|
1147
|
+
{ opacity: o, offset: 1 }
|
|
1187
1148
|
], r = {
|
|
1188
1149
|
duration: i.speed,
|
|
1189
1150
|
delay: e,
|
|
1190
1151
|
iterations: 1 / 0,
|
|
1191
1152
|
easing: "ease-in-out"
|
|
1192
1153
|
}) : (a = [
|
|
1193
|
-
{ opacity:
|
|
1194
|
-
{ opacity:
|
|
1154
|
+
{ opacity: o, offset: 0 },
|
|
1155
|
+
{ opacity: o, offset: i.onRatio },
|
|
1195
1156
|
{ opacity: 0, offset: Math.min(i.onRatio + 0.01, 0.99) },
|
|
1196
1157
|
{ opacity: 0, offset: 0.99 },
|
|
1197
|
-
{ opacity:
|
|
1158
|
+
{ opacity: o, offset: 1 }
|
|
1198
1159
|
], r = {
|
|
1199
1160
|
duration: i.speed,
|
|
1200
1161
|
delay: e,
|
|
@@ -1223,8 +1184,8 @@ class fe {
|
|
|
1223
1184
|
if (this.togetherSpeed = t, this.togetherRafId !== null) return;
|
|
1224
1185
|
const i = () => {
|
|
1225
1186
|
const e = performance.now() % this.togetherSpeed;
|
|
1226
|
-
for (const
|
|
1227
|
-
!
|
|
1187
|
+
for (const o of this.entries.values())
|
|
1188
|
+
!o.stopped && !o.paused && o.animation && (o.animation.currentTime = e);
|
|
1228
1189
|
this.togetherRafId = requestAnimationFrame(i);
|
|
1229
1190
|
};
|
|
1230
1191
|
this.togetherRafId = requestAnimationFrame(i);
|
|
@@ -1251,19 +1212,19 @@ class me {
|
|
|
1251
1212
|
* @returns Array of layout objects with position, rotation, scale
|
|
1252
1213
|
*/
|
|
1253
1214
|
generate(t, i, e = {}) {
|
|
1254
|
-
const
|
|
1215
|
+
const o = [], { width: a, height: r } = i, s = this.config.spacing.padding, l = e.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, y = d !== 1 || f !== 1, g = l * 1.5 / 2, m = l / 2, b = a - s - g, w = r - s - m, v = s + g, S = s + m;
|
|
1255
1216
|
for (let x = 0; x < t; x++) {
|
|
1256
|
-
const
|
|
1217
|
+
const I = this.random(v, b), z = this.random(S, w), L = c === "random" ? this.random(u, h) : 0, _ = y ? this.random(d, f) : 1, O = l * _, H = {
|
|
1257
1218
|
id: x,
|
|
1258
|
-
x:
|
|
1219
|
+
x: I,
|
|
1259
1220
|
y: z,
|
|
1260
1221
|
rotation: L,
|
|
1261
1222
|
scale: _,
|
|
1262
1223
|
baseSize: O
|
|
1263
1224
|
};
|
|
1264
|
-
|
|
1225
|
+
o.push(H);
|
|
1265
1226
|
}
|
|
1266
|
-
return
|
|
1227
|
+
return o;
|
|
1267
1228
|
}
|
|
1268
1229
|
/**
|
|
1269
1230
|
* Utility: Generate random number between min and max
|
|
@@ -1287,20 +1248,20 @@ class pe {
|
|
|
1287
1248
|
* @returns Array of layout objects with position, rotation, scale
|
|
1288
1249
|
*/
|
|
1289
1250
|
generate(t, i, e = {}) {
|
|
1290
|
-
const
|
|
1251
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, l = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, y = this.config.scaleDecay ?? 0, p = {
|
|
1291
1252
|
...Ut,
|
|
1292
1253
|
...this.config.radial
|
|
1293
|
-
}, g = e.fixedHeight ?? s, m = a / 2,
|
|
1254
|
+
}, g = e.fixedHeight ?? s, m = a / 2, b = r / 2, w = Math.ceil(Math.sqrt(t)), v = this.config.spacing.padding ?? 50, S = Math.max(g * 0.8, Math.min(
|
|
1294
1255
|
m - v - g / 2,
|
|
1295
|
-
|
|
1256
|
+
b - v - g / 2
|
|
1296
1257
|
));
|
|
1297
1258
|
if (t > 0) {
|
|
1298
1259
|
const z = f ? this.random(h, d) : 1, L = g * z;
|
|
1299
|
-
|
|
1260
|
+
o.push({
|
|
1300
1261
|
id: 0,
|
|
1301
1262
|
x: m,
|
|
1302
|
-
y,
|
|
1303
|
-
rotation:
|
|
1263
|
+
y: b,
|
|
1264
|
+
rotation: l === "random" ? this.random(c * 0.33, u * 0.33) : 0,
|
|
1304
1265
|
// Less rotation for center
|
|
1305
1266
|
scale: z,
|
|
1306
1267
|
baseSize: L,
|
|
@@ -1308,34 +1269,34 @@ class pe {
|
|
|
1308
1269
|
// Center image is highest
|
|
1309
1270
|
});
|
|
1310
1271
|
}
|
|
1311
|
-
let x = 1,
|
|
1272
|
+
let x = 1, I = 1;
|
|
1312
1273
|
for (; x < t; ) {
|
|
1313
|
-
const z =
|
|
1274
|
+
const z = I / w, L = y > 0 ? 1 - z * y * 0.5 : 1, _ = Math.max(g * 0.8, S / w * 1.5 / p.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), T = this.estimateWidth(g), D = Math.floor(N / (T * 0.7));
|
|
1314
1275
|
if (D === 0) {
|
|
1315
|
-
|
|
1276
|
+
I++;
|
|
1316
1277
|
continue;
|
|
1317
1278
|
}
|
|
1318
|
-
const G = 2 * Math.PI / D, U =
|
|
1279
|
+
const G = 2 * Math.PI / D, U = I * (20 * Math.PI / 180);
|
|
1319
1280
|
for (let M = 0; M < D && x < t; M++) {
|
|
1320
|
-
const A = M * G + U,
|
|
1321
|
-
let $ = m + Math.cos(A) * H, F =
|
|
1281
|
+
const A = M * G + U, k = f ? this.random(h, d) : 1, B = L * k, C = g * B;
|
|
1282
|
+
let $ = m + Math.cos(A) * H, F = b + Math.sin(A) * O;
|
|
1322
1283
|
const P = C * 1.5 / 2, j = C / 2;
|
|
1323
1284
|
$ - P < v ? $ = v + P : $ + P > a - v && ($ = a - v - P), F - j < v ? F = v + j : F + j > r - v && (F = r - v - j);
|
|
1324
|
-
const Y =
|
|
1325
|
-
|
|
1285
|
+
const Y = l === "random" ? this.random(c, u) : 0;
|
|
1286
|
+
o.push({
|
|
1326
1287
|
id: x,
|
|
1327
1288
|
x: $,
|
|
1328
1289
|
y: F,
|
|
1329
1290
|
rotation: Y,
|
|
1330
1291
|
scale: B,
|
|
1331
1292
|
baseSize: C,
|
|
1332
|
-
zIndex: Math.max(1, 100 -
|
|
1293
|
+
zIndex: Math.max(1, 100 - I)
|
|
1333
1294
|
// Outer rings have lower z-index
|
|
1334
1295
|
}), x++;
|
|
1335
1296
|
}
|
|
1336
|
-
|
|
1297
|
+
I++;
|
|
1337
1298
|
}
|
|
1338
|
-
return
|
|
1299
|
+
return o;
|
|
1339
1300
|
}
|
|
1340
1301
|
/**
|
|
1341
1302
|
* Estimate image width based on height
|
|
@@ -1356,7 +1317,7 @@ class pe {
|
|
|
1356
1317
|
return Math.random() * (i - t) + t;
|
|
1357
1318
|
}
|
|
1358
1319
|
}
|
|
1359
|
-
const
|
|
1320
|
+
const ye = {
|
|
1360
1321
|
columns: "auto",
|
|
1361
1322
|
rows: "auto",
|
|
1362
1323
|
stagger: "none",
|
|
@@ -1384,7 +1345,7 @@ const be = {
|
|
|
1384
1345
|
{ x: 0, y: 1 }
|
|
1385
1346
|
// down
|
|
1386
1347
|
];
|
|
1387
|
-
class
|
|
1348
|
+
class be {
|
|
1388
1349
|
constructor(t, i = {}) {
|
|
1389
1350
|
this.config = t, this.imageConfig = i;
|
|
1390
1351
|
}
|
|
@@ -1396,13 +1357,13 @@ class ye {
|
|
|
1396
1357
|
* @returns Array of layout objects with position, rotation, scale
|
|
1397
1358
|
*/
|
|
1398
1359
|
generate(t, i, e = {}) {
|
|
1399
|
-
const
|
|
1360
|
+
const o = [], { width: a, height: r } = i, s = { ...ye, ...this.config.grid }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, f = h !== 1 || d !== 1, y = a - 2 * l, p = r - 2 * l, { columns: g, rows: m } = this.calculateGridDimensions(
|
|
1400
1361
|
t,
|
|
1401
|
-
|
|
1362
|
+
y,
|
|
1402
1363
|
p,
|
|
1403
|
-
|
|
1364
|
+
c,
|
|
1404
1365
|
s
|
|
1405
|
-
),
|
|
1366
|
+
), b = s.stagger === "row", w = s.stagger === "column", v = b ? g + 0.5 : g, S = w ? m + 0.5 : m, x = (y - s.gap * (g - 1)) / v, I = (p - s.gap * (m - 1)) / S, z = b ? x / 2 : 0, L = w ? I / 2 : 0, _ = 1 + s.overlap, O = Math.min(x, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = g * x + (g - 1) * s.gap + z, T = m * I + (m - 1) * s.gap + L, D = l + (y - N) / 2, G = l + (p - T) / 2, U = g * m, M = s.columns !== "auto" && s.rows !== "auto", A = M && t > U;
|
|
1406
1367
|
typeof window < "u" && (window.__gridOverflowDebug = {
|
|
1407
1368
|
gridConfigColumns: s.columns,
|
|
1408
1369
|
gridConfigRows: s.rows,
|
|
@@ -1413,21 +1374,21 @@ class ye {
|
|
|
1413
1374
|
imageCount: t,
|
|
1414
1375
|
isOverflowMode: A
|
|
1415
1376
|
});
|
|
1416
|
-
const
|
|
1377
|
+
const k = A ? new Array(U).fill(0) : [], B = Math.min(x, I) * s.overflowOffset;
|
|
1417
1378
|
for (let C = 0; C < t; C++) {
|
|
1418
1379
|
let $, F, X = 0;
|
|
1419
1380
|
if (A && C >= U) {
|
|
1420
1381
|
const q = C - U, W = q % U;
|
|
1421
|
-
X = Math.floor(q / U) + 1,
|
|
1382
|
+
X = Math.floor(q / U) + 1, k[W]++, s.fillDirection === "row" ? ($ = W % g, F = Math.floor(W / g)) : (F = W % m, $ = Math.floor(W / m));
|
|
1422
1383
|
} else
|
|
1423
1384
|
s.fillDirection === "row" ? ($ = C % g, F = Math.floor(C / g)) : (F = C % m, $ = Math.floor(C / m));
|
|
1424
|
-
let P = D + $ * (x + s.gap) + x / 2, j = G + F * (
|
|
1425
|
-
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (j +=
|
|
1385
|
+
let P = D + $ * (x + s.gap) + x / 2, j = G + F * (I + s.gap) + I / 2;
|
|
1386
|
+
if (s.stagger === "row" && F % 2 === 1 ? P += x / 2 : s.stagger === "column" && $ % 2 === 1 && (j += I / 2), X > 0) {
|
|
1426
1387
|
const q = (X - 1) % At.length, W = At[q];
|
|
1427
1388
|
P += W.x * B, j += W.y * B;
|
|
1428
1389
|
}
|
|
1429
1390
|
if (s.jitter > 0) {
|
|
1430
|
-
const q = x / 2 * s.jitter, W =
|
|
1391
|
+
const q = x / 2 * s.jitter, W = I / 2 * s.jitter;
|
|
1431
1392
|
P += this.random(-q, q), j += this.random(-W, W);
|
|
1432
1393
|
}
|
|
1433
1394
|
let Y = P, V = j;
|
|
@@ -1436,10 +1397,10 @@ class ye {
|
|
|
1436
1397
|
if (F === Math.floor((t - 1) / g) && q < g) {
|
|
1437
1398
|
const St = q * x + (q - 1) * s.gap;
|
|
1438
1399
|
let gt = 0;
|
|
1439
|
-
s.alignment === "center" ? gt = (
|
|
1400
|
+
s.alignment === "center" ? gt = (N - St) / 2 : s.alignment === "end" && (gt = N - St), Y += gt;
|
|
1440
1401
|
}
|
|
1441
1402
|
}
|
|
1442
|
-
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2,
|
|
1403
|
+
const rt = f ? this.random(h, d) : 1, K = H * rt, it = K * 1.5 / 2, ot = K / 2, lt = l + it, ht = a - l - it, Pt = l + ot, _t = r - l - ot;
|
|
1443
1404
|
Y = Math.max(lt, Math.min(Y, ht)), V = Math.max(Pt, Math.min(V, _t));
|
|
1444
1405
|
let dt = 0;
|
|
1445
1406
|
if (u === "random") {
|
|
@@ -1447,7 +1408,7 @@ class ye {
|
|
|
1447
1408
|
s.jitter > 0 ? dt = this.random(q * s.jitter, W * s.jitter) : dt = this.random(q, W);
|
|
1448
1409
|
}
|
|
1449
1410
|
let ut;
|
|
1450
|
-
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1,
|
|
1411
|
+
A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1, o.push({
|
|
1451
1412
|
id: C,
|
|
1452
1413
|
x: Y,
|
|
1453
1414
|
y: V,
|
|
@@ -1457,12 +1418,12 @@ class ye {
|
|
|
1457
1418
|
zIndex: ut
|
|
1458
1419
|
});
|
|
1459
1420
|
}
|
|
1460
|
-
return
|
|
1421
|
+
return o;
|
|
1461
1422
|
}
|
|
1462
1423
|
/**
|
|
1463
1424
|
* Calculate optimal grid dimensions based on image count and container
|
|
1464
1425
|
*/
|
|
1465
|
-
calculateGridDimensions(t, i, e,
|
|
1426
|
+
calculateGridDimensions(t, i, e, o, a) {
|
|
1466
1427
|
let r, s;
|
|
1467
1428
|
if (a.columns !== "auto" && a.rows !== "auto")
|
|
1468
1429
|
r = a.columns, s = a.rows;
|
|
@@ -1471,8 +1432,8 @@ class ye {
|
|
|
1471
1432
|
else if (a.rows !== "auto")
|
|
1472
1433
|
s = a.rows, r = Math.ceil(t / s);
|
|
1473
1434
|
else {
|
|
1474
|
-
const
|
|
1475
|
-
for (r = Math.max(1, Math.round(Math.sqrt(t *
|
|
1435
|
+
const l = i / e;
|
|
1436
|
+
for (r = Math.max(1, Math.round(Math.sqrt(t * l / 1.4))), s = Math.ceil(t / r); r > 1 && (r - 1) * s >= t; )
|
|
1476
1437
|
r--;
|
|
1477
1438
|
}
|
|
1478
1439
|
return { columns: Math.max(1, r), rows: Math.max(1, s) };
|
|
@@ -1503,80 +1464,80 @@ class xe {
|
|
|
1503
1464
|
* @returns Array of layout objects with position, rotation, scale
|
|
1504
1465
|
*/
|
|
1505
1466
|
generate(t, i, e = {}) {
|
|
1506
|
-
const
|
|
1507
|
-
m -
|
|
1508
|
-
|
|
1467
|
+
const o = [], { width: a, height: r } = i, s = { ...we, ...this.config.spiral }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, y = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || y !== 1, g = this.config.scaleDecay ?? s.scaleDecay, m = a / 2, b = r / 2, w = Math.min(
|
|
1468
|
+
m - l - c / 2,
|
|
1469
|
+
b - l - c / 2
|
|
1509
1470
|
), v = s.direction === "clockwise" ? -1 : 1;
|
|
1510
|
-
for (let
|
|
1511
|
-
let x,
|
|
1471
|
+
for (let S = 0; S < t; S++) {
|
|
1472
|
+
let x, I;
|
|
1512
1473
|
if (s.spiralType === "golden")
|
|
1513
|
-
x =
|
|
1474
|
+
x = S * ve * v + s.startAngle, I = this.calculateGoldenRadius(S, t, w, s.tightness);
|
|
1514
1475
|
else if (s.spiralType === "archimedean") {
|
|
1515
|
-
const P =
|
|
1516
|
-
x = P * v + s.startAngle,
|
|
1476
|
+
const P = S * 0.5 * s.tightness;
|
|
1477
|
+
x = P * v + s.startAngle, I = this.calculateArchimedeanRadius(P, t, w, s.tightness);
|
|
1517
1478
|
} else {
|
|
1518
|
-
const P =
|
|
1519
|
-
x = P * v + s.startAngle,
|
|
1479
|
+
const P = S * 0.3 * s.tightness;
|
|
1480
|
+
x = P * v + s.startAngle, I = this.calculateLogarithmicRadius(P, t, w, s.tightness);
|
|
1520
1481
|
}
|
|
1521
|
-
const z = m + Math.cos(x) *
|
|
1482
|
+
const z = m + Math.cos(x) * I, L = b + Math.sin(x) * I, _ = I / w, O = g > 0 ? 1 - _ * g * 0.5 : 1, H = p ? this.random(f, y) : 1, N = O * H, T = c * N, G = T * 1.5 / 2, U = T / 2, M = l + G, A = a - l - G, k = l + U, B = r - l - U, C = Math.max(M, Math.min(z, A)), $ = Math.max(k, Math.min(L, B));
|
|
1522
1483
|
let F = 0;
|
|
1523
1484
|
if (u === "random") {
|
|
1524
1485
|
const P = x * 180 / Math.PI % 360, j = this.random(h, d);
|
|
1525
1486
|
F = s.spiralType === "golden" ? j : P * 0.1 + j * 0.9;
|
|
1526
|
-
} else u === "tangent" && (F = this.calculateSpiralTangent(x,
|
|
1527
|
-
const X = t -
|
|
1528
|
-
|
|
1529
|
-
id:
|
|
1487
|
+
} else u === "tangent" && (F = this.calculateSpiralTangent(x, I, s));
|
|
1488
|
+
const X = t - S;
|
|
1489
|
+
o.push({
|
|
1490
|
+
id: S,
|
|
1530
1491
|
x: C,
|
|
1531
1492
|
y: $,
|
|
1532
1493
|
rotation: F,
|
|
1533
|
-
scale:
|
|
1494
|
+
scale: N,
|
|
1534
1495
|
baseSize: T,
|
|
1535
1496
|
zIndex: X
|
|
1536
1497
|
});
|
|
1537
1498
|
}
|
|
1538
|
-
return
|
|
1499
|
+
return o;
|
|
1539
1500
|
}
|
|
1540
1501
|
/**
|
|
1541
1502
|
* Calculate tangent angle for spiral curve at given position
|
|
1542
1503
|
* This aligns the image along the spiral's direction of travel
|
|
1543
1504
|
*/
|
|
1544
1505
|
calculateSpiralTangent(t, i, e) {
|
|
1545
|
-
let
|
|
1506
|
+
let o;
|
|
1546
1507
|
if (e.spiralType === "golden")
|
|
1547
|
-
|
|
1508
|
+
o = t + Math.PI / 2;
|
|
1548
1509
|
else if (e.spiralType === "archimedean") {
|
|
1549
1510
|
const r = 1 / e.tightness, s = Math.atan(i / r);
|
|
1550
|
-
|
|
1511
|
+
o = t + s;
|
|
1551
1512
|
} else {
|
|
1552
1513
|
const r = 0.15 / e.tightness, s = Math.atan(1 / r);
|
|
1553
|
-
|
|
1514
|
+
o = t + s;
|
|
1554
1515
|
}
|
|
1555
|
-
return
|
|
1516
|
+
return o * 180 / Math.PI % 360 - 90;
|
|
1556
1517
|
}
|
|
1557
1518
|
/**
|
|
1558
1519
|
* Calculate radius for golden spiral (Vogel's model)
|
|
1559
1520
|
* Creates even distribution like sunflower seeds
|
|
1560
1521
|
*/
|
|
1561
|
-
calculateGoldenRadius(t, i, e,
|
|
1562
|
-
const r = e / Math.sqrt(i) * Math.sqrt(t) /
|
|
1522
|
+
calculateGoldenRadius(t, i, e, o) {
|
|
1523
|
+
const r = e / Math.sqrt(i) * Math.sqrt(t) / o;
|
|
1563
1524
|
return Math.min(r, e);
|
|
1564
1525
|
}
|
|
1565
1526
|
/**
|
|
1566
1527
|
* Calculate radius for Archimedean spiral
|
|
1567
1528
|
* r = a + b*θ (constant spacing between arms)
|
|
1568
1529
|
*/
|
|
1569
|
-
calculateArchimedeanRadius(t, i, e,
|
|
1570
|
-
const a = i * 0.5 *
|
|
1530
|
+
calculateArchimedeanRadius(t, i, e, o) {
|
|
1531
|
+
const a = i * 0.5 * o;
|
|
1571
1532
|
return t / a * e;
|
|
1572
1533
|
}
|
|
1573
1534
|
/**
|
|
1574
1535
|
* Calculate radius for logarithmic (equiangular) spiral
|
|
1575
1536
|
* r = a * e^(b*θ)
|
|
1576
1537
|
*/
|
|
1577
|
-
calculateLogarithmicRadius(t, i, e,
|
|
1578
|
-
const a = e * 0.05, r = 0.15 /
|
|
1579
|
-
return s /
|
|
1538
|
+
calculateLogarithmicRadius(t, i, e, o) {
|
|
1539
|
+
const a = e * 0.05, r = 0.15 / o, s = a * Math.exp(r * t), l = i * 0.3 * o, c = a * Math.exp(r * l);
|
|
1540
|
+
return s / c * e;
|
|
1580
1541
|
}
|
|
1581
1542
|
/**
|
|
1582
1543
|
* Utility: Generate random number between min and max
|
|
@@ -1605,7 +1566,7 @@ class Se {
|
|
|
1605
1566
|
* @returns Array of layout objects with position, rotation, scale
|
|
1606
1567
|
*/
|
|
1607
1568
|
generate(t, i, e = {}) {
|
|
1608
|
-
const
|
|
1569
|
+
const o = [], { width: a, height: r } = i, s = { ...Ee, ...this.config.cluster }, l = this.config.spacing.padding, c = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, f = this.imageConfig.sizing?.variance?.min ?? 1, y = this.imageConfig.sizing?.variance?.max ?? 1, p = f !== 1 || y !== 1, g = this.calculateClusterCount(
|
|
1609
1570
|
t,
|
|
1610
1571
|
s.clusterCount,
|
|
1611
1572
|
a,
|
|
@@ -1615,72 +1576,72 @@ class Se {
|
|
|
1615
1576
|
g,
|
|
1616
1577
|
a,
|
|
1617
1578
|
r,
|
|
1618
|
-
|
|
1579
|
+
l,
|
|
1619
1580
|
s
|
|
1620
|
-
),
|
|
1581
|
+
), b = new Array(g).fill(0);
|
|
1621
1582
|
for (let v = 0; v < t; v++)
|
|
1622
|
-
|
|
1583
|
+
b[v % g]++;
|
|
1623
1584
|
let w = 0;
|
|
1624
1585
|
for (let v = 0; v < g; v++) {
|
|
1625
|
-
const
|
|
1626
|
-
for (let
|
|
1586
|
+
const S = m[v], x = b[v];
|
|
1587
|
+
for (let I = 0; I < x; I++) {
|
|
1627
1588
|
let z, L;
|
|
1628
1589
|
if (s.distribution === "gaussian")
|
|
1629
|
-
z = this.gaussianRandom() *
|
|
1590
|
+
z = this.gaussianRandom() * S.spread, L = this.gaussianRandom() * S.spread;
|
|
1630
1591
|
else {
|
|
1631
|
-
const F = this.random(0, Math.PI * 2), X = this.random(0,
|
|
1592
|
+
const F = this.random(0, Math.PI * 2), X = this.random(0, S.spread);
|
|
1632
1593
|
z = Math.cos(F) * X, L = Math.sin(F) * X;
|
|
1633
1594
|
}
|
|
1634
1595
|
const _ = 1 + s.overlap * 0.5, O = 1 + s.overlap * 0.3;
|
|
1635
1596
|
z /= _, L /= _;
|
|
1636
|
-
const H = p ? this.random(f,
|
|
1637
|
-
let D =
|
|
1597
|
+
const H = p ? this.random(f, y) : 1, N = O * H, T = c * N;
|
|
1598
|
+
let D = S.x + z, G = S.y + L;
|
|
1638
1599
|
const M = T * 1.5 / 2, A = T / 2;
|
|
1639
|
-
D = Math.max(
|
|
1640
|
-
const
|
|
1641
|
-
|
|
1600
|
+
D = Math.max(l + M, Math.min(D, a - l - M)), G = Math.max(l + A, Math.min(G, r - l - A));
|
|
1601
|
+
const k = u === "random" ? this.random(h, d) : 0, C = Math.sqrt(z * z + L * L) / S.spread, $ = Math.round((1 - C) * 50) + 1;
|
|
1602
|
+
o.push({
|
|
1642
1603
|
id: w,
|
|
1643
1604
|
x: D,
|
|
1644
1605
|
y: G,
|
|
1645
|
-
rotation:
|
|
1646
|
-
scale:
|
|
1606
|
+
rotation: k,
|
|
1607
|
+
scale: N,
|
|
1647
1608
|
baseSize: T,
|
|
1648
1609
|
zIndex: $
|
|
1649
1610
|
}), w++;
|
|
1650
1611
|
}
|
|
1651
1612
|
}
|
|
1652
|
-
return
|
|
1613
|
+
return o;
|
|
1653
1614
|
}
|
|
1654
1615
|
/**
|
|
1655
1616
|
* Calculate optimal number of clusters based on image count and container
|
|
1656
1617
|
*/
|
|
1657
|
-
calculateClusterCount(t, i, e,
|
|
1618
|
+
calculateClusterCount(t, i, e, o, a) {
|
|
1658
1619
|
if (i !== "auto")
|
|
1659
1620
|
return Math.max(1, Math.min(i, t));
|
|
1660
|
-
const s = Math.max(1, Math.ceil(t / 8)),
|
|
1661
|
-
e / a * (
|
|
1621
|
+
const s = Math.max(1, Math.ceil(t / 8)), l = Math.floor(
|
|
1622
|
+
e / a * (o / a) * 0.6
|
|
1662
1623
|
);
|
|
1663
|
-
return Math.max(1, Math.min(s,
|
|
1624
|
+
return Math.max(1, Math.min(s, l, 10));
|
|
1664
1625
|
}
|
|
1665
1626
|
/**
|
|
1666
1627
|
* Generate cluster center positions with spacing constraints
|
|
1667
1628
|
*/
|
|
1668
|
-
generateClusterCenters(t, i, e,
|
|
1669
|
-
const r = [],
|
|
1629
|
+
generateClusterCenters(t, i, e, o, a) {
|
|
1630
|
+
const r = [], l = o + a.clusterSpread, c = i - o - a.clusterSpread, u = o + a.clusterSpread, h = e - o - a.clusterSpread;
|
|
1670
1631
|
for (let d = 0; d < t; d++) {
|
|
1671
|
-
let f = null,
|
|
1632
|
+
let f = null, y = -1;
|
|
1672
1633
|
for (let p = 0; p < 100; p++) {
|
|
1673
1634
|
const g = {
|
|
1674
|
-
x: this.random(
|
|
1635
|
+
x: this.random(l, c),
|
|
1675
1636
|
y: this.random(u, h),
|
|
1676
1637
|
spread: this.calculateClusterSpread(a)
|
|
1677
1638
|
};
|
|
1678
1639
|
let m = 1 / 0;
|
|
1679
|
-
for (const
|
|
1680
|
-
const w = g.x -
|
|
1681
|
-
m = Math.min(m,
|
|
1640
|
+
for (const b of r) {
|
|
1641
|
+
const w = g.x - b.x, v = g.y - b.y, S = Math.sqrt(w * w + v * v);
|
|
1642
|
+
m = Math.min(m, S);
|
|
1682
1643
|
}
|
|
1683
|
-
if ((r.length === 0 || m >
|
|
1644
|
+
if ((r.length === 0 || m > y) && (f = g, y = m), m >= a.clusterSpacing)
|
|
1684
1645
|
break;
|
|
1685
1646
|
}
|
|
1686
1647
|
f && r.push(f);
|
|
@@ -1723,23 +1684,23 @@ class Ie {
|
|
|
1723
1684
|
* @returns Array of layout objects with position, rotation, scale
|
|
1724
1685
|
*/
|
|
1725
1686
|
generate(t, i, e = {}) {
|
|
1726
|
-
const
|
|
1687
|
+
const o = [], { width: a, height: r } = i, s = e.fixedHeight ?? 200, l = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, f = this.imageConfig.sizing?.variance?.max ?? 1, y = d !== 1 || f !== 1, p = e.fixedHeight ?? s, g = {
|
|
1727
1688
|
...Ht,
|
|
1728
1689
|
...this.config.wave
|
|
1729
|
-
}, { rows: m, amplitude:
|
|
1690
|
+
}, { rows: m, amplitude: b, frequency: w, phaseShift: v, synchronization: S } = g, x = Math.ceil(t / m), L = p * 1.5 / 2, _ = l + L, O = a - l - L, H = O - _, N = x > 1 ? H / (x - 1) : 0, T = l + b + p / 2, D = r - l - b - p / 2, G = D - T, U = m > 1 ? G / (m - 1) : 0;
|
|
1730
1691
|
let M = 0;
|
|
1731
1692
|
for (let A = 0; A < m && M < t; A++) {
|
|
1732
|
-
const
|
|
1693
|
+
const k = m === 1 ? (T + D) / 2 : T + A * U;
|
|
1733
1694
|
let B = 0;
|
|
1734
|
-
|
|
1695
|
+
S === "offset" ? B = A * v : S === "alternating" && (B = A * Math.PI);
|
|
1735
1696
|
for (let C = 0; C < x && M < t; C++) {
|
|
1736
|
-
const $ = x === 1 ? (_ + O) / 2 : _ + C *
|
|
1697
|
+
const $ = x === 1 ? (_ + O) / 2 : _ + C * N, F = this.calculateWaveY($, a, b, w, B), X = $, P = k + F, j = y ? this.random(d, f) : 1, Y = p * j;
|
|
1737
1698
|
let V = 0;
|
|
1738
|
-
|
|
1739
|
-
const K = Y * 1.5 / 2, ct = Y / 2, it =
|
|
1740
|
-
|
|
1699
|
+
c === "tangent" ? V = this.calculateRotation($, a, b, w, B) : c === "random" && (V = this.random(u, h));
|
|
1700
|
+
const K = Y * 1.5 / 2, ct = Y / 2, it = l + K, ot = a - l - K, lt = l + ct, ht = r - l - ct;
|
|
1701
|
+
o.push({
|
|
1741
1702
|
id: M,
|
|
1742
|
-
x: Math.max(it, Math.min(X,
|
|
1703
|
+
x: Math.max(it, Math.min(X, ot)),
|
|
1743
1704
|
y: Math.max(lt, Math.min(P, ht)),
|
|
1744
1705
|
rotation: V,
|
|
1745
1706
|
scale: j,
|
|
@@ -1748,7 +1709,7 @@ class Ie {
|
|
|
1748
1709
|
}), M++;
|
|
1749
1710
|
}
|
|
1750
1711
|
}
|
|
1751
|
-
return
|
|
1712
|
+
return o;
|
|
1752
1713
|
}
|
|
1753
1714
|
/**
|
|
1754
1715
|
* Calculate Y position displacement on wave curve
|
|
@@ -1759,9 +1720,9 @@ class Ie {
|
|
|
1759
1720
|
* @param phase - Phase offset
|
|
1760
1721
|
* @returns Y displacement from baseline
|
|
1761
1722
|
*/
|
|
1762
|
-
calculateWaveY(t, i, e,
|
|
1723
|
+
calculateWaveY(t, i, e, o, a) {
|
|
1763
1724
|
const r = t / i;
|
|
1764
|
-
return e * Math.sin(
|
|
1725
|
+
return e * Math.sin(o * r * 2 * Math.PI + a);
|
|
1765
1726
|
}
|
|
1766
1727
|
/**
|
|
1767
1728
|
* Calculate rotation based on wave tangent
|
|
@@ -1772,8 +1733,8 @@ class Ie {
|
|
|
1772
1733
|
* @param phase - Phase offset
|
|
1773
1734
|
* @returns Rotation angle in degrees
|
|
1774
1735
|
*/
|
|
1775
|
-
calculateRotation(t, i, e,
|
|
1776
|
-
const r = t / i, s = e *
|
|
1736
|
+
calculateRotation(t, i, e, o, a) {
|
|
1737
|
+
const r = t / i, s = e * o * 2 * Math.PI * Math.cos(o * r * 2 * Math.PI + a) / i;
|
|
1777
1738
|
return Math.atan(s) * (180 / Math.PI);
|
|
1778
1739
|
}
|
|
1779
1740
|
/**
|
|
@@ -1802,17 +1763,17 @@ const xt = 100, Q = 100 / Math.sqrt(3), Et = [
|
|
|
1802
1763
|
[0, 50]
|
|
1803
1764
|
// left
|
|
1804
1765
|
], Re = Et[1][0] / xt, Te = Et[2][1] / xt;
|
|
1805
|
-
function Ae(
|
|
1766
|
+
function Ae(n) {
|
|
1806
1767
|
return {
|
|
1807
|
-
colStep: Re *
|
|
1808
|
-
rowOffset: Te *
|
|
1768
|
+
colStep: Re * n,
|
|
1769
|
+
rowOffset: Te * n
|
|
1809
1770
|
};
|
|
1810
1771
|
}
|
|
1811
|
-
function Ce(
|
|
1772
|
+
function Ce(n, t, i, e, o, a) {
|
|
1812
1773
|
const { colStep: r } = Ae(a);
|
|
1813
1774
|
return {
|
|
1814
|
-
px: e + r *
|
|
1815
|
-
py:
|
|
1775
|
+
px: e + r * n,
|
|
1776
|
+
py: o + a * (t + n / 2)
|
|
1816
1777
|
};
|
|
1817
1778
|
}
|
|
1818
1779
|
const Le = [
|
|
@@ -1823,13 +1784,13 @@ const Le = [
|
|
|
1823
1784
|
[0, -1, 1],
|
|
1824
1785
|
[1, -1, 0]
|
|
1825
1786
|
];
|
|
1826
|
-
function Me(
|
|
1827
|
-
if (
|
|
1787
|
+
function Me(n) {
|
|
1788
|
+
if (n === 0) return [[0, 0, 0]];
|
|
1828
1789
|
const t = [];
|
|
1829
|
-
let [i, e,
|
|
1790
|
+
let [i, e, o] = [0, -n, n];
|
|
1830
1791
|
for (const [a, r, s] of Le)
|
|
1831
|
-
for (let
|
|
1832
|
-
t.push([i, e,
|
|
1792
|
+
for (let l = 0; l < n; l++)
|
|
1793
|
+
t.push([i, e, o]), i += a, e += r, o += s;
|
|
1833
1794
|
return t;
|
|
1834
1795
|
}
|
|
1835
1796
|
class Fe {
|
|
@@ -1839,30 +1800,30 @@ class Fe {
|
|
|
1839
1800
|
this.config = t;
|
|
1840
1801
|
}
|
|
1841
1802
|
generate(t, i, e = {}) {
|
|
1842
|
-
const
|
|
1843
|
-
...
|
|
1803
|
+
const o = [], { width: a, height: r } = i, s = a / 2, l = r / 2, c = e.fixedHeight ?? 200, h = {
|
|
1804
|
+
...Nt,
|
|
1844
1805
|
...this.config.honeycomb
|
|
1845
|
-
}.spacing ?? 0, d =
|
|
1846
|
-
let f = 0,
|
|
1806
|
+
}.spacing ?? 0, d = c + h;
|
|
1807
|
+
let f = 0, y = 0;
|
|
1847
1808
|
for (; f < t; ) {
|
|
1848
|
-
const p = Me(
|
|
1849
|
-
for (const [g, m,
|
|
1809
|
+
const p = Me(y);
|
|
1810
|
+
for (const [g, m, b] of p) {
|
|
1850
1811
|
if (f >= t) break;
|
|
1851
|
-
const { px: w, py: v } = Ce(g, m,
|
|
1852
|
-
|
|
1812
|
+
const { px: w, py: v } = Ce(g, m, b, s, l, d);
|
|
1813
|
+
o.push({
|
|
1853
1814
|
id: f,
|
|
1854
1815
|
x: w,
|
|
1855
1816
|
y: v,
|
|
1856
1817
|
rotation: 0,
|
|
1857
1818
|
scale: 1,
|
|
1858
|
-
baseSize:
|
|
1819
|
+
baseSize: c,
|
|
1859
1820
|
// Inner rings render above outer rings
|
|
1860
|
-
zIndex: Math.max(1, 100 -
|
|
1821
|
+
zIndex: Math.max(1, 100 - y)
|
|
1861
1822
|
}), f++;
|
|
1862
1823
|
}
|
|
1863
|
-
|
|
1824
|
+
y++;
|
|
1864
1825
|
}
|
|
1865
|
-
return
|
|
1826
|
+
return o;
|
|
1866
1827
|
}
|
|
1867
1828
|
}
|
|
1868
1829
|
class ze {
|
|
@@ -1878,7 +1839,7 @@ class ze {
|
|
|
1878
1839
|
case "radial":
|
|
1879
1840
|
return new pe(this.config, this.imageConfig);
|
|
1880
1841
|
case "grid":
|
|
1881
|
-
return new
|
|
1842
|
+
return new be(this.config, this.imageConfig);
|
|
1882
1843
|
case "spiral":
|
|
1883
1844
|
return new xe(this.config, this.imageConfig);
|
|
1884
1845
|
case "cluster":
|
|
@@ -1899,10 +1860,10 @@ class ze {
|
|
|
1899
1860
|
* @returns Array of layout objects with position, rotation, scale
|
|
1900
1861
|
*/
|
|
1901
1862
|
generateLayout(t, i, e = {}) {
|
|
1902
|
-
const
|
|
1903
|
-
return
|
|
1863
|
+
const o = this.placementLayout.generate(t, i, e);
|
|
1864
|
+
return o.forEach((a) => {
|
|
1904
1865
|
this.layouts.set(a.id, a);
|
|
1905
|
-
}),
|
|
1866
|
+
}), o;
|
|
1906
1867
|
}
|
|
1907
1868
|
/**
|
|
1908
1869
|
* Get the original layout state for an image
|
|
@@ -1955,8 +1916,8 @@ class ze {
|
|
|
1955
1916
|
return;
|
|
1956
1917
|
if (typeof e == "number")
|
|
1957
1918
|
return e;
|
|
1958
|
-
const
|
|
1959
|
-
return a === "mobile" ?
|
|
1919
|
+
const o = e, a = this.resolveBreakpoint(t);
|
|
1920
|
+
return a === "mobile" ? o.mobile ?? o.tablet ?? o.screen : a === "tablet" ? o.tablet ?? o.screen ?? o.mobile : o.screen ?? o.tablet ?? o.mobile;
|
|
1960
1921
|
}
|
|
1961
1922
|
/**
|
|
1962
1923
|
* Calculate adaptive image size based on container dimensions and image count
|
|
@@ -1966,19 +1927,19 @@ class ze {
|
|
|
1966
1927
|
* @param viewportWidth - Current viewport width for baseHeight resolution
|
|
1967
1928
|
* @returns Calculated sizing result with height
|
|
1968
1929
|
*/
|
|
1969
|
-
calculateAdaptiveSize(t, i, e,
|
|
1970
|
-
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(
|
|
1930
|
+
calculateAdaptiveSize(t, i, e, o) {
|
|
1931
|
+
const a = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
|
|
1971
1932
|
if (r !== void 0)
|
|
1972
1933
|
return { height: r };
|
|
1973
|
-
const s = a?.minSize ?? 50,
|
|
1934
|
+
const s = a?.minSize ?? 50, l = a?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: h, height: d } = t, p = h * d * c / i;
|
|
1974
1935
|
let m = Math.sqrt(p / 1.4);
|
|
1975
1936
|
m *= u, m = Math.min(m, e);
|
|
1976
|
-
let
|
|
1977
|
-
if (
|
|
1937
|
+
let b = this.clamp(m, s, l);
|
|
1938
|
+
if (b === s && m < s) {
|
|
1978
1939
|
const w = Math.max(s * 0.05, 20);
|
|
1979
|
-
|
|
1940
|
+
b = Math.max(w, m);
|
|
1980
1941
|
}
|
|
1981
|
-
return this.config.algorithm === "honeycomb" && (
|
|
1942
|
+
return this.config.algorithm === "honeycomb" && (b = Math.min(b, this.honeycombMaxImageHeight(i, t))), { height: b };
|
|
1982
1943
|
}
|
|
1983
1944
|
/**
|
|
1984
1945
|
* Returns the largest image height at which all honeycomb rings fit within the container.
|
|
@@ -1987,10 +1948,10 @@ class ze {
|
|
|
1987
1948
|
*/
|
|
1988
1949
|
honeycombMaxImageHeight(t, i) {
|
|
1989
1950
|
if (t <= 1) return 1 / 0;
|
|
1990
|
-
let e = 0,
|
|
1991
|
-
for (;
|
|
1992
|
-
e++,
|
|
1993
|
-
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2,
|
|
1951
|
+
let e = 0, o = 1;
|
|
1952
|
+
for (; o < t; )
|
|
1953
|
+
e++, o += 6 * e;
|
|
1954
|
+
const a = this.config.spacing?.padding ?? 50, r = this.config.honeycomb?.spacing ?? 0, s = i.width / 2, l = i.height / 2, c = Math.sqrt(3) / 2, u = 1 / Math.sqrt(3), h = (l - a - r * e) / (e + 0.5), d = (s - a - c * r * e) / (c * e + u);
|
|
1994
1955
|
return Math.max(10, Math.min(h, d));
|
|
1995
1956
|
}
|
|
1996
1957
|
/**
|
|
@@ -2000,7 +1961,7 @@ class ze {
|
|
|
2000
1961
|
return Math.max(i, Math.min(e, t));
|
|
2001
1962
|
}
|
|
2002
1963
|
}
|
|
2003
|
-
var
|
|
1964
|
+
var E = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(E || {});
|
|
2004
1965
|
const Ct = {
|
|
2005
1966
|
// Geometric shapes - uses percentages for responsive sizing
|
|
2006
1967
|
circle: "circle(50%)",
|
|
@@ -2048,105 +2009,105 @@ const Ct = {
|
|
|
2048
2009
|
points: [[50, 0], [100, 50], [50, 100], [0, 50]]
|
|
2049
2010
|
}
|
|
2050
2011
|
};
|
|
2051
|
-
function De(
|
|
2052
|
-
if (
|
|
2053
|
-
return
|
|
2012
|
+
function De(n) {
|
|
2013
|
+
if (n)
|
|
2014
|
+
return n in Ct ? Ct[n] : n;
|
|
2054
2015
|
}
|
|
2055
|
-
function $e(
|
|
2056
|
-
const e = Oe[
|
|
2016
|
+
function $e(n, t, i) {
|
|
2017
|
+
const e = Oe[n];
|
|
2057
2018
|
if (!e) return "";
|
|
2058
|
-
const
|
|
2059
|
-
if (
|
|
2060
|
-
return `circle(${Math.round(50 *
|
|
2061
|
-
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 *
|
|
2019
|
+
const o = t / e.refHeight;
|
|
2020
|
+
if (n === "circle")
|
|
2021
|
+
return `circle(${Math.round(50 * o * 100) / 100}px)`;
|
|
2022
|
+
const a = e.points.map(([p]) => p), r = e.points.map(([, p]) => p), s = (Math.min(...a) + Math.max(...a)) / 2 * o, l = (Math.min(...r) + Math.max(...r)) / 2 * o, c = (Math.max(...a) - Math.min(...a)) * o, u = (i ?? c) / 2, h = t / 2, d = u - s, f = h - l;
|
|
2062
2023
|
return `polygon(${e.points.map(([p, g]) => {
|
|
2063
|
-
const m = Math.round((p *
|
|
2064
|
-
return `${m}px ${
|
|
2024
|
+
const m = Math.round((p * o + d) * 100) / 100, b = Math.round((g * o + f) * 100) / 100;
|
|
2025
|
+
return `${m}px ${b}px`;
|
|
2065
2026
|
}).join(", ")})`;
|
|
2066
2027
|
}
|
|
2067
|
-
function Pe(
|
|
2068
|
-
return
|
|
2028
|
+
function Pe(n) {
|
|
2029
|
+
return n in mt;
|
|
2069
2030
|
}
|
|
2070
|
-
function _e(
|
|
2071
|
-
return
|
|
2031
|
+
function _e(n) {
|
|
2032
|
+
return n ? Pe(n) ? mt[n] : n : mt.md;
|
|
2072
2033
|
}
|
|
2073
|
-
function Ue(
|
|
2074
|
-
if (!
|
|
2034
|
+
function Ue(n) {
|
|
2035
|
+
if (!n) return "";
|
|
2075
2036
|
const t = [];
|
|
2076
|
-
if (
|
|
2077
|
-
if (typeof
|
|
2078
|
-
t.push(`drop-shadow(${
|
|
2037
|
+
if (n.grayscale !== void 0 && t.push(`grayscale(${n.grayscale})`), n.blur !== void 0 && t.push(`blur(${n.blur}px)`), n.brightness !== void 0 && t.push(`brightness(${n.brightness})`), n.contrast !== void 0 && t.push(`contrast(${n.contrast})`), n.saturate !== void 0 && t.push(`saturate(${n.saturate})`), n.opacity !== void 0 && t.push(`opacity(${n.opacity})`), n.sepia !== void 0 && t.push(`sepia(${n.sepia})`), n.hueRotate !== void 0 && t.push(`hue-rotate(${n.hueRotate}deg)`), n.invert !== void 0 && t.push(`invert(${n.invert})`), n.dropShadow !== void 0)
|
|
2038
|
+
if (typeof n.dropShadow == "string")
|
|
2039
|
+
t.push(`drop-shadow(${n.dropShadow})`);
|
|
2079
2040
|
else {
|
|
2080
|
-
const i =
|
|
2041
|
+
const i = n.dropShadow;
|
|
2081
2042
|
t.push(`drop-shadow(${i.x}px ${i.y}px ${i.blur}px ${i.color})`);
|
|
2082
2043
|
}
|
|
2083
2044
|
return t.join(" ");
|
|
2084
2045
|
}
|
|
2085
|
-
function tt(
|
|
2086
|
-
if (!
|
|
2046
|
+
function tt(n) {
|
|
2047
|
+
if (!n || n.style === "none" || n.width === 0)
|
|
2087
2048
|
return "none";
|
|
2088
|
-
const t =
|
|
2049
|
+
const t = n.width ?? 0, i = n.style ?? "solid", e = n.color ?? "#000000";
|
|
2089
2050
|
return `${t}px ${i} ${e}`;
|
|
2090
2051
|
}
|
|
2091
|
-
function et(
|
|
2092
|
-
if (!
|
|
2052
|
+
function et(n, t, i) {
|
|
2053
|
+
if (!n) return {};
|
|
2093
2054
|
const e = {};
|
|
2094
|
-
if (
|
|
2095
|
-
const s =
|
|
2096
|
-
|
|
2097
|
-
} else
|
|
2098
|
-
if (
|
|
2099
|
-
const s =
|
|
2100
|
-
e.borderTop = tt(
|
|
2101
|
-
} else
|
|
2102
|
-
|
|
2103
|
-
const r = Ue(
|
|
2104
|
-
if (e.filter = r || "none",
|
|
2105
|
-
const s =
|
|
2106
|
-
e.outline = `${s}px ${
|
|
2107
|
-
}
|
|
2108
|
-
if (
|
|
2055
|
+
if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
|
|
2056
|
+
const s = n.border?.radius ?? 0;
|
|
2057
|
+
n.borderRadiusTopLeft !== void 0 ? e.borderTopLeftRadius = `${n.borderRadiusTopLeft}px` : s && (e.borderTopLeftRadius = `${s}px`), n.borderRadiusTopRight !== void 0 ? e.borderTopRightRadius = `${n.borderRadiusTopRight}px` : s && (e.borderTopRightRadius = `${s}px`), n.borderRadiusBottomRight !== void 0 ? e.borderBottomRightRadius = `${n.borderRadiusBottomRight}px` : s && (e.borderBottomRightRadius = `${s}px`), n.borderRadiusBottomLeft !== void 0 ? e.borderBottomLeftRadius = `${n.borderRadiusBottomLeft}px` : s && (e.borderBottomLeftRadius = `${s}px`);
|
|
2058
|
+
} else n.border?.radius !== void 0 && (e.borderRadius = `${n.border.radius}px`);
|
|
2059
|
+
if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
|
|
2060
|
+
const s = n.border || {}, l = { ...s, ...n.borderTop }, c = { ...s, ...n.borderRight }, u = { ...s, ...n.borderBottom }, h = { ...s, ...n.borderLeft };
|
|
2061
|
+
e.borderTop = tt(l), e.borderRight = tt(c), e.borderBottom = tt(u), e.borderLeft = tt(h);
|
|
2062
|
+
} else n.border && (e.border = tt(n.border));
|
|
2063
|
+
n.shadow !== void 0 && (e.boxShadow = _e(n.shadow));
|
|
2064
|
+
const r = Ue(n.filter);
|
|
2065
|
+
if (e.filter = r || "none", n.opacity !== void 0 && (e.opacity = String(n.opacity)), n.cursor !== void 0 && (e.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
|
|
2066
|
+
const s = n.outline.width ?? 0, l = n.outline.style ?? "solid", c = n.outline.color ?? "#000000";
|
|
2067
|
+
e.outline = `${s}px ${l} ${c}`, n.outline.offset !== void 0 && (e.outlineOffset = `${n.outline.offset}px`);
|
|
2068
|
+
}
|
|
2069
|
+
if (n.objectFit !== void 0 && (e.objectFit = n.objectFit), n.aspectRatio !== void 0 && (e.aspectRatio = n.aspectRatio), n.clipPath !== void 0) {
|
|
2109
2070
|
let s;
|
|
2110
|
-
const
|
|
2111
|
-
if (
|
|
2112
|
-
s = $e(
|
|
2071
|
+
const l = typeof n.clipPath == "object" && n.clipPath !== null && "shape" in n.clipPath, c = l ? n.clipPath : void 0;
|
|
2072
|
+
if (c?.mode === "height-relative" && t)
|
|
2073
|
+
s = $e(c.shape, t, i);
|
|
2113
2074
|
else {
|
|
2114
|
-
const u =
|
|
2075
|
+
const u = l && c ? c.shape : n.clipPath;
|
|
2115
2076
|
s = De(u);
|
|
2116
2077
|
}
|
|
2117
2078
|
s && (s === "none" ? e.clipPath = "unset" : (e.clipPath = s, e.overflow = "hidden"));
|
|
2118
2079
|
}
|
|
2119
2080
|
return e;
|
|
2120
2081
|
}
|
|
2121
|
-
function He(
|
|
2122
|
-
t.borderRadius !== void 0 && (
|
|
2082
|
+
function He(n, t) {
|
|
2083
|
+
t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio), t.clipPath !== void 0 && (n.style.clipPath = t.clipPath), t.overflow !== void 0 && (n.style.overflow = t.overflow);
|
|
2123
2084
|
}
|
|
2124
|
-
function ft(
|
|
2125
|
-
const
|
|
2126
|
-
He(
|
|
2085
|
+
function ft(n, t, i, e) {
|
|
2086
|
+
const o = et(t, i, e);
|
|
2087
|
+
He(n, o);
|
|
2127
2088
|
}
|
|
2128
|
-
function $t(
|
|
2129
|
-
return
|
|
2089
|
+
function $t(n) {
|
|
2090
|
+
return n ? Array.isArray(n) ? n.join(" ") : n : "";
|
|
2130
2091
|
}
|
|
2131
|
-
function st(
|
|
2092
|
+
function st(n, t) {
|
|
2132
2093
|
const i = $t(t);
|
|
2133
2094
|
i && i.split(" ").forEach((e) => {
|
|
2134
|
-
e.trim() &&
|
|
2095
|
+
e.trim() && n.classList.add(e.trim());
|
|
2135
2096
|
});
|
|
2136
2097
|
}
|
|
2137
|
-
function pt(
|
|
2098
|
+
function pt(n, t) {
|
|
2138
2099
|
const i = $t(t);
|
|
2139
2100
|
i && i.split(" ").forEach((e) => {
|
|
2140
|
-
e.trim() &&
|
|
2101
|
+
e.trim() && n.classList.remove(e.trim());
|
|
2141
2102
|
});
|
|
2142
2103
|
}
|
|
2143
2104
|
const Lt = {
|
|
2144
2105
|
UNFOCUSING: 999,
|
|
2145
2106
|
FOCUSING: 1e3
|
|
2146
2107
|
};
|
|
2147
|
-
class
|
|
2108
|
+
class Ne {
|
|
2148
2109
|
constructor(t, i, e) {
|
|
2149
|
-
this.state =
|
|
2110
|
+
this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.onUnfocusComplete = null, this.config = t, this.animationEngine = i, this.styling = e, this.focusedClassName = e?.focused?.className;
|
|
2150
2111
|
}
|
|
2151
2112
|
/**
|
|
2152
2113
|
* Set callback to be fired when an unfocus animation fully completes.
|
|
@@ -2164,7 +2125,7 @@ class ke {
|
|
|
2164
2125
|
* Check if any animation is in progress
|
|
2165
2126
|
*/
|
|
2166
2127
|
isAnimating() {
|
|
2167
|
-
return this.state !==
|
|
2128
|
+
return this.state !== E.IDLE && this.state !== E.FOCUSED;
|
|
2168
2129
|
}
|
|
2169
2130
|
/**
|
|
2170
2131
|
* Normalize scalePercent value
|
|
@@ -2177,17 +2138,17 @@ class ke {
|
|
|
2177
2138
|
* Returns actual pixel dimensions instead of scale factor for sharper rendering
|
|
2178
2139
|
*/
|
|
2179
2140
|
calculateFocusDimensions(t, i, e) {
|
|
2180
|
-
const
|
|
2181
|
-
let s = a,
|
|
2182
|
-
const
|
|
2183
|
-
return
|
|
2141
|
+
const o = this.normalizeScalePercent(this.config.scalePercent), a = e.height * o, r = t / i;
|
|
2142
|
+
let s = a, l = s * r;
|
|
2143
|
+
const c = e.width * o;
|
|
2144
|
+
return l > c && (l = c, s = l / r), { width: l, height: s };
|
|
2184
2145
|
}
|
|
2185
2146
|
/**
|
|
2186
2147
|
* Calculate the transform needed to center an image (position only, no scale)
|
|
2187
2148
|
* Scale is handled by animating actual dimensions for sharper rendering
|
|
2188
2149
|
*/
|
|
2189
2150
|
calculateFocusTransform(t, i) {
|
|
2190
|
-
const e = t.width / 2,
|
|
2151
|
+
const e = t.width / 2, o = t.height / 2, a = e - i.x, r = o - i.y;
|
|
2191
2152
|
return {
|
|
2192
2153
|
x: a,
|
|
2193
2154
|
y: r,
|
|
@@ -2202,8 +2163,8 @@ class ke {
|
|
|
2202
2163
|
buildDimensionZoomTransform(t) {
|
|
2203
2164
|
const i = ["translate(-50%, -50%)"];
|
|
2204
2165
|
if (t.x !== void 0 || t.y !== void 0) {
|
|
2205
|
-
const e = t.x ?? 0,
|
|
2206
|
-
i.push(`translate(${e}px, ${
|
|
2166
|
+
const e = t.x ?? 0, o = t.y ?? 0;
|
|
2167
|
+
i.push(`translate(${e}px, ${o}px)`);
|
|
2207
2168
|
}
|
|
2208
2169
|
return t.rotation !== void 0 && i.push(`rotate(${t.rotation}deg)`), i.join(" ");
|
|
2209
2170
|
}
|
|
@@ -2211,13 +2172,13 @@ class ke {
|
|
|
2211
2172
|
* Create a Web Animation that animates both transform (position) and dimensions
|
|
2212
2173
|
* This provides sharper zoom by re-rendering at target size instead of scaling pixels
|
|
2213
2174
|
*/
|
|
2214
|
-
animateWithDimensions(t, i, e,
|
|
2215
|
-
const
|
|
2175
|
+
animateWithDimensions(t, i, e, o, a, r, s, l) {
|
|
2176
|
+
const c = this.buildDimensionZoomTransform(i), u = this.buildDimensionZoomTransform(e);
|
|
2216
2177
|
return t.style.transition = "none", t.animate(
|
|
2217
2178
|
[
|
|
2218
2179
|
{
|
|
2219
|
-
transform:
|
|
2220
|
-
width: `${
|
|
2180
|
+
transform: c,
|
|
2181
|
+
width: `${o}px`,
|
|
2221
2182
|
height: `${a}px`
|
|
2222
2183
|
},
|
|
2223
2184
|
{
|
|
@@ -2227,7 +2188,7 @@ class ke {
|
|
|
2227
2188
|
}
|
|
2228
2189
|
],
|
|
2229
2190
|
{
|
|
2230
|
-
duration:
|
|
2191
|
+
duration: l,
|
|
2231
2192
|
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2232
2193
|
fill: "forwards"
|
|
2233
2194
|
}
|
|
@@ -2258,11 +2219,11 @@ class ke {
|
|
|
2258
2219
|
* This ensures clip-path changes smoothly as width/height animate
|
|
2259
2220
|
*/
|
|
2260
2221
|
startClipPathAnimation(t, i, e) {
|
|
2261
|
-
let
|
|
2262
|
-
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (
|
|
2222
|
+
let o = e ? this.styling?.focused ?? this.styling?.default : this.styling?.default;
|
|
2223
|
+
e && this.styling?.focused && this.styling.focused.clipPath === void 0 && (o = { ...o, clipPath: void 0 });
|
|
2263
2224
|
const a = () => {
|
|
2264
|
-
const r = t.offsetHeight, s = t.offsetWidth,
|
|
2265
|
-
|
|
2225
|
+
const r = t.offsetHeight, s = t.offsetWidth, l = et(o, r, s);
|
|
2226
|
+
l.clipPath !== void 0 ? t.style.clipPath = l.clipPath : t.style.clipPath = "unset", l.overflow !== void 0 && (t.style.overflow = l.overflow), i.animation.playState === "running" && requestAnimationFrame(a);
|
|
2266
2227
|
};
|
|
2267
2228
|
requestAnimationFrame(a);
|
|
2268
2229
|
}
|
|
@@ -2272,25 +2233,25 @@ class ke {
|
|
|
2272
2233
|
* @param fromTransform - Optional starting transform (for mid-animation reversals)
|
|
2273
2234
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2274
2235
|
*/
|
|
2275
|
-
startFocusAnimation(t, i, e,
|
|
2276
|
-
const r = t.style.zIndex || "", s = t.offsetWidth,
|
|
2236
|
+
startFocusAnimation(t, i, e, o, a) {
|
|
2237
|
+
const r = t.style.zIndex || "", s = t.offsetWidth, l = t.offsetHeight, c = this.calculateFocusDimensions(s, l, i), u = this.calculateFocusTransform(i, e);
|
|
2277
2238
|
this.animationEngine.cancelAllAnimations(t);
|
|
2278
2239
|
const h = this.config.animationDuration ?? 600;
|
|
2279
2240
|
this.applyFocusedStyling(t, Lt.FOCUSING);
|
|
2280
|
-
const d =
|
|
2241
|
+
const d = o ?? {
|
|
2281
2242
|
x: 0,
|
|
2282
2243
|
y: 0,
|
|
2283
2244
|
rotation: e.rotation,
|
|
2284
2245
|
scale: 1
|
|
2285
2246
|
// No scale - using dimensions
|
|
2286
|
-
}, f = a?.width ?? s,
|
|
2247
|
+
}, f = a?.width ?? s, y = a?.height ?? l, p = this.animateWithDimensions(
|
|
2287
2248
|
t,
|
|
2288
2249
|
d,
|
|
2289
2250
|
u,
|
|
2290
2251
|
f,
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2252
|
+
y,
|
|
2253
|
+
c.width,
|
|
2254
|
+
c.height,
|
|
2294
2255
|
h
|
|
2295
2256
|
), g = {
|
|
2296
2257
|
id: `focus-${Date.now()}`,
|
|
@@ -2307,16 +2268,16 @@ class ke {
|
|
|
2307
2268
|
focusTransform: u,
|
|
2308
2269
|
originalZIndex: r,
|
|
2309
2270
|
originalWidth: s,
|
|
2310
|
-
originalHeight:
|
|
2311
|
-
focusWidth:
|
|
2312
|
-
focusHeight:
|
|
2271
|
+
originalHeight: l,
|
|
2272
|
+
focusWidth: c.width,
|
|
2273
|
+
focusHeight: c.height
|
|
2313
2274
|
}, this.startClipPathAnimation(t, g, !0), {
|
|
2314
2275
|
element: t,
|
|
2315
2276
|
originalState: e,
|
|
2316
2277
|
animationHandle: g,
|
|
2317
2278
|
direction: "in",
|
|
2318
2279
|
originalWidth: s,
|
|
2319
|
-
originalHeight:
|
|
2280
|
+
originalHeight: l
|
|
2320
2281
|
};
|
|
2321
2282
|
}
|
|
2322
2283
|
/**
|
|
@@ -2324,11 +2285,11 @@ class ke {
|
|
|
2324
2285
|
* Animates back to original dimensions for consistent behavior
|
|
2325
2286
|
* @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
|
|
2326
2287
|
*/
|
|
2327
|
-
startUnfocusAnimation(t, i, e,
|
|
2288
|
+
startUnfocusAnimation(t, i, e, o) {
|
|
2328
2289
|
t.style.zIndex = String(Lt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
|
|
2329
2290
|
const a = this.config.animationDuration ?? 600;
|
|
2330
2291
|
t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
|
|
2331
|
-
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s =
|
|
2292
|
+
const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, s = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, l = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, c = {
|
|
2332
2293
|
x: 0,
|
|
2333
2294
|
y: 0,
|
|
2334
2295
|
rotation: i.rotation,
|
|
@@ -2337,9 +2298,9 @@ class ke {
|
|
|
2337
2298
|
}, u = this.focusData?.originalWidth ?? t.offsetWidth, h = this.focusData?.originalHeight ?? t.offsetHeight, d = this.animateWithDimensions(
|
|
2338
2299
|
t,
|
|
2339
2300
|
r,
|
|
2340
|
-
l,
|
|
2341
|
-
s,
|
|
2342
2301
|
c,
|
|
2302
|
+
s,
|
|
2303
|
+
l,
|
|
2343
2304
|
u,
|
|
2344
2305
|
h,
|
|
2345
2306
|
a
|
|
@@ -2348,7 +2309,7 @@ class ke {
|
|
|
2348
2309
|
element: t,
|
|
2349
2310
|
animation: d,
|
|
2350
2311
|
fromState: r,
|
|
2351
|
-
toState:
|
|
2312
|
+
toState: c,
|
|
2352
2313
|
startTime: performance.now(),
|
|
2353
2314
|
duration: a
|
|
2354
2315
|
};
|
|
@@ -2376,10 +2337,10 @@ class ke {
|
|
|
2376
2337
|
* Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
|
|
2377
2338
|
*/
|
|
2378
2339
|
captureMidAnimationState(t) {
|
|
2379
|
-
const i = getComputedStyle(t), e = new DOMMatrix(i.transform),
|
|
2380
|
-
return t.style.width = `${
|
|
2381
|
-
transform: { x: r, y: s, rotation:
|
|
2382
|
-
dimensions: { width:
|
|
2340
|
+
const i = getComputedStyle(t), e = new DOMMatrix(i.transform), o = t.offsetWidth, a = t.offsetHeight, r = e.e + o * 0.5, s = e.f + a * 0.5, l = Math.atan2(e.b, e.a) * (180 / Math.PI);
|
|
2341
|
+
return t.style.width = `${o}px`, t.style.height = `${a}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${s}px) rotate(${l}deg)`, t.style.transition = "none", {
|
|
2342
|
+
transform: { x: r, y: s, rotation: l, scale: 1 },
|
|
2343
|
+
dimensions: { width: o, height: a }
|
|
2383
2344
|
};
|
|
2384
2345
|
}
|
|
2385
2346
|
/**
|
|
@@ -2394,94 +2355,94 @@ class ke {
|
|
|
2394
2355
|
/**
|
|
2395
2356
|
* Reset an element instantly to its original position and dimensions (no animation)
|
|
2396
2357
|
*/
|
|
2397
|
-
resetElementInstantly(t, i, e,
|
|
2358
|
+
resetElementInstantly(t, i, e, o, a) {
|
|
2398
2359
|
this.animationEngine.cancelAllAnimations(t);
|
|
2399
2360
|
const r = ["translate(-50%, -50%)"];
|
|
2400
|
-
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "),
|
|
2361
|
+
r.push("translate(0px, 0px)"), r.push(`rotate(${i.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), o !== void 0 && a !== void 0 && (t.style.width = `${o}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, e);
|
|
2401
2362
|
}
|
|
2402
2363
|
/**
|
|
2403
2364
|
* Focus (zoom) an image to center of container
|
|
2404
2365
|
* Implements cross-animation when swapping focus
|
|
2405
2366
|
*/
|
|
2406
2367
|
async focusImage(t, i, e) {
|
|
2407
|
-
if (this.currentFocus === t && this.state ===
|
|
2368
|
+
if (this.currentFocus === t && this.state === E.FOCUSED)
|
|
2408
2369
|
return this.unfocusImage();
|
|
2409
|
-
if (this.incoming?.element === t && this.state ===
|
|
2370
|
+
if (this.incoming?.element === t && this.state === E.FOCUSING) {
|
|
2410
2371
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2411
2372
|
this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
|
|
2412
2373
|
t,
|
|
2413
2374
|
this.incoming.originalState,
|
|
2414
2375
|
a,
|
|
2415
2376
|
r
|
|
2416
|
-
), this.incoming = null, this.state =
|
|
2377
|
+
), this.incoming = null, this.state = E.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 = E.IDLE;
|
|
2417
2378
|
return;
|
|
2418
2379
|
}
|
|
2419
|
-
const
|
|
2380
|
+
const o = ++this.focusGeneration;
|
|
2420
2381
|
switch (this.state) {
|
|
2421
|
-
case
|
|
2422
|
-
if (this.state =
|
|
2423
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2382
|
+
case E.IDLE:
|
|
2383
|
+
if (this.state = E.FOCUSING, this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2384
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2424
2385
|
break;
|
|
2425
|
-
case
|
|
2426
|
-
if (this.state =
|
|
2386
|
+
case E.FOCUSED:
|
|
2387
|
+
if (this.state = E.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
|
|
2427
2388
|
this.currentFocus,
|
|
2428
2389
|
this.focusData.originalState
|
|
2429
2390
|
)), this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2430
2391
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2431
2392
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2432
|
-
]), this.focusGeneration !==
|
|
2393
|
+
]), this.focusGeneration !== o)
|
|
2433
2394
|
return;
|
|
2434
2395
|
if (this.outgoing) {
|
|
2435
2396
|
const a = this.outgoing.element;
|
|
2436
2397
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2437
2398
|
}
|
|
2438
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2399
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2439
2400
|
break;
|
|
2440
|
-
case
|
|
2401
|
+
case E.FOCUSING:
|
|
2441
2402
|
if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
|
|
2442
2403
|
this.incoming.element,
|
|
2443
2404
|
this.incoming.originalState,
|
|
2444
2405
|
this.focusData?.originalZIndex || "",
|
|
2445
2406
|
this.focusData?.originalWidth,
|
|
2446
2407
|
this.focusData?.originalHeight
|
|
2447
|
-
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !==
|
|
2448
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2408
|
+
), this.incoming = null), this.incoming = this.startFocusAnimation(t, i, e), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
|
|
2409
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2449
2410
|
break;
|
|
2450
|
-
case
|
|
2451
|
-
if (this.state =
|
|
2411
|
+
case E.UNFOCUSING:
|
|
2412
|
+
if (this.state = E.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2452
2413
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2453
2414
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2454
|
-
]), this.focusGeneration !==
|
|
2415
|
+
]), this.focusGeneration !== o) return;
|
|
2455
2416
|
if (this.outgoing) {
|
|
2456
2417
|
const a = this.outgoing.element;
|
|
2457
2418
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2458
2419
|
}
|
|
2459
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2420
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2460
2421
|
break;
|
|
2461
|
-
case
|
|
2422
|
+
case E.CROSS_ANIMATING:
|
|
2462
2423
|
if (this.incoming?.element === t)
|
|
2463
2424
|
return;
|
|
2464
2425
|
if (this.outgoing?.element === t) {
|
|
2465
2426
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(t);
|
|
2466
2427
|
if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
|
|
2467
|
-
const { transform: s, dimensions:
|
|
2428
|
+
const { transform: s, dimensions: l } = this.captureMidAnimationState(this.incoming.element);
|
|
2468
2429
|
this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2469
2430
|
this.incoming.element,
|
|
2470
2431
|
this.incoming.originalState,
|
|
2471
2432
|
s,
|
|
2472
|
-
|
|
2433
|
+
l
|
|
2473
2434
|
);
|
|
2474
2435
|
} else
|
|
2475
2436
|
this.outgoing = null;
|
|
2476
2437
|
if (this.incoming = this.startFocusAnimation(t, i, e, a, r), await Promise.all([
|
|
2477
2438
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2478
2439
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2479
|
-
]), this.focusGeneration !==
|
|
2440
|
+
]), this.focusGeneration !== o) return;
|
|
2480
2441
|
if (this.outgoing) {
|
|
2481
2442
|
const s = this.outgoing.element;
|
|
2482
2443
|
this.removeFocusedStyling(s, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(s);
|
|
2483
2444
|
}
|
|
2484
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2445
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2485
2446
|
return;
|
|
2486
2447
|
}
|
|
2487
2448
|
if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
|
|
@@ -2502,12 +2463,12 @@ class ke {
|
|
|
2502
2463
|
if (this.incoming = this.startFocusAnimation(t, i, e), await Promise.all([
|
|
2503
2464
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2504
2465
|
this.waitForAnimation(this.incoming.animationHandle)
|
|
2505
|
-
]), this.focusGeneration !==
|
|
2466
|
+
]), this.focusGeneration !== o) return;
|
|
2506
2467
|
if (this.outgoing) {
|
|
2507
2468
|
const a = this.outgoing.element;
|
|
2508
2469
|
this.removeFocusedStyling(a, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null, this.onUnfocusComplete?.(a);
|
|
2509
2470
|
}
|
|
2510
|
-
this.currentFocus = t, this.incoming = null, this.state =
|
|
2471
|
+
this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
|
|
2511
2472
|
break;
|
|
2512
2473
|
}
|
|
2513
2474
|
}
|
|
@@ -2515,24 +2476,24 @@ class ke {
|
|
|
2515
2476
|
* Unfocus current image, returning it to original position
|
|
2516
2477
|
*/
|
|
2517
2478
|
async unfocusImage() {
|
|
2518
|
-
if (this.state ===
|
|
2479
|
+
if (this.state === E.UNFOCUSING)
|
|
2519
2480
|
return;
|
|
2520
2481
|
const t = ++this.focusGeneration;
|
|
2521
2482
|
if (!this.currentFocus || !this.focusData) {
|
|
2522
|
-
if (this.incoming && this.state ===
|
|
2483
|
+
if (this.incoming && this.state === E.FOCUSING) {
|
|
2523
2484
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2524
2485
|
if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
|
|
2525
2486
|
this.incoming.element,
|
|
2526
2487
|
this.incoming.originalState,
|
|
2527
2488
|
a,
|
|
2528
2489
|
r
|
|
2529
|
-
), this.incoming = null, this.state =
|
|
2490
|
+
), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
|
|
2530
2491
|
const s = this.outgoing.element;
|
|
2531
|
-
this.removeFocusedStyling(s, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state =
|
|
2492
|
+
this.removeFocusedStyling(s, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(s);
|
|
2532
2493
|
}
|
|
2533
2494
|
return;
|
|
2534
2495
|
}
|
|
2535
|
-
if (this.state ===
|
|
2496
|
+
if (this.state === E.CROSS_ANIMATING && this.incoming) {
|
|
2536
2497
|
const { transform: a, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
|
|
2537
2498
|
this.animationEngine.cancelAllAnimations(this.incoming.element);
|
|
2538
2499
|
const s = this.startUnfocusAnimation(
|
|
@@ -2545,15 +2506,15 @@ class ke {
|
|
|
2545
2506
|
this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
|
|
2546
2507
|
this.waitForAnimation(s.animationHandle)
|
|
2547
2508
|
]), this.focusGeneration !== t) return;
|
|
2548
|
-
let
|
|
2549
|
-
this.outgoing && (
|
|
2550
|
-
const
|
|
2551
|
-
this.removeFocusedStyling(
|
|
2509
|
+
let l = null;
|
|
2510
|
+
this.outgoing && (l = this.outgoing.element, this.removeFocusedStyling(l, this.outgoing.originalState.zIndex?.toString() || ""));
|
|
2511
|
+
const c = s.element;
|
|
2512
|
+
this.removeFocusedStyling(c, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, l && this.onUnfocusComplete?.(l), this.onUnfocusComplete?.(c);
|
|
2552
2513
|
return;
|
|
2553
2514
|
}
|
|
2554
|
-
this.state =
|
|
2555
|
-
const i = this.currentFocus, e = this.focusData.originalState,
|
|
2556
|
-
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i,
|
|
2515
|
+
this.state = E.UNFOCUSING;
|
|
2516
|
+
const i = this.currentFocus, e = this.focusData.originalState, o = this.focusData.originalZIndex;
|
|
2517
|
+
this.outgoing = this.startUnfocusAnimation(i, e), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(i, o), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE, this.onUnfocusComplete?.(i));
|
|
2557
2518
|
}
|
|
2558
2519
|
/**
|
|
2559
2520
|
* Swap focus from current image to a new one (alias for focusImage with cross-animation)
|
|
@@ -2571,7 +2532,7 @@ class ke {
|
|
|
2571
2532
|
* Check if an image is currently focused (stable state)
|
|
2572
2533
|
*/
|
|
2573
2534
|
isFocused(t) {
|
|
2574
|
-
return this.currentFocus === t && this.state ===
|
|
2535
|
+
return this.currentFocus === t && this.state === E.FOCUSED;
|
|
2575
2536
|
}
|
|
2576
2537
|
/**
|
|
2577
2538
|
* Check if an image is the target of current focus animation
|
|
@@ -2592,9 +2553,9 @@ class ke {
|
|
|
2592
2553
|
* Used during swipe gestures for visual feedback
|
|
2593
2554
|
*/
|
|
2594
2555
|
setDragOffset(t) {
|
|
2595
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2596
|
-
const i = this.currentFocus, e = this.focusData.focusTransform,
|
|
2597
|
-
|
|
2556
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2557
|
+
const i = this.currentFocus, e = this.focusData.focusTransform, o = ["translate(-50%, -50%)"], a = (e.x ?? 0) + t, r = e.y ?? 0;
|
|
2558
|
+
o.push(`translate(${a}px, ${r}px)`), e.rotation !== void 0 && o.push(`rotate(${e.rotation}deg)`), i.style.transition = "none", i.style.transform = o.join(" ");
|
|
2598
2559
|
}
|
|
2599
2560
|
/**
|
|
2600
2561
|
* Clear the drag offset, optionally animating back to center
|
|
@@ -2602,13 +2563,13 @@ class ke {
|
|
|
2602
2563
|
* @param duration - Animation duration in ms (default 150)
|
|
2603
2564
|
*/
|
|
2604
2565
|
clearDragOffset(t, i = 150) {
|
|
2605
|
-
if (!this.currentFocus || !this.focusData || this.state !==
|
|
2606
|
-
const e = this.currentFocus,
|
|
2607
|
-
a.push(`translate(${r}px, ${s}px)`),
|
|
2608
|
-
const
|
|
2609
|
-
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform =
|
|
2566
|
+
if (!this.currentFocus || !this.focusData || this.state !== E.FOCUSED) return;
|
|
2567
|
+
const e = this.currentFocus, o = this.focusData.focusTransform, a = ["translate(-50%, -50%)"], r = o.x ?? 0, s = o.y ?? 0;
|
|
2568
|
+
a.push(`translate(${r}px, ${s}px)`), o.rotation !== void 0 && a.push(`rotate(${o.rotation}deg)`);
|
|
2569
|
+
const l = a.join(" ");
|
|
2570
|
+
t ? (e.style.transition = `transform ${i}ms ease-out`, e.style.transform = l, setTimeout(() => {
|
|
2610
2571
|
this.currentFocus === e && (e.style.transition = "none");
|
|
2611
|
-
}, i)) : (e.style.transition = "none", e.style.transform =
|
|
2572
|
+
}, i)) : (e.style.transition = "none", e.style.transform = l);
|
|
2612
2573
|
}
|
|
2613
2574
|
/**
|
|
2614
2575
|
* Reset zoom state (cancels all animations)
|
|
@@ -2632,10 +2593,10 @@ class ke {
|
|
|
2632
2593
|
this.focusData.originalZIndex,
|
|
2633
2594
|
this.focusData.originalWidth,
|
|
2634
2595
|
this.focusData.originalHeight
|
|
2635
|
-
), this.state =
|
|
2596
|
+
), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
|
|
2636
2597
|
}
|
|
2637
2598
|
}
|
|
2638
|
-
const
|
|
2599
|
+
const ke = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Be = 30, at = class at {
|
|
2639
2600
|
constructor(t, i) {
|
|
2640
2601
|
this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = i, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
|
|
2641
2602
|
}
|
|
@@ -2679,9 +2640,9 @@ const Ne = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Be = 30, at = class at {
|
|
|
2679
2640
|
}
|
|
2680
2641
|
handleTouchMove(t) {
|
|
2681
2642
|
if (!this.touchState || t.touches.length !== 1) return;
|
|
2682
|
-
const i = t.touches[0], e = i.clientX - this.touchState.startX,
|
|
2683
|
-
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e +
|
|
2684
|
-
const s = Math.atan2(Math.abs(
|
|
2643
|
+
const i = t.touches[0], e = i.clientX - this.touchState.startX, o = i.clientY - this.touchState.startY;
|
|
2644
|
+
if (this.touchState.isHorizontalSwipe === null && Math.sqrt(e * e + o * o) > 10) {
|
|
2645
|
+
const s = Math.atan2(Math.abs(o), Math.abs(e)) * (180 / Math.PI);
|
|
2685
2646
|
this.touchState.isHorizontalSwipe = s <= Be;
|
|
2686
2647
|
}
|
|
2687
2648
|
if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
|
|
@@ -2693,16 +2654,16 @@ const Ne = 50, je = 0.5, We = 20, Ge = 0.3, qe = 150, Be = 30, at = class at {
|
|
|
2693
2654
|
handleTouchEnd(t) {
|
|
2694
2655
|
if (!this.touchState) return;
|
|
2695
2656
|
this.recentTouchTimestamp = Date.now();
|
|
2696
|
-
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime,
|
|
2657
|
+
const i = this.touchState.currentX - this.touchState.startX, e = performance.now() - this.touchState.startTime, o = Math.abs(i) / e, a = Math.abs(i);
|
|
2697
2658
|
let r = !1;
|
|
2698
|
-
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >=
|
|
2659
|
+
this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (a >= ke || o >= je && a >= We) && (r = !0, i < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
|
|
2699
2660
|
}
|
|
2700
2661
|
handleTouchCancel(t) {
|
|
2701
2662
|
this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
|
|
2702
2663
|
}
|
|
2703
2664
|
};
|
|
2704
2665
|
at.TOUCH_CLICK_DELAY = 300;
|
|
2705
|
-
let
|
|
2666
|
+
let yt = at;
|
|
2706
2667
|
class Xe {
|
|
2707
2668
|
constructor(t) {
|
|
2708
2669
|
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)
|
|
@@ -2717,7 +2678,7 @@ class Xe {
|
|
|
2717
2678
|
for (const i of this.sources)
|
|
2718
2679
|
if ("folders" in i)
|
|
2719
2680
|
for (const e of i.folders) {
|
|
2720
|
-
const
|
|
2681
|
+
const o = i.recursive !== void 0 ? i.recursive : !0, a = await this.loadFromFolder(e, t, o);
|
|
2721
2682
|
this._discoveredUrls.push(...a);
|
|
2722
2683
|
}
|
|
2723
2684
|
else if ("files" in i) {
|
|
@@ -2763,9 +2724,9 @@ class Xe {
|
|
|
2763
2724
|
// Alternative format
|
|
2764
2725
|
];
|
|
2765
2726
|
for (const e of i) {
|
|
2766
|
-
const
|
|
2767
|
-
if (
|
|
2768
|
-
return
|
|
2727
|
+
const o = t.match(e);
|
|
2728
|
+
if (o && o[1])
|
|
2729
|
+
return o[1];
|
|
2769
2730
|
}
|
|
2770
2731
|
return null;
|
|
2771
2732
|
}
|
|
@@ -2777,15 +2738,15 @@ class Xe {
|
|
|
2777
2738
|
* @returns Promise resolving to array of image URLs
|
|
2778
2739
|
*/
|
|
2779
2740
|
async loadFromFolder(t, i, e = !0) {
|
|
2780
|
-
const
|
|
2781
|
-
if (!
|
|
2741
|
+
const o = this.extractFolderId(t);
|
|
2742
|
+
if (!o)
|
|
2782
2743
|
throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
|
|
2783
2744
|
if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
|
|
2784
|
-
return this.loadImagesDirectly(
|
|
2745
|
+
return this.loadImagesDirectly(o, i);
|
|
2785
2746
|
try {
|
|
2786
|
-
return e ? await this.loadImagesRecursively(
|
|
2747
|
+
return e ? await this.loadImagesRecursively(o, i) : await this.loadImagesFromSingleFolder(o, i);
|
|
2787
2748
|
} catch (a) {
|
|
2788
|
-
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(
|
|
2749
|
+
return console.error("Error loading from Google Drive API:", a), this.loadImagesDirectly(o, i);
|
|
2789
2750
|
}
|
|
2790
2751
|
}
|
|
2791
2752
|
/**
|
|
@@ -2795,13 +2756,13 @@ class Xe {
|
|
|
2795
2756
|
* @returns Promise resolving to array of image URLs
|
|
2796
2757
|
*/
|
|
2797
2758
|
async loadImagesFromSingleFolder(t, i) {
|
|
2798
|
-
const e = [],
|
|
2759
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2799
2760
|
if (!s.ok)
|
|
2800
2761
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2801
|
-
const
|
|
2762
|
+
const c = (await s.json()).files.filter(
|
|
2802
2763
|
(u) => u.mimeType.startsWith("image/") && i.isAllowed(u.name)
|
|
2803
2764
|
);
|
|
2804
|
-
return this.log(`Found ${
|
|
2765
|
+
return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
|
|
2805
2766
|
e.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
|
|
2806
2767
|
}), e;
|
|
2807
2768
|
}
|
|
@@ -2813,18 +2774,18 @@ class Xe {
|
|
|
2813
2774
|
*/
|
|
2814
2775
|
async loadFiles(t, i) {
|
|
2815
2776
|
const e = [];
|
|
2816
|
-
for (const
|
|
2817
|
-
const a = this.extractFileId(
|
|
2777
|
+
for (const o of t) {
|
|
2778
|
+
const a = this.extractFileId(o);
|
|
2818
2779
|
if (!a) {
|
|
2819
|
-
this.log(`Skipping invalid file URL: ${
|
|
2780
|
+
this.log(`Skipping invalid file URL: ${o}`);
|
|
2820
2781
|
continue;
|
|
2821
2782
|
}
|
|
2822
2783
|
if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
|
|
2823
2784
|
try {
|
|
2824
2785
|
const r = `${this.apiEndpoint}/${a}?fields=name,mimeType&key=${this.apiKey}`, s = await fetch(r);
|
|
2825
2786
|
if (s.ok) {
|
|
2826
|
-
const
|
|
2827
|
-
|
|
2787
|
+
const l = await s.json();
|
|
2788
|
+
l.mimeType.startsWith("image/") && i.isAllowed(l.name) ? (e.push(`https://lh3.googleusercontent.com/d/${a}=s1600`), this.log(`Added file: ${l.name}`)) : this.log(`Skipping non-image file: ${l.name} (${l.mimeType})`);
|
|
2828
2789
|
} else
|
|
2829
2790
|
this.log(`Failed to fetch metadata for file ${a}: ${s.status}`);
|
|
2830
2791
|
} catch (r) {
|
|
@@ -2852,9 +2813,9 @@ class Xe {
|
|
|
2852
2813
|
// Generic id parameter
|
|
2853
2814
|
];
|
|
2854
2815
|
for (const e of i) {
|
|
2855
|
-
const
|
|
2856
|
-
if (
|
|
2857
|
-
return
|
|
2816
|
+
const o = t.match(e);
|
|
2817
|
+
if (o && o[1])
|
|
2818
|
+
return o[1];
|
|
2858
2819
|
}
|
|
2859
2820
|
return null;
|
|
2860
2821
|
}
|
|
@@ -2865,15 +2826,15 @@ class Xe {
|
|
|
2865
2826
|
* @returns Promise resolving to array of image URLs
|
|
2866
2827
|
*/
|
|
2867
2828
|
async loadImagesRecursively(t, i) {
|
|
2868
|
-
const e = [],
|
|
2829
|
+
const e = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(r);
|
|
2869
2830
|
if (!s.ok)
|
|
2870
2831
|
throw new Error(`API request failed: ${s.status} ${s.statusText}`);
|
|
2871
|
-
const
|
|
2832
|
+
const l = await s.json(), c = l.files.filter(
|
|
2872
2833
|
(h) => h.mimeType.startsWith("image/") && i.isAllowed(h.name)
|
|
2873
|
-
), u =
|
|
2834
|
+
), u = l.files.filter(
|
|
2874
2835
|
(h) => h.mimeType === "application/vnd.google-apps.folder"
|
|
2875
2836
|
);
|
|
2876
|
-
this.log(`Found ${
|
|
2837
|
+
this.log(`Found ${l.files.length} total items in folder ${t}`), l.files.forEach((h) => this.log(` - File: ${h.name} (${h.mimeType})`)), this.log(`- ${c.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), c.forEach((h) => {
|
|
2877
2838
|
e.push(`https://lh3.googleusercontent.com/d/${h.id}=s1600`), this.log(`Added file: ${h.name}`);
|
|
2878
2839
|
});
|
|
2879
2840
|
for (const h of u) {
|
|
@@ -2892,10 +2853,10 @@ class Xe {
|
|
|
2892
2853
|
*/
|
|
2893
2854
|
async loadImagesDirectly(t, i) {
|
|
2894
2855
|
try {
|
|
2895
|
-
const e = `https://drive.google.com/embeddedfolderview?id=${t}`,
|
|
2896
|
-
if (!
|
|
2856
|
+
const e = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(e, { mode: "cors" });
|
|
2857
|
+
if (!o.ok)
|
|
2897
2858
|
throw new Error("Cannot access folder directly (CORS or permissions issue)");
|
|
2898
|
-
const a = await
|
|
2859
|
+
const a = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(r)];
|
|
2899
2860
|
return [...new Set(s.map((u) => u[1]))].map(
|
|
2900
2861
|
(u) => `https://drive.google.com/uc?export=view&id=${u}`
|
|
2901
2862
|
);
|
|
@@ -2988,13 +2949,13 @@ class Ye {
|
|
|
2988
2949
|
if (!Array.isArray(t))
|
|
2989
2950
|
return console.warn("URLs must be an array:", t), [];
|
|
2990
2951
|
const e = [];
|
|
2991
|
-
for (const
|
|
2992
|
-
const a =
|
|
2952
|
+
for (const o of t) {
|
|
2953
|
+
const a = o.split("/").pop() || o;
|
|
2993
2954
|
if (!i.isAllowed(a)) {
|
|
2994
|
-
this.log(`Skipping filtered URL: ${
|
|
2955
|
+
this.log(`Skipping filtered URL: ${o}`);
|
|
2995
2956
|
continue;
|
|
2996
2957
|
}
|
|
2997
|
-
this.validateUrls ? await this.validateUrl(
|
|
2958
|
+
this.validateUrls ? await this.validateUrl(o) ? e.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : e.push(o);
|
|
2998
2959
|
}
|
|
2999
2960
|
return e;
|
|
3000
2961
|
}
|
|
@@ -3008,16 +2969,16 @@ class Ye {
|
|
|
3008
2969
|
async processPath(t, i, e) {
|
|
3009
2970
|
if (!Array.isArray(i))
|
|
3010
2971
|
return console.warn("files must be an array:", i), [];
|
|
3011
|
-
const
|
|
2972
|
+
const o = [];
|
|
3012
2973
|
for (const a of i) {
|
|
3013
2974
|
if (!e.isAllowed(a)) {
|
|
3014
2975
|
this.log(`Skipping filtered file: ${a}`);
|
|
3015
2976
|
continue;
|
|
3016
2977
|
}
|
|
3017
2978
|
const r = this.constructUrl(t, a);
|
|
3018
|
-
this.validateUrls ? await this.validateUrl(r) ?
|
|
2979
|
+
this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
|
|
3019
2980
|
}
|
|
3020
|
-
return
|
|
2981
|
+
return o;
|
|
3021
2982
|
}
|
|
3022
2983
|
/**
|
|
3023
2984
|
* Process a JSON endpoint source
|
|
@@ -3028,17 +2989,17 @@ class Ye {
|
|
|
3028
2989
|
*/
|
|
3029
2990
|
async processJson(t, i) {
|
|
3030
2991
|
this.log(`Fetching JSON endpoint: ${t}`);
|
|
3031
|
-
const e = new AbortController(),
|
|
2992
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), 1e4);
|
|
3032
2993
|
try {
|
|
3033
2994
|
const a = await fetch(t, { signal: e.signal });
|
|
3034
|
-
if (clearTimeout(
|
|
2995
|
+
if (clearTimeout(o), !a.ok)
|
|
3035
2996
|
throw new Error(`HTTP ${a.status} fetching ${t}`);
|
|
3036
2997
|
const r = await a.json();
|
|
3037
2998
|
if (!r || !Array.isArray(r.images))
|
|
3038
2999
|
throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
|
|
3039
3000
|
return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, i);
|
|
3040
3001
|
} catch (a) {
|
|
3041
|
-
throw clearTimeout(
|
|
3002
|
+
throw clearTimeout(o), a instanceof Error && a.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : a;
|
|
3042
3003
|
}
|
|
3043
3004
|
}
|
|
3044
3005
|
/**
|
|
@@ -3060,11 +3021,11 @@ class Ye {
|
|
|
3060
3021
|
if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
|
|
3061
3022
|
return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
|
|
3062
3023
|
try {
|
|
3063
|
-
const e = new AbortController(),
|
|
3024
|
+
const e = new AbortController(), o = setTimeout(() => e.abort(), this.validationTimeout), a = await fetch(t, {
|
|
3064
3025
|
method: "HEAD",
|
|
3065
3026
|
signal: e.signal
|
|
3066
3027
|
});
|
|
3067
|
-
return clearTimeout(
|
|
3028
|
+
return clearTimeout(o), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.status}`), !1);
|
|
3068
3029
|
} catch (e) {
|
|
3069
3030
|
return e instanceof Error && (e.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, e.message)), !1;
|
|
3070
3031
|
}
|
|
@@ -3081,8 +3042,8 @@ class Ye {
|
|
|
3081
3042
|
return `${e}/${i}`;
|
|
3082
3043
|
if (typeof window > "u")
|
|
3083
3044
|
return `${e}/${i}`;
|
|
3084
|
-
const
|
|
3085
|
-
return `${
|
|
3045
|
+
const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
|
|
3046
|
+
return `${o}${r}/${i}`;
|
|
3086
3047
|
}
|
|
3087
3048
|
/**
|
|
3088
3049
|
* Check if URL is absolute (contains protocol)
|
|
@@ -3116,16 +3077,16 @@ class Ve {
|
|
|
3116
3077
|
*/
|
|
3117
3078
|
async prepare(t) {
|
|
3118
3079
|
this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
|
|
3119
|
-
const i = this.loaders.map((e,
|
|
3120
|
-
this.log(`Loader ${
|
|
3080
|
+
const i = this.loaders.map((e, o) => e.prepare(t).then(() => {
|
|
3081
|
+
this.log(`Loader ${o} prepared with ${e.imagesLength()} images`);
|
|
3121
3082
|
}).catch((a) => {
|
|
3122
|
-
console.warn(`Loader ${
|
|
3083
|
+
console.warn(`Loader ${o} failed to prepare:`, a);
|
|
3123
3084
|
}));
|
|
3124
3085
|
await Promise.all(i);
|
|
3125
3086
|
for (const e of this.loaders)
|
|
3126
3087
|
if (e.isPrepared()) {
|
|
3127
|
-
const
|
|
3128
|
-
this._discoveredUrls.push(...
|
|
3088
|
+
const o = e.imageURLs();
|
|
3089
|
+
this._discoveredUrls.push(...o);
|
|
3129
3090
|
}
|
|
3130
3091
|
this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
|
|
3131
3092
|
}
|
|
@@ -3250,18 +3211,18 @@ const Ke = `
|
|
|
3250
3211
|
`;
|
|
3251
3212
|
function Ze() {
|
|
3252
3213
|
if (typeof document > "u") return;
|
|
3253
|
-
const
|
|
3254
|
-
if (document.getElementById(
|
|
3214
|
+
const n = "fbn-ic-functional-styles";
|
|
3215
|
+
if (document.getElementById(n)) return;
|
|
3255
3216
|
const t = document.createElement("style");
|
|
3256
|
-
t.id =
|
|
3217
|
+
t.id = n, t.textContent = Ke, document.head.appendChild(t);
|
|
3257
3218
|
}
|
|
3258
3219
|
class Qe {
|
|
3259
3220
|
constructor(t = {}) {
|
|
3260
3221
|
this.fullConfig = Zt(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 ie(this.fullConfig.animation), this.layoutEngine = new ze({
|
|
3261
3222
|
layout: this.fullConfig.layout,
|
|
3262
3223
|
image: this.fullConfig.image
|
|
3263
|
-
}), this.zoomEngine = new
|
|
3264
|
-
const i = this.fullConfig.animation.entry ||
|
|
3224
|
+
}), this.zoomEngine = new Ne(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = et(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
|
|
3225
|
+
const i = this.fullConfig.animation.entry || R.animation.entry;
|
|
3265
3226
|
this.entryAnimationEngine = new ge(
|
|
3266
3227
|
i,
|
|
3267
3228
|
this.fullConfig.layout.algorithm
|
|
@@ -3270,8 +3231,8 @@ class Qe {
|
|
|
3270
3231
|
e && e.type !== "none" ? this.idleAnimationEngine = new fe(
|
|
3271
3232
|
e,
|
|
3272
3233
|
i.timing?.duration ?? 600
|
|
3273
|
-
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((
|
|
3274
|
-
this.idleAnimationEngine?.resumeForImage(
|
|
3234
|
+
) : this.idleAnimationEngine = null, this.zoomEngine.setOnUnfocusCompleteCallback((o) => {
|
|
3235
|
+
this.idleAnimationEngine?.resumeForImage(o);
|
|
3275
3236
|
}), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
|
|
3276
3237
|
}
|
|
3277
3238
|
/**
|
|
@@ -3289,7 +3250,7 @@ class Qe {
|
|
|
3289
3250
|
const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
|
|
3290
3251
|
if (!t || t.length === 0)
|
|
3291
3252
|
throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
|
|
3292
|
-
const e = t.map((
|
|
3253
|
+
const e = t.map((o) => this.createLoaderFromEntry(o, i));
|
|
3293
3254
|
return e.length === 1 ? e[0] : new Ve({
|
|
3294
3255
|
loaders: e,
|
|
3295
3256
|
debugLogging: this.fullConfig.config.debug?.loaders
|
|
@@ -3300,7 +3261,7 @@ class Qe {
|
|
|
3300
3261
|
*/
|
|
3301
3262
|
createLoaderFromEntry(t, i) {
|
|
3302
3263
|
if ("static" in t) {
|
|
3303
|
-
const e = t.static,
|
|
3264
|
+
const e = t.static, o = {
|
|
3304
3265
|
...e,
|
|
3305
3266
|
validateUrls: e.validateUrls ?? i.validateUrls,
|
|
3306
3267
|
validationTimeout: e.validationTimeout ?? i.validationTimeout,
|
|
@@ -3308,14 +3269,14 @@ class Qe {
|
|
|
3308
3269
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3309
3270
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3310
3271
|
};
|
|
3311
|
-
return new Ye(
|
|
3272
|
+
return new Ye(o);
|
|
3312
3273
|
} else if ("googleDrive" in t) {
|
|
3313
|
-
const e = t.googleDrive,
|
|
3274
|
+
const e = t.googleDrive, o = {
|
|
3314
3275
|
...e,
|
|
3315
3276
|
allowedExtensions: e.allowedExtensions ?? i.allowedExtensions,
|
|
3316
3277
|
debugLogging: e.debugLogging ?? this.fullConfig.config.debug?.loaders
|
|
3317
3278
|
};
|
|
3318
|
-
return new Xe(
|
|
3279
|
+
return new Xe(o);
|
|
3319
3280
|
} else
|
|
3320
3281
|
throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
|
|
3321
3282
|
}
|
|
@@ -3328,20 +3289,20 @@ class Qe {
|
|
|
3328
3289
|
this.containerEl = this.containerRef;
|
|
3329
3290
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3330
3291
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3331
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new
|
|
3292
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new yt(this.containerEl, {
|
|
3332
3293
|
onNext: () => this.navigateToNextImage(),
|
|
3333
3294
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3334
3295
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3335
3296
|
onDragEnd: (t) => {
|
|
3336
3297
|
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, qe);
|
|
3337
3298
|
}
|
|
3338
|
-
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3299
|
+
})), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3339
3300
|
} catch (t) {
|
|
3340
3301
|
console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
|
|
3341
3302
|
}
|
|
3342
3303
|
}
|
|
3343
3304
|
setupUI() {
|
|
3344
|
-
const t = this.fullConfig.
|
|
3305
|
+
const t = this.fullConfig.ui;
|
|
3345
3306
|
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));
|
|
3346
3307
|
}
|
|
3347
3308
|
resolveElement(t) {
|
|
@@ -3364,7 +3325,7 @@ class Qe {
|
|
|
3364
3325
|
return t.className = "fbn-ic-counter fbn-ic-hidden", this.containerEl.appendChild(t), t;
|
|
3365
3326
|
}
|
|
3366
3327
|
setupEventListeners() {
|
|
3367
|
-
|
|
3328
|
+
this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
|
|
3368
3329
|
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());
|
|
3369
3330
|
}), document.addEventListener("click", (t) => {
|
|
3370
3331
|
this.swipeEngine?.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter());
|
|
@@ -3376,7 +3337,7 @@ class Qe {
|
|
|
3376
3337
|
navigateToNextImage() {
|
|
3377
3338
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3378
3339
|
const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3379
|
-
(
|
|
3340
|
+
(o) => o.dataset.imageId === String(t)
|
|
3380
3341
|
);
|
|
3381
3342
|
if (!i) return;
|
|
3382
3343
|
const e = this.imageLayouts[t];
|
|
@@ -3388,7 +3349,7 @@ class Qe {
|
|
|
3388
3349
|
navigateToPreviousImage() {
|
|
3389
3350
|
if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
|
|
3390
3351
|
const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, i = this.imageElements.find(
|
|
3391
|
-
(
|
|
3352
|
+
(o) => o.dataset.imageId === String(t)
|
|
3392
3353
|
);
|
|
3393
3354
|
if (!i) return;
|
|
3394
3355
|
const e = this.imageLayouts[t];
|
|
@@ -3404,8 +3365,8 @@ class Qe {
|
|
|
3404
3365
|
}, 500));
|
|
3405
3366
|
}
|
|
3406
3367
|
getImageHeight() {
|
|
3407
|
-
const t = window.innerWidth, i = this.fullConfig.layout.responsive,
|
|
3408
|
-
return i ? t <= i.mobile.maxWidth ? Math.min(100,
|
|
3368
|
+
const t = window.innerWidth, i = this.fullConfig.layout.responsive, o = this.fullConfig.image.sizing?.maxSize ?? 400;
|
|
3369
|
+
return i ? t <= i.mobile.maxWidth ? Math.min(100, o) : t <= i.tablet.maxWidth ? Math.min(180, o) : Math.min(225, o) : t <= 767 ? Math.min(100, o) : t <= 1199 ? Math.min(180, o) : Math.min(225, o);
|
|
3409
3370
|
}
|
|
3410
3371
|
/**
|
|
3411
3372
|
* Get container bounds for layout calculations
|
|
@@ -3428,12 +3389,12 @@ class Qe {
|
|
|
3428
3389
|
this.showError("No images found."), this.showLoading(!1);
|
|
3429
3390
|
return;
|
|
3430
3391
|
}
|
|
3431
|
-
const e = this.getContainerBounds(),
|
|
3432
|
-
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${
|
|
3392
|
+
const e = this.getContainerBounds(), o = this.getImageHeight(), a = window.innerWidth;
|
|
3393
|
+
this.logDebug(`Adaptive sizing input: container=${e.width}x${e.height}px, images=${t}, responsiveMax=${o}px`);
|
|
3433
3394
|
const r = this.layoutEngine.calculateAdaptiveSize(
|
|
3434
3395
|
e,
|
|
3435
3396
|
t,
|
|
3436
|
-
|
|
3397
|
+
o,
|
|
3437
3398
|
a
|
|
3438
3399
|
);
|
|
3439
3400
|
this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(i, r.height), this.showLoading(!1), this.imagesLoaded = !0;
|
|
@@ -3451,94 +3412,94 @@ class Qe {
|
|
|
3451
3412
|
if (!this.containerEl) return;
|
|
3452
3413
|
const e = this.getContainerBounds();
|
|
3453
3414
|
this.currentImageHeight = i;
|
|
3454
|
-
const
|
|
3415
|
+
const o = this.loadGeneration, a = this.layoutEngine.generateLayout(t.length, e, { fixedHeight: i });
|
|
3455
3416
|
this.imageLayouts = a, this.displayQueue = [];
|
|
3456
3417
|
let r = 0;
|
|
3457
|
-
const s = (
|
|
3458
|
-
this.containerEl && (this.containerEl.appendChild(
|
|
3459
|
-
if (
|
|
3418
|
+
const s = (c) => {
|
|
3419
|
+
this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
|
|
3420
|
+
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)) {
|
|
3460
3421
|
const d = {
|
|
3461
|
-
x: parseFloat(
|
|
3462
|
-
y: parseFloat(
|
|
3422
|
+
x: parseFloat(c.dataset.startX),
|
|
3423
|
+
y: parseFloat(c.dataset.startY)
|
|
3463
3424
|
}, f = {
|
|
3464
|
-
x: parseFloat(
|
|
3465
|
-
y: parseFloat(
|
|
3466
|
-
},
|
|
3425
|
+
x: parseFloat(c.dataset.endX),
|
|
3426
|
+
y: parseFloat(c.dataset.endY)
|
|
3427
|
+
}, y = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), m = parseFloat(c.dataset.scale), b = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, w = c.dataset.startScale ? parseFloat(c.dataset.startScale) : m, v = this.entryAnimationEngine.getTiming();
|
|
3467
3428
|
he({
|
|
3468
|
-
element:
|
|
3429
|
+
element: c,
|
|
3469
3430
|
startPosition: d,
|
|
3470
3431
|
endPosition: f,
|
|
3471
3432
|
pathConfig: this.entryAnimationEngine.getPathConfig(),
|
|
3472
3433
|
duration: v.duration,
|
|
3473
|
-
imageWidth:
|
|
3434
|
+
imageWidth: y,
|
|
3474
3435
|
imageHeight: p,
|
|
3475
3436
|
rotation: g,
|
|
3476
3437
|
scale: m,
|
|
3477
3438
|
rotationConfig: this.entryAnimationEngine.getRotationConfig(),
|
|
3478
|
-
startRotation:
|
|
3439
|
+
startRotation: b,
|
|
3479
3440
|
scaleConfig: this.entryAnimationEngine.getScaleConfig(),
|
|
3480
3441
|
startScale: w
|
|
3481
3442
|
});
|
|
3482
3443
|
} else {
|
|
3483
|
-
const d =
|
|
3484
|
-
|
|
3444
|
+
const d = c.dataset.finalTransform || "";
|
|
3445
|
+
c.style.transform = d;
|
|
3485
3446
|
}
|
|
3486
|
-
const h = parseInt(
|
|
3447
|
+
const h = parseInt(c.dataset.imageId || "0");
|
|
3487
3448
|
if (this.fullConfig.config.debug?.enabled && h < 3) {
|
|
3488
|
-
const d =
|
|
3449
|
+
const d = c.dataset.finalTransform || "";
|
|
3489
3450
|
console.log(`Image ${h} final state:`, {
|
|
3490
|
-
left:
|
|
3491
|
-
top:
|
|
3492
|
-
width:
|
|
3493
|
-
height:
|
|
3494
|
-
computedWidth:
|
|
3495
|
-
computedHeight:
|
|
3451
|
+
left: c.style.left,
|
|
3452
|
+
top: c.style.top,
|
|
3453
|
+
width: c.style.width,
|
|
3454
|
+
height: c.style.height,
|
|
3455
|
+
computedWidth: c.offsetWidth,
|
|
3456
|
+
computedHeight: c.offsetHeight,
|
|
3496
3457
|
transform: d,
|
|
3497
3458
|
pathType: this.entryAnimationEngine.getPathType()
|
|
3498
3459
|
});
|
|
3499
3460
|
}
|
|
3500
3461
|
if (this.idleAnimationEngine) {
|
|
3501
3462
|
const d = this.entryAnimationEngine.getTiming().duration;
|
|
3502
|
-
this.idleAnimationEngine.register(
|
|
3463
|
+
this.idleAnimationEngine.register(c, h, this.imageElements.length, d);
|
|
3503
3464
|
}
|
|
3504
3465
|
}), r++);
|
|
3505
|
-
},
|
|
3466
|
+
}, l = () => {
|
|
3506
3467
|
if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
|
|
3507
3468
|
for (; this.displayQueue.length > 0; ) {
|
|
3508
|
-
const
|
|
3509
|
-
|
|
3469
|
+
const c = this.displayQueue.shift();
|
|
3470
|
+
c && s(c);
|
|
3510
3471
|
}
|
|
3511
3472
|
return;
|
|
3512
3473
|
}
|
|
3513
3474
|
this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
|
|
3514
|
-
if (
|
|
3475
|
+
if (o !== this.loadGeneration) {
|
|
3515
3476
|
this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3516
3477
|
return;
|
|
3517
3478
|
}
|
|
3518
3479
|
if (this.displayQueue.length > 0) {
|
|
3519
|
-
const
|
|
3520
|
-
|
|
3480
|
+
const c = this.displayQueue.shift();
|
|
3481
|
+
c && s(c);
|
|
3521
3482
|
}
|
|
3522
3483
|
r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
|
|
3523
3484
|
}, this.fullConfig.animation.queue.interval);
|
|
3524
3485
|
};
|
|
3525
3486
|
if ("IntersectionObserver" in window && this.containerEl) {
|
|
3526
|
-
const
|
|
3487
|
+
const c = new IntersectionObserver((u) => {
|
|
3527
3488
|
u.forEach((h) => {
|
|
3528
|
-
h.isIntersecting && (
|
|
3489
|
+
h.isIntersecting && (l(), c.disconnect());
|
|
3529
3490
|
});
|
|
3530
3491
|
}, { threshold: 0.1, rootMargin: "50px" });
|
|
3531
|
-
|
|
3492
|
+
c.observe(this.containerEl);
|
|
3532
3493
|
} else
|
|
3533
|
-
|
|
3534
|
-
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((
|
|
3494
|
+
l();
|
|
3495
|
+
this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), a.forEach((c, u) => {
|
|
3535
3496
|
const h = document.createElement("div");
|
|
3536
3497
|
h.className = "fbn-ic-debug-center", h.style.position = "absolute", h.style.width = "12px", h.style.height = "12px", h.style.borderRadius = "50%", h.style.backgroundColor = "red", h.style.border = "2px solid yellow", h.style.zIndex = "9999", h.style.pointerEvents = "none";
|
|
3537
|
-
const d =
|
|
3498
|
+
const d = c.x, f = c.y;
|
|
3538
3499
|
h.style.left = `${d - 6}px`, h.style.top = `${f - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(h);
|
|
3539
|
-
})), t.forEach((
|
|
3500
|
+
})), t.forEach((c, u) => {
|
|
3540
3501
|
const h = document.createElement("img");
|
|
3541
|
-
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.
|
|
3502
|
+
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
|
|
3542
3503
|
const d = a[u];
|
|
3543
3504
|
h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)), st(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
|
|
3544
3505
|
if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {
|
|
@@ -3553,29 +3514,29 @@ class Qe {
|
|
|
3553
3514
|
}), h.addEventListener("click", (f) => {
|
|
3554
3515
|
f.stopPropagation(), this.handleImageClick(h, d);
|
|
3555
3516
|
}), h.style.opacity = "0", h.style.transition = this.entryAnimationEngine.getTransitionCSS(), h.onload = () => {
|
|
3556
|
-
if (
|
|
3517
|
+
if (o !== this.loadGeneration)
|
|
3557
3518
|
return;
|
|
3558
|
-
const f = h.naturalWidth / h.naturalHeight,
|
|
3559
|
-
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${
|
|
3560
|
-
const p = { x: d.x, y: d.y }, g = { width:
|
|
3519
|
+
const f = h.naturalWidth / h.naturalHeight, y = i * f;
|
|
3520
|
+
h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${u}] Called with imageHeight=${i}, renderedWidth=${y}`), h.style.width = `${y}px`, h.cachedRenderedWidth = y, h.aspectRatio = f, ft(h, this.fullConfig.styling?.default, i, y);
|
|
3521
|
+
const p = { x: d.x, y: d.y }, g = { width: y, height: i }, m = this.entryAnimationEngine.calculateStartPosition(
|
|
3561
3522
|
p,
|
|
3562
3523
|
g,
|
|
3563
3524
|
e,
|
|
3564
3525
|
u,
|
|
3565
3526
|
t.length
|
|
3566
|
-
),
|
|
3527
|
+
), b = this.entryAnimationEngine.calculateStartRotation(d.rotation), w = this.entryAnimationEngine.calculateStartScale(d.scale), v = this.entryAnimationEngine.buildFinalTransform(
|
|
3567
3528
|
d.rotation,
|
|
3568
3529
|
d.scale,
|
|
3569
|
-
|
|
3530
|
+
y,
|
|
3570
3531
|
i
|
|
3571
|
-
),
|
|
3532
|
+
), S = this.entryAnimationEngine.buildStartTransform(
|
|
3572
3533
|
m,
|
|
3573
3534
|
p,
|
|
3574
3535
|
d.rotation,
|
|
3575
3536
|
d.scale,
|
|
3576
|
-
b,
|
|
3577
|
-
i,
|
|
3578
3537
|
y,
|
|
3538
|
+
i,
|
|
3539
|
+
b,
|
|
3579
3540
|
w
|
|
3580
3541
|
);
|
|
3581
3542
|
this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
|
|
@@ -3584,15 +3545,15 @@ class Qe {
|
|
|
3584
3545
|
left: d.x,
|
|
3585
3546
|
top: d.y,
|
|
3586
3547
|
finalTransform: v,
|
|
3587
|
-
renderedWidth:
|
|
3548
|
+
renderedWidth: y,
|
|
3588
3549
|
renderedHeight: i
|
|
3589
|
-
}), h.style.transform =
|
|
3590
|
-
}, h.onerror = () => r++, h.src =
|
|
3550
|
+
}), h.style.transform = S, h.dataset.finalTransform = v, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || b !== d.rotation || w !== d.scale) && (h.dataset.startX = String(m.x), h.dataset.startY = String(m.y), h.dataset.endX = String(p.x), h.dataset.endY = String(p.y), h.dataset.imageWidth = String(y), h.dataset.imageHeight = String(i), h.dataset.rotation = String(d.rotation), h.dataset.scale = String(d.scale), h.dataset.startRotation = String(b), h.dataset.startScale = String(w)), this.displayQueue.push(h);
|
|
3551
|
+
}, h.onerror = () => r++, h.src = c;
|
|
3591
3552
|
});
|
|
3592
3553
|
}
|
|
3593
3554
|
async handleImageClick(t, i) {
|
|
3594
3555
|
if (!this.containerEl) return;
|
|
3595
|
-
const e = this.zoomEngine.isFocused(t),
|
|
3556
|
+
const e = this.zoomEngine.isFocused(t), o = {
|
|
3596
3557
|
width: this.containerEl.offsetWidth,
|
|
3597
3558
|
height: this.containerEl.offsetHeight
|
|
3598
3559
|
};
|
|
@@ -3601,7 +3562,7 @@ class Qe {
|
|
|
3601
3562
|
else {
|
|
3602
3563
|
this.idleAnimationEngine?.pauseForImage(t);
|
|
3603
3564
|
const a = t.dataset.imageId;
|
|
3604
|
-
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t,
|
|
3565
|
+
this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, o, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
|
|
3605
3566
|
}
|
|
3606
3567
|
}
|
|
3607
3568
|
/**
|
|
@@ -3611,7 +3572,7 @@ class Qe {
|
|
|
3611
3572
|
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.idleAnimationEngine?.stopAll(), this.imagesLoaded = !1;
|
|
3612
3573
|
}
|
|
3613
3574
|
showLoading(t) {
|
|
3614
|
-
!this.fullConfig.
|
|
3575
|
+
!this.fullConfig.ui.showLoadingSpinner || !this.loadingEl || (t ? this.loadingEl.classList.remove("fbn-ic-hidden") : this.loadingEl.classList.add("fbn-ic-hidden"));
|
|
3615
3576
|
}
|
|
3616
3577
|
showError(t) {
|
|
3617
3578
|
this.errorEl && (this.errorEl.textContent = t, this.errorEl.classList.remove("fbn-ic-hidden"));
|
|
@@ -3620,7 +3581,7 @@ class Qe {
|
|
|
3620
3581
|
this.errorEl && this.errorEl.classList.add("fbn-ic-hidden");
|
|
3621
3582
|
}
|
|
3622
3583
|
updateCounter(t) {
|
|
3623
|
-
!this.fullConfig.
|
|
3584
|
+
!this.fullConfig.ui.showImageCounter || !this.counterEl || (this.counterEl.textContent = `${t + 1} of ${this.imageElements.length}`, this.counterEl.classList.remove("fbn-ic-hidden"));
|
|
3624
3585
|
}
|
|
3625
3586
|
hideCounter() {
|
|
3626
3587
|
this.counterEl && this.counterEl.classList.add("fbn-ic-hidden");
|
|
@@ -3637,13 +3598,14 @@ export {
|
|
|
3637
3598
|
It as BOUNCE_PRESETS,
|
|
3638
3599
|
Se as ClusterPlacementLayout,
|
|
3639
3600
|
Ve as CompositeLoader,
|
|
3640
|
-
|
|
3601
|
+
R as DEFAULT_CONFIG,
|
|
3641
3602
|
zt as DEFAULT_SHARED_LOADER_CONFIG,
|
|
3642
3603
|
Rt as ELASTIC_PRESETS,
|
|
3643
3604
|
ge as EntryAnimationEngine,
|
|
3644
3605
|
Ke as FUNCTIONAL_CSS,
|
|
3645
3606
|
Xe as GoogleDriveLoader,
|
|
3646
|
-
|
|
3607
|
+
be as GridPlacementLayout,
|
|
3608
|
+
Fe as HoneycombPlacementLayout,
|
|
3647
3609
|
Qe as ImageCloud,
|
|
3648
3610
|
Je as ImageFilter,
|
|
3649
3611
|
Qe as ImageGallery,
|
|
@@ -3654,7 +3616,7 @@ export {
|
|
|
3654
3616
|
Ye as StaticImageLoader,
|
|
3655
3617
|
Tt as WAVE_PATH_PRESETS,
|
|
3656
3618
|
Ie as WavePlacementLayout,
|
|
3657
|
-
|
|
3619
|
+
Ne as ZoomEngine,
|
|
3658
3620
|
he as animatePath,
|
|
3659
3621
|
Ze as injectFunctionalStyles,
|
|
3660
3622
|
de as requiresJSAnimation
|