Add basic template export

This commit is contained in:
Tautvidas Sipavičius
2015-11-04 18:02:55 +02:00
parent f750d2359f
commit 983df216f3
3 changed files with 60 additions and 7 deletions

View File

@ -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

View File

@ -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() {

View File

@ -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>