#514: User sees content snapshot on Category Page in Admin Panel - Added methods for setting overlay

Author: hannahnida

app/code/Magento/PageBuilder/view/adminhtml/ui_component/category_form.xml

@@ -13,6 +13,7 @@
                     <item name="wysiwygConfigData" xsi:type="array">
                         <item name="is_pagebuilder_enabled" xsi:type="boolean">true</item>
                         <item name="pagebuilder_button" xsi:type="boolean">true</item>
+                        <item name="pagebuilder_stage_overlay" xsi:type="boolean">true</item>
                     </item>
                 </item>
             </argument>

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

@@ -91,6 +91,10 @@ define([
                     component: this,
                     selector: this.stageSelector
                 }, this.disableDomObserver.bind(this));
+
+                if (this.wysiwygConfigData()['pagebuilder_stage_overlay']) {
+                    this.pageBuilder.setStageOverlay(true);
+                }
             }
 
             if (!this.wysiwygConfigData()['pagebuilder_button']) {

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

@@ -7,7 +7,8 @@
 <div class="pagebuilder-stage-wrapper"
      css="'stage-full-screen': isFullScreen"
      ko-style="wrapperStyles">
-    <div class="pagebuilder-stage-overlay"
+    <div if="hasStageOverlay()"
+         class="pagebuilder-stage-overlay"
          click="function() { toggleFullScreen($element); }"
          css="'active': !isFullScreen()">
     </div>

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

@@ -38,6 +38,7 @@ export default class PageBuilder implements PageBuilderInterface {
     public isAllowedTemplateApply: boolean;
     private previousWrapperStyles: {[key: string]: string} = {};
     private previousPanelHeight: number;
+    private hasStageOverlay: KnockoutObservable<boolean> = ko.observable(false);
 
     constructor(config: any, initialValue: string) {
         Config.setConfig(config);
@@ -190,6 +191,15 @@ export default class PageBuilder implements PageBuilderInterface {
         return saveAsTemplate(this.stage);
     }
 
+    /**
+     * Enable overlay for stage element
+     *
+     * @param {boolean} flag
+     */
+    public setStageOverlay(flag: boolean): void {
+        this.hasStageOverlay(flag);
+    }
+
     /**
      * Preload all templates into the window to reduce calls later in the app
      *