Merge branch 'PB-77' of github.com:magento-obsessive-owls/magento2-page-builder into PB-77

Author: dhaecker

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

@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type pagebuilder-products" data-bind="event: { mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-        <div if="displayPreview" class="rendered-content" html="data.main.html" afterRender="onAfterRender"></div>
+        <div if="displayPreview" class="rendered-content" html="widgetHtml" afterRender="onAfterRender"></div>
         <div ifnot="displayPreview" class="pagebuilder-products-placeholder">
             <span class="placeholder-text"  text="placeholderText"/>
         </div>

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

@@ -569,7 +569,6 @@ export default class Preview implements PreviewInterface {
             _.extend({}, this.contentType.dataStore.getState()),
         );
         this.afterObservablesUpdated();
-        events.trigger("previewData:updateAfter", {preview: this});
     }
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/products/grid/preview.html

@@ -7,11 +7,13 @@ import $ from "jquery";
 import ko from "knockout";
 import $t from "mage/translate";
 import "slick";
+import _ from "underscore";
 import Config from "../../config";
 import ContentTypeInterface from "../../content-type";
 import ContentTypeConfigInterface from "../../content-type-config.types";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 import {OptionsInterface} from "../../content-type-menu/option.types";
+import {DataObject} from "../../data-store";
 import ObservableUpdater from "../observable-updater";
 import BasePreview from "../preview";
 
@@ -21,15 +23,31 @@ import BasePreview from "../preview";
 export default class Preview extends BasePreview {
     public displayPreview: KnockoutObservable<boolean> = ko.observable(false);
     public placeholderText: KnockoutObservable<string>;
+    public widgetHtml: KnockoutObservable<string> = ko.observable();
     private element: Element;
-    private sliderReady: boolean = false;
     private messages = {
         EMPTY: $t("Empty Products"),
         NO_RESULTS: $t("No products were found matching your condition"),
         LOADING: $t("Loading..."),
         UNKNOWN_ERROR: $t("An unknown error occurred. Please try again."),
     };
 
+    /**
+     * Define keys which when changed should not trigger the slider to be rebuilt
+     *
+     * @type {string[]}
+     */
+    private ignoredKeysForBuild: string[] = [
+        "margins_and_padding",
+        "border",
+        "border_color",
+        "border_radius",
+        "border_width",
+        "css_classes",
+        "text_align",
+    ];
+    private previousData: DataObject;
+
     /**
      * @inheritdoc
      */
@@ -72,67 +90,59 @@ export default class Preview extends BasePreview {
         this.initSlider();
     }
 
-    /**
-     * @inheritDoc
-     */
-    public onOptionVisibilityToggle(): void {
-        this.element = undefined;
-        this.sliderReady = false;
-        super.onOptionVisibilityToggle();
-    }
-
     /**
      * @inheritdoc
      */
     protected afterObservablesUpdated(): void {
         super.afterObservablesUpdated();
-        this.displayPreview(false);
-
         const data = this.contentType.dataStore.getState();
 
-        if ((typeof data.conditions_encoded !== "string") || data.conditions_encoded.length === 0) {
-            this.placeholderText(this.messages.EMPTY);
-
-            return;
+        if (this.hasDataChanged(this.previousData, data)) {
+            this.displayPreview(false);
+
+            if ((typeof data.conditions_encoded !== "string") || data.conditions_encoded.length === 0) {
+                this.placeholderText(this.messages.EMPTY);
+
+                return;
+            }
+
+            const url = Config.getConfig("preview_url");
+            const requestConfig = {
+                // Prevent caching
+                method: "POST",
+                data: {
+                    role: this.config.name,
+                    directive: this.data.main.html(),
+                },
+            };
+
+            this.placeholderText(this.messages.LOADING);
+
+            $.ajax(url, requestConfig)
+                .done((response) => {
+                    if (typeof response.data !== "object" || !Boolean(response.data.content)) {
+                        this.placeholderText(this.messages.NO_RESULTS);
+
+                        return;
+                    }
+
+                    if (response.data.error) {
+                        this.widgetHtml(response.data.error);
+                    } else {
+                        this.widgetHtml(response.data.content);
+                        this.displayPreview(true);
+                    }
+                })
+                .fail(() => {
+                    this.placeholderText(this.messages.UNKNOWN_ERROR);
+                });
         }
-
-        const url = Config.getConfig("preview_url");
-        const requestConfig = {
-            // Prevent caching
-            method: "POST",
-            data: {
-                role: this.config.name,
-                directive: this.data.main.html(),
-            },
-        };
-
-        this.placeholderText(this.messages.LOADING);
-
-        $.ajax(url, requestConfig)
-            .done((response) => {
-                if (typeof response.data !== "object" || !Boolean(response.data.content)) {
-                    this.placeholderText(this.messages.NO_RESULTS);
-
-                    return;
-                }
-
-                if (response.data.error) {
-                    this.data.main.html(response.data.error);
-                } else {
-                    this.data.main.html(response.data.content);
-                    this.initSlider();
-                    this.displayPreview(true);
-                }
-            })
-            .fail(() => {
-                this.placeholderText(this.messages.UNKNOWN_ERROR);
-            });
+        this.previousData = Object.assign({}, data);
     }
 
     protected initSlider(): void {
-        if (!this.sliderReady && this.element && this.appearance() === "carousel") {
+        if (this.element && this.appearance() === "carousel") {
             $(this.element.children).slick(this.buildSlickConfig());
-            this.sliderReady = true;
         }
     }
 
@@ -156,4 +166,17 @@ export default class Preview extends BasePreview {
             autoplaySpeed: parseFloat(attributes["data-autoplay-speed"]),
         };
     }
+
+    /**
+     * Determine if the data has changed, whilst ignoring certain keys which don't require a rebuild
+     *
+     * @param {DataObject} previousData
+     * @param {DataObject} newData
+     * @returns {boolean}
+     */
+    private hasDataChanged(previousData: DataObject, newData: DataObject) {
+        previousData = _.omit(previousData, this.ignoredKeysForBuild);
+        newData = _.omit(newData, this.ignoredKeysForBuild);
+        return !_.isEqual(previousData, newData);
+    }
 }

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

@@ -385,20 +385,6 @@ events.on(`stage:${this.contentType.stageId}:fullScreenModeChangeAfter`, functio
 [Back to top]
 
 
-### `previewData:updateAfter`
-
-```js
-events.on("previewData:updateAfter", function (params) {});
-```
-
-| Params    | Type      |
-| --------- | --------- |
-| `preview` | `Preview` |
-{:style="table-layout:auto"}
-
-[Back to top]
-
-
 ### `childContentType:sortStart`
 
 ```js