Responsive breakpoint switcher

- prototype

Author: omiroshnichenko

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

@@ -10,13 +10,13 @@
 use Magento\Framework\App\ObjectManager;
 use Magento\Framework\Data\FormFactory;
 use Magento\Framework\View\Element\UiComponent\ContextInterface;
-use Magento\PageBuilder\Model\View\File\Collector\PageBuilder;
 use Magento\Ui\Component\Wysiwyg\ConfigInterface;
 use Magento\Catalog\Api\CategoryAttributeRepositoryInterface;
 use Magento\Framework\Exception\NoSuchEntityException;
 use Magento\PageBuilder\Model\Config as PageBuilderConfig;
 use Magento\PageBuilder\Model\State as PageBuilderState;
 use Magento\PageBuilder\Model\Stage\Config as Config;
+use Magento\Framework\View\ConfigInterface as ViewConfigInterface;
 
 /**
  * Updates wysiwyg element with Page Builder specific config
@@ -39,6 +39,7 @@ class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
      * @param array $config
      * @param PageBuilderConfig|null $pageBuilderConfig
      * @param bool $overrideSnapshot
+     * @param ViewConfigInterface $viewConfig
      * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      * @SuppressWarnings(PHPMD.ExcessiveParameterList)
      * @throws \Magento\Framework\Exception\NoSuchEntityException
@@ -54,8 +55,10 @@ public function __construct(
         array $data = [],
         array $config = [],
         PageBuilderConfig $pageBuilderConfig = null,
-        bool $overrideSnapshot = false
+        bool $overrideSnapshot = false,
+        ViewConfigInterface $viewConfig = null
     ) {
+        $viewConfig = $viewConfig ?: ObjectManager::getInstance()->get(ViewConfigInterface::class);
         $wysiwygConfigData = isset($config['wysiwygConfigData']) ? $config['wysiwygConfigData'] : [];
 
         // If a dataType is present we're dealing with an attribute
@@ -84,6 +87,10 @@ public function __construct(
             $wysiwygConfigData = $stageConfig->getConfig();
             $wysiwygConfigData['pagebuilder_button'] = true;
             $wysiwygConfigData['pagebuilder_content_snapshot'] = true;
+            $wysiwygConfigData['viewports'] = $viewConfig->getViewConfig()->getVarValue(
+                'Magento_PageBuilder',
+                'breakpoints'
+            );;
 
             if ($overrideSnapshot) {
                 $pageBuilderConfig = $pageBuilderConfig ?: ObjectManager::getInstance()->get(PageBuilderConfig::class);

app/code/Magento/PageBuilder/etc/view.xml

@@ -25,6 +25,10 @@
     <vars module="Magento_PageBuilder">
         <var name="breakpoints">
             <var name="desktop">
+                <var name="label">Desktop</var>
+                <var name="stage">true</var>
+                <var name="default">true</var>
+                <!-- TODO: add button icons               /-->
                 <var name="conditions">
                     <var name="min-width">1024px</var>
                 </var>
@@ -53,6 +57,9 @@
                 </var>
             </var>
             <var name="mobile">
+                <var name="label">Mobile</var>
+                <var name="stage">true</var>
+                <!-- TODO: add button icons               /-->
                 <var name="conditions">
                     <var name="max-width">768px</var>
                     <var name="min-width">640px</var>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_mobile-viewport.less

@@ -0,0 +1,19 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+
+.mobile-viewport {
+    &.pagebuilder-stage-wrapper {
+        &.stage-full-screen {
+            .pagebuilder-stage {
+                .pagebuilder-canvas {
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: 768px;
+                }
+            }
+        }
+    }
+}

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_module.less

@@ -92,3 +92,9 @@
 //  _____________________________________________
 
 @import '_template-manager.less';
+
+//
+//  Import Mobile viewport less
+//  _____________________________________________
+
+@import '_mobile-viewport.less';

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -5,11 +5,16 @@
  */
 -->
 <div class="pagebuilder-stage-wrapper"
-     css="'stage-full-screen': isFullScreen, 'stage-content-snapshot': isSnapshot, 'transition-out': isSnapshotTransition, 'stage-is-active': (!isSnapshot() || isFullScreen)"
+     css="Object.assign(
+        {'stage-full-screen': isFullScreen, 'stage-content-snapshot': isSnapshot, 'transition-out': isSnapshotTransition, 'stage-is-active': (!isSnapshot() || isFullScreen)},
+        viewportClasses)"
      ko-style="wrapperStyles">
     <div class="admin__field pagebuilder-header"
          css="visible: panel.isVisible(), 'transition-out': isSnapshotTransition()"
          if="!isSnapshot()">
+        <each args="data: Object.keys(viewports), as: 'name'">
+            <button type="button" translate="$parent.viewports[name].label" disable="name === $parent.viewport()" click="$parent.toggleViewport.bind($parent, name)"/>
+        </each>
         <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>
         <button type="button" translate="'Save as Template'" if="isAllowedTemplateSave" click="saveAsTemplate"/>
         <i click="toggleFullScreen.bind($data, {animate:true})"

app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html

@@ -39,6 +39,10 @@ export default class PageBuilder implements PageBuilderInterface {
     public stageStyles: KnockoutObservable<{[key: string]: string}> = ko.observable({});
     public isAllowedTemplateSave: boolean;
     public isAllowedTemplateApply: boolean;
+    public defaultViewport: string;
+    public viewport: KnockoutObservable<string> = ko.observable("");
+    public viewports: {[key: string]: object} = {};
+    public viewportClasses: {[key: string]: KnockoutObservable<boolean>} = {};
     private previousStyles: {[key: string]: string} = {};
     private previousPanelHeight: number;
     private snapshot: boolean;
@@ -48,6 +52,7 @@ export default class PageBuilder implements PageBuilderInterface {
         Config.setMode("Preview");
         this.preloadTemplates(config);
         this.initialValue = initialValue;
+        this.initViewports(config);
         this.isFullScreen(config.isFullScreen);
         this.isSnapshot(!!config.pagebuilder_content_snapshot);
         this.isSnapshotTransition(false);
@@ -242,6 +247,20 @@ export default class PageBuilder implements PageBuilderInterface {
         return saveAsTemplate(this.stage);
     }
 
+    public toggleViewport(viewport: string) {
+        const previousViewport = this.viewport();
+
+        this.viewport(viewport);
+        events.trigger(`stage:${this.id}:viewportChangeAfter`, {
+            viewport,
+            previousViewport,
+        });
+        _.each(this.viewportClasses, (viewportClass) => {
+            viewportClass(false);
+        });
+        this.viewportClasses[`${viewport}-viewport`](true);
+    }
+
     /**
      * Preload all templates into the window to reduce calls later in the app
      *
@@ -258,4 +277,19 @@ export default class PageBuilder implements PageBuilderInterface {
             require(previewTemplates);
         });
     }
+
+    private initViewports(config: any): void {
+        _.each(config.viewports, (viewport: any, name: string) => {
+            if (viewport.stage) {
+                this.viewports[name] = viewport;
+            }
+        });
+        this.defaultViewport = _.findKey(this.viewports, (viewport: any) => {
+            return viewport.default;
+        });
+        this.viewport(this.defaultViewport);
+        _.each(this.viewports, (viewport: {[key: string]: any}, name: string) => {
+            this.viewportClasses[`${name}-viewport`] = ko.observable(name === this.defaultViewport);
+        });
+    }
 }