#514: User sees content snapshot on Category Page in Admin Panel - Moved overlay functions to wysiwyg

Author: hannahnida

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

@@ -24,6 +24,8 @@ define([
             transitionOut: false,
             elementSelector: '> textarea',
             stageSelector: '.pagebuilder-stage-wrapper',
+            overlaySelector: '.pagebuilder-wysiwyg-overlay',
+            overlayMouseover: false,
             pageBuilder: false,
             visiblePageBuilder: false,
             isComponentInitialized: false,
@@ -118,6 +120,20 @@ define([
             domObserver.disableNode(node);
         },
 
+        /**
+         * Changes tabindex and content editable on stage elements.
+         */
+        toggleFocusableElements: function () {
+            var stageWrapper = $('#' + this.pageBuilder.id).parent(),
+                focusableElements = ':focusable:not(' + this.overlaySelector + ')',
+                editableElements = '[contenteditable]',
+                tabIndexValue = this.pageBuilder.isFullScreen() ? '0' : '-1',
+                editableValue = this.pageBuilder.isFullScreen() ? 'true' : 'false';
+
+            stageWrapper.find(editableElements).attr('contenteditable', editableValue);
+            stageWrapper.find(focusableElements).attr('tabindex', tabIndexValue);
+        },
+
         /**
          * Determine if the current instance is within a modal
          *
@@ -134,6 +150,26 @@ define([
             }
         },
 
+        /**
+         * Overlay MouseOver
+         */
+        onOverlayMouseOver: function () {
+            if (!this.overlayMouseover && !$(this.overlaySelector).hasClass('_hover')) {
+                $(this.overlaySelector).addClass('_hover');
+            }
+            this.overlayMouseover = true;
+        },
+
+        /**
+         * Overlay MouseOut
+         */
+        onOverlayMouseOut: function () {
+            if (this.overlayMouseover && $(this.overlaySelector).hasClass('_hover')) {
+                $(this.overlaySelector).removeClass('_hover');
+            }
+            this.overlayMouseover = false;
+        },
+
         /**
          * Toggle Page Builder full screen mode
          */
@@ -163,8 +199,9 @@ define([
 
             events.on('stage:' + id + ':masterFormatRenderAfter', function (args) {
                 this.value(args.value);
+
                 if (this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
-                    this.pageBuilder.toggleFocusableElements();
+                    this.toggleFocusableElements();
                 }
             }.bind(this));
 
@@ -216,6 +253,10 @@ define([
                         /* eslint-enable max-depth */
                     }
                 }
+
+                if (this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
+                    this.toggleFocusableElements();
+                }
             }.bind(this));
 
             // Wait until the stage is rendered and full screen mode is activated

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

@@ -11,7 +11,7 @@
             class="action-default action"
             ko-disabled="disabled"
             click="pageBuilderEditButtonClick.bind($data)"
-            event="{ mouseover: pageBuilder.onStageOverlayMouseOver, mouseout: pageBuilder.onStageOverlayMouseOut }, mouseoverBubble: false">
+            event="{ mouseover: onOverlayMouseOver, mouseout: onOverlayMouseOut }, mouseoverBubble: false">
         <span translate="pageBuilderEditButtonText" />
     </button>
     <if args="isComponentInitialized">
@@ -22,7 +22,7 @@
                  class="pagebuilder-wysiwyg-overlay"
                  click="pageBuilderEditButtonClick.bind($data)"
                  css="'visible': !pageBuilder.isFullScreen()"
-                 event="{ mouseover: pageBuilder.onStageOverlayMouseOver, mouseout: pageBuilder.onStageOverlayMouseOut }, mouseoverBubble: false"
+                 event="{ mouseover: onOverlayMouseOver, mouseout: onOverlayMouseOut }, mouseoverBubble: false"
                  tabindex="0">
             </div>
             <with args="pageBuilder">

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

@@ -86,34 +86,6 @@ export default class PageBuilder implements PageBuilderInterface {
         this.isFullScreen.subscribe(() => this.onFullScreenChange());
     }
 
-    /**
-     * Changes tabindex and content editable on stage elements.
-     */
-    public toggleFocusableElements () {
-        const stageWrapper = $("#" + this.id).parent();
-        let focusableElements = ':focusable:not(.pagebuilder-stage-overlay)';
-        let editableElements = '[contenteditable]';
-        let tabIndexValue = this.isFullScreen() ? '0' : '-1';
-        let editableValue = this.isFullScreen() ? 'true' : 'false';
-
-        stageWrapper.find(editableElements).attr('contenteditable', editableValue);
-        stageWrapper.find(focusableElements).attr('tabindex', tabIndexValue);
-    }
-
-    /**
-     * MouseOver event for Stage Overlay
-     */
-    public onStageOverlayMouseOver (): void {
-        $('.pagebuilder-wysiwyg-overlay').addClass('_hover');
-    }
-
-    /**
-     * MouseOut event for Stage Overlay
-     */
-    public onStageOverlayMouseOut (): void {
-        $('.pagebuilder-wysiwyg-overlay').removeClass('_hover');
-    }
-
     /**
      * Tells the stage wrapper to expand to fullScreen
      *
@@ -189,7 +161,6 @@ export default class PageBuilder implements PageBuilderInterface {
             $("body").css("overflow", "");
         }
 
-        this.toggleFocusableElements();
         events.trigger(`stage:${ this.id }:fullScreenModeChangeAfter`, {
             fullScreen: this.isFullScreen(),
         });