MAGETWO-50665 - Processing pull request sky team

- Merge remote-tracking branch 'epam/JS-493' into JS-493
- Conflicts: lib/web/magnifier/magnify.js

Author: Volodymyr Zaets

app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml

@@ -87,7 +87,7 @@
                     <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
                         "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
                     <?php endif; ?>
-                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navdir"); ?>",
+                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                     <?php if ($block->getVar("gallery/transition/navarrows")): ?>
                         "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navarrows"); ?>,
                     <?php endif; ?>

lib/web/magnifier/magnify.js

@@ -30,7 +30,7 @@ define([
             dragFlag,
             endX,
             transitionActive = false,
-            tapedTwice = false,
+            tapFlag = 0,
             allowZoomOut = false,
             allowZoomIn = true;
 
@@ -504,6 +504,7 @@ define([
                 $imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'),
                 gallery = $gallery.data('fotorama'),
                 pinchDimention;
+
             swipeSlide = _.throttle(function (direction) {
                 $(gallerySelector).data('fotorama').show(direction);
             }, 500, {
@@ -579,6 +580,10 @@ define([
                 var imgOriginalSize = getImageSize($image[0].src),
                     proportions;
 
+                if (imgOriginalSize.rh < $image.parent().height() && imgOriginalSize.rw < $image.parent().width()) {
+                    return;
+                }
+
                 proportions = imgOriginalSize.rw / imgOriginalSize.rh;
 
                 if (allowZoomIn) {
@@ -592,8 +597,30 @@ define([
                 }
             }
 
-            $image.unbind('dblclick');
-            $image.dblclick(dblClickHandler);
+            function detectDoubleTap(e) {
+                var now = new Date().getTime(),
+                    timesince = now - tapFlag;
+
+                if (timesince < 400 && timesince > 0) {
+                    transitionActive = false;
+                    tapFlag = 0;
+                    dblClickHandler(e);
+                } else {
+                    tapFlag = new Date().getTime();
+                }
+            }
+
+            if (isTouchEnabled) {
+                $image.off('tap');
+                $image.on('tap', function (e) {
+                    if (e.originalEvent.originalEvent.touches.length === 0) {
+                        detectDoubleTap(e);
+                    }
+                });
+            } else {
+                $image.unbind('dblclick');
+                $image.dblclick(dblClickHandler);
+            }
 
             if (gallery.fullScreen) {
                 toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
@@ -611,6 +638,7 @@ define([
                     e.preventDefault();
                     pinchDimention = getDimention(e.originalEvent);
                     isDragActive = false;
+
                     if ($image.hasClass(imageDraggableClass)) {
                         $image.removeClass(imageDraggableClass);
                     }
@@ -642,6 +670,7 @@ define([
                 if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) {
                     e.preventDefault();
                     var currentDimention = getDimention(e.originalEvent);
+
                     if ($image.hasClass(imageDraggableClass)) {
                         $image.removeClass(imageDraggableClass);
                     }
@@ -698,7 +727,7 @@ define([
                         imagePosX = $(fullscreenImageSelector, $gallery).offset().left;
                         imagePosY = $(fullscreenImageSelector, $gallery).offset().top;
                     };
-                
+
                 if (($focus.attr('data-gallery-role') || !$focus.length) && allowZoomOut) {
                     if (isFullScreen) {
                         imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left;
@@ -738,7 +767,7 @@ define([
                         }
                     }
                 }
-    
+
                 if (e.keyCode === 27 && isFullScreen && allowZoomOut) {
                     $(gallerySelector).data('fotorama').cancelFullScreen();
                 }
@@ -752,7 +781,7 @@ define([
             $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) {
                 if (gallery.fullScreen) {
 
-                    if ($image.offset() && ($image.width() > $imageContainer.width())) {
+                    if ($image.offset() && $image.width() > $imageContainer.width()) {
                         endX = $image.offset().left;
                     }
 
@@ -761,29 +790,22 @@ define([
                 }
             });
 
-            isTouchEnabled && $image.off('touchend');
-            isTouchEnabled && $image.on('touchend', function (e) {
-                if (e.originalEvent.touches.length === 0) {
-                    if (!tapedTwice) {
-                        tapedTwice = true;
-                        setTimeout(function () {
-                            tapedTwice = false;
-                        }, 300);
-
-                        return;
-                    }
-                    toggleZoomable($image, allowZoomOut);
-                    dblClickHandler(e);
-                }
-            });
-
-
             $(window).resize(function () {
+                var imageSize = getImageSize($(fullscreenImageSelector)[0].src),
+                    isImageSmall =
+                        $(fullscreenImageSelector).parent().width() >= imageSize.rw &&
+                        $(fullscreenImageSelector).parent().height() >= imageSize.rh;
+
                 toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
                 calculateMinSize($image);
-                if ($image.hasClass(imageZoommable) && !allowZoomOut) {
+
+                if ($image.hasClass(imageZoommable) && !allowZoomOut || isImageSmall) {
                     resetVars($image);
                 }
+
+                if (!isImageSmall) {
+                    toggleStandartNavigation();
+                }
             });
         }
 
@@ -814,7 +836,7 @@ define([
                 isClick = initPos[0] === pos[0] && initPos[1] === pos[1],
                 isImg = $(e.target).parent().data('active');
 
-            if (isArrow || (isImg && !isClick)) {
+            if (isArrow || isImg && !isClick) {
                 hideMagnifier();
             }
         }
@@ -854,8 +876,10 @@ define([
 
         $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) {
             var $activeStageFrame = $(gallerySelector).data('fotorama').activeFrame.$stageFrame;
+
             if (!$activeStageFrame.find(magnifierZoomSelector).length) {
                 hideMagnifier();
+
                 if (config.magnifierOpts) {
                     config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img;
                     config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original;
@@ -920,27 +944,33 @@ define([
                 })
                 .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) {
                     hideMagnifier();
-                    !tapedTwice && resetVars($(fullscreenImageSelector));
+
+                    if (!$(fullscreenImageSelector).is($prevImage)) {
+                        resetVars($(fullscreenImageSelector));
+                    }
                     magnifierFullscreen(fotorama);
                     mousewheel(e, fotorama, element);
 
                     if ($prevImage) {
                         calculateMinSize($prevImage);
-                        resetVars($prevImage);
+
+                        if (!$(fullscreenImageSelector).is($prevImage)) {
+                            resetVars($prevImage);
+                        }
                     }
 
                     toggleStandartNavigation();
                 })
                 .on('fotorama:load', function (e, fotorama) {
                     if ($(gallerySelector).data('fotorama').fullScreen) {
-                        toggleZoomButtons($(fullscreenImageSelector), isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
+                        toggleZoomButtons($(fullscreenImageSelector), isTouchEnabled,
+                            checkForVideo(fotorama.activeFrame.$stageFrame));
                     }
                     magnifierFullscreen(fotorama);
                 })
                 .on('fotorama:show', function (e, fotorama) {
-                    $prevImage = $(fullscreenImageSelector);
+                    $prevImage = _.clone($(fullscreenImageSelector));
                     hideMagnifier();
-                    !tapedTwice && resetVars($(fullscreenImageSelector));
                 })
                 .on('fotorama:fullscreenexit', function (e, fotorama) {
                     resetVars($(fullscreenImageSelector));