diff --git a/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js b/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js index b68d9be469..086db95d47 100644 --- a/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js +++ b/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); diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js index 61db9b74e5..805b6bc55b 100644 --- a/assets/js/src/newsletter_editor/components/sidebar.js +++ b/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(); @@ -246,14 +252,27 @@ define([ endpoint: 'newsletters', action: 'showPreview', data: json, - }).done(function(response){ + }).done(function(response) { if (response.result === true) { - window.open(response.data.url, '_blank') - MailPoet.Notice.success(MailPoet.I18n.t('previewShouldOpenInNewTab')); + this.previewView = new Module.NewsletterPreviewView({ + 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; diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html index ffe3355efd..0632b17303 100644 --- a/views/newsletter/editor.html +++ b/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 }, diff --git a/views/newsletter/templates/components/newsletterPreview.hbs b/views/newsletter/templates/components/newsletterPreview.hbs new file mode 100644 index 0000000000..a5740689da --- /dev/null +++ b/views/newsletter/templates/components/newsletterPreview.hbs @@ -0,0 +1 @@ +