Merge pull request #393 from magento-obsessive-owls/PB-419

[Owls] PB-419: Resolve BiC change within content type toolbar

Author: davemacaulay

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

@@ -14,7 +14,7 @@ import "../binding/sortable";
 import "../binding/sortable-children";
 import ContentTypeCollection from "../content-type-collection";
 import ContentTypeCollectionInterface from "../content-type-collection.types";
-import ContentTypeConfigInterface from "../content-type-config.types";
+import ContentTypeConfigInterface, {ConfigFieldInterface} from "../content-type-config.types";
 import createContentType from "../content-type-factory";
 import ContentTypeMenu from "../content-type-menu";
 import Edit from "../content-type-menu/edit";
@@ -46,6 +46,13 @@ export default class Preview implements PreviewInterface {
     public isPlaceholderVisible: KnockoutObservable<boolean> = ko.observable(true);
     public isEmpty: KnockoutObservable<boolean> = ko.observable(true);
 
+    /**
+     * Provide preview data as an object which can be queried
+     *
+     * @deprecated please use getOptionValue directly
+     */
+    public previewData: {[key: string]: KnockoutObservable<any>} = {};
+
     /**
      * Fields that should not be considered when evaluating whether an object has been configured.
      *
@@ -82,6 +89,7 @@ export default class Preview implements PreviewInterface {
             "empty-placeholder-background": this.isPlaceholderVisible,
         });
         this.bindEvents();
+        this.populatePreviewData();
     }
 
     /**
@@ -144,6 +152,15 @@ export default class Preview implements PreviewInterface {
         this.contentType.dataStore.set(key, value);
     }
 
+    /**
+     * Retrieve the value for an option
+     *
+     * @param key
+     */
+    public getOptionValue(key: string) {
+        return this.contentType.dataStore.get(key);
+    }
+
     /**
      * Set state based on mouseover event for the preview
      *
@@ -581,4 +598,37 @@ export default class Preview implements PreviewInterface {
 
         this.isPlaceholderVisible(paddingBottom + paddingTop + minHeight >= 130);
     }
+
+    /**
+     * Populate the preview data with calls to the supported getOptionValue method
+     *
+     * @deprecated this function is only included to preserve backwards compatibility, use getOptionValue directly
+     */
+    private populatePreviewData(): void {
+        if (this.config.fields) {
+            _.each(this.config.fields, (fields) => {
+                _.keys(fields).forEach((key: string) => {
+                    this.previewData[key] = ko.observable("");
+                });
+            });
+        }
+
+        // Subscribe to this content types data in the store
+        this.contentType.dataStore.subscribe(
+            (data: DataObject) => {
+                _.forEach(data, (value, key) => {
+                    const optionValue = this.getOptionValue(key);
+                    if (ko.isObservable(this.previewData[key])) {
+                        this.previewData[key](optionValue);
+                    } else {
+                        if (_.isArray(optionValue)) {
+                            this.previewData[key] = ko.observableArray(optionValue);
+                        } else {
+                            this.previewData[key] = ko.observable(optionValue);
+                        }
+                    }
+                });
+            },
+        );
+    }
 }