113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
import App from 'newsletter_editor/App';
|
|
import Marionette from 'backbone.marionette';
|
|
import SuperModel from 'backbone.supermodel';
|
|
import _ from 'underscore'; // eslint-disable-line func-names
|
|
import jQuery from 'jquery';
|
|
|
|
var Module = {};
|
|
|
|
Module.StylesModel = SuperModel.extend({
|
|
defaults: {
|
|
text: {
|
|
fontColor: '#000000',
|
|
fontFamily: 'Arial',
|
|
fontSize: '16px',
|
|
lineHeight: '1.6',
|
|
},
|
|
h1: {
|
|
fontColor: '#111111',
|
|
fontFamily: 'Arial',
|
|
fontSize: '40px',
|
|
lineHeight: '1.6',
|
|
},
|
|
h2: {
|
|
fontColor: '#222222',
|
|
fontFamily: 'Tahoma',
|
|
fontSize: '32px',
|
|
lineHeight: '1.6',
|
|
},
|
|
h3: {
|
|
fontColor: '#333333',
|
|
fontFamily: 'Verdana',
|
|
fontSize: '24px',
|
|
lineHeight: '1.6',
|
|
},
|
|
link: {
|
|
fontColor: '#21759B',
|
|
textDecoration: 'underline',
|
|
},
|
|
wrapper: {
|
|
backgroundColor: '#ffffff',
|
|
},
|
|
body: {
|
|
backgroundColor: '#cccccc',
|
|
},
|
|
},
|
|
initialize: function (data) { // eslint-disable-line func-names
|
|
// apply model defaults recursively (not only on top level)
|
|
this.set(jQuery.extend(true, {}, this.defaults, data));
|
|
this.on('change', function () { App.getChannel().trigger('autoSave'); }); // eslint-disable-line func-names
|
|
App.getChannel().on('historyUpdate', this.onHistoryUpdate, this);
|
|
},
|
|
|
|
onHistoryUpdate: function onHistoryUpdate(json) {
|
|
this.set(json.globalStyles);
|
|
},
|
|
});
|
|
|
|
Module.StylesView = Marionette.View.extend({
|
|
getTemplate: function () { return window.templates.styles; }, // eslint-disable-line func-names
|
|
templateContext: function () { // eslint-disable-line func-names
|
|
return {
|
|
isWoocommerceTransactional: this.isWoocommerceTransactional,
|
|
};
|
|
},
|
|
modelEvents: {
|
|
change: 'render',
|
|
},
|
|
serializeData: function () { // eslint-disable-line func-names
|
|
return this.model.toJSON();
|
|
},
|
|
initialize: function (options) { // eslint-disable-line func-names
|
|
this.isWoocommerceTransactional = options.isWoocommerceTransactional;
|
|
},
|
|
});
|
|
|
|
Module._globalStyles = new SuperModel();
|
|
Module.getGlobalStyles = function () { // eslint-disable-line func-names
|
|
return Module._globalStyles;
|
|
};
|
|
Module.setGlobalStyles = function (options) { // eslint-disable-line func-names
|
|
Module._globalStyles = new Module.StylesModel(options);
|
|
return Module._globalStyles;
|
|
};
|
|
Module.getAvailableStyles = function () { // eslint-disable-line func-names
|
|
return App.getConfig().get('availableStyles');
|
|
};
|
|
|
|
App.on('before:start', function (BeforeStartApp, options) { // eslint-disable-line func-names
|
|
var Application = BeforeStartApp;
|
|
var body;
|
|
var globalStyles;
|
|
var overriddenGlobalStyles;
|
|
// Expose style methods to global application
|
|
Application.getGlobalStyles = Module.getGlobalStyles;
|
|
Application.setGlobalStyles = Module.setGlobalStyles;
|
|
Application.getAvailableStyles = Module.getAvailableStyles;
|
|
|
|
body = options.newsletter.body;
|
|
globalStyles = (_.has(body, 'globalStyles')) ? body.globalStyles : {};
|
|
overriddenGlobalStyles = (_.has(options.config, 'overrideGlobalStyles')) ? options.config.overrideGlobalStyles : {};
|
|
this.setGlobalStyles(jQuery.extend(true, {}, globalStyles, overriddenGlobalStyles));
|
|
});
|
|
|
|
App.on('start', function (StartApp) { // eslint-disable-line func-names
|
|
var stylesView = new Module.StylesView({
|
|
model: StartApp.getGlobalStyles(),
|
|
isWoocommerceTransactional: App.getNewsletter().isWoocommerceTransactional(),
|
|
});
|
|
StartApp._appView.showChildView('stylesRegion', stylesView);
|
|
});
|
|
|
|
export default Module;
|