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