Merge pull request #314 from magento-obsessive-owls/PB-46

[Owls] Parallax Is Broken On Slide Out Forms

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/requirejs-config.js

@@ -36,6 +36,9 @@ var config = {
             },
             'Magento_Ui/js/form/form': {
                 'Magento_PageBuilder/js/form/form-mixin': true
+            },
+            'Magento_PageBuilder/js/content-type/row/appearance/default/widget': {
+                'Magento_PageBuilder/js/content-type/row/appearance/default/widget-mixin': true
             }
         }
     }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/appearance/default/widget-mixin.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define(['underscore', 'jquery', 'Magento_PageBuilder/js/events'], function (_, $, events) {
+    'use strict';
+
+    return function (target) {
+        return function (config, element) {
+            var result = target(config, element),
+                stageId = $(element).parents('[data-role="pagebuilder-stage"]').attr('id'),
+                $element = $(element);
+
+            if ($element.data('appearance') === 'contained') {
+                $element = $(element).find('[data-element="inner"]');
+            }
+
+            // If Parallax isn't enabled, let's not attach the event
+            if ($element.data('enableParallax') !== 1) {
+                return result;
+            }
+
+            // Listen for full screen events and destroy and rebuild jarallax
+            events.on('stage:' + stageId + ':fullScreenModeChangeAfter', function () {
+                _.delay(function () {
+                    $element.jarallax('destroy');
+                    target(config, element);
+                }, 350);
+            });
+
+            return result;
+        };
+    };
+});

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js

@@ -52,7 +52,6 @@ export default class Preview extends PreviewCollection {
                 jarallax(
                     this.element,
                     {
-                        imgSrc: (this.contentType.dataStore.get("background_image") as any[])[0].url as string,
                         imgPosition: this.contentType.dataStore.get("background_position") as string || "50% 50%",
                         imgRepeat: (
                             (this
@@ -93,6 +92,11 @@ export default class Preview extends PreviewCollection {
                 this.buildJarallax();
             }
         });
+        events.on(`stage:${this.contentType.stageId}:fullScreenModeChangeAfter`, () => {
+            _.delay(() => {
+                this.buildJarallax();
+            }, 350);
+        });
     }
 
     /**