Fix gallery rendering on page load so current breakpoint configuration isn't replaced on page load by any other configuration

Author: Janusz Janczy

dev/tests/js/jasmine/tests/lib/mage/gallery/gallery.test.js

@@ -98,8 +98,53 @@ define([
             expect(gallery.settings.fotoramaApi).toBeDefined();
             expect(gallery.settings.data).toBeDefined();
             expect(gallery.settings.api).toBeDefined();
+            expect(gallery.settings.activeBreakpoint).toEqual({});
 
             $.fn.data = originSpy;
         });
+
+        it('Verify gallery navigation is set properly as dots if specified in options', function () {
+            // added
+            options.breakpoints = {
+                mobile: {
+                    conditions: {
+                        'max-width': '767px'
+                    },
+                    options: {
+                        options: {
+                            nav: 'dots'
+                        }
+                    }
+                },
+                desktop: {
+                    conditions: {
+                        'min-width': '1024px'
+                    },
+                    options: {
+                        options: {
+                            nav: 'thumbs'
+                        }
+                    }
+                }
+            };
+
+            originSpy = $.fn.data;
+            jqueryDataMock = {
+                setOptions: jasmine.createSpy().and.returnValue(true),
+                updateOptions: jasmine.createSpy().and.returnValue(true),
+            };
+            spyOn($.fn, 'data').and.callFake(function () {
+                return jqueryDataMock;
+            });
+
+            gallery = new Gallery(options, element);
+
+            options.breakpoints.mobile.options.options.arrows = false;
+            expect(JSON.stringify(gallery.settings.activeBreakpoint))
+              .toEqual(JSON.stringify(options.breakpoints.mobile.options));
+
+            $.fn.data = originSpy;
+        });
+
     });
 });

lib/web/mage/gallery/gallery.js

@@ -318,13 +318,17 @@ define([
                 settings = this.settings,
                 config = this.config,
                 startConfig = this.startConfig,
+                isInitialized = {},
                 isTouchEnabled = this.isTouchEnabled;
 
             if (_.isObject(settings.breakpoints)) {
                 pairs = _.pairs(settings.breakpoints);
                 _.each(pairs, function (pair) {
+                    var mediaQuery = pair[0];
+
+                    isInitialized[mediaQuery] = false;
                     mediaCheck({
-                        media: pair[0],
+                        media: mediaQuery,
 
                         /**
                          * Is triggered when breakpoint enties.
@@ -339,29 +343,35 @@ define([
                             }
 
                             if (isTouchEnabled) {
-                                settings.breakpoints[pair[0]].options.arrows = false;
+                                settings.breakpoints[mediaQuery].options.arrows = false;
 
-                                if (settings.breakpoints[pair[0]].options.fullscreen) {
-                                    settings.breakpoints[pair[0]].options.fullscreen.arrows = false;
+                                if (settings.breakpoints[mediaQuery].options.fullscreen) {
+                                    settings.breakpoints[mediaQuery].options.fullscreen.arrows = false;
                                 }
                             }
 
-                            settings.api.updateOptions(settings.breakpoints[pair[0]].options, true);
-                            $.extend(true, config, settings.breakpoints[pair[0]]);
-                            settings.activeBreakpoint = settings.breakpoints[pair[0]];
+                            settings.api.updateOptions(settings.breakpoints[mediaQuery].options, true);
+                            $.extend(true, config, settings.breakpoints[mediaQuery]);
+                            settings.activeBreakpoint = settings.breakpoints[mediaQuery];
+
+                            isInitialized[mediaQuery] = true;
                         },
 
                         /**
                          * Is triggered when breakpoint exits.
                          */
                         exit: function () {
-                            $.extend(true, config, _.clone(startConfig));
-                            settings.api.updateOptions(settings.defaultConfig.options, true);
+                            if (isInitialized[mediaQuery]) {
+                                $.extend(true, config, _.clone(startConfig));
+                                settings.api.updateOptions(settings.defaultConfig.options, true);
 
-                            if (settings.isFullscreen) {
-                                settings.api.updateOptions(settings.fullscreenConfig, true);
+                                if (settings.isFullscreen) {
+                                    settings.api.updateOptions(settings.fullscreenConfig, true);
+                                }
+                                settings.activeBreakpoint = {};
+                            } else {
+                                isInitialized[mediaQuery] = true;
                             }
-                            settings.activeBreakpoint = {};
                         }
                     });
                 });