diff --git a/assets/css/src/newsletter_editor/components/save.styl b/assets/css/src/newsletter_editor/components/save.styl index c82914da54..742b128937 100644 --- a/assets/css/src/newsletter_editor/components/save.styl +++ b/assets/css/src/newsletter_editor/components/save.styl @@ -45,7 +45,8 @@ &::before content: '\f140' -.mailpoet_save_as_template_container +.mailpoet_save_as_template_container, +.mailpoet_export_template_container border-radius(3px) float: left clear: both @@ -55,7 +56,8 @@ background-color: $white-color border: 1px solid $structure-border-color -.mailpoet_save_as_template_title +.mailpoet_save_as_template_title, +.mailpoet_export_template_title font-size: 1.1em .mailpoet_editor_last_saved diff --git a/assets/js/src/newsletter_editor/components/save.js b/assets/js/src/newsletter_editor/components/save.js index 03d9e39cc8..d6365db08c 100644 --- a/assets/js/src/newsletter_editor/components/save.js +++ b/assets/js/src/newsletter_editor/components/save.js @@ -2,8 +2,9 @@ define([ 'newsletter_editor/App', 'mailpoet', 'backbone', - 'backbone.marionette' - ], function(App, MailPoet, Backbone, Marionette) { + 'backbone.marionette', + 'jquery' + ], function(App, MailPoet, Backbone, Marionette, jQuery) { "use strict"; @@ -52,6 +53,34 @@ define([ }); }; + Module.exportTemplate = function(options) { + if (!window.Blob || !window.URL) { + // TODO: Gracefully exit on incompatible browsers + console.log('Template export requires a browser with Blob and URL support.'); + return; + } + + var data = _.extend(options || {}, { + body: App.getBody(), + }); + + // Create a template file and force download it + + var blob = new window.Blob([JSON.stringify(data)], { type: 'application/json' }), + url = window.URL.createObjectURL(blob), + anchor = document.createElement('a'); + + anchor.href = url; + anchor.download = 'template.json'; + anchor.style.display = 'none'; + document.body.appendChild(anchor); + + anchor.click(); + + window.URL.revokeObjectURL(url); + document.body.removeChild(anchor); + }; + Module.SaveView = Marionette.LayoutView.extend({ getTemplate: function() { return templates.save; }, events: { @@ -62,7 +91,8 @@ define([ 'click .mailpoet_save_template': 'toggleSaveAsTemplate', 'click .mailpoet_save_as_template': 'saveAsTemplate', /* Export template */ - 'click .mailpoet_save_export': 'exportTemplate', + 'click .mailpoet_save_export': 'toggleExportTemplate', + 'click .mailpoet_export_template': 'exportTemplate', }, initialize: function(options) { App.getChannel().on('beforeEditorSave', this.beforeSave, this); @@ -117,12 +147,27 @@ define([ this.hideOptionContents(); }, + toggleExportTemplate: function() { + this.$('.mailpoet_export_template_container').toggleClass('mailpoet_hidden'); + this.toggleSaveOptions(); + }, + hideExportTemplate: function() { + this.$('.mailpoet_export_template_container').addClass('mailpoet_hidden'); + }, exportTemplate: function() { - console.log('Exporting template'); - this.hideOptionContents(); + var templateName = this.$('.mailpoet_export_template_name').val(), + templateDescription = this.$('.mailpoet_export_template_description').val(); + + console.log('Exporting template with ', templateName, templateDescription); + Module.exportTemplate({ + name: templateName, + description: templateDescription, + }); + this.hideExportTemplate(); }, hideOptionContents: function() { this.hideSaveAsTemplate(); + this.hideExportTemplate(); this.$('.mailpoet_save_options').addClass('mailpoet_hidden'); }, next: function() { diff --git a/views/newsletter/templates/components/save.hbs b/views/newsletter/templates/components/save.hbs index 9923ba303c..7ef8b9f576 100644 --- a/views/newsletter/templates/components/save.hbs +++ b/views/newsletter/templates/components/save.hbs @@ -16,4 +16,10 @@
+<%= __('Export template') %>
+ + + +