Merge remote-tracking branch 'origin/MC-3709-grab-button-handles-displays' into cms-team-2-sprint-15-bugs

Author: tjwiebell

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeButtonActionGroup.xml

@@ -14,6 +14,7 @@
         </arguments>
         <comment userInput="Adding Button" stepKey="comment"/>
         <executeJS function="return Math.round(document.getElementsByClassName('pagebuilder-button-item').length+1)" stepKey="initialNumberOfButtonsPlusOne"/>
+        <click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unfocusButtonLiveEdit1"/>
         <moveMouseOver selector="{{PageBuilderStage.contentTypeInStageByIndex(PageBuilderButtonsContentType.role, buttonGroupIndex)}}" stepKey="mouseOverButtonsGroup"/>
         <waitForPageLoad stepKey="waitForPageLoad"/>
         <waitForElementVisible time="10" selector="{{PageBuilderContentTypeOptionsMenu.contentTypeOptionsMenu(PageBuilderButtonsContentType.role)}}" stepKey="waitForOptionsMenu"/>
@@ -25,7 +26,7 @@
             <expectedResult type="variable">initialNumberOfButtonsPlusOne</expectedResult>
             <actualResult type="variable">numberOfButtonsAfterAdd</actualResult>
         </assertEquals>
-        <click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unfocusButtonLiveEdit"/>
+        <click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unfocusButtonLiveEdit2"/>
     </actionGroup>
     <actionGroup name="validateButtonItemContent">
         <arguments>

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

@@ -5,7 +5,7 @@
  */
 -->
 
-<div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options" event="{ click: onMouseOver, focusout: onMouseOut }">
+<div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options" event="{ click: onButtonClick, focusout: onBlur }">
     <render args="getOptions().template" />
     <a attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
         <span class="button-item-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>

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

@@ -3,6 +3,7 @@
  * See COPYING.txt for license details.
  */
 
+import $ from "jquery";
 import $t from "mage/translate";
 import ConditionalRemoveOption from "../../content-type-menu/conditional-remove-option";
 import {OptionsInterface} from "../../content-type-menu/option.d";
@@ -30,6 +31,46 @@ export default class Preview extends BasePreview {
         return options;
     }
 
+    /**
+     * Set state based on button click event for the preview
+     *
+     * @param {Preview} context
+     * @param {Event} event
+     */
+    public onButtonClick(context: Preview, event: Event): void {
+
+        // Ensure no other options panel and button drag handles are displayed
+        $(".pagebuilder-content-type-active").removeClass("pagebuilder-content-type-active");
+        $(".pagebuilder-options-visible").removeClass("pagebuilder-options-visible");
+        const currentTarget = $(event.currentTarget);
+        let optionsMenu = $(currentTarget).find(".pagebuilder-options-wrapper");
+
+        if (!$(currentTarget).hasClass("type-nested")) {
+            optionsMenu = optionsMenu.first();
+        }
+        $(currentTarget).find("[data-element='link_text']").focus();
+        optionsMenu.parent().addClass("pagebuilder-options-visible");
+        $(currentTarget).addClass("pagebuilder-content-type-active");
+    }
+
+    /**
+     * Set state based on blur event for the preview
+     *
+     * @param {Preview} context
+     * @param {Event} event
+     */
+    public onBlur(context: Preview, event: Event) {
+        const currentTarget = event.currentTarget;
+        let optionsMenu = $(currentTarget).find(".pagebuilder-options-wrapper");
+
+        if (!$(currentTarget).hasClass("type-nested")) {
+            optionsMenu = optionsMenu.first();
+        }
+
+        optionsMenu.parent().removeClass("pagebuilder-options-visible");
+        $(currentTarget).removeClass("pagebuilder-content-type-active");
+    }
+
     /**
      * Focus out of the element
      */

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/button-item/default/preview.html

@@ -222,8 +222,9 @@ export default class Preview extends PreviewCollection {
             /**
              * Logic for post sorting and removing the placeholderGhost
              */
-            stop() {
+            stop(event: Event, element: JQueryUI.SortableUIParams) {
                 placeholderGhost.remove();
+                element.item.find(".pagebuilder-content-type-active").removeClass("pagebuilder-content-type-active");
                 events.trigger("stage:interactionStop");
             },
         };