MC-3940: Slide Content Disappears After Switching Between Slides

Author: omiroshnichenko

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

@@ -13,6 +13,7 @@ import {OptionsInterface} from "../../content-type-menu/option.d";
 import {DataObject} from "../../data-store";
 import ContentTypeMountEventParamsInterface from "../content-type-mount-event-params";
 import BasePreview from "../preview";
+import SliderPreview from "../slider/preview";
 import Uploader from "../uploader";
 import WysiwygFactory from "../wysiwyg/factory";
 import WysiwygInterface from "../wysiwyg/wysiwyg-interface";
@@ -42,6 +43,11 @@ export default class Preview extends BasePreview {
      */
     private uploader: Uploader;
 
+    /**
+     * Slide flag
+     */
+    private slideChanged: boolean = true;
+
     /**
      * @param {HTMLElement} element
      */
@@ -210,6 +216,7 @@ export default class Preview extends BasePreview {
         const element = this.wysiwyg && this.element || this.textarea;
 
         if (!element ||
+            !this.slideChanged ||
             event.currentTarget !== event.target &&
             event.target !== element &&
             !element.contains(event.target)
@@ -327,6 +334,19 @@ export default class Preview extends BasePreview {
                 });
             }
         });
+
+        events.on(`${this.config.name}:renderAfter`, (args: ContentTypeMountEventParamsInterface) => {
+            if (args.id === this.parent.id) {
+                const slider = this.parent.parent;
+
+                $((slider.preview as SliderPreview).element).on("beforeChange", () => {
+                    this.slideChanged = false;
+                });
+                $((slider.preview as SliderPreview).element).on("afterChange", () => {
+                    this.slideChanged = true;
+                });
+            }
+        });
     }
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/wysiwyg/tinymce4/component-initializer.js

@@ -45,6 +45,11 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
      */
     private activeSlideSelector: string = ".slick-current";
 
+    /**
+     * Slider autoplay
+     */
+    private autoplay: boolean;
+
     /**
      * Initialize the instance
      *
@@ -75,6 +80,11 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
 
         // Disable slider keyboard events and fix problem with overflow hidden issue
         $($slider.parent()).slick("slickSetOption", "accessibility", false);
+        this.autoplay = $($slider.parent()).slick("slickGetOption", "autoplay") as boolean;
+
+        if (this.autoplay) {
+            $($slider.parent()).slick("slickPause");
+        }
         $notActiveSlides.hide();
         this.sliderTransform = sliderContent.style.transform;
         sliderContent.style.transform = "";
@@ -100,5 +110,8 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
         sliderContent.style.transform = this.sliderTransform;
         $notActiveSlides.show();
         $($slider.parent()).slick("slickSetOption", "accessibility", true);
+        if (this.autoplay) {
+            $($slider.parent()).slick("slickPlay");
+        }
     }
 }

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

@@ -37,10 +37,10 @@ import {default as SliderPreview} from "../slider/preview";
 export default class Preview extends PreviewCollection {
     public focusedSlide: KnockoutObservable<number> = ko.observable();
     public activeSlide: KnockoutObservable<number> = ko.observable(0);
+    public element: HTMLElement;
     protected events: DataObject = {
         columnWidthChangeAfter: "onColumnResize",
     };
-    private element: HTMLElement;
     private childSubscribe: KnockoutSubscription;
     private contentTypeHeightReset: boolean;