JS-329: Add preview arrows while video is playing (for better navigat…

…ion) - update UpdateOptions method to don't lose focus and arrows
magento · Dec 11, 2015 · 7122715 · 7122715
1 parent 6bdac30
commit 7122715
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js
@@ -401,7 +401,40 @@ define([
                      * @param {Boolean} isInternal - Is this function called via breakpoints.
                      */
                     updateOptions: function (configuration, isInternal) {
+
+                        var $selectable = 
+                                $('a[href], area[href], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]')
+                                .not('[tabindex=-1], [disabled], :hidden'),
+                            fotorama = settings.fotoramaApi,
+                            $focus = $(':focus'),
+                            index;
+
+                        /**
+                         * 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();
+                            }
+                        };
+
                         if (_.isObject(configuration)) {
+
+                            //Saves index of focus
+                            $selectable.each(function (number) {
+
+                                if ($(this).is($focus)) {
+                                    index = number;
+                                }
+                            });
+
                             if (this.isTouchEnabled) {
                                 configuration.arrows = false;
                             }
@@ -419,6 +452,11 @@ define([
                             }
                             $.extend(true, settings.currentConfig.options, configuration);
                             settings.fotoramaApi.setOptions(settings.currentConfig.options);
+                            showArrows(fotorama);
+
+                            if (_.isNumber(index)) {
+                                $selectable.eq(index).focus();
+                            }
                         }
                     },