Merge pull request #1677 from mailpoet/mobile-preview

Add mobile preview mode [MAILPOET-1583]

assets/css/src/newsletter_editor/components/sidebar.styl

@@ -126,3 +126,32 @@ $widget-icon-width = 30px
 
     .mailpoet_widget_title
       display: none
+
+/* Browser preview modal */
+.mailpoet_browser_preview_toggle
+  height: 30px
+  padding: 10px 0
+  text-align: center
+
+.mailpoet_browser_preview_toggle > label
+  display: inline-block
+  margin: 0 5px
+
+.mailpoet_browser_preview_container
+  margin: auto
+  height: calc(100% - 60px)
+  transition: width 0.5s
+  border: 20px solid white
+  border-radius: 20px
+  box-sizing: border-box
+  background: white
+  padding: 15px 0
+
+.mailpoet_browser_preview_container_desktop
+  width: 100%
+
+.mailpoet_browser_preview_container_mobile
+  width: 350px
+
+.mailpoet_browser_preview_iframe
+  border: 1px solid #c3c3c3

assets/js/src/newsletter_editor/components/sidebar.js

@@ -265,6 +265,7 @@ define([
         MailPoet.Modal.loading(false);
       }).done(function (response) {
         this.previewView = new Module.NewsletterPreviewView({
+          previewType: window.localStorage.getItem(App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey')),
           previewUrl: response.meta.preview_url
         });
 
@@ -345,7 +346,13 @@ define([
 
   Module.NewsletterPreviewView = Marionette.View.extend({
     getTemplate: function () { return window.templates.newsletterPreview; },
+    events: function () {
+      return {
+        'change .mailpoet_browser_preview_type': 'changeBrowserPreviewType'
+      };
+    },
     initialize: function (options) {
+      this.previewType = options.previewType;
       this.previewUrl = options.previewUrl;
       this.width = '100%';
       this.height = '100%';
@@ -354,10 +361,25 @@ define([
     },
     templateContext: function () {
       return {
+        previewType: this.previewType,
         previewUrl: this.previewUrl,
         width: this.width,
         height: this.height
       };
+    },
+    changeBrowserPreviewType: function (event) {
+      var value = jQuery(event.target).val();
+
+      if (value === 'mobile') {
+        this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_desktop');
+        this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_mobile');
+      } else {
+        this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_desktop');
+        this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_mobile');
+      }
+
+      window.localStorage.setItem(App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey'), value);
+      this.previewType = value;
     }
   });
 

views/newsletter/editor.html

@@ -1329,7 +1329,8 @@
       sidepanelWidth: '331px',
       newsletterPreview: {
         width: '1024px',
-        height: '768px'
+        height: '768px',
+        previewTypeLocalStorageKey: 'newsletter_editor.preview_type'
       },
       validation: {
         validateUnsubscribeLinkPresent: <%= mss_active ? 'true' : 'false' %>,

views/newsletter/templates/components/newsletterPreview.hbs

@@ -1 +1,11 @@
-<iframe src="{{ previewUrl }}" width="{{ width }}" height="{{ height }}"></iframe>
+<div class="mailpoet_browser_preview_toggle">
+  <label>
+    <input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="desktop" {{#ifCond previewType '!=' 'mobile'}}CHECKED{{/ifCond}} /><%= _x('Desktop', 'Desktop browser preview mode') %>
+  </label>
+  <label>
+    <input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="mobile" {{#ifCond previewType '==' 'mobile'}}CHECKED{{/ifCond}} /><%= _x('Mobile', 'Mobile browser preview mode') %>
+  </label>
+</div>
+<div class="mailpoet_browser_preview_container {{#ifCond previewType '==' 'mobile'}}mailpoet_browser_preview_container_mobile{{else}}mailpoet_browser_preview_container_desktop{{/ifCond}}">
+  <iframe class="mailpoet_browser_preview_iframe" src="{{ previewUrl }}" width="{{ width }}" height="{{ height }}"></iframe>
+</div>