@frybynite/image-cloud 0.9.1 → 0.9.2
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 +401 -423
- package/dist/image-cloud-auto-init.js.map +1 -1
- package/dist/image-cloud.js +9 -30
- 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 +9 -14
- package/dist/react.d.ts +9 -14
- package/dist/react.js +8 -30
- package/dist/react.js.map +1 -1
- package/dist/vue.d.ts +9 -14
- package/dist/vue.js +8 -30
- package/dist/vue.js.map +1 -1
- package/dist/web-component.d.ts +9 -14
- package/dist/web-component.js +44 -66
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export declare interface AnimationConfig {
|
|
|
11
11
|
duration: number;
|
|
12
12
|
easing: AnimationEasingConfig;
|
|
13
13
|
queue: AnimationQueueConfig;
|
|
14
|
-
performance?: AnimationPerformanceConfig;
|
|
15
14
|
entry?: EntryAnimationConfig;
|
|
16
15
|
idle?: IdleAnimationConfig;
|
|
17
16
|
}
|
|
@@ -123,11 +122,6 @@ declare interface AnimationParams {
|
|
|
123
122
|
easing: string;
|
|
124
123
|
}
|
|
125
124
|
|
|
126
|
-
declare interface AnimationPerformanceConfig {
|
|
127
|
-
useGPU?: boolean;
|
|
128
|
-
reduceMotion?: boolean;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
125
|
declare interface AnimationQueueConfig {
|
|
132
126
|
enabled: boolean;
|
|
133
127
|
interval: number;
|
|
@@ -562,11 +556,6 @@ export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n position: relative
|
|
|
562
556
|
|
|
563
557
|
export declare type GalleryConfig = ImageCloudConfig;
|
|
564
558
|
|
|
565
|
-
declare interface GestureInteractionConfig {
|
|
566
|
-
pinchToZoom?: boolean;
|
|
567
|
-
doubleTapToFocus?: boolean;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
559
|
export declare interface GoogleDriveFilesSource {
|
|
571
560
|
files: string[];
|
|
572
561
|
}
|
|
@@ -721,6 +710,14 @@ declare interface HoneycombAlgorithmConfig {
|
|
|
721
710
|
spacing?: number;
|
|
722
711
|
}
|
|
723
712
|
|
|
713
|
+
export declare class HoneycombPlacementLayout implements PlacementLayout {
|
|
714
|
+
private config;
|
|
715
|
+
constructor(config: LayoutConfig, _imageConfig?: ImageConfig);
|
|
716
|
+
generate(imageCount: number, containerBounds: ContainerBounds, options?: Partial<LayoutConfig> & {
|
|
717
|
+
fixedHeight?: number;
|
|
718
|
+
}): ImageLayout[];
|
|
719
|
+
}
|
|
720
|
+
|
|
724
721
|
declare interface IdleAnimationConfig {
|
|
725
722
|
type: IdleAnimationType;
|
|
726
723
|
wiggle?: IdleWiggleConfig;
|
|
@@ -1056,8 +1053,7 @@ export declare function injectFunctionalStyles(): void;
|
|
|
1056
1053
|
declare interface InteractionConfig {
|
|
1057
1054
|
focus: FocusInteractionConfig;
|
|
1058
1055
|
navigation?: NavigationInteractionConfig;
|
|
1059
|
-
|
|
1060
|
-
disableDragging?: boolean;
|
|
1056
|
+
dragging?: boolean;
|
|
1061
1057
|
}
|
|
1062
1058
|
|
|
1063
1059
|
export declare type LayoutAlgorithm = 'random' | 'radial' | 'grid' | 'spiral' | 'cluster' | 'wave' | 'honeycomb';
|
|
@@ -1153,7 +1149,6 @@ declare interface LayoutEngineConfig {
|
|
|
1153
1149
|
|
|
1154
1150
|
declare interface LayoutSpacingConfig {
|
|
1155
1151
|
padding: number;
|
|
1156
|
-
minGap: number;
|
|
1157
1152
|
}
|
|
1158
1153
|
|
|
1159
1154
|
export declare type LoaderEntry = StaticLoaderEntry | GoogleDriveLoaderEntry;
|
package/dist/react.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export declare interface AnimationConfig {
|
|
|
11
11
|
duration: number;
|
|
12
12
|
easing: AnimationEasingConfig;
|
|
13
13
|
queue: AnimationQueueConfig;
|
|
14
|
-
performance?: AnimationPerformanceConfig;
|
|
15
14
|
entry?: EntryAnimationConfig;
|
|
16
15
|
idle?: IdleAnimationConfig;
|
|
17
16
|
}
|
|
@@ -123,11 +122,6 @@ declare interface AnimationParams {
|
|
|
123
122
|
easing: string;
|
|
124
123
|
}
|
|
125
124
|
|
|
126
|
-
declare interface AnimationPerformanceConfig {
|
|
127
|
-
useGPU?: boolean;
|
|
128
|
-
reduceMotion?: boolean;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
125
|
declare interface AnimationQueueConfig {
|
|
132
126
|
enabled: boolean;
|
|
133
127
|
interval: number;
|
|
@@ -562,11 +556,6 @@ export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n position: relative
|
|
|
562
556
|
|
|
563
557
|
export declare type GalleryConfig = ImageCloudConfig;
|
|
564
558
|
|
|
565
|
-
declare interface GestureInteractionConfig {
|
|
566
|
-
pinchToZoom?: boolean;
|
|
567
|
-
doubleTapToFocus?: boolean;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
559
|
export declare interface GoogleDriveFilesSource {
|
|
571
560
|
files: string[];
|
|
572
561
|
}
|
|
@@ -721,6 +710,14 @@ declare interface HoneycombAlgorithmConfig {
|
|
|
721
710
|
spacing?: number;
|
|
722
711
|
}
|
|
723
712
|
|
|
713
|
+
export declare class HoneycombPlacementLayout implements PlacementLayout {
|
|
714
|
+
private config;
|
|
715
|
+
constructor(config: LayoutConfig, _imageConfig?: ImageConfig);
|
|
716
|
+
generate(imageCount: number, containerBounds: ContainerBounds, options?: Partial<LayoutConfig> & {
|
|
717
|
+
fixedHeight?: number;
|
|
718
|
+
}): ImageLayout[];
|
|
719
|
+
}
|
|
720
|
+
|
|
724
721
|
declare interface IdleAnimationConfig {
|
|
725
722
|
type: IdleAnimationType;
|
|
726
723
|
wiggle?: IdleWiggleConfig;
|
|
@@ -1056,8 +1053,7 @@ export declare function injectFunctionalStyles(): void;
|
|
|
1056
1053
|
declare interface InteractionConfig {
|
|
1057
1054
|
focus: FocusInteractionConfig;
|
|
1058
1055
|
navigation?: NavigationInteractionConfig;
|
|
1059
|
-
|
|
1060
|
-
disableDragging?: boolean;
|
|
1056
|
+
dragging?: boolean;
|
|
1061
1057
|
}
|
|
1062
1058
|
|
|
1063
1059
|
export declare type LayoutAlgorithm = 'random' | 'radial' | 'grid' | 'spiral' | 'cluster' | 'wave' | 'honeycomb';
|
|
@@ -1153,7 +1149,6 @@ declare interface LayoutEngineConfig {
|
|
|
1153
1149
|
|
|
1154
1150
|
declare interface LayoutSpacingConfig {
|
|
1155
1151
|
padding: number;
|
|
1156
|
-
minGap: number;
|
|
1157
1152
|
}
|
|
1158
1153
|
|
|
1159
1154
|
export declare type LoaderEntry = StaticLoaderEntry | GoogleDriveLoaderEntry;
|
package/dist/react.js
CHANGED
|
@@ -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",
|
|
@@ -181,20 +173,12 @@ 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
183
|
// Pattern-based rendering configuration
|
|
200
184
|
rendering: Object.freeze({
|
|
@@ -328,9 +312,6 @@ function ne(o = {}) {
|
|
|
328
312
|
}), o.animation.queue && (s.animation.queue = {
|
|
329
313
|
...E.animation.queue,
|
|
330
314
|
...o.animation.queue
|
|
331
|
-
}), o.animation.performance && (s.animation.performance = {
|
|
332
|
-
...E.animation.performance,
|
|
333
|
-
...o.animation.performance
|
|
334
315
|
}), o.animation.entry && (s.animation.entry = {
|
|
335
316
|
...E.animation.entry,
|
|
336
317
|
...o.animation.entry,
|
|
@@ -355,9 +336,6 @@ function ne(o = {}) {
|
|
|
355
336
|
}), o.interaction.navigation && (s.interaction.navigation = {
|
|
356
337
|
...E.interaction.navigation,
|
|
357
338
|
...o.interaction.navigation
|
|
358
|
-
}), o.interaction.gestures && (s.interaction.gestures = {
|
|
359
|
-
...E.interaction.gestures,
|
|
360
|
-
...o.interaction.gestures
|
|
361
339
|
})), o.rendering && (s.rendering = {
|
|
362
340
|
...E.rendering,
|
|
363
341
|
...o.rendering
|
|
@@ -3330,14 +3308,14 @@ let oi = class {
|
|
|
3330
3308
|
this.containerEl = this.containerRef;
|
|
3331
3309
|
else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
|
|
3332
3310
|
throw new Error(`Container #${this.containerId} not found`);
|
|
3333
|
-
this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new bt(this.containerEl, {
|
|
3311
|
+
this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
|
|
3334
3312
|
onNext: () => this.navigateToNextImage(),
|
|
3335
3313
|
onPrev: () => this.navigateToPreviousImage(),
|
|
3336
3314
|
onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
|
|
3337
3315
|
onDragEnd: (t) => {
|
|
3338
3316
|
t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Je);
|
|
3339
3317
|
}
|
|
3340
|
-
}), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3318
|
+
})), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
|
|
3341
3319
|
} catch (t) {
|
|
3342
3320
|
console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
|
|
3343
3321
|
}
|
|
@@ -3366,7 +3344,7 @@ let oi = class {
|
|
|
3366
3344
|
return t.className = "fbn-ic-counter fbn-ic-hidden", this.containerEl.appendChild(t), t;
|
|
3367
3345
|
}
|
|
3368
3346
|
setupEventListeners() {
|
|
3369
|
-
|
|
3347
|
+
this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
|
|
3370
3348
|
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
3349
|
}), document.addEventListener("click", (t) => {
|
|
3372
3350
|
this.swipeEngine?.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter());
|
|
@@ -3540,7 +3518,7 @@ let oi = class {
|
|
|
3540
3518
|
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
3519
|
})), t.forEach((l, u) => {
|
|
3542
3520
|
const h = document.createElement("img");
|
|
3543
|
-
h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.
|
|
3521
|
+
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
3522
|
const d = a[u];
|
|
3545
3523
|
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
3524
|
if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {
|