#514: User sees content snapshot on Category Page in Admin Panel

- fix uploader initialization sequence
- add animation
- add snapshot to staging update form

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js

@@ -189,7 +189,7 @@ define([
          */
         toggleFullScreen: function () {
             events.trigger('stage:' + this.pageBuilder.id + ':toggleFullscreen', {
-                animate: false
+                animate: !!this.wysiwygConfigData()['pagebuilder_content_snapshot']
             });
         },
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/image/preview.js

@@ -12,7 +12,7 @@
          if="!isSnapshot()">
         <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); }"
+        <i click="function() { toggleFullScreen({animate:true}); }"
            css="'icon-pagebuilder-fullscreen': !isFullScreen(), 'icon-pagebuilder-fullscreen-exit': isFullScreen()"
            attr="{title: isFullScreen() ? $t('Close Full Screen') : $t('Open in Full Screen')}">
         </i>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

@@ -486,6 +486,10 @@ export default class Preview extends BasePreview {
         events.on("banner:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {
             if (args.id === this.contentType.id) {
                 this.buildJarallax();
+                this.isSnapshot.subscribe((value) => {
+                    this.changeUploaderControlsVisibility();
+                });
+                this.changeUploaderControlsVisibility();
             }
         });
         events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, () => {
@@ -506,10 +510,6 @@ export default class Preview extends BasePreview {
         events.on(`image:${this.contentType.id}:uploadAfter`, () => {
             this.contentType.dataStore.set("background_type", "image");
         });
-        this.isSnapshot.subscribe((value) => {
-            this.changeUploaderControlsVisibility();
-        });
-        this.changeUploaderControlsVisibility();
     }
 
     /**

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

@@ -3,6 +3,7 @@
  * See COPYING.txt for license details.
  */
 
+import {ContentTypeReadyEventParamsInterface} from "Magento_PageBuilder/js/content-type/content-type-events.types";
 import events from "Magento_PageBuilder/js/events";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 import {OptionsInterface} from "../../content-type-menu/option.types";
@@ -58,6 +59,15 @@ export default class Preview extends BasePreview {
     protected bindEvents() {
         super.bindEvents();
 
+        events.on("image:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {
+            if (args.id === this.contentType.id) {
+                this.isSnapshot.subscribe((value) => {
+                    this.changeUploaderControlsVisibility();
+                });
+                this.changeUploaderControlsVisibility();
+            }
+        });
+
         events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, () => {
             const files = this
                 .contentType
@@ -66,10 +76,6 @@ export default class Preview extends BasePreview {
             const imageObject: object = files ? (files[0] as object) : {};
             events.trigger(`image:${this.contentType.id}:assignAfter`, imageObject);
         });
-        this.isSnapshot.subscribe((value) => {
-            this.changeUploaderControlsVisibility();
-        });
-        this.changeUploaderControlsVisibility();
     }
 
     /**

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

@@ -480,6 +480,10 @@ export default class Preview extends BasePreview {
         events.on("slide:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {
             if (args.id === this.contentType.id) {
                 this.buildJarallax();
+                this.isSnapshot.subscribe((value) => {
+                    this.changeUploaderControlsVisibility();
+                });
+                this.changeUploaderControlsVisibility();
             }
         });
 
@@ -541,6 +545,15 @@ export default class Preview extends BasePreview {
         });
     }
 
+    /**
+     * Change uploader controls visibility
+     */
+    private changeUploaderControlsVisibility() {
+        this.getUploader().getUiComponent()((uploader: any) => {
+            uploader.visibleControls = !this.isSnapshot();
+        });
+    }
+
     /**
      * Update image data inside data store
      *