Add "View in browser" to happen on the same page, instead of opening new

window

assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js

@@ -1,7 +1,7 @@
 /**
  * Show Settings Behavior
  *
- * Adds a color picker integration with the view
+ * Opens up settings of a BlockView if contents are clicked upon
  */
 define([
     'backbone.marionette',
@@ -11,17 +11,17 @@ define([
 
   BehaviorsLookup.ShowSettingsBehavior = Marionette.Behavior.extend({
     defaults: {
-      ignoreFrom: '',
+      ignoreFrom: '', // selector
     },
     events: {
       'click .mailpoet_content': 'showSettings',
     },
     showSettings: function(event) {
-      if(!this.isIgnoredEvent(event.target)) {
+      if(!this.isIgnoredElement(event.target)) {
         this.view.triggerMethod('showSettings');
       }
     },
-    isIgnoredEvent: function(element) {
+    isIgnoredElement: function(element) {
       return this.options.ignoreFrom
         && this.options.ignoreFrom.length > 0
         && jQuery(element).is(this.options.ignoreFrom);

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

@@ -232,6 +232,12 @@ define([
       'click .mailpoet_show_preview': 'showPreview',
       'click #mailpoet_send_preview': 'sendPreview',
     },
+    onBeforeDestroy: function() {
+      if (this.previewView) {
+        this.previewView.destroy();
+        this.previewView = null;
+      }
+    },
     showPreview: function() {
       var json = App.toJSON();
 
@@ -248,12 +254,25 @@ define([
         data: json,
       }).done(function(response) {
         if (response.result === true) {
-          window.open(response.data.url, '_blank')
+          this.previewView = new Module.NewsletterPreviewView({
-          MailPoet.Notice.success(MailPoet.I18n.t('previewShouldOpenInNewTab'));
+            previewUrl: response.data.url
+          });
+
+          var view = this.previewView.render();
+
+          MailPoet.Modal.popup({
+            template: '',
+            element: this.previewView.$el,
+            title: MailPoet.I18n.t('newsletterPreview'),
+            onCancel: function() {
+              this.previewView.destroy();
+              this.previewView = null;
+            }.bind(this)
+          });
         } else {
           MailPoet.Notice.error(response.errors);
         }
-      }).fail(function(error) {
+      }.bind(this)).fail(function(error) {
         MailPoet.Notice.error(
           MailPoet.I18n.t('newsletterPreviewFailed')
         );
@@ -309,6 +328,22 @@ define([
     },
   });
 
+  Module.NewsletterPreviewView = Marionette.ItemView.extend({
+    getTemplate: function() { return templates.newsletterPreview; },
+    initialize: function(options) {
+      this.previewUrl = options.previewUrl;
+      this.width = App.getConfig().get('newsletterPreview.width');
+      this.height = App.getConfig().get('newsletterPreview.height')
+    },
+    templateHelpers: function() {
+      return {
+        previewUrl: this.previewUrl,
+        width: this.width,
+        height: this.height,
+      };
+    }
+  });
+
   App.on('before:start', function(options) {
     App.registerWidget = Module.registerWidget;
     App.getWidgets = Module.getWidgets;

views/newsletter/editor.html

@@ -197,6 +197,10 @@
     'newsletter_editor_template_styles',
     'newsletter/templates/components/styles.hbs'
   ) %>
+  <%= partial(
+    'newsletter_editor_template_newsletter_preview',
+    'newsletter/templates/components/newsletterPreview.hbs'
+  ) %>
   <%= partial(
     'newsletter_editor_template_sidebar',
     'newsletter/templates/components/sidebar/sidebar.hbs'
@@ -330,6 +334,7 @@
     'categoriesAndTags': __('Categories & tags'),
     'noPostsToDisplay': __('There is no content to display'),
     'previewShouldOpenInNewTab': __('Your preview should open in a new tab. Please ensure your browser is not blocking popups from this page.'),
+    'newsletterPreview': __('Newsletter Preview'),
   }) %>
 <% endblock %>
 
@@ -377,6 +382,9 @@
       sidebarPreview: Handlebars.compile(
         jQuery('#newsletter_editor_template_sidebar_preview').html()
       ),
+      newsletterPreview: Handlebars.compile(
+        jQuery('#newsletter_editor_template_newsletter_preview').html()
+      ),
 
       genericBlockTools: Handlebars.compile(
         jQuery('#newsletter_editor_template_tools_generic').html()
@@ -1171,6 +1179,10 @@
       },
       shortcodes: <%= json_encode(shortcodes) %>,
       sidepanelWidth: '331px',
+      newsletterPreview: {
+        width: '1024px',
+        height: '768px'
+      },
       validation: {
         validateUnsubscribeLinkPresent: true, // TODO: Add validation based on whether Mailpoet MTA is used or not
       },

views/newsletter/templates/components/newsletterPreview.hbs

@@ -0,0 +1 @@
+<iframe src="{{ previewUrl }}" width="{{ width }}" height="{{ height }}"></iframe>