MC-3474: Apply Resizing Functionality to Preview

- Add a min-width transition to LESS
- Remove empty button template file
- Add afterRender event to buttons template in child button rendering loop
- Add events to buttons preview controller that will trigger re-sizing of buttons
- Add Interface for previewData:updateAfter event

Author: tjwiebell

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/button-item/_default.less

@@ -25,5 +25,9 @@
                 margin: 0;
             }
         }
+
+        a[data-element="link"] {
+            transition: min-width .5s ease;
+        }
     }
 }

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

@@ -8,6 +8,6 @@
 <div class="pagebuilder-content-type pagebuilder-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
     <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: { handle: '.move-structural', items: '.pagebuilder-content-type-wrapper', connectWith: '.buttons-container', appendTo: 'body' }">
-        <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview }" attr="{ id: id }"></div>
+        <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }"></div>
     </div>
 </div>

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

@@ -14,6 +14,9 @@ import Option from "../../content-type-menu/option";
 import OptionInterface from "../../content-type-menu/option.d";
 import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
 import PreviewCollection from "../preview-collection";
+import PreviewDataUpdateAfterParamsInterface from "../preview-data-update-after-params";
+import ContentTypeAfterRenderEventParamsInterface from "../content-type-after-render-event-params";
+import ContentTypeRemovedEventParamsInterface from "../content-type-removed-event-params";
 
 /**
  * @api
@@ -29,6 +32,28 @@ export default class Preview extends PreviewCollection {
                 this.addButton();
             }
         });
+
+        events.on("previewData:updateAfter", (eventData: PreviewDataUpdateAfterParamsInterface) => {
+            const contentTypePreview = eventData.preview;
+            if ((contentTypePreview.config.name === "button-item"
+                && contentTypePreview.parent.parent.id === this.parent.id)
+                || (contentTypePreview.config.name === "buttons"
+                    && contentTypePreview.parent.id === this.parent.id)) {
+                this.resizeChildButtons();
+            }
+        });
+
+        events.on("button-item:renderAfter", (eventData: ContentTypeAfterRenderEventParamsInterface) => {
+            if (eventData.contentType.parent.id === this.parent.id) {
+                this.resizeChildButtons();
+            }
+        });
+
+        events.on("button-item:removeAfter", (eventData: ContentTypeRemovedEventParamsInterface) => {
+            if (eventData.parent.id === this.parent.id) {
+                this.resizeChildButtons();
+            }
+        });
     }
 
     /**
@@ -84,4 +109,41 @@ export default class Preview extends PreviewCollection {
             console.error(error);
         });
     }
+
+    /**
+     * Resize width of all child buttons. Dependently make them the same width if configured.
+     */
+    private resizeChildButtons() {
+        if (this.wrapperElement) {
+            const buttonItems: JQuery = $(this.wrapperElement).find(".pagebuilder-button-item > a");
+            let buttonResizeValue: string|number = "";
+            if (this.parent.dataStore.get("same_width") === "1") {
+                if (buttonItems.length > 0) {
+                    const currentLargestButton = this.findLargestButton(buttonItems);
+                    buttonResizeValue = currentLargestButton.css("min-width", "").outerWidth();
+                }
+            }
+
+            buttonItems.css("min-width", buttonResizeValue);
+        }
+    }
+
+    /**
+     * Find the largest button text value which will determine the button width we use for re-sizing.
+     *
+     * @param {JQuery} buttonItems
+     * @returns {JQuery}
+     */
+    private findLargestButton(buttonItems: JQuery): JQuery {
+        let largestButton: JQuery|null = null;
+        buttonItems.each((index, element) => {
+            const buttonElement = $(element);
+            if (largestButton === null
+                || buttonElement.find("span").width() > largestButton.find("span").width()) {
+                largestButton = buttonElement;
+            }
+        });
+
+        return largestButton;
+    }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/inline/preview.html

@@ -0,0 +1,13 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import Preview from "./preview";
+
+/**
+ * @api
+ */
+export default interface PreviewDataUpdateAfterParamsInterface {
+    preview: Preview;
+}