#636: Responsive breakpoint switcher - worked on the requested changes

Author: yolouiese

app/code/Magento/PageBuilder/Component/Form/Element/Wysiwyg.php

@@ -26,12 +26,16 @@
  */
 class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
 {
+    /**
+     * @var Repository
+     */
+    private $assetRepo;
+
     /**
      * WYSIWYG Constructor
      *
      * @param ContextInterface $context
      * @param FormFactory $formFactory
-     * @param Repository $assetRepo
      * @param ConfigInterface $wysiwygConfig
      * @param CategoryAttributeRepositoryInterface $attrRepository
      * @param PageBuilderState $pageBuilderState
@@ -42,6 +46,7 @@ class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
      * @param PageBuilderConfig|null $pageBuilderConfig
      * @param bool $overrideSnapshot
      * @param ViewConfigInterface $viewConfig
+     * @param Repository $assetRepo
      * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      * @SuppressWarnings(PHPMD.ExcessiveParameterList)
      * @SuppressWarnings(PHPMD.NPathComplexity)
@@ -50,7 +55,6 @@ class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
     public function __construct(
         ContextInterface $context,
         FormFactory $formFactory,
-        Repository $assetRepo,
         ConfigInterface $wysiwygConfig,
         CategoryAttributeRepositoryInterface $attrRepository,
         PageBuilderState $pageBuilderState,
@@ -60,9 +64,11 @@ public function __construct(
         array $config = [],
         PageBuilderConfig $pageBuilderConfig = null,
         bool $overrideSnapshot = false,
-        ViewConfigInterface $viewConfig = null
+        ViewConfigInterface $viewConfig = null,
+        Repository $assetRepo = null
     ) {
         $viewConfig = $viewConfig ?: ObjectManager::getInstance()->get(ViewConfigInterface::class);
+        $this->assetRepo = $assetRepo ?: ObjectManager::getInstance()->get(Repository::class);
         $wysiwygConfigData = isset($config['wysiwygConfigData']) ? $config['wysiwygConfigData'] : [];
 
         // If a dataType is present we're dealing with an attribute
@@ -95,12 +101,7 @@ public function __construct(
                 'Magento_PageBuilder',
                 'breakpoints'
             );
-            $wysiwygConfigData['viewports']['desktop']['icon'] = $assetRepo->getUrl(
-                $wysiwygConfigData['viewports']['desktop']['icon']
-            );
-            $wysiwygConfigData['viewports']['mobile']['icon'] = $assetRepo->getUrl(
-                $wysiwygConfigData['viewports']['mobile']['icon']
-            );
+            $wysiwygConfigData = $this->processBreakpointsIcons($wysiwygConfigData);
 
             if ($overrideSnapshot) {
                 $pageBuilderConfig = $pageBuilderConfig ?: ObjectManager::getInstance()->get(PageBuilderConfig::class);
@@ -125,4 +126,22 @@ public function __construct(
 
         parent::__construct($context, $formFactory, $wysiwygConfig, $components, $data, $config);
     }
+
+    /**
+     * Process viewport icon paths
+     *
+     * @param array $wysiwygConfigData
+     * @return array
+     */
+    private function processBreakpointsIcons(array $wysiwygConfigData): array
+    {
+        if ($wysiwygConfigData && isset($wysiwygConfigData['viewports'])) {
+            foreach ($wysiwygConfigData['viewports'] as $breakpoint => $attributes) {
+                if (isset($attributes['icon'])) {
+                    $wysiwygConfigData['viewports'][$breakpoint]['icon'] = $this->assetRepo->getUrl($attributes['icon']);
+                }
+            }
+        }
+        return $wysiwygConfigData;
+    }
 }

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

@@ -531,7 +531,7 @@ export default class Preview extends BasePreview {
             this.contentType.dataStore.set("background_type", "image");
         });
         events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, (args: {viewport: string}) => {
-            if (this.contentType.dataStore.get("background_type") !== "video") {
+            if (this.contentType.dataStore.get("background_type") === "video") {
                 this.buildJarallax();
             }
         });

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

@@ -21,15 +21,13 @@ import {ContentTypeMountEventParamsInterface, ContentTypeMoveEventParamsInterfac
 import ObservableUpdater from "../observable-updater";
 import PreviewCollection from "../preview-collection";
 import {updateColumnWidth} from "./resize";
-import _ from "underscore";
 
 /**
  * @api
  */
 export default class Preview extends PreviewCollection {
     public resizing: KnockoutObservable<boolean> = ko.observable(false);
     public element: JQuery;
-    private wrapper: HTMLElement;
 
     /**
      * Fields that should not be considered when evaluating whether an object has been configured.
@@ -39,63 +37,6 @@ export default class Preview extends PreviewCollection {
      */
     protected fieldsToIgnoreOnRemove: string[] = ["width"];
 
-    /**
-     * Debounce and defer the init of Jarallax
-     *
-     * @type {(() => void) & _.Cancelable}
-     */
-    private buildJarallax = _.debounce(() => {
-        // Destroy all instances of the plugin prior
-        try {
-            // store/apply correct style after destroying, as jarallax incorrectly overrides it with stale value
-            const style = this.wrapper.getAttribute("style") ||
-                this.wrapper.getAttribute("data-jarallax-original-styles");
-            const backgroundImage = this.getBackgroundImage();
-            jarallax(this.wrapper, "destroy");
-            this.wrapper.setAttribute("style", style);
-            if (this.contentType.dataStore.get("background_type") as string !== "video" &&
-                this.wrapper.style.backgroundImage !== backgroundImage &&
-                backgroundImage !== "none"
-            ) {
-                this.wrapper.style.backgroundImage = backgroundImage;
-            }
-        } catch (e) {
-            // Failure of destroying is acceptable
-        }
-
-        if (this.wrapper &&
-            (this.wrapper.dataset.backgroundType as string) === "video" &&
-            (this.wrapper.dataset.videoSrc as string).length
-        ) {
-            _.defer(() => {
-                // Build Parallax on elements with the correct class
-                jarallax(
-                    this.wrapper,
-                    {
-                        videoSrc: this.wrapper.dataset.videoSrc as string,
-                        imgSrc: this.wrapper.dataset.videoFallbackSrc as string,
-                        videoLoop: (this.contentType.dataStore.get("video_loop") as string) === "true",
-                        speed: 1,
-                        videoPlayOnlyVisible: (this.contentType.dataStore.get("video_play_only_visible") as string) === "true",
-                        videoLazyLoading: (this.contentType.dataStore.get("video_lazy_load") as string) === "true",
-                    },
-                );
-                // @ts-ignore
-                if (this.wrapper.jarallax && this.wrapper.jarallax.video) {
-                    // @ts-ignore
-                    this.wrapper.jarallax.video.on("started", () => {
-                        // @ts-ignore
-                        if (this.wrapper.jarallax && this.wrapper.jarallax.$video) {
-                            // @ts-ignore
-                            this.wrapper.jarallax.$video.style.visibility = "visible";
-                        }
-                    });
-                }
-            });
-        }
-
-    }, 50);
-
     /**
      * @param {ContentTypeInterface} contentType
      * @param {ContentTypeConfigInterface} config
@@ -149,12 +90,6 @@ export default class Preview extends PreviewCollection {
                 }
             });
         }
-
-        events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, (args: {viewport: string}) => {
-            if (this.contentType.dataStore.get("background_type") !== "video") {
-                this.buildJarallax();
-            }
-        });
     }
 
     /**

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

@@ -144,7 +144,7 @@ export default class Preview extends PreviewCollection {
             this.toggleFullScreen.bind(this),
         );
         events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, (args: {viewport: string}) => {
-            if (this.contentType.dataStore.get("background_type") !== "video") {
+            if (this.contentType.dataStore.get("background_type") === "video") {
                 this.buildJarallax();
             }
         });