375 lines
11 KiB
JavaScript
375 lines
11 KiB
JavaScript
define([
|
|
'newsletter_editor/App',
|
|
'newsletter_editor/components/communication',
|
|
'mailpoet',
|
|
'notice',
|
|
'backbone',
|
|
'backbone.marionette',
|
|
'jquery',
|
|
'blob',
|
|
'file-saver',
|
|
'html2canvas',
|
|
'underscore',
|
|
'jquery'
|
|
], function (
|
|
App,
|
|
CommunicationComponent,
|
|
MailPoet,
|
|
Notice,
|
|
Backbone,
|
|
Marionette,
|
|
jQuery,
|
|
Blob,
|
|
FileSaver,
|
|
html2canvas,
|
|
_,
|
|
$
|
|
) {
|
|
|
|
'use strict';
|
|
|
|
var Module = {};
|
|
var saveTimeout;
|
|
|
|
// Save editor contents to server
|
|
Module.save = function () {
|
|
|
|
var json = App.toJSON();
|
|
|
|
// Stringify to enable transmission of primitive non-string value types
|
|
if (!_.isUndefined(json.body)) {
|
|
json.body = JSON.stringify(json.body);
|
|
}
|
|
|
|
App.getChannel().trigger('beforeEditorSave', json);
|
|
|
|
// save newsletter
|
|
return CommunicationComponent.saveNewsletter(json).done(function (response) {
|
|
if (response.success !== undefined && response.success === true) {
|
|
// TODO: Handle translations
|
|
// MailPoet.Notice.success("<?php _e('Newsletter has been saved.'); ?>");
|
|
} else if (response.error !== undefined) {
|
|
if (response.error.length === 0) {
|
|
MailPoet.Notice.error(
|
|
MailPoet.I18n.t('templateSaveFailed'),
|
|
{
|
|
scroll: true
|
|
}
|
|
);
|
|
} else {
|
|
$(response.error).each(function (i, error) {
|
|
MailPoet.Notice.error(error, { scroll: true });
|
|
});
|
|
}
|
|
}
|
|
App.getChannel().trigger('afterEditorSave', json, response);
|
|
}).fail(function (response) {
|
|
// TODO: Handle saving errors
|
|
App.getChannel().trigger('afterEditorSave', {}, response);
|
|
});
|
|
};
|
|
|
|
Module.getThumbnail = function (element, options) {
|
|
var promise = html2canvas(element, options || {});
|
|
|
|
return promise.then(function (oldCanvas) {
|
|
// Temporary workaround for html2canvas-alpha2.
|
|
// Removes 1px left transparent border from resulting canvas.
|
|
|
|
var oldContext = oldCanvas.getContext('2d');
|
|
var newCanvas = document.createElement('canvas');
|
|
var newContext = newCanvas.getContext('2d');
|
|
var leftBorderWidth = 1;
|
|
|
|
newCanvas.width = oldCanvas.width;
|
|
newCanvas.height = oldCanvas.height;
|
|
|
|
newContext.drawImage(
|
|
oldCanvas,
|
|
leftBorderWidth, 0, oldCanvas.width - leftBorderWidth, oldCanvas.height,
|
|
0, 0, oldCanvas.width, oldCanvas.height
|
|
);
|
|
|
|
return newCanvas;
|
|
});
|
|
};
|
|
|
|
Module.saveTemplate = function(options) {
|
|
var that = this;
|
|
var promise = jQuery.Deferred();
|
|
|
|
promise.then(function (thumbnail) {
|
|
var data = _.extend(options || {}, {
|
|
thumbnail: thumbnail.toDataURL('image/jpeg'),
|
|
body: JSON.stringify(App.getBody())
|
|
});
|
|
|
|
return MailPoet.Ajax.post({
|
|
api_version: window.mailpoet_api_version,
|
|
endpoint: 'newsletterTemplates',
|
|
action: 'save',
|
|
data: data
|
|
});
|
|
});
|
|
|
|
Module.getThumbnail(
|
|
jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
|
|
).then(function (thumbnail) {
|
|
promise.resolve(thumbnail);
|
|
});
|
|
|
|
return promise;
|
|
};
|
|
|
|
Module.exportTemplate = function (options) {
|
|
var that = this;
|
|
return Module.getThumbnail(
|
|
jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
|
|
).then(function (thumbnail) {
|
|
var data = _.extend(options || {}, {
|
|
thumbnail: thumbnail.toDataURL('image/jpeg'),
|
|
body: App.getBody()
|
|
});
|
|
var blob = new Blob(
|
|
[JSON.stringify(data)],
|
|
{ type: 'application/json;charset=utf-8' }
|
|
);
|
|
|
|
FileSaver.saveAs(blob, 'template.json');
|
|
MailPoet.trackEvent('Editor > Template exported', {
|
|
'MailPoet Free version': window.mailpoet_version
|
|
});
|
|
});
|
|
};
|
|
|
|
Module.SaveView = Marionette.View.extend({
|
|
getTemplate: function () { return window.templates.save; },
|
|
events: {
|
|
'click .mailpoet_save_button': 'save',
|
|
'click .mailpoet_save_show_options': 'toggleSaveOptions',
|
|
'click .mailpoet_save_next': 'next',
|
|
/* Save as template */
|
|
'click .mailpoet_save_template': 'toggleSaveAsTemplate',
|
|
'click .mailpoet_save_as_template': 'saveAsTemplate',
|
|
/* Export template */
|
|
'click .mailpoet_save_export': 'toggleExportTemplate',
|
|
'click .mailpoet_export_template': 'exportTemplate'
|
|
},
|
|
initialize: function (options) {
|
|
App.getChannel().on('beforeEditorSave', this.beforeSave, this);
|
|
App.getChannel().on('afterEditorSave', this.afterSave, this);
|
|
},
|
|
onRender: function () {
|
|
this.validateNewsletter(App.toJSON());
|
|
},
|
|
save: function () {
|
|
this.hideOptionContents();
|
|
App.getChannel().request('save');
|
|
},
|
|
beforeSave: function () {
|
|
// TODO: Add a loading animation instead
|
|
this.$('.mailpoet_autosaved_at').text(MailPoet.I18n.t('saving'));
|
|
},
|
|
afterSave: function (json, response) {
|
|
this.validateNewsletter(json);
|
|
// Update 'Last saved timer'
|
|
this.$('.mailpoet_editor_last_saved').removeClass('mailpoet_hidden');
|
|
this.$('.mailpoet_autosaved_at').text('');
|
|
},
|
|
toggleSaveOptions: function () {
|
|
this.$('.mailpoet_save_options').toggleClass('mailpoet_hidden');
|
|
this.$('.mailpoet_save_show_options').toggleClass('mailpoet_save_show_options_active');
|
|
},
|
|
toggleSaveAsTemplate: function () {
|
|
this.$('.mailpoet_save_as_template_container').toggleClass('mailpoet_hidden');
|
|
this.toggleSaveOptions();
|
|
},
|
|
showSaveAsTemplate: function () {
|
|
this.$('.mailpoet_save_as_template_container').removeClass('mailpoet_hidden');
|
|
this.toggleSaveOptions();
|
|
},
|
|
hideSaveAsTemplate: function () {
|
|
this.$('.mailpoet_save_as_template_container').addClass('mailpoet_hidden');
|
|
},
|
|
saveAsTemplate: function() {
|
|
var templateName = this.$('.mailpoet_save_as_template_name').val();
|
|
var templateDescription = this.$('.mailpoet_save_as_template_description').val();
|
|
var that = this;
|
|
|
|
if (templateName === '') {
|
|
MailPoet.Notice.error(
|
|
MailPoet.I18n.t('templateNameMissing'),
|
|
{
|
|
positionAfter: that.$el,
|
|
scroll: true
|
|
}
|
|
);
|
|
} else if (templateDescription === '') {
|
|
MailPoet.Notice.error(
|
|
MailPoet.I18n.t('templateDescriptionMissing'),
|
|
{
|
|
positionAfter: that.$el,
|
|
scroll: true
|
|
}
|
|
);
|
|
} else {
|
|
Module.saveTemplate({
|
|
name: templateName,
|
|
description: templateDescription
|
|
}).done(function () {
|
|
MailPoet.Notice.success(
|
|
MailPoet.I18n.t('templateSaved'),
|
|
{
|
|
positionAfter: that.$el,
|
|
scroll: true
|
|
}
|
|
);
|
|
MailPoet.trackEvent('Editor > Template saved', {
|
|
'MailPoet Free version': window.mailpoet_version
|
|
});
|
|
}).fail(function () {
|
|
MailPoet.Notice.error(
|
|
MailPoet.I18n.t('templateSaveFailed'),
|
|
{
|
|
positionAfter: that.$el,
|
|
scroll: true
|
|
}
|
|
);
|
|
});
|
|
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() {
|
|
var templateName = this.$('.mailpoet_export_template_name').val();
|
|
var templateDescription = this.$('.mailpoet_export_template_description').val();
|
|
var that = this;
|
|
|
|
if (templateName === '') {
|
|
MailPoet.Notice.error(
|
|
MailPoet.I18n.t('templateNameMissing'),
|
|
{
|
|
positionAfter: that.$el,
|
|
scroll: true
|
|
}
|
|
);
|
|
} else if (templateDescription === '') {
|
|
MailPoet.Notice.error(
|
|
MailPoet.I18n.t('templateDescriptionMissing'),
|
|
{
|
|
positionAfter: that.$el,
|
|
scroll: true
|
|
}
|
|
);
|
|
} else {
|
|
Module.exportTemplate({
|
|
name: templateName,
|
|
description: templateDescription
|
|
});
|
|
this.hideExportTemplate();
|
|
}
|
|
},
|
|
hideOptionContents: function () {
|
|
this.hideSaveAsTemplate();
|
|
this.hideExportTemplate();
|
|
this.$('.mailpoet_save_options').addClass('mailpoet_hidden');
|
|
},
|
|
next: function () {
|
|
this.hideOptionContents();
|
|
if (!this.$('.mailpoet_save_next').hasClass('button-disabled')) {
|
|
Module._cancelAutosave();
|
|
Module.save().done(function (response) {
|
|
window.location.href = App.getConfig().get('urls.send');
|
|
});
|
|
}
|
|
},
|
|
validateNewsletter: function(jsonObject) {
|
|
var contents;
|
|
if (!App._contentContainer.isValid()) {
|
|
this.showValidationError(App._contentContainer.validationError);
|
|
return;
|
|
}
|
|
|
|
contents = JSON.stringify(jsonObject);
|
|
if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
|
|
contents.indexOf('[link:subscription_unsubscribe_url]') < 0 &&
|
|
contents.indexOf('[link:subscription_unsubscribe]') < 0) {
|
|
this.showValidationError(MailPoet.I18n.t('unsubscribeLinkMissing'));
|
|
return;
|
|
}
|
|
|
|
this.hideValidationError();
|
|
},
|
|
showValidationError: function (message) {
|
|
var $el = this.$('.mailpoet_save_error');
|
|
$el.text(message);
|
|
$el.removeClass('mailpoet_hidden');
|
|
|
|
this.$('.mailpoet_save_next').addClass('button-disabled');
|
|
},
|
|
hideValidationError: function () {
|
|
this.$('.mailpoet_save_error').addClass('mailpoet_hidden');
|
|
this.$('.mailpoet_save_next').removeClass('button-disabled');
|
|
}
|
|
});
|
|
|
|
Module.autoSave = function () {
|
|
// Delay in saving editor contents, during which a new autosave
|
|
// may be requested
|
|
var AUTOSAVE_DELAY_DURATION = 1000;
|
|
|
|
Module._cancelAutosave();
|
|
saveTimeout = setTimeout(function () {
|
|
App.getChannel().request('save').always(function () {
|
|
Module._cancelAutosave();
|
|
});
|
|
}, AUTOSAVE_DELAY_DURATION);
|
|
};
|
|
|
|
Module._cancelAutosave = function () {
|
|
if (!saveTimeout) return;
|
|
|
|
clearTimeout(saveTimeout);
|
|
saveTimeout = undefined;
|
|
};
|
|
|
|
Module.beforeExitWithUnsavedChanges = function(e) {
|
|
var message;
|
|
var event;
|
|
if (saveTimeout) {
|
|
message = MailPoet.I18n.t('unsavedChangesWillBeLost');
|
|
event = e || window.event;
|
|
|
|
if (event) {
|
|
event.returnValue = message;
|
|
}
|
|
|
|
return message;
|
|
}
|
|
};
|
|
|
|
App.on('before:start', function (App, options) {
|
|
var Application = App;
|
|
Application.save = Module.save;
|
|
Application.getChannel().on('autoSave', Module.autoSave);
|
|
|
|
window.onbeforeunload = Module.beforeExitWithUnsavedChanges;
|
|
|
|
Application.getChannel().reply('save', Application.save);
|
|
});
|
|
|
|
App.on('start', function (App, options) {
|
|
var saveView = new Module.SaveView();
|
|
App._appView.showChildView('bottomRegion', saveView);
|
|
});
|
|
|
|
return Module;
|
|
});
|