#514: User sees content snapshot on Category Page in Admin Panel - Added accessibility for the page builder file and fixes for mftf tests

Author: Lukasz Borowiec

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -27,7 +27,7 @@
     }
 }
 
-.pagebuilder_content_snapshot {
+.pagebuilder-content-snapshot {
     .pagebuilder-header {
         display: none;
 
@@ -58,7 +58,7 @@
         pointer-events: none;
     }
 
-    &.pagebuilder_content_snapshot {
+    &.pagebuilder-content-snapshot {
         &.stage-full-screen {
             .pagebuilder-header {
                 display: block;
@@ -307,7 +307,7 @@
     }
 }
 
-.pagebuilder_content_snapshot {
+.pagebuilder-content-snapshot {
     .pagebuilder-stage {
         -moz-transition: none;
         -webkit-transition: none;

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

@@ -5,29 +5,31 @@
  */
 -->
 <div class="pagebuilder-image-uploader-container" data-role="drop-zone" css="_loading: isLoading, 'has-data': hasData()">
-    <div class="pagebuilder-options" data-bind="visible: hasData() || isShowImageUploadOptions">
-        <div class="pagebuilder-options-wrapper">
-            <ul class="pagebuilder-options-links">
-                <li class="pagebuilder-options-link">
-                    <label
-                        data-bind="event: {mousedown: stopEvent}"
-                        class="file-uploader-button action-default"
-                        attr="for: uid"
-                        disable="disabled"
-                        translate="translations.uploadNewImage"/>
-                </li>
-                <li class="pagebuilder-options-link">
-                    <label
-                        data-bind="event: {change: addFileFromMediaGallery, click: openMediaBrowserDialog, mousedown: stopEvent}"
-                        class="file-uploader-button action-default"
-                        attr="id: mediaGalleryUid, 'data-id': getFileId()"
-                        disable="disabled"
-                        data-force_static_path="1"
-                        translate="translations.selectFromGallery"/>
-                </li>
-            </ul>
+    <if args="$parent.accessibility()">
+        <div class="pagebuilder-options" data-bind="visible: hasData() || isShowImageUploadOptions">
+            <div class="pagebuilder-options-wrapper">
+                <ul class="pagebuilder-options-links">
+                    <li class="pagebuilder-options-link">
+                        <label
+                            data-bind="event: {mousedown: stopEvent}"
+                            class="file-uploader-button action-default"
+                            attr="for: uid"
+                            disable="disabled"
+                            translate="translations.uploadNewImage"/>
+                    </li>
+                    <li class="pagebuilder-options-link">
+                        <label
+                            data-bind="event: {change: addFileFromMediaGallery, click: openMediaBrowserDialog, mousedown: stopEvent}"
+                            class="file-uploader-button action-default"
+                            attr="id: mediaGalleryUid, 'data-id': getFileId()"
+                            disable="disabled"
+                            data-force_static_path="1"
+                            translate="translations.selectFromGallery"/>
+                    </li>
+                </ul>
+            </div>
         </div>
-    </div>
+    </if>
     <div class="file-uploader-spinner"></div>
     <div class="preview-image-container-loading-overlay"></div>
     <if args="$parent.accessibility()">

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

@@ -5,20 +5,22 @@
  */
 -->
 <div class="pagebuilder-stage-wrapper"
-     css="'stage-full-screen': isFullScreen,'pagebuilder_content_snapshot': !panel.isVisible()"
+     css="'stage-full-screen': isFullScreen, 'pagebuilder-content-snapshot': !isFullScreen() && getContentSnapshotMode()"
      ko-style="wrapperStyles">
-    <div class="admin__field pagebuilder-header" css="visible: panel.isVisible()">
+    <div class="admin__field pagebuilder-header"
+         css="visible: panel.isVisible()"
+         if="(isFullScreen() && getContentSnapshotMode()) || !getContentSnapshotMode()">
         <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); }"
            css="'icon-pagebuilder-fullscreen': !isFullScreen(), 'icon-pagebuilder-fullscreen-exit': isFullScreen()"
            attr="{title: isFullScreen() ? $t('Close Full Screen') : $t('Open in Full Screen')}">
         </i>
     </div>
-    <with args="panel">
+    <with args="panel" if="(isFullScreen() && getContentSnapshotMode()) || !getContentSnapshotMode()">
         <render/>
     </with>
-    <if args="isStageReady">
+    <if args="isStageReady && accessibility()">
         <with args="stage">
             <render/>
         </with>

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/uploader/preview/image.html

@@ -56,6 +56,16 @@ export default class Config {
         Config.contentSnapshot.isFullScreen = flag;
     }
 
+    /**
+     * Set the content snapshot page builder id
+     *
+     * @param id
+     */
+    public static setContentSnapshotPageBuilderId(id: string): void
+    {
+        Config.contentSnapshot.pageBuilderId = id;
+    }
+
     /**
      * Retrieve the current instances mode
      */

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

@@ -31,8 +31,8 @@ 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 accessibility: KnockoutObservable<boolean> = ko.observable(true);
     public loading: KnockoutObservable<boolean> = ko.observable(true);
     public wrapperStyles: KnockoutObservable<{[key: string]: string}> = ko.observable({});
     public isAllowedTemplateSave: boolean;
@@ -70,10 +70,6 @@ export default class PageBuilder implements PageBuilderInterface {
 
         this.panel = new Panel(this);
 
-        if (Config.getContentSnapshot().contentSnapshotMode) {
-            this.panel.isVisible(false);
-        }
-
         this.initListeners();
     }
 
@@ -89,9 +85,18 @@ export default class PageBuilder implements PageBuilderInterface {
      */
     public initListeners() {
         events.on(`stage:${ this.id }:toggleFullscreen`, this.toggleFullScreen.bind(this));
+        events.on(`stage:accessibilityChangeAfter`, this.toggleAccessibility.bind(this));
         this.isFullScreen.subscribe(() => this.onFullScreenChange());
     }
 
+    /**
+     * Get content snapshot mode
+     */
+    public getContentSnapshotMode(): boolean
+    {
+        return Config.getContentSnapshot().contentSnapshotMode;
+    }
+
     /**
      * Tells the stage wrapper to expand to fullScreen
      *
@@ -139,7 +144,7 @@ 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);
-            if (!this.isContentSnapshotMode) {
+            if (!Config.getContentSnapshot().contentSnapshotMode) {
                 panel.css("height", this.previousPanelHeight + "px");
                 // Wait for the 350ms animation to complete before changing these properties back
                 _.delay(() => {
@@ -157,6 +162,18 @@ export default class PageBuilder implements PageBuilderInterface {
         }
     }
 
+    /**
+     * Sets stage accessibility for the content snapshot mode
+     * @param args
+     */
+    public toggleAccessibility(args: any): void {
+        if ((args.activePageBuilderId === this.id && this.isFullScreen()) || (!args.activeFullScreen)) {
+            this.accessibility(true);
+        } else {
+            this.accessibility(false);
+        }
+    }
+
     /**
      * Change window scroll base on full screen mode.
      */
@@ -167,7 +184,18 @@ export default class PageBuilder implements PageBuilderInterface {
             $("body").css("overflow", "");
         }
 
-        events.trigger(`stage:${ this.id }:fullScreenModeChangeAfter`, {
+        if (Config.getContentSnapshot().contentSnapshotMode) {
+
+            Config.setContentSnapshotPageBuilderId(this.id);
+            Config.setContentSnapshotFullScreenMode(this.isFullScreen());
+
+            events.trigger(`stage:accessibilityChangeAfter`, {
+                activePageBuilderId: this.id,
+                activeFullScreen: this.isFullScreen(),
+            });
+        }
+
+        events.trigger(`stage:${this.id}:fullScreenModeChangeAfter`, {
             fullScreen: this.isFullScreen(),
         });
     }