440 lines
15 KiB
JavaScript
440 lines
15 KiB
JavaScript
/* eslint-disable func-names */
|
|
import App from 'newsletter_editor/App';
|
|
import CommunicationComponent from 'newsletter_editor/components/communication';
|
|
import MailPoet from 'mailpoet';
|
|
import Backbone from 'backbone';
|
|
import Marionette from 'backbone.marionette';
|
|
import SuperModel from 'backbone.supermodel';
|
|
import _ from 'underscore';
|
|
import jQuery from 'jquery';
|
|
|
|
var Module = {};
|
|
var SidebarView;
|
|
// Widget handlers for use to create new content blocks via drag&drop
|
|
Module._contentWidgets = new (Backbone.Collection.extend({
|
|
model: SuperModel.extend({
|
|
defaults: {
|
|
name: '',
|
|
priority: 100,
|
|
widgetView: undefined,
|
|
},
|
|
}),
|
|
comparator: 'priority',
|
|
}))();
|
|
Module.registerWidget = function (widget) { return Module._contentWidgets.add(widget); };
|
|
Module.getWidgets = function () { return Module._contentWidgets; };
|
|
|
|
// Layout widget handlers for use to create new layout blocks via drag&drop
|
|
Module._layoutWidgets = new (Backbone.Collection.extend({
|
|
model: SuperModel.extend({
|
|
defaults: {
|
|
name: '',
|
|
priority: 100,
|
|
widgetView: undefined,
|
|
},
|
|
}),
|
|
comparator: 'priority',
|
|
}))();
|
|
Module.registerLayoutWidget = function (widget) { return Module._layoutWidgets.add(widget); };
|
|
Module.getLayoutWidgets = function () { return Module._layoutWidgets; };
|
|
|
|
SidebarView = Marionette.View.extend({
|
|
getTemplate: function () { return window.templates.sidebar; },
|
|
regions: {
|
|
contentRegion: '.mailpoet_content_region',
|
|
layoutRegion: '.mailpoet_layout_region',
|
|
stylesRegion: '.mailpoet_styles_region',
|
|
previewRegion: '.mailpoet_preview_region',
|
|
},
|
|
events: {
|
|
'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function (event) {
|
|
var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)');
|
|
var $targetRegion = this.$el.find(event.target).closest('.mailpoet_sidebar_region');
|
|
|
|
$openRegion.find('.mailpoet_region_content').velocity(
|
|
'slideUp',
|
|
{
|
|
duration: 250,
|
|
easing: 'easeOut',
|
|
complete: function () {
|
|
$openRegion.addClass('closed');
|
|
},
|
|
}
|
|
);
|
|
|
|
if ($openRegion.get(0) !== $targetRegion.get(0)) {
|
|
$targetRegion.find('.mailpoet_region_content').velocity(
|
|
'slideDown',
|
|
{
|
|
duration: 250,
|
|
easing: 'easeIn',
|
|
complete: function () {
|
|
$targetRegion.removeClass('closed');
|
|
},
|
|
}
|
|
);
|
|
}
|
|
},
|
|
},
|
|
initialize: function () {
|
|
jQuery(window)
|
|
.on('resize', this.updateHorizontalScroll.bind(this))
|
|
.on('scroll', this.updateHorizontalScroll.bind(this));
|
|
},
|
|
onRender: function () {
|
|
this.showChildView('contentRegion', new Module.SidebarWidgetsView(
|
|
App.getWidgets()
|
|
));
|
|
this.showChildView('layoutRegion', new Module.SidebarLayoutWidgetsView(
|
|
App.getLayoutWidgets()
|
|
));
|
|
this.showChildView('stylesRegion', new Module.SidebarStylesView({
|
|
model: App.getGlobalStyles(),
|
|
availableStyles: App.getAvailableStyles(),
|
|
}));
|
|
this.showChildView('previewRegion', new Module.SidebarPreviewView());
|
|
},
|
|
updateHorizontalScroll: function () {
|
|
// Fixes the sidebar so that on narrower screens the horizontal
|
|
// position of the sidebar would be scrollable and not fixed
|
|
// partially out of visible screen
|
|
this.$el.parent().each(function () {
|
|
var calculatedLeft;
|
|
var self = jQuery(this);
|
|
|
|
if (self.css('position') === 'fixed') {
|
|
calculatedLeft = self.parent().offset().left - jQuery(window).scrollLeft();
|
|
self.css('left', calculatedLeft + 'px');
|
|
} else {
|
|
self.css('left', '');
|
|
}
|
|
});
|
|
},
|
|
onDomRefresh: function () {
|
|
this.$el.parent().stick_in_parent({
|
|
offset_top: 32,
|
|
});
|
|
this.$el.parent().on('sticky_kit:stick', this.updateHorizontalScroll.bind(this));
|
|
this.$el.parent().on('sticky_kit:unstick', this.updateHorizontalScroll.bind(this));
|
|
this.$el.parent().on('sticky_kit:bottom', this.updateHorizontalScroll.bind(this));
|
|
this.$el.parent().on('sticky_kit:unbottom', this.updateHorizontalScroll.bind(this));
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Draggable widget collection view
|
|
*/
|
|
Module.SidebarWidgetsCollectionView = Marionette.CollectionView.extend({
|
|
childView: function (item) { return item.get('widgetView'); },
|
|
});
|
|
|
|
/**
|
|
* Responsible for rendering draggable content widgets
|
|
*/
|
|
Module.SidebarWidgetsView = Marionette.View.extend({
|
|
getTemplate: function () { return window.templates.sidebarContent; },
|
|
regions: {
|
|
widgets: '.mailpoet_region_content',
|
|
},
|
|
|
|
initialize: function (widgets) {
|
|
this.widgets = widgets;
|
|
},
|
|
|
|
onRender: function () {
|
|
this.showChildView('widgets', new Module.SidebarWidgetsCollectionView({
|
|
collection: this.widgets,
|
|
}));
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Responsible for rendering draggable layout widgets
|
|
*/
|
|
Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
|
|
getTemplate: function () { return window.templates.sidebarLayout; },
|
|
});
|
|
|
|
/**
|
|
* Responsible for managing global styles
|
|
*/
|
|
Module.SidebarStylesView = Marionette.View.extend({
|
|
getTemplate: function () { return window.templates.sidebarStyles; },
|
|
behaviors: {
|
|
ColorPickerBehavior: {},
|
|
},
|
|
events: function () {
|
|
return {
|
|
'change #mailpoet_text_font_color': _.partial(this.changeColorField, 'text.fontColor'),
|
|
'change #mailpoet_text_font_family': function (event) {
|
|
this.model.set('text.fontFamily', event.target.value);
|
|
},
|
|
'change #mailpoet_text_font_size': function (event) {
|
|
this.model.set('text.fontSize', event.target.value);
|
|
},
|
|
'change #mailpoet_h1_font_color': _.partial(this.changeColorField, 'h1.fontColor'),
|
|
'change #mailpoet_h1_font_family': function (event) {
|
|
this.model.set('h1.fontFamily', event.target.value);
|
|
},
|
|
'change #mailpoet_h1_font_size': function (event) {
|
|
this.model.set('h1.fontSize', event.target.value);
|
|
},
|
|
'change #mailpoet_h2_font_color': _.partial(this.changeColorField, 'h2.fontColor'),
|
|
'change #mailpoet_h2_font_family': function (event) {
|
|
this.model.set('h2.fontFamily', event.target.value);
|
|
},
|
|
'change #mailpoet_h2_font_size': function (event) {
|
|
this.model.set('h2.fontSize', event.target.value);
|
|
},
|
|
'change #mailpoet_h3_font_color': _.partial(this.changeColorField, 'h3.fontColor'),
|
|
'change #mailpoet_h3_font_family': function (event) {
|
|
this.model.set('h3.fontFamily', event.target.value);
|
|
},
|
|
'change #mailpoet_h3_font_size': function (event) {
|
|
this.model.set('h3.fontSize', event.target.value);
|
|
},
|
|
'change #mailpoet_a_font_color': _.partial(this.changeColorField, 'link.fontColor'),
|
|
'change #mailpoet_a_font_underline': function (event) {
|
|
this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
|
|
},
|
|
'change #mailpoet_text_line_height': function (event) {
|
|
this.model.set('text.lineHeight', event.target.value);
|
|
},
|
|
'change #mailpoet_heading_line_height': function (event) {
|
|
this.model.set('h1.lineHeight', event.target.value);
|
|
this.model.set('h2.lineHeight', event.target.value);
|
|
this.model.set('h3.lineHeight', event.target.value);
|
|
},
|
|
'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
|
|
'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor'),
|
|
};
|
|
},
|
|
templateContext: function () {
|
|
return {
|
|
model: this.model.toJSON(),
|
|
availableStyles: this.availableStyles.toJSON(),
|
|
};
|
|
},
|
|
initialize: function (options) {
|
|
this.availableStyles = options.availableStyles;
|
|
App.getChannel().on('historyUpdate', this.render);
|
|
},
|
|
changeField: function (field, event) {
|
|
this.model.set(field, jQuery(event.target).val());
|
|
},
|
|
changeColorField: function (field, event) {
|
|
var value = jQuery(event.target).val();
|
|
if (value === '') {
|
|
value = 'transparent';
|
|
}
|
|
this.model.set(field, value);
|
|
},
|
|
});
|
|
|
|
Module.SidebarPreviewView = Marionette.View.extend({
|
|
getTemplate: function () { return window.templates.sidebarPreview; },
|
|
events: {
|
|
'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();
|
|
|
|
// Stringify to enable transmission of primitive non-string value types
|
|
if (!_.isUndefined(json.body)) {
|
|
json.body = JSON.stringify(json.body);
|
|
}
|
|
|
|
MailPoet.Modal.loading(true);
|
|
|
|
MailPoet.Ajax.post({
|
|
api_version: window.mailpoet_api_version,
|
|
endpoint: 'newsletters',
|
|
action: 'showPreview',
|
|
data: json,
|
|
}).always(function () {
|
|
MailPoet.Modal.loading(false);
|
|
}).done(function (response) {
|
|
this.previewView = new Module.NewsletterPreviewView({
|
|
previewType: window.localStorage.getItem(App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey')),
|
|
previewUrl: response.meta.preview_url,
|
|
});
|
|
|
|
this.previewView.render();
|
|
|
|
MailPoet.Modal.popup({
|
|
template: '',
|
|
element: this.previewView.$el,
|
|
minWidth: '95%',
|
|
height: '100%',
|
|
title: MailPoet.I18n.t('newsletterPreview'),
|
|
onCancel: function () {
|
|
this.previewView.destroy();
|
|
this.previewView = null;
|
|
}.bind(this),
|
|
});
|
|
|
|
MailPoet.trackEvent('Editor > Browser Preview', {
|
|
'MailPoet Free version': window.mailpoet_version,
|
|
});
|
|
}.bind(this)).fail(function (response) {
|
|
if (response.errors.length > 0) {
|
|
MailPoet.Notice.error(
|
|
response.errors.map(function (error) { return error.message; }),
|
|
{ scroll: true }
|
|
);
|
|
}
|
|
});
|
|
},
|
|
sendPreview: function () {
|
|
// get form data
|
|
var $emailField = this.$('#mailpoet_preview_to_email');
|
|
var data = {
|
|
subscriber: $emailField.val(),
|
|
id: App.getNewsletter().get('id'),
|
|
};
|
|
|
|
if (data.subscriber.length <= 0) {
|
|
MailPoet.Notice.error(
|
|
MailPoet.I18n.t('newsletterPreviewEmailMissing'),
|
|
{
|
|
positionAfter: $emailField,
|
|
scroll: true,
|
|
}
|
|
);
|
|
return false;
|
|
}
|
|
|
|
// send test email
|
|
MailPoet.Modal.loading(true);
|
|
|
|
// save before sending
|
|
App.getChannel().request('save').always(function () {
|
|
CommunicationComponent.previewNewsletter(data).always(function () {
|
|
MailPoet.Modal.loading(false);
|
|
}).done(function () {
|
|
var showSuccessDeliveryPoll;
|
|
MailPoet.Notice.success(
|
|
MailPoet.I18n.t('newsletterPreviewSent'),
|
|
{ scroll: true }
|
|
);
|
|
MailPoet.trackEvent('Editor > Preview sent', {
|
|
'MailPoet Free version': window.mailpoet_version,
|
|
'Domain name': data.subscriber.substring(data.subscriber.indexOf('@') + 1),
|
|
});
|
|
showSuccessDeliveryPoll = MailPoet.Poll.successDelivery.canShow('preview');
|
|
if (showSuccessDeliveryPoll) {
|
|
MailPoet.Poll.successDelivery.showModal('preview', 'IHedf1');
|
|
MailPoet.Poll.successDelivery.setPollShown('preview');
|
|
}
|
|
}).fail(function (response) {
|
|
if (response.errors.length > 0) {
|
|
MailPoet.Notice.error(
|
|
response.errors.map(function (error) {
|
|
let errorMessage = `
|
|
<p>
|
|
${MailPoet.I18n.t('newsletterPreviewErrorNotice').replace('%$1s', window.config.mtaMethod)}:
|
|
<i>${error.message}</i>
|
|
</p>
|
|
`;
|
|
|
|
if (window.config.mtaMethod === 'PHPMail') {
|
|
errorMessage += `
|
|
<p>${MailPoet.I18n.t('newsletterPreviewErrorCheckConfiguration')}</p>
|
|
<br />
|
|
<p>${MailPoet.I18n.t('newsletterPreviewErrorUseSendingService')}</p>
|
|
<p>
|
|
<a
|
|
href="https://www.mailpoet.com/free-plan/?utm_source=plugin&utm_campaign=sending-error"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
${MailPoet.I18n.t('newsletterPreviewErrorSignUpForSendingService')}
|
|
</a>
|
|
</p>
|
|
`;
|
|
} else {
|
|
const checkSettingsNotice = MailPoet.I18n.t('newsletterPreviewErrorCheckSettingsNotice').replace(
|
|
/\[link\](.*?)\[\/link\]/g,
|
|
'<a href="?page=mailpoet-settings#mta" key="check-sending">$1</a>'
|
|
);
|
|
errorMessage += `<p>${checkSettingsNotice}</p>`;
|
|
}
|
|
return errorMessage;
|
|
}),
|
|
{ scroll: true, static: true }
|
|
);
|
|
}
|
|
});
|
|
});
|
|
return undefined;
|
|
},
|
|
});
|
|
|
|
Module.NewsletterPreviewView = Marionette.View.extend({
|
|
className: 'mailpoet_browser_preview_wrapper',
|
|
getTemplate: function () { return window.templates.newsletterPreview; },
|
|
events: function () {
|
|
return {
|
|
'change .mailpoet_browser_preview_type': 'changeBrowserPreviewType',
|
|
};
|
|
},
|
|
initialize: function (options) {
|
|
this.previewType = options.previewType;
|
|
this.previewUrl = options.previewUrl;
|
|
this.width = '100%';
|
|
this.height = '100%';
|
|
// this.width = App.getConfig().get('newsletterPreview.width');
|
|
// this.height = App.getConfig().get('newsletterPreview.height')
|
|
},
|
|
templateContext: function () {
|
|
return {
|
|
previewType: this.previewType,
|
|
previewUrl: this.previewUrl,
|
|
width: this.width,
|
|
height: this.height,
|
|
};
|
|
},
|
|
changeBrowserPreviewType: function (event) {
|
|
var value = jQuery(event.target).val();
|
|
|
|
if (value === 'mobile') {
|
|
this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_desktop');
|
|
this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_mobile');
|
|
} else {
|
|
this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_desktop');
|
|
this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_mobile');
|
|
}
|
|
|
|
window.localStorage.setItem(App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey'), value);
|
|
this.previewType = value;
|
|
},
|
|
});
|
|
|
|
App.on('before:start', function (BeforeStartApp) {
|
|
var Application = BeforeStartApp;
|
|
Application.registerWidget = Module.registerWidget;
|
|
Application.getWidgets = Module.getWidgets;
|
|
Application.registerLayoutWidget = Module.registerLayoutWidget;
|
|
Application.getLayoutWidgets = Module.getLayoutWidgets;
|
|
});
|
|
|
|
App.on('start', function (StartApp) {
|
|
var sidebarView = new SidebarView();
|
|
|
|
StartApp._appView.showChildView('sidebarRegion', sidebarView);
|
|
|
|
MailPoet.helpTooltip.show(document.getElementById('tooltip-send-preview'), {
|
|
tooltipId: 'tooltip-editor-send-preview',
|
|
tooltip: MailPoet.I18n.t('helpTooltipSendPreview'),
|
|
});
|
|
});
|
|
|
|
export default Module;
|