fix(zoom): fix zoom pan not preventing slide changes using touch

fixes #7308
nolimits4web · Apr 9, 2024 · f73cc2a · f73cc2a
1 parent a205f42
commit f73cc2a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/core/events/onTouchMove.mjs b/src/core/events/onTouchMove.mjs
@@ -124,7 +124,7 @@ export default function onTouchMove(event) {
       data.startMoving = true;
     }
   }
-  if (data.isScrolling) {
+  if (data.isScrolling || (e.type === 'touchmove' && data.preventTouchMoveFromPointerMove)) {
     data.isTouched = false;
     return;
   }

diff --git a/src/modules/zoom/zoom.mjs b/src/modules/zoom/zoom.mjs
@@ -238,6 +238,17 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
       gesture.slideEl = undefined;
     }
   }
+  let allowTouchMoveTimeout;
+  function allowTouchMove() {
+    swiper.touchEventsData.preventTouchMoveFromPointerMove = false;
+  }
+  function preventTouchMove() {
+    clearTimeout(allowTouchMoveTimeout);
+    swiper.touchEventsData.preventTouchMoveFromPointerMove = true;
+    allowTouchMoveTimeout = setTimeout(() => {
+      allowTouchMove();
+    });
+  }
   function onTouchStart(e) {
     const device = swiper.device;
     if (!gesture.imageEl) return;
@@ -249,10 +260,16 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
     image.touchesStart.y = event.pageY;
   }
   function onTouchMove(e) {
-    if (!eventWithinSlide(e) || !eventWithinZoomContainer(e)) return;
+    if (!eventWithinSlide(e) || !eventWithinZoomContainer(e)) {
+      return;
+    }
     const zoom = swiper.zoom;
-    if (!gesture.imageEl) return;
-    if (!image.isTouched || !gesture.slideEl) return;
+    if (!gesture.imageEl) {
+      return;
+    }
+    if (!image.isTouched || !gesture.slideEl) {
+      return;
+    }
 
     if (!image.isMoved) {
       image.width = gesture.imageEl.offsetWidth || gesture.imageEl.clientWidth;
@@ -267,7 +284,10 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
     const scaledWidth = image.width * zoom.scale;
     const scaledHeight = image.height * zoom.scale;
 
-    if (scaledWidth < gesture.slideWidth && scaledHeight < gesture.slideHeight) return;
+    if (scaledWidth < gesture.slideWidth && scaledHeight < gesture.slideHeight) {
+      allowTouchMove();
+      return;
+    }
 
     image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0);
     image.maxX = -image.minX;
@@ -293,6 +313,7 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
             image.touchesCurrent.x > image.touchesStart.x))
       ) {
         image.isTouched = false;
+        allowTouchMove();
         return;
       }
       if (
@@ -303,13 +324,15 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
             image.touchesCurrent.y > image.touchesStart.y))
       ) {
         image.isTouched = false;
+        allowTouchMove();
         return;
       }
     }
     if (e.cancelable) {
       e.preventDefault();
     }
     e.stopPropagation();
+    preventTouchMove();
 
     image.isMoved = true;
     const scaleRatio =