Merge pull request #71 from ValeryYafremau/JS-356

JS-356: Add preview arrows while video is playing (for better navigation)
magento · Dec 10, 2015 · 6fdd83f · 6fdd83f
2 parents c592174 + 210289c
commit 6fdd83f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
@@ -874,6 +874,10 @@
                 transition-property: none;
             }
         }
+        iframe {
+            width: calc(~'100% - @{fotorama-arw-size} * 2');
+            left: @fotorama-arw-size;
+        }
     }
 }
 

diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js
@@ -807,6 +807,22 @@ define([
             });
         }
 
+        /**
+         * Displays navigation arrows on preview if it contains ifraime.
+         * @param fotorama - object of fotorama
+         */
+        function showArrows (fotorama) {
+            var $arrows = $('[data-gallery-role="arrow"]');
+
+            if ((fotorama.activeFrame.$stageFrame.find(':has(iframe)').length && fotorama.fullScreen) || 
+                (fotorama.fullScreen && config.fullscreen.arrows) || 
+                (!fotorama.fullScreen && config.arrows)) {
+                $arrows.show();
+            } else {
+                $arrows.hide();
+            }
+        };
+
         $.extend(config.magnifierOpts, {
             zoomable: false,
             thumb: '.fotorama__img',
@@ -836,6 +852,7 @@ define([
                 !checkForVideo($activeStageFrame) && $($activeStageFrame).magnify(config.magnifierOpts);
             }
         });
+
         $(element).on('gallery:loaded', function (e) {
             var $prevImage;
             $(element).find(gallerySelector)
@@ -888,6 +905,7 @@ define([
                     resetVars($(fullscreenImageSelector));
                     magnifierFullscreen(fotorama);
                     mousewheel(e, fotorama, element);
+                    showArrows(fotorama);
 
                     if ($prevImage) {
                         calculateMinSize($prevImage);