ACP2E-3198: [cloud] Two-finger zoom and move issue on the real mobile device

Author: aplapana

lib/web/magnifier/magnify.js

@@ -234,7 +234,6 @@ define([
                 top,
                 left,
                 right,
-                bottom,
                 ratio;
 
             if ($(gallerySelector).data('fotorama').fullScreen) {
@@ -255,11 +254,9 @@ define([
                     getLeftValue(left, widthStep, dimensions.width, containerWidth) : 0;
 
                 right = dragFlag && left < (containerWidth - dimensions.width) / 2 ? 0 : left;
-                bottom = dragFlag ? 0 : top;
 
                 settings = $.extend(dimensions, {
                     top: top,
-                    bottom: bottom,
                     left: left,
                     right: right
                 });
@@ -370,7 +367,7 @@ define([
             return false;
         }
 
-        function zoomOut(e, xStep, yStep, fitIntoParentFlag = false) {
+        function zoomOut(e, xStep, yStep) {
             var $image,
                 widthResult,
                 heightResult,
@@ -381,7 +378,8 @@ define([
                 imageHeight,
                 zoomWidthStep,
                 zoomHeightStep,
-                ratio;
+                ratio,
+                fitIntoParent;
 
             if (allowZoomOut && (!transitionEnabled || !transitionActive) && (isTouchEnabled ||
                 !$(zoomOutButtonSelector).hasClass(zoomOutDisabled))) {
@@ -407,7 +405,7 @@ define([
                     zoomWidthStep = xStep || imageWidth - widthResult;
                 }
 
-                let fitIntoParent = function () {
+                fitIntoParent = function () {
                     if (ratio > parentWidth / parentHeight) {
                         widthResult = parentWidth;
                         zoomWidthStep = imageWidth - widthResult;
@@ -445,10 +443,7 @@ define([
                         checkFullscreenImagePosition($image, dimensions, zoomWidthStep, zoomHeightStep);
                     } else {
                         toggleStandartNavigation();
-                        if (fitIntoParentFlag) {
-                            allowZoomOut = dragFlag = false;
-                            fitIntoParent();
-                        }
+                        fitIntoParent();
                     }
                 } else if (heightResult > parentHeight) {
                     dimensions = {
@@ -463,11 +458,9 @@ define([
                     };
                     checkFullscreenImagePosition($image, dimensions, zoomWidthStep, zoomHeightStep);
                 } else {
+                    allowZoomOut = dragFlag = false;
                     toggleStandartNavigation();
-                    if (fitIntoParentFlag) {
-                        allowZoomOut = dragFlag = false;
-                        fitIntoParent();
-                    }
+                    fitIntoParent();
                 }
             }
 
@@ -535,7 +528,8 @@ define([
                 $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'),
                 gallery = $gallery.data('fotorama'),
                 evCache = [],
-                prevDiff = -1;
+                prevDiff = -1,
+                preventAction = false;
 
             swipeSlide = _.throttle(function (direction) {
                 $(gallerySelector).data('fotorama').show(direction);
@@ -631,10 +625,18 @@ define([
 
                     if (prevDiff > 0) {
                         if (curDiff - prevDiff > 0.2 && allowZoomIn) {
+                            preventAction = true;
                             zoomIn(ev, curDiff, curDiff);
+                            setTimeout(() => {
+                                preventAction = false;
+                            }, 500);
                         }
                         if (curDiff - prevDiff < -0.2 && allowZoomOut) {
+                            preventAction = true;
                             zoomOut(ev, curDiff, curDiff);
+                            setTimeout(() => {
+                                preventAction = false;
+                            }, 500);
                         }
                     }
 
@@ -678,12 +680,7 @@ define([
                 if (allowZoomIn) {
                     zoomIn(e, imgOriginalSize.rw - $image.width(), imgOriginalSize.rh - $image.height());
                 } else if (allowZoomOut) {
-                    zoomOut(
-                        e,
-                        imgOriginalSize.rw * proportions,
-                        imgOriginalSize.rh - $imageContainer.height(),
-                        true
-                    );
+                    zoomOut(e, imgOriginalSize.rw * proportions, imgOriginalSize.rh - $imageContainer.height());
                 }
             }
 
@@ -695,11 +692,15 @@ define([
                     const curTime = new Date().getTime();
                     const tapLen = curTime - lastTap;
 
-                    if (tapLen < 500 && tapLen > 50) {
+                    if (tapLen < 300 && tapLen > 50 && !preventAction) {
                         event.preventDefault();
 
                         transitionActive = false;
+                        preventAction = true;
                         dblClickHandler(event);
+                        setTimeout(() => {
+                            preventAction = false;
+                        }, 500);
                         prevDiff = -1;
                     } else {
                         timeout = setTimeout(() => {