Add basic template export

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

assets/js/src/newsletter_editor/components/save.js

@@ -2,8 +2,9 @@ define([
     'newsletter_editor/App',
     'mailpoet',
     'backbone',
-    'backbone.marionette'
+    'backbone.marionette',
-  ], function(App, MailPoet, 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');
+      var templateName = this.$('.mailpoet_export_template_name').val(),
-      this.hideOptionContents();
+          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() {

views/newsletter/templates/components/save.hbs

@@ -16,4 +16,10 @@
         <p><input type="text" name="template_description" value="" placeholder="<%= __('Insert template description') %>" class="mailpoet_input mailpoet_save_as_template_description" /></p>
         <p><input type="button" name="save_as_template" value="<%= __('Save as template') %>" class="mailpoet_button mailpoet_button_full mailpoet_button_primary mailpoet_save_as_template" /></p>
     </div>
+    <div class="mailpoet_export_template_container mailpoet_hidden">
+        <p><b class="mailpoet_export_template_title"><%= __('Export template') %></b></p>
+        <p><input type="text" name="export_template_name" value="" placeholder="<%= __('Template name') %>" class="mailpoet_input mailpoet_export_template_name" /></p>
+        <p><input type="text" name="export_template_description" value="" placeholder="<%= __('Template description') %>" class="mailpoet_input mailpoet_export_template_description" /></p>
+        <p><input type="button" name="export_template" value="<%= __('Export template') %>" class="mailpoet_button mailpoet_button_full mailpoet_button_primary mailpoet_export_template" /></p>
+    </div>
 </div>