Skip to content

Commit

Permalink
fix(zoom): fix zoom pan not preventing slide changes using touch
Browse files Browse the repository at this point in the history
fixes #7308
  • Loading branch information
nolimits4web committed Apr 9, 2024
1 parent a205f42 commit f73cc2a
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 5 deletions.
2 changes: 1 addition & 1 deletion src/core/events/onTouchMove.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
31 changes: 27 additions & 4 deletions src/modules/zoom/zoom.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -293,6 +313,7 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
image.touchesCurrent.x > image.touchesStart.x))
) {
image.isTouched = false;
allowTouchMove();
return;
}
if (
Expand All @@ -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 =
Expand Down

0 comments on commit f73cc2a

Please sign in to comment.