#514: User sees content snapshot on Category Page in Admin Panel - #3 Added content snapshot only for category page

Author: Lukasz Borowiec

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/wysiwyg.js

@@ -93,8 +93,12 @@ define([
                     selector: this.stageSelector
                 }, this.disableDomObserver.bind(this));
 
-                if (!this.wysiwygConfigData()['pagebuilder_button'] ||
-                    this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
+                if (!this.wysiwygConfigData()['pagebuilder_button']) {
+                    this.visiblePageBuilder(true);
+                }
+
+                if (this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
+                    this.pageBuilder.setContentSnapshotMode(true);
                     this.visiblePageBuilder(true);
                 }
             }

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -7,7 +7,7 @@
 <div class="pagebuilder-stage-wrapper"
      css="'stage-full-screen': isFullScreen"
      ko-style="wrapperStyles">
-    <div class="admin__field pagebuilder-header" css="visible: isFullScreen">
+    <div class="admin__field pagebuilder-header" css="visible: !panel.isContentSnapshotMode()">
         <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>
         <button type="button" translate="'Save as Template'" if="isAllowedTemplateSave" click="saveAsTemplate"/>
         <i click="function() { toggleFullScreen($element); }"
@@ -24,5 +24,7 @@
         </with>
         <iframe width="1" height="1" attr="id: 'render_frame_' + id" sandbox="allow-scripts" style="display: none;"></iframe>
     </if>
-    <div class="page-builder-stage-cover-div" css="'stage-full-screen': isFullScreen"></div>
+    <if args="isContentSnapshotMode">
+        <div class="page-builder-stage-cover-div" css="'stage-full-screen': isFullScreen"></div>
+    </if>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/js/panel.js

@@ -8,7 +8,7 @@
 <div id="pagebuilder-panel-wrapper" class="pagebuilder-panel-wrapper"
     css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom"
     afterRender="afterRender">
-    <div id="pagebuilder-panel" class="pagebuilder-panel" visible="isFullScreenMode()">
+    <div id="pagebuilder-panel" class="pagebuilder-panel" visible="!isContentSnapshotMode()">
         <div class="search-content-types">
             <label for="search-content-types-input"></label>
             <a href="" class="close" click="clearSearch" attr="title: searchTitle" visible="searching"></a>

app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html

@@ -31,6 +31,7 @@ export default class PageBuilder implements PageBuilderInterface {
     public initialValue: string;
     public id: string = utils.uniqueid();
     public originalScrollTop: number = 0;
+    public isContentSnapshotMode = false;
     public isFullScreen: KnockoutObservable<boolean> = ko.observable(false);
     public loading: KnockoutObservable<boolean> = ko.observable(true);
     public wrapperStyles: KnockoutObservable<{[key: string]: string}> = ko.observable({});
@@ -85,24 +86,35 @@ export default class PageBuilder implements PageBuilderInterface {
      * @param {StageToggleFullScreenParamsInterface} args
      */
     public toggleFullScreen(args: StageToggleFullScreenParamsInterface): void {
-        if (args.animate === false) {
-            if (!this.isFullScreen()) {
-                this.isFullScreen(true);
-                this.panel.setFullScreenMode(true);
-
-            } else {
-                this.isFullScreen(false);
-                this.panel.setFullScreenMode(false);
+        if (this.isContentSnapshotMode) {
+            if (args.animate === false) {
+                if (!this.isFullScreen()) {
+                    this.isFullScreen(true);
+                    this.panel.setContentSnapshotMode(false);
+
+                } else {
+                    this.isFullScreen(false);
+                    this.panel.setContentSnapshotMode(true);
+                }
+                return;
+            }
+        } else {
+            this.panel.setContentSnapshotMode(false);
+            if (args.animate === false) {
+                this.isFullScreen(!this.isFullScreen());
+                return;
             }
-            return;
         }
 
         const stageWrapper = $("#" + this.stage.id).parent();
         const pageBuilderWrapper = stageWrapper.parents(".pagebuilder-wysiwyg-wrapper");
         const panel = stageWrapper.find(".pagebuilder-panel");
         if (!this.isFullScreen()) {
             pageBuilderWrapper.css("height", pageBuilderWrapper.outerHeight());
-            this.panel.setFullScreenMode(false);
+            if (this.isContentSnapshotMode) {
+                this.panel.setContentSnapshotMode(true);
+            }
+
             this.previousPanelHeight = panel.outerHeight();
             panel.css("height", this.previousPanelHeight + "px");
             /**
@@ -134,7 +146,23 @@ export default class PageBuilder implements PageBuilderInterface {
             // When leaving full screen mode just transition back to the original state
             this.wrapperStyles(this.previousWrapperStyles);
             this.isFullScreen(false);
-            this.panel.setFullScreenMode(false);
+            if (!this.isContentSnapshotMode) {
+                panel.css("height", this.previousPanelHeight + "px");
+                // Wait for the 350ms animation to complete before changing these properties back
+                _.delay(() => {
+                    panel.css("height", "");
+                    pageBuilderWrapper.css("height", "");
+                    this.wrapperStyles(Object.keys(this.previousWrapperStyles)
+                                           .reduce((object: object, styleName: string) => {
+                                               return Object.assign(object, {[styleName]: ""});
+                                           }, {}),
+                    );
+                    this.previousWrapperStyles = {};
+                    this.previousPanelHeight = null;
+                }, 350);
+            } else {
+                this.panel.setContentSnapshotMode(true);
+            }
         }
     }
 
@@ -153,6 +181,19 @@ export default class PageBuilder implements PageBuilderInterface {
         });
     }
 
+    /**
+     * Set the content snapshot mode to show the page builder stage
+     * when page builder is enabled
+     * @param flag
+     */
+    public setContentSnapshotMode(flag: boolean): void
+    {
+        this.isContentSnapshotMode = flag;
+        if (this.isContentSnapshotMode) {
+            this.panel.setContentSnapshotMode(true);
+        }
+    }
+
     /**
      * Get template.
      *

app/code/Magento/PageBuilder/view/adminhtml/web/template/panel.html

@@ -27,7 +27,7 @@ export default class Panel {
     public searchResults: KnockoutObservableArray<any> = ko.observableArray([]);
     public isVisible: KnockoutObservable<boolean> = ko.observable(false);
     public isStickyBottom: KnockoutObservable<boolean> = ko.observable(false);
-    public isFullScreenMode: KnockoutObservable<boolean> = ko.observable(false);
+    public isContentSnapshotMode: KnockoutObservable<boolean> = ko.observable(false);
     public isStickyTop: KnockoutObservable<boolean> = ko.observable(false);
     public searching: KnockoutObservable<boolean> = ko.observable(false);
     public searchValue: KnockoutObservable<string> = ko.observable("");
@@ -58,8 +58,8 @@ export default class Panel {
      * Set full screen flag
      * @param flag
      */
-    public setFullScreenMode(flag: boolean): void {
-        this.isFullScreenMode(flag);
+    public setContentSnapshotMode(flag: boolean): void {
+        this.isContentSnapshotMode(flag);
     }
 
     /**