Merge branch 'MAGETWO-45130' of github.corp.magento.com:magento-vanilla/magento2ce into PR

Author: slopok

lib/web/mage/gallery/gallery.js

@@ -18,25 +18,48 @@ define([
      * Set main item first in order.
      * @param {Array.<Object>} data - Set of gallery items to update.
      */
-    var pushMainFirst = function(data){
-        var mainIndex;
+    var pushMainFirst = function (data) {
+            var mainIndex;
+
+            if (!_.every(data, function (item) {
+                    return _.isObject(item);
+                })
+            ) {
+                return data;
+            }
+
+            mainIndex = _.findIndex(data, function (item) {
+                return item.isMain;
+            });
+
+            if (mainIndex > -1) {
+                data.unshift(data.splice(mainIndex, 1)[0]);
+            }
 
-        if(!_.every(data, function(item){
-                return _.isObject(item);
-            }))
-        {
             return data;
-        }
+        },
 
-        mainIndex = _.findIndex(data, function(item){
-            return item.isMain;
-        });
-        if(mainIndex > -1){
-            data.unshift(data.splice(mainIndex, 1)[0]);
-        }
+        /**
+         * Helper for parse translate property
+         *
+         * @param {Element} el - el that to parse
+         * @returns {Array} - array of properties.
+         */
+        getTranslate = function (el) {
+            var slideTransform = $(el).attr('style').split(';');
+
+            slideTransform = $.map(slideTransform, function (style) {
+                style = style.trim();
+
+                if (style.startsWith('transform: translate3d')) {
+                    return style.match(/transform: translate3d\((.+)px,(.+)px,(.+)px\)/);
+                }
+
+                return false;
+            });
 
-        return data;
-    };
+            return slideTransform.filter(Boolean);
+        };
 
     return Class.extend({
 
@@ -60,6 +83,8 @@ define([
          * @param {String} element - String selector of gallery DOM element.
          */
         initialize: function (config, element) {
+            var self = this;
+
             this._super();
 
             _.bindAll(this,
@@ -71,6 +96,7 @@ define([
 
             this.settings = {
                 $element: $(element),
+                $pageWrapper: $('body>.page-wrapper'),
                 currentConfig: config,
                 defaultConfig: _.clone(config),
                 fullscreenConfig: _.clone(config.fullscreen),
@@ -90,25 +116,46 @@ define([
             this.initApi();
             this.setupBreakpoints();
             this.initFullscreenSettings();
+
             this.settings.$element.on('mouseup', '.fotorama__stage__frame', function () {
-                if (!$(this).parents('.fotorama__shadows--left').length) {
-                    $('[data-gallery-role="gallery"]').data('fotorama').requestFullScreen();
-                    $('[data-gallery-role="fotorama__fullscreen-icon"]').css({
-                        opacity: 1,
-                        visibility: 'visible',
-                        display: 'block'
-                    });
+                if (
+                    !$(this).parents('.fotorama__shadows--left, .fotorama__shadows--right').length &&
+                    !$(this).hasClass('fotorama-video-container')
+                ) {
+                    self.openFullScreen();
                 }
             });
+
+            if (this.isTouchEnabled) {
+                this.settings.$element.on('tap', '.fotorama__stage__frame', function () {
+                    var translate = getTranslate($(this).parents('.fotorama__stage__shaft'));
+
+                    if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) {
+                        self.openFullScreen();
+                        self.settings.$pageWrapper.hide();
+                    }
+                });
+            }
+        },
+
+        /**
+         * Open gallery fullscreen
+         */
+        openFullScreen: function () {
+            this.settings.api.fotorama.requestFullScreen();
+            this.settings.$fullscreenIcon.css({
+                opacity: 1,
+                visibility: 'visible',
+                display: 'block'
+            });
         },
 
         /**
          * Gallery fullscreen settings.
          */
         initFullscreenSettings: function () {
             var settings = this.settings,
-                self = this,
-                items = [];
+                self = this;
 
             settings.$gallery = this.settings.$element.find('[data-gallery-role="gallery"]');
             settings.$fullscreenIcon = this.settings.$element.find('[data-gallery-role="fotorama__fullscreen-icon"]');
@@ -131,6 +178,7 @@ define([
             });
 
             settings.$gallery.on('fotorama:fullscreenexit', function () {
+                settings.$pageWrapper.show();
                 settings.api.updateOptions(settings.defaultConfig.options, true);
                 settings.focusableStart.unbind('focusin', this._focusSwitcher);
                 settings.focusableEnd.unbind('focusin', this._focusSwitcher);
@@ -165,10 +213,6 @@ define([
          *      focusable element in modal window scope.
          *      If position is "start" - sets focus to last
          *      focusable element in modal window scope
-         *
-         *  @param {String} type - can be "opened" or false
-         *      If type is "opened" - looks to "this.options.focus"
-         *      property and sets focus
          */
         _setFocus: function (position) {
             var settings = this.settings,
@@ -199,6 +243,7 @@ define([
             if (settings.breakpoints) {
                 _.each(_.values(settings.breakpoints), function (breakpoint) {
                     var conditions;
+
                     _.each(_.pairs(breakpoint.conditions), function (pair) {
                         conditions = conditions ? conditions + ' and (' + pair[0] + ': ' + pair[1] + ')' :
                         '(' + pair[0] + ': ' + pair[1] + ')';
@@ -233,8 +278,7 @@ define([
             var pairs,
                 settings = this.settings,
                 config = this.config,
-                startConfig = this.startConfig,
-                triggeredBreakpoints = 0;
+                startConfig = this.startConfig;
 
             if (_.isObject(settings.breakpoints)) {
                 pairs = _.pairs(settings.breakpoints);