From 1b0ee7e4b2c861d5b71e5dd2eb9c7e4414a9d95c Mon Sep 17 00:00:00 2001
From: wxa <wxa@users.noreply.github.com>
Date: Mon, 10 Dec 2018 14:26:41 +0300
Subject: [PATCH] Remember the desktop/mobile preview switch value
 [MAILPOET-1583]

---
 assets/js/src/newsletter_editor/components/sidebar.js       | 6 ++++++
 views/newsletter/editor.html                                | 3 ++-
 views/newsletter/templates/components/newsletterPreview.hbs | 6 +++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js
index 3e9228c0c5..7c7453d83c 100644
--- a/assets/js/src/newsletter_editor/components/sidebar.js
+++ b/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
         });
 
@@ -351,6 +352,7 @@ define([
       };
     },
     initialize: function (options) {
+      this.previewType = options.previewType;
       this.previewUrl = options.previewUrl;
       this.width = '100%';
       this.height = '100%';
@@ -359,6 +361,7 @@ define([
     },
     templateContext: function () {
       return {
+        previewType: this.previewType,
         previewUrl: this.previewUrl,
         width: this.width,
         height: this.height
@@ -374,6 +377,9 @@ define([
         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;
     }
   });
 
diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html
index c7f5fb0fa4..d67b75e7cb 100644
--- a/views/newsletter/editor.html
+++ b/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' %>,
diff --git a/views/newsletter/templates/components/newsletterPreview.hbs b/views/newsletter/templates/components/newsletterPreview.hbs
index 2aa0f426ea..cfe0214f71 100644
--- a/views/newsletter/templates/components/newsletterPreview.hbs
+++ b/views/newsletter/templates/components/newsletterPreview.hbs
@@ -1,11 +1,11 @@
 <div class="mailpoet_browser_preview_toggle">
   <label>
-    <input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="desktop" checked="checked" /><%= _x('Desktop', 'Desktop browser preview mode') %>
+    <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" /><%= _x('Mobile', 'Mobile browser preview mode') %>
+    <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 mailpoet_browser_preview_container_desktop">
+<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>
\ No newline at end of file