Merge branch 'MC-5419-bg-fixed' into cms-team-1-delivery

Author: davemacaulay

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBackgroundFormAttributeTests.xml

@@ -3235,6 +3235,7 @@
             <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
         </before>
         <after>
+            <resizeWindow width="1280" height="1024" stepKey="resizeWindowToDesktop"/>
             <actionGroup ref="navigateToMediaGallery" stepKey="navigateToMediaGallery"/>
             <actionGroup ref="NavigateToMediaFolderActionGroup" stepKey="NavigateToFolder">
                 <argument name="FolderName" value="{{PageBuilderBackgroundImage_JPG.path}}"/>
@@ -3311,5 +3312,13 @@
             <argument name="backgroundImage" value="PageBuilderBackgroundImage_JPG"/>
             <argument name="pageNamePrefix" value="banner"/>
         </actionGroup>
+        <resizeWindow width="767" height="1000" stepKey="resizeWindowToMobile"/>
+        <!-- Storefront: Check Background Attachment Mobile -->
+        <comment userInput="Storefront: Check Background Attachment Mobile" stepKey="commentStorefrontCheckMobile"/>
+        <executeJS function="return jQuery({{BannerOnFrontend.wrapperJS('1')}}).css('background-attachment')" stepKey="assignedBackgroundAttachment" />
+        <assertEquals stepKey="assertEqualToEnteredValue">
+            <expectedResult type="string">{{PageBuilderBackgroundAttachment_Scroll.value}}</expectedResult>
+            <actualResult type="variable">$assignedBackgroundAttachment</actualResult>
+        </assertEquals>
     </test>
 </tests>

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

@@ -49,6 +49,7 @@ export default class Preview extends PreviewCollection {
         ) {
             _.defer(() => {
                 // Build Parallax on elements with the correct class
+                const parallaxSpeed = Number.parseFloat(this.parent.dataStore.get("parallax_speed") as string);
                 jarallax(
                     this.element,
                     {
@@ -58,7 +59,7 @@ export default class Preview extends PreviewCollection {
                             (this.parent.dataStore.get("background_repeat") as "repeat" | "no-repeat") || "no-repeat"
                         ),
                         imgSize: this.parent.dataStore.get("background_size") as string || "cover",
-                        speed: Number.parseFloat(this.parent.dataStore.get("parallax_speed") as string) || 0.5,
+                        speed: !isNaN(parallaxSpeed) ? parallaxSpeed : 0.5,
                     },
                 );
 

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

@@ -9,7 +9,8 @@ define([
     'use strict';
 
     return function (config, element) {
-        var $element = $(element);
+        var $element = $(element),
+            parallaxSpeed = null;
 
         if ($element.data('appearance') === 'contained') {
             $element = $(element).find('[data-element="inner"]');
@@ -22,11 +23,13 @@ define([
         $element.addClass('jarallax');
         $element.attr('data-jarallax', '');
 
+        parallaxSpeed = parseFloat($element.data('parallaxSpeed'));
+
         window.jarallax($element[0], {
             imgPosition: $element[0].style.backgroundPosition || '50% 50%',
             imgRepeat: $element[0].style.backgroundRepeat || 'no-repeat',
             imgSize: $element[0].style.backgroundSize || 'cover',
-            speed: parseFloat($element.data('parallaxSpeed')) || 0.5
+            speed: !isNaN(parallaxSpeed) ? parallaxSpeed : 0.5
         });
     };
 });

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

@@ -66,6 +66,8 @@
 
 @media only screen and (max-width: @screen__m) {
     .pagebuilder-banner-wrapper {
+        background-attachment: scroll !important;
+
         .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
             max-width: none;
         }

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less

@@ -11,8 +11,13 @@
     box-sizing: border-box;
 }
 
+//
+//  Responsive Classes
+//  _____________________________________________
+
 @media only screen and (max-width: @screen__m) {
     .pagebuilder-column {
+        background-attachment: scroll !important;
         flex-basis: 100%;
     }
 }

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/column/_default.less

@@ -17,3 +17,15 @@
         box-sizing: border-box;
     }
 }
+
+//
+//  Responsive Classes
+//  _____________________________________________
+
+@media only screen and (max-width: @screen__m) {
+    [data-role='row'][data-appearance='contained'] {
+        [data-element='inner'] {
+            background-attachment: scroll !important;
+        }
+    }
+}

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_contained.less

@@ -10,3 +10,13 @@
 [data-role='row'][data-appearance='full-bleed'] {
     box-sizing: border-box;
 }
+
+//
+//  Responsive Classes
+//  _____________________________________________
+
+@media only screen and (max-width: @screen__m) {
+    [data-role='row'][data-appearance='full-bleed'] {
+        background-attachment: scroll !important;
+    }
+}

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_full-bleed.less

@@ -18,3 +18,13 @@
         width: 100%;
     }
 }
+
+//
+//  Responsive Classes
+//  _____________________________________________
+
+@media only screen and (max-width: @screen__m) {
+    [data-role='row'][data-appearance='full-width'] {
+        background-attachment: scroll !important;
+    }
+}

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_full-width.less

@@ -102,3 +102,13 @@ div[data-role='tabs'] {
         }
     }
 }
+
+//
+//  Responsive Classes
+//  _____________________________________________
+
+@media only screen and (max-width: @screen__m) {
+    [data-role='tab-item'] {
+        background-attachment: scroll !important;
+    }
+}