PB-266: Video background for Slide

eug123 · eug123 · commit b84757d71b31 · 2020-02-13T17:28:43.000-06:00
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml
@@ -100,6 +100,9 @@
         <field name="background_attachment">
             <settings>
                 <visible>false</visible>
+                <imports>
+                    <link name="visible">false</link>
+                </imports>
             </settings>
         </field>
     </fieldset>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less
@@ -126,8 +126,7 @@
         overflow-wrap: break-word;
         word-wrap: break-word;
 
-        &[data-play-only-visible=true],
-        &[data-video-lazy-load=true] {
+        &[data-background-type=video][data-play-only-visible=true] {
             transform: translate3d(0, 150vh, 0);
 
             &.video-inserted,
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html
@@ -11,9 +11,7 @@
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
          ko-style="Object.assign(data.main.style(), data.wrapper.style())"
-         css="Object.assign(data.main.css(), {
-            'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
-            })"
+         css="{'jarallax': data.wrapper.attributes()['data-background-type'] === 'video'}"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
          attr="data.wrapper.attributes"
          afterRender="initParallax">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html
@@ -11,9 +11,7 @@
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
          ko-style="Object.assign(data.main.style(), data.wrapper.style())"
-         css="Object.assign(data.main.css(), {
-            'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
-            })"
+         css="{'jarallax': data.wrapper.attributes()['data-background-type'] === 'video'}"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
          attr="data.wrapper.attributes"
          afterRender="initParallax">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html
@@ -11,9 +11,7 @@
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
          ko-style="Object.assign(data.main.style(), data.wrapper.style())"
-         css="Object.assign(data.main.css(), {
-            'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
-            })"
+         css="{'jarallax': data.wrapper.attributes()['data-background-type'] === 'video'}"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
          attr="data.wrapper.attributes"
          afterRender="initParallax">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html
@@ -11,9 +11,7 @@
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
          ko-style="Object.assign(data.main.style(), data.wrapper.style())"
-         css="Object.assign(data.main.css(), {
-            'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
-            })"
+         css="{'jarallax': data.wrapper.attributes()['data-background-type'] === 'video'}"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
          attr="data.wrapper.attributes"
          afterRender="initParallax">
diff --git a/app/code/Magento/PageBuilder/view/base/web/js/content-type/slide/appearance/default/widget.js b/app/code/Magento/PageBuilder/view/base/web/js/content-type/slide/appearance/default/widget.js
@@ -10,22 +10,27 @@ define([
     'use strict';
 
     return function (config, element) {
+        var videoElement = element[0].querySelector('[data-background-type=video]'),
+            $slider = null,
+            currentVideoSlide = null;
+
         showOnHover(config);
 
-        var videoElement = element[0].querySelector('[data-background-type=video]');
         if (videoElement) {
-            var $slider = $(element).closest('[data-content-type=slider]');
+            $slider = $(element).closest('[data-content-type=slider]');
             videoBackground(config, videoElement);
-            $slider.on('setPosition', function(event, slick){
-                var currentVideoSlide = slick.$slides[slick.currentSlide].querySelector('.jarallax');
+            $slider.on('setPosition', function (event, slick) {
+                currentVideoSlide = slick.$slides[slick.currentSlide].querySelector('.jarallax');
+
                 if (currentVideoSlide.jarallax.options.videoPlayOnlyVisible) {
                     currentVideoSlide.jarallax.video.play();
                 }
+
                 if (videoElement.jarallax.isVideoInserted) {
                     videoElement.classList.add('video-inserted');
                 }
             });
-            $slider.on('beforeChange', function(event, slick){
+            $slider.on('beforeChange', function (event, slick) {
                 var currentVideoSlide = slick.$slides[slick.currentSlide].querySelector('.jarallax');
 
                 if (currentVideoSlide.jarallax.options.videoPlayOnlyVisible) {
diff --git a/app/code/Magento/PageBuilder/view/base/web/js/content-type/slider/appearance/default/widget.js b/app/code/Magento/PageBuilder/view/base/web/js/content-type/slider/appearance/default/widget.js
@@ -26,7 +26,7 @@ define([
             fade: $element.data('fade'),
             infinite: $element.data('is-infinite'),
             arrows: $element.data('show-arrows'),
-            dots: $element.data('show-dots'),
+            dots: $element.data('show-dots')
         });
 
         // Redraw slide after content type gets redrawn
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_default.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_default.less
@@ -44,8 +44,7 @@
         overflow-wrap: break-word;
         word-wrap: break-word;
 
-        &[data-play-only-visible=true],
-        &[data-video-lazy-load=true] {
+        &[data-background-type=video][data-play-only-visible=true] {
             transform: translate3d(0, 150vh, 0);
 
             &.video-inserted,
diff --git a/dev/tests/static/testsuite/Magento/Test/Integrity/Xml/ExtendsBaseFormTest.php b/dev/tests/static/testsuite/Magento/Test/Integrity/Xml/ExtendsBaseFormTest.php
@@ -65,10 +65,10 @@ private function getXmlFiles(): array
             'pagebuilder_map_location_form.xml' => '',
             'pagebuilder_banner_form.xml' => 'pagebuilder_base_form_with_background_attributes',
             'pagebuilder_column_form.xml' => 'pagebuilder_base_form_with_background_attributes',
-            'pagebuilder_slide_form.xml' => 'pagebuilder_base_form_with_background_attributes',
             'pagebuilder_tab_item_form.xml' => 'pagebuilder_base_form_with_background_attributes',
             'pagebuilder_base_form_with_background_video.xml' => 'pagebuilder_base_form_with_background_attributes',
             'pagebuilder_row_form.xml' => 'pagebuilder_base_form_with_background_video',
+            'pagebuilder_slide_form.xml' => 'pagebuilder_base_form_with_background_video',
             'pagebuilder_products_carousel_form.xml' => 'pagebuilder_products_form',
         ];
         $componentRegistrar = new ComponentRegistrar();
