fix(zoom): zoom button is disabled when clicking too fast

ref #1403
sachinchoolur · Oct 1, 2022 · 85ec3a9 · 85ec3a9
1 parent b6dc65d
commit 85ec3a9
Showing 1 changed file with 43 additions and 27 deletions.
diff --git a/src/plugins/zoom/lg-zoom.ts b/src/plugins/zoom/lg-zoom.ts
@@ -23,6 +23,9 @@ interface PossibleCords {
     maxX: number;
     maxY: number;
 }
+
+const ZOOM_TRANSITION_DURATION = 500;
+
 export default class Zoom {
     private core: LightGallery;
     private settings: ZoomSettings;
@@ -279,11 +282,7 @@ export default class Zoom {
         this.top = y;
 
         if (resetToMax) {
-            const actualSizeScale = this.getCurrentImageActualSizeScale();
-
-            if (scale >= actualSizeScale) {
-                this.setZoomImageSize();
-            }
+            this.setZoomImageSize();
         }
     }
 
@@ -310,30 +309,47 @@ export default class Zoom {
             .first();
 
         setTimeout(() => {
-            $image.addClass('no-transition');
-            this.imageReset = true;
-        }, 500);
+            const actualSizeScale = this.getCurrentImageActualSizeScale();
+
+            if (this.scale >= actualSizeScale) {
+                $image.addClass('no-transition');
+                this.imageReset = true;
+            }
+        }, ZOOM_TRANSITION_DURATION);
+
         setTimeout(() => {
-            const dragAllowedAxises = this.getDragAllowedAxises(this.scale);
-
-            $image
-                .css(
-                    'width',
-                    ($image.get() as HTMLImageElement).naturalWidth + 'px',
-                )
-                .css(
-                    'height',
-                    ($image.get() as HTMLImageElement).naturalHeight + 'px',
-                );
-            this.core.outer.addClass('lg-actual-size');
-            if (dragAllowedAxises.allowX && dragAllowedAxises.allowY) {
-                $image.addClass('reset-transition');
-            } else if (dragAllowedAxises.allowX && !dragAllowedAxises.allowY) {
-                $image.addClass('reset-transition-x');
-            } else if (!dragAllowedAxises.allowX && dragAllowedAxises.allowY) {
-                $image.addClass('reset-transition-y');
+            const actualSizeScale = this.getCurrentImageActualSizeScale();
+
+            if (this.scale >= actualSizeScale) {
+                const dragAllowedAxises = this.getDragAllowedAxises(this.scale);
+
+                $image
+                    .css(
+                        'width',
+                        ($image.get() as HTMLImageElement).naturalWidth + 'px',
+                    )
+                    .css(
+                        'height',
+                        ($image.get() as HTMLImageElement).naturalHeight + 'px',
+                    );
+
+                this.core.outer.addClass('lg-actual-size');
+
+                if (dragAllowedAxises.allowX && dragAllowedAxises.allowY) {
+                    $image.addClass('reset-transition');
+                } else if (
+                    dragAllowedAxises.allowX &&
+                    !dragAllowedAxises.allowY
+                ) {
+                    $image.addClass('reset-transition-x');
+                } else if (
+                    !dragAllowedAxises.allowX &&
+                    dragAllowedAxises.allowY
+                ) {
+                    $image.addClass('reset-transition-y');
+                }
             }
-        }, 550);
+        }, ZOOM_TRANSITION_DURATION + 50);
     }
 
     /**