Merge branch 'PB-265-video-background-for-banner' of github.com:magento-obsessive-owls/magento2-page-builder into PB-266-with-row

omiroshnichenko · omiroshnichenko · commit a4195f2f3fd8 · 2020-03-01T12:13:20.000-06:00
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less
@@ -116,6 +116,11 @@
 .pagebuilder-banner-wrapper {
     .pagebuilder-overlay {
         padding: 30px;
+        position: relative;
+    }
+
+    .video-overlay {
+        z-index: 0;
     }
 }
 
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/row/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/row/_default.less
@@ -27,6 +27,13 @@
         width: 100%;
         z-index: -1;
     }
+
+    [id*='jarallax-container'] {
+        video,
+        iframe {
+            visibility: hidden;
+        }
+    }
 }
 
 .video-overlay {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js
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/banner/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html
@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html
@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html
@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/preview.html
@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay pagebuilder-poster-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css" event="mousedown: activateEditor">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-poster-content">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/preview.ts
@@ -116,6 +116,14 @@ export default class Preview extends BasePreview {
                         videoLazyLoading: (this.contentType.dataStore.get("video_lazy_load") as string) === "true",
                     },
                 );
+                // @ts-ignore
+                this.wrapper.jarallax.video && this.wrapper.jarallax.video.on("started", () => {
+                    // @ts-ignore
+                    if (this.wrapper.jarallax.$video) {
+                        // @ts-ignore
+                        this.wrapper.jarallax.$video.style.visibility = "visible";
+                    }
+                });
             });
         }
 
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts
@@ -96,6 +96,14 @@ export default class Preview extends PreviewCollection {
                         videoLazyLoading: (this.contentType.dataStore.get("video_lazy_load") as string) === "true",
                     },
                 );
+                // @ts-ignore
+                this.element.jarallax.video.on("started", () => {
+                    // @ts-ignore
+                    if (this.element.jarallax.$video) {
+                        // @ts-ignore
+                        this.element.jarallax.$video.style.visibility = "visible";
+                    }
+                });
             });
         }
 
diff --git a/app/code/Magento/PageBuilder/view/base/web/css/source/jarallax/_jarallax.less b/app/code/Magento/PageBuilder/view/base/web/css/source/jarallax/_jarallax.less
@@ -40,5 +40,12 @@
             top: 0;
             z-index: -99;
         }
+
+        [id*='jarallax-container'] {
+            video,
+            iframe {
+                visibility: hidden;
+            }
+        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/base/web/js/widget/video-background.js b/app/code/Magento/PageBuilder/view/base/web/js/widget/video-background.js
@@ -31,5 +31,10 @@ define([
             elementInViewport: $element.data('elementInViewport') &&
                 $element[0].querySelector($element.data('elementInViewport'))
         });
+        $element[0].jarallax.video && $element[0].jarallax.video.on('started', function () {
+            if ($element[0].jarallax.$video) {
+                $element[0].jarallax.$video.style.visibility = 'visible';
+            }
+        });
     };
 });
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less
@@ -32,6 +32,7 @@
             -webkit-transition: background-color 500ms ease;
             box-sizing: border-box;
             padding: 30px;
+            position: relative;
             transition: background-color 500ms ease;
 
             &.pagebuilder-poster-overlay {
@@ -45,6 +46,12 @@
             }
         }
 
+        &.jarallax {
+            .video-overlay {
+                z-index: 0;
+            }
+        }
+
         [data-element='content'] {
             min-height: 50px;
             overflow: auto;
diff --git a/app/code/Magento/PageBuilderAnalytics/Model/ContentTypeUsageReportProvider.php b/app/code/Magento/PageBuilderAnalytics/Model/ContentTypeUsageReportProvider.php
@@ -101,10 +101,13 @@ public function getReport($name) : \IteratorIterator
                 foreach ($batchQuery->fetchAll() as $row) {
                     foreach ($contentTypes as $type) {
                         // Count the amount of content types within the content
-                        $typeCounts[$type['name']] += substr_count(
-                            $row['content'],
-                            'data-content-type="' . $type['name'] . '"'
-                        );
+                        $rowContent = $row['content'] ?? '';
+                        if (strlen($rowContent) > 0) {
+                            $typeCounts[$type['name']] += substr_count(
+                                $rowContent,
+                                'data-content-type="' . $type['name'] . '"'
+                            );
+                        }
                     }
                 }
             }
diff --git a/dev/tests/integration/_files/Magento/TestModuleCmsPageBuilderAnalytics/etc/reports.xml b/dev/tests/integration/_files/Magento/TestModuleCmsPageBuilderAnalytics/etc/reports.xml
@@ -16,7 +16,7 @@
                 </using>
             </link-source>
             <filter glue="and">
-                <condition attribute="identifier" operator="eq">page-builder-analytics-test-page</condition>
+                <condition attribute="identifier" operator="like">page-builder-analytics-test-page%</condition>
             </filter>
         </source>
     </report>
@@ -30,8 +30,8 @@
                 </using>
             </link-source>
             <filter glue="and">
-                <condition attribute="identifier" operator="eq">page-builder-analytics-test-page</condition>
+                <condition attribute="identifier" operator="like">page-builder-analytics-test-page%</condition>
             </filter>
         </source>
     </report>
-</config>
+</config>
diff --git a/dev/tests/integration/testsuite/Magento/CmsPageBuilderAnalytics/_files/pages.php b/dev/tests/integration/testsuite/Magento/CmsPageBuilderAnalytics/_files/pages.php
@@ -390,3 +390,25 @@
     ->setContent($content)
     ->setPageLayout('cms-full-width')
     ->save();
+
+/** @var $emptyContentPage \Magento\Cms\Model\Page */
+$emptyContentPage = \Magento\TestFramework\Helper\Bootstrap::getObjectManager()->create(\Magento\Cms\Model\Page::class);
+$emptyContentPage->setTitle('Page Builder Analytics Test Page - Empty Content')
+    ->setIdentifier('page-builder-analytics-test-page-empty')
+    ->setStores([0, 1])
+    ->setIsActive(1)
+    ->setCreatedIn(1)
+    ->setContent('')
+    ->setPageLayout('cms-full-width')
+    ->save();
+
+/** @var $nullContentPage \Magento\Cms\Model\Page */
+$nullContentPage = \Magento\TestFramework\Helper\Bootstrap::getObjectManager()->create(\Magento\Cms\Model\Page::class);
+$nullContentPage->setTitle('Page Builder Analytics Test Page - Null Content')
+    ->setIdentifier('page-builder-analytics-test-page-null')
+    ->setStores([0, 1])
+    ->setIsActive(1)
+    ->setCreatedIn(1)
+    ->setContent(null)
+    ->setPageLayout('cms-full-width')
+    ->save();

Original file line number	Diff line number	Diff line change
`@@ -116,6 +116,11 @@`
`116`	`116`	`.pagebuilder-banner-wrapper {`
`117`	`117`	`.pagebuilder-overlay {`
`118`	`118`	`padding: 30px;`
	`119`	`+ position: relative;`
	`120`	`+ }`
	`121`	`+`
	`122`	`+ .video-overlay {`
	`123`	`+ z-index: 0;`
`119`	`124`	`}`
`120`	`125`	`}`
`121`	`126`
Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,13 @@`
`27`	`27`	`width: 100%;`
`28`	`28`	`z-index: -1;`
`29`	`29`	`}`
	`30`	`+`
	`31`	`+ [id*='jarallax-container'] {`
	`32`	`+ video,`
	`33`	`+ iframe {`
	`34`	`+ visibility: hidden;`
	`35`	`+ }`
	`36`	`+ }`
`30`	`37`	`}`
`31`	`38`
`32`	`39`	`.video-overlay {`