JS-493: Double click doesn't work on mobile

Author: anastasiiabuniak

lib/web/magnifier/magnify.js

@@ -30,6 +30,7 @@ define([
             dragFlag,
             endX,
             transitionActive = false,
+            tapFlag = 0,
             allowZoomOut = false,
             allowZoomIn = true;
 
@@ -112,7 +113,7 @@ define([
 
         function resetVars($image) {
             allowZoomIn = true;
-            allowZoomOut = dragFlag = false;
+            allowZoomOut = dragFlag = transitionActive = false;
             $image.hasClass(imageDraggableClass) && $image.removeClass(imageDraggableClass);
             toggleZoomable($image, false);
         }
@@ -593,6 +594,17 @@ define([
                 }
             }
 
+            function detectDoubleTap (e) {
+                var now = new Date().getTime(),
+                    timesince = now - tapFlag;
+
+                if (timesince < 500 && timesince > 0) {
+                    transitionActive = false;
+                    dblClickHandler(e);
+                }
+                tapFlag = new Date().getTime();
+            }
+
             $image.unbind('dblclick');
             $image.dblclick(dblClickHandler);
 
@@ -763,6 +775,13 @@ define([
                 }
             });
 
+            isTouchEnabled && $image.off('touchend');
+            isTouchEnabled && $image.on('touchend', function (e) {
+                if (e.originalEvent.touches.length === 0) {
+                    detectDoubleTap(e);
+                }
+            });
+
             $(window).resize(function () {
                 toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
                 calculateMinSize($image);