Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Partially migrate newsletter editor to Marionette 3.x from 2.x

Browse Source
This commit is contained in:
Tautvidas Sipavičius
2017-03-27 12:06:00 +03:00
parent 4f5c464659
commit 0b8c787cda
25 changed files with 261 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
assets/js/src/newsletter_editor/App.js
View File

@ -1,21 +1,14 @@
define([
'backbone',
'backbone.marionette',
'backbone.radio',
'jquery',
'underscore',
'handlebars',
'handlebars_helpers'
], function(Backbone, Marionette, jQuery, _, Handlebars) {
], function(Backbone, Marionette, Radio, jQuery, _, Handlebars) {
var app = new Marionette.Application(), AppView;
// Decoupled communication between application components
app.getChannel = function(channel) {
if (channel === undefined) return app.channel;
return Radio.channel(channel);
};
AppView = Marionette.LayoutView.extend({
var AppView = Marionette.View.extend({
el: '#mailpoet_editor',
regions: {
stylesRegion: '#mailpoet_editor_styles',
@ -26,10 +19,23 @@ define([
},
});
app.on('start', function(options) {
app._appView = new AppView();
var EditorApplication = Marionette.Application.extend({
region: '#mailpoet_editor',
onStart: function() {
this._appView = new AppView();
this.showView(this._appView);
},
getChannel: function(channel) {
if (channel === undefined) channel = 'global';
return Radio.channel(channel);
}
});
var app = new EditorApplication();
window.EditorApplication = app;
return app;
});

6
assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
View File

@ -151,8 +151,8 @@ define([
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
};
this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.postsRegion.show(new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
this.showChildView('toolsRegion', this.toolsView);
this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
},
});
@ -189,7 +189,7 @@ define([
"click .mailpoet_done_editing": "close",
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
};

26
assets/js/src/newsletter_editor/blocks/base.js
View File

@ -17,7 +17,7 @@ define([
"use strict";
var Module = {},
AugmentedView = Marionette.LayoutView.extend({});
AugmentedView = Marionette.View.extend({});
Module.BlockModel = SuperModel.extend({
stale: [], // Attributes to be removed upon saving
@ -82,7 +82,7 @@ define([
},
HighlightEditingBehavior: {},
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
@ -94,8 +94,8 @@ define([
},
initialize: function() {
this.on('showSettings', this.showSettings, this);
this.on('dom:refresh', this.showBlock, this);
this._isFirstRender = true;
//this.on('dom:refresh', this.showBlock, this);
//this._isFirstRender = true;
},
showTools: function(_event) {
if (!this.showingToolsDisabled) {
@ -125,12 +125,12 @@ define([
return this.model.clone();
}.bind(this);
},
showBlock: function() {
if (this._isFirstRender) {
this.transitionIn();
this._isFirstRender = false;
}
},
//showBlock: function() {
//if (this._isFirstRender) {
//this.transitionIn();
//this._isFirstRender = false;
//}
//},
deleteBlock: function() {
this.transitionOut().then(function() {
this.model.destroy();
@ -193,7 +193,7 @@ define([
this.on('hideTools', this.hideDeletionConfirmation, this);
this.on('showSettings', this.changeSettings);
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
@ -217,7 +217,7 @@ define([
},
});
Module.BlockSettingsView = Marionette.LayoutView.extend({
Module.BlockSettingsView = Marionette.View.extend({
className: 'mailpoet_editor_settings',
behaviors: {
ColorPickerBehavior: {},
@ -271,7 +271,7 @@ define([
},
});
Module.WidgetView = Marionette.ItemView.extend({
Module.WidgetView = Marionette.View.extend({
className: 'mailpoet_widget mailpoet_droppable_block mailpoet_droppable_widget',
behaviors: {
DraggableBehavior: {

4
assets/js/src/newsletter_editor/blocks/button.js
View File

@ -56,7 +56,7 @@ define([
},
onRender: function() {
this.toolsView = new Module.ButtonBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.showChildView('toolsRegion', this.toolsView);
},
});
@ -98,7 +98,7 @@ define([
"click .mailpoet_done_editing": "close",
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),

112
assets/js/src/newsletter_editor/blocks/container.js
View File

@ -74,13 +74,37 @@ define([
},
});
Module.ContainerBlockView = Marionette.CompositeView.extend({
regionClass: Marionette.Region,
Module.ContainerBlocksView = Marionette.CollectionView.extend({
className: 'mailpoet_container',
childView: function(model) {
return App.getBlockTypeView(model.get('type'));
},
childViewOptions: function() {
var newRenderOptions = _.clone(this.renderOptions);
if (newRenderOptions.depth !== undefined) {
newRenderOptions.depth += 1;
}
return {
renderOptions: newRenderOptions
};
},
emptyView: Module.ContainerBlockEmptyView,
emptyViewOptions: function() { return { renderOptions: this.renderOptions }; },
initialize: function(options) {
this.renderOptions = options.renderOptions;
}
});
Module.ContainerBlockView = Marionette.View.extend({
regions: {
blocks: {
el: '> .mailpoet_container',
replaceElement: true
},
toolsRegion: '> .mailpoet_tools',
},
className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
getTemplate: function() { return templates.containerBlock; },
childViewContainer: '> .mailpoet_container',
getEmptyView: function() { return Module.ContainerBlockEmptyView; },
emptyViewOptions: function() { return { renderOptions: this.renderOptions }; },
modelEvents: {
'change': 'render',
'delete': 'deleteBlock',
@ -90,9 +114,6 @@ define([
"mouseleave": "hideTools",
"click .mailpoet_newsletter_layer_selector": "toggleEditingLayer",
},
regions: {
toolsRegion: '> .mailpoet_tools',
},
ui: {
tools: '> .mailpoet_tools'
},
@ -137,39 +158,18 @@ define([
return Module.OneColumnContainerWidgetView;
},
constructor: function() {
// Set the block collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('blocks');
Marionette.CompositeView.apply(this, arguments);
this.$el.addClass('mailpoet_editor_view_' + this.cid);
},
initialize: function(options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {});
this.on('dom:refresh', this.showBlock, this);
this._isFirstRender = true;
},
// Determines which view type should be used for a child
getChildView: function(model) {
// TODO: If type does not have a type registered, use a generic one
return App.getBlockTypeView(model.get('type'));
},
childViewOptions: function() {
var newRenderOptions = _.clone(this.renderOptions);
if (newRenderOptions.depth !== undefined) {
newRenderOptions.depth += 1;
}
return {
renderOptions: newRenderOptions
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
onRender: function() {
this._rebuildRegions();
this.$el.addClass('mailpoet_editor_view_' + this.cid);
this.toolsView = new Module.ContainerBlockToolsView({
model: this.model,
tools: {
@ -179,10 +179,15 @@ define([
layerSelector: false,
},
});
this.toolsRegion.show(this.toolsView);
},
onBeforeDestroy: function() {
this.regionManager.destroy();
this.showChildView('toolsRegion', this.toolsView);
this.showChildView('blocks', new Module.ContainerBlocksView({
collection: this.model.get('blocks'),
renderOptions: this.renderOptions
}));
// TODO: Look for a better way to do this than here
// Sets child container orientation HTML class here, as child CollectionView won't have access to model and will overwrite existing region element instead
this.$('> .mailpoet_container').attr('class', 'mailpoet_container mailpoet_container_' + this.model.get('orientation'));
},
showTools: function() {
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
@ -222,34 +227,11 @@ define([
}
event.stopPropagation();
},
_buildRegions: function(regions) {
var that = this;
var defaults = {
regionClass: this.getOption('regionClass'),
parentEl: function() { return that.$el; }
};
return this.regionManager.addRegions(regions, defaults);
},
_rebuildRegions: function() {
if (this.regionManager === undefined) {
this.regionManager = new Marionette.RegionManager();
}
this.regionManager.destroy();
_.extend(this, this._buildRegions(this.regions));
},
getDropFunc: function() {
return function() {
return this.model.clone();
}.bind(this);
},
showBlock: function() {
if (this._isFirstRender) {
this.transitionIn();
this._isFirstRender = false;
}
},
deleteBlock: function() {
this.transitionOut().done(function() {
this.model.destroy();
@ -286,12 +268,12 @@ define([
},
});
Module.ContainerBlockEmptyView = Marionette.ItemView.extend({
Module.ContainerBlockEmptyView = Marionette.View.extend({
getTemplate: function() { return templates.containerEmpty; },
initialize: function(options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {});
},
templateHelpers: function() {
templateContext: function() {
return {
isRoot: this.renderOptions.depth === 0,
emptyContainerMessage: this.renderOptions.emptyContainerMessage || '',
@ -322,12 +304,12 @@ define([
});
},
onRender: function() {
this.columnsSettingsRegion.show(this._columnsSettingsView);
this.showChildView('columnsSettingsRegion', this._columnsSettingsView);
},
});
Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
getChildView: function() { return Module.ContainerBlockColumnSettingsView; },
childView: function() { return Module.ContainerBlockColumnSettingsView; },
childViewOptions: function(model, index) {
return {
columnIndex: index,
@ -335,12 +317,12 @@ define([
},
});
Module.ContainerBlockColumnSettingsView = Marionette.ItemView.extend({
Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
getTemplate: function() { return templates.containerBlockColumnSettings; },
initialize: function(options) {
this.columnNumber = (options.columnIndex || 0) + 1;
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
columnNumber: this.columnNumber,

8
assets/js/src/newsletter_editor/blocks/divider.js
View File

@ -59,14 +59,14 @@ define([
this.listenTo(this.model, 'change:src change:styles.block.backgroundColor change:styles.block.borderStyle change:styles.block.borderWidth change:styles.block.borderColor applyToAll', this.render);
this.listenTo(this.model, 'change:styles.block.padding', this.changePadding);
},
templateHelpers: function() {
templateContext: function() {
return _.extend({
totalHeight: parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px',
}, base.BlockView.prototype.templateHelpers.apply(this));
}, base.BlockView.prototype.templateContext.apply(this));
},
onRender: function() {
this.toolsView = new Module.DividerBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.showChildView('toolsRegion', this.toolsView);
},
onBeforeDestroy: function() {
App.getChannel().off('replaceAllDividers', this._replaceDividerHandler);
@ -104,7 +104,7 @@ define([
'change:styles.block.borderColor': 'repaintDividerStyleOptions',
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),

4
assets/js/src/newsletter_editor/blocks/footer.js
View File

@ -55,7 +55,7 @@ define([
onDragSubstituteBy: function() { return Module.FooterWidgetView; },
onRender: function() {
this.toolsView = new Module.FooterBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.showChildView('toolsRegion', this.toolsView);
},
onTextEditorChange: function(newContent) {
this.model.set('text', newContent);
@ -96,7 +96,7 @@ define([
"click .mailpoet_done_editing": "close",
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),

4
assets/js/src/newsletter_editor/blocks/header.js
View File

@ -55,7 +55,7 @@ define([
onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
onRender: function() {
this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.showChildView('toolsRegion', this.toolsView);
},
onTextEditorChange: function(newContent) {
this.model.set('text', newContent);
@ -96,7 +96,7 @@ define([
"click .mailpoet_done_editing": "close",
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
availableStyles: App.getAvailableStyles().toJSON(),

6
assets/js/src/newsletter_editor/blocks/image.js
View File

@ -36,17 +36,17 @@ define([
className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
getTemplate: function() { return templates.imageBlock; },
onDragSubstituteBy: function() { return Module.ImageWidgetView; },
templateHelpers: function() {
templateContext: function() {
return _.extend({
imageMissingSrc: App.getConfig().get('urls.imageMissing'),
}, base.BlockView.prototype.templateHelpers.apply(this));
}, base.BlockView.prototype.templateContext.apply(this));
},
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
ShowSettingsBehavior: {},
}),
onRender: function() {
this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.showChildView('toolsRegion', this.toolsView);
if (this.model.get('fullWidth')) {
this.$el.addClass('mailpoet_full_image');

16
assets/js/src/newsletter_editor/blocks/posts.js
View File

@ -166,8 +166,8 @@ define([
this.model.reply('blockView', this.notifyAboutSelf, this);
},
onRender: function() {
if (!this.toolsRegion.hasView()) {
this.toolsRegion.show(this.toolsView);
if (!this.getRegion('toolsRegion').hasView()) {
this.showChildView('toolsRegion', this.toolsView);
}
this.trigger('showSettings');
@ -177,7 +177,7 @@ define([
disableDragAndDrop: true,
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
};
this.postsRegion.show(new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
},
notifyAboutSelf: function() {
return this;
@ -202,7 +202,7 @@ define([
'click .mailpoet_settings_posts_show_post_selection': 'switchToPostSelection',
'click .mailpoet_settings_posts_insert_selected': 'insertPosts',
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
};
@ -372,18 +372,18 @@ define([
},
});
var EmptyPostSelectionSettingsView = Marionette.ItemView.extend({
var EmptyPostSelectionSettingsView = Marionette.View.extend({
getTemplate: function() { return templates.emptyPostPostsBlockSettings; },
});
var SinglePostSelectionSettingsView = Marionette.ItemView.extend({
var SinglePostSelectionSettingsView = Marionette.View.extend({
getTemplate: function() { return templates.singlePostPostsBlockSettings; },
events: function() {
return {
'change .mailpoet_select_post_checkbox': 'postSelectionChange',
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
index: this._index,
@ -428,7 +428,7 @@ define([
"change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
};

132
assets/js/src/newsletter_editor/blocks/social.js
View File

@ -17,6 +17,7 @@ define([
base = BaseBlock,
SocialBlockSettingsIconSelectorView,
SocialBlockSettingsIconView,
SocialBlockSettingsIconCollectionView,
SocialBlockSettingsStylesView;
Module.SocialIconModel = SuperModel.extend({
@ -82,13 +83,13 @@ define([
},
});
var SocialIconView = Marionette.ItemView.extend({
var SocialIconView = Marionette.View.extend({
tagName: 'span',
getTemplate: function() { return templates.socialIconBlock; },
modelEvents: {
'change': 'render',
},
templateHelpers: function() {
templateContext: function() {
var allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
model: this.model.toJSON(),
@ -98,11 +99,13 @@ define([
},
});
Module.SocialBlockView = Marionette.CompositeView.extend({
regionClass: Marionette.Region,
Module.SocialIconCollectionView = Marionette.CollectionView.extend({
childView: SocialIconView,
});
Module.SocialBlockView = Marionette.View.extend({
className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
getTemplate: function() { return templates.socialBlock; },
childViewContainer: '.mailpoet_social',
modelEvents: {
'change': 'render',
'delete': 'deleteBlock',
@ -113,6 +116,7 @@ define([
},
regions: {
toolsRegion: '> .mailpoet_tools',
icons: '.mailpoet_social'
},
ui: {
tools: '> .mailpoet_tools'
@ -144,32 +148,35 @@ define([
ShowSettingsBehavior: {},
},
onDragSubstituteBy: function() { return Module.SocialWidgetView; },
constructor: function() {
// Set the block collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('icons');
Marionette.CompositeView.apply(this, arguments);
},
//constructor: function() {
//// Set the block collection to be handled by this view as well
//arguments[0].collection = arguments[0].model.get('icons');
//Marionette.CompositeView.apply(this, arguments);
//},
initialize: function() {
this.on('showSettings', this.showSettings, this);
this.on('dom:refresh', this.showBlock, this);
this._isFirstRender = true;
//this.on('dom:refresh', this.showBlock, this);
//this._isFirstRender = true;
},
// Determines which view type should be used for a child
childView: SocialIconView,
templateHelpers: function() {
//childView: SocialIconView,
templateContext: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
onRender: function() {
this._rebuildRegions();
//this._rebuildRegions();
this.toolsView = new Module.SocialBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
},
onBeforeDestroy: function() {
this.regionManager.destroy();
this.showChildView('toolsRegion', this.toolsView);
this.showChildView('icons', new Module.SocialIconCollectionView({
collection: this.model.get('icons')
}))
},
//onBeforeDestroy: function() {
//this.regionManager.destroy();
//},
showTools: function(_event) {
this.$(this.ui.tools).addClass('mailpoet_display_tools');
_event.stopPropagation();
@ -186,29 +193,29 @@ define([
return this.model.clone();
}.bind(this);
},
_buildRegions: function(regions) {
var that = this;
//_buildRegions: function(regions) {
//var that = this;
var defaults = {
regionClass: this.getOption('regionClass'),
parentEl: function() { return that.$el; }
};
//var defaults = {
//regionClass: this.getOption('regionClass'),
//parentEl: function() { return that.$el; }
//};
return this.regionManager.addRegions(regions, defaults);
},
_rebuildRegions: function() {
if (this.regionManager === undefined) {
this.regionManager = new Marionette.RegionManager();
}
this.regionManager.destroy();
_.extend(this, this._buildRegions(this.regions));
},
showBlock: function() {
if (this._isFirstRender) {
this.transitionIn();
this._isFirstRender = false;
}
},
//return this.regionManager.addRegions(regions, defaults);
//},
//_rebuildRegions: function() {
//if (this.regionManager === undefined) {
//this.regionManager = new Marionette.RegionManager();
//}
//this.regionManager.destroy();
//_.extend(this, this._buildRegions(this.regions));
//},
//showBlock: function() {
//if (this._isFirstRender) {
//this.transitionIn();
//this._isFirstRender = false;
//}
//},
deleteBlock: function() {
this.transitionOut().done(function() {
this.model.destroy();
@ -268,13 +275,13 @@ define([
this._stylesView = new SocialBlockSettingsStylesView({ model: this.model });
},
onRender: function() {
this.iconRegion.show(this._iconSelectorView);
this.stylesRegion.show(this._stylesView);
this.showChildView('iconRegion', this._iconSelectorView);
this.showChildView('stylesRegion', this._stylesView);
}
});
// Single icon settings view, used by the selector view
SocialBlockSettingsIconView = Marionette.ItemView.extend({
SocialBlockSettingsIconView = Marionette.View.extend({
getTemplate: function() { return templates.socialSettingsIcon; },
events: function() {
return {
@ -294,7 +301,7 @@ define([
this.$('.mailpoet_social_icon_image').attr('alt', this.model.get('text'));
},
},
templateHelpers: function() {
templateContext: function() {
var icons = App.getConfig().get('socialIcons'),
// Construct icon type list of format [{iconType: 'type', title: 'Title'}, ...]
availableIconTypes = _.map(_.keys(icons.attributes), function(key) { return { iconType: key, title: icons.get(key).get('title') }; }),
@ -321,11 +328,18 @@ define([
},
});
// Select icons section container view
SocialBlockSettingsIconSelectorView = Marionette.CompositeView.extend({
getTemplate: function() { return templates.socialSettingsIconSelector; },
SocialBlockSettingsIconCollectionView = Marionette.CollectionView.extend({
childView: SocialBlockSettingsIconView,
childViewContainer: '#mailpoet_social_icon_selector_contents',
});
// Select icons section container view
SocialBlockSettingsIconSelectorView = Marionette.View.extend({
getTemplate: function() { return templates.socialSettingsIconSelector; },
regions: {
'icons': '#mailpoet_social_icon_selector_contents'
},
//childView: SocialBlockSettingsIconView,
//childViewContainer: '#mailpoet_social_icon_selector_contents',
events: {
'click .mailpoet_add_social_icon': 'addSocialIcon',
},
@ -337,18 +351,24 @@ define([
items: '#mailpoet_social_icon_selector_contents > div',
},
},
constructor: function() {
// Set the icon collection to be handled by this view as well
arguments[0].collection = arguments[0].model.get('icons');
Marionette.CompositeView.apply(this, arguments);
},
//constructor: function() {
//// Set the icon collection to be handled by this view as well
//arguments[0].collection = arguments[0].model.get('icons');
//Marionette.CompositeView.apply(this, arguments);
//},
addSocialIcon: function() {
// Add a social icon with default values
this.collection.add({});
this.model.get('icons').add({});
},
onRender: function() {
this.showChildView('icons', new SocialBlockSettingsIconCollectionView({
collection: this.model.get('icons')
}));
}
});
SocialBlockSettingsStylesView = Marionette.ItemView.extend({
SocialBlockSettingsStylesView = Marionette.View.extend({
getTemplate: function() { return templates.socialSettingsStyles; },
modelEvents: {
'change': 'render',
@ -359,7 +379,7 @@ define([
initialize: function() {
this.listenTo(this.model.get('icons'), 'add remove change', this.render);
},
templateHelpers: function() {
templateContext: function() {
var allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
activeSet: this.model.get('iconSet'),

2
assets/js/src/newsletter_editor/blocks/spacer.js
View File

@ -50,7 +50,7 @@ define([
},
onRender: function() {
this.toolsView = new Module.SpacerBlockToolsView({ model: this.model });
this.toolsRegion.show(this.toolsView);
this.showChildView('toolsRegion', this.toolsView);
},
changeHeight: function() {
this.$('.mailpoet_spacer').css('height', this.model.get('styles.block.height'));

2
assets/js/src/newsletter_editor/blocks/text.js
View File

@ -58,7 +58,7 @@ define([
settings: false,
},
});
this.toolsRegion.show(this.toolsView);
this.showChildView('toolsRegion', this.toolsView);
},
onTextEditorChange: function(newContent) {
this.model.set('text', newContent);

2
assets/js/src/newsletter_editor/components/communication.js
View File

@ -95,7 +95,7 @@ define([
});
};
App.on('start', function(options) {
App.on('start', function(App, options) {
// Prefetch post types
Module.getPostTypes();
});

2
assets/js/src/newsletter_editor/components/config.js
View File

@ -24,7 +24,7 @@ define([
return Module._config;
};
App.on('before:start', function(options) {
App.on('before:start', function(App, options) {
// Expose config methods globally
App.getConfig = Module.getConfig;
App.setConfig = Module.setConfig;

4
assets/js/src/newsletter_editor/components/content.js
View File

@ -80,7 +80,7 @@ define([
Module.newsletter = new Module.NewsletterModel(_.omit(_.clone(options.newsletter), ['body']));
});
App.on('start', function(options) {
App.on('start', function(App, options) {
var body = options.newsletter.body;
var content = (_.has(body, 'content')) ? body.content : {};
@ -97,7 +97,7 @@ define([
renderOptions: { depth: 0 },
});
App._appView.contentRegion.show(App._contentContainerView);
App._appView.showChildView('contentRegion', App._contentContainerView);
});

8
assets/js/src/newsletter_editor/components/heading.js
View File

@ -10,9 +10,9 @@ define([
var Module = {};
Module.HeadingView = Marionette.ItemView.extend({
Module.HeadingView = Marionette.View.extend({
getTemplate: function() { return templates.heading; },
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
};
@ -28,8 +28,8 @@ define([
},
});
App.on('start', function(options) {
App._appView.headingRegion.show(new Module.HeadingView({ model: App.getNewsletter() }));
App.on('start', function(App, options) {
App._appView.showChildView('headingRegion', new Module.HeadingView({ model: App.getNewsletter() }));
});
return Module;

8
assets/js/src/newsletter_editor/components/save.js
View File

@ -142,7 +142,7 @@ define([
});
};
Module.SaveView = Marionette.LayoutView.extend({
Module.SaveView = Marionette.View.extend({
getTemplate: function() { return templates.save; },
events: {
'click .mailpoet_save_button': 'save',
@ -340,7 +340,7 @@ define([
}
};
App.on('before:start', function(options) {
App.on('before:start', function(App, options) {
App.save = Module.saveAndProvidePromise;
App.getChannel().on('autoSave', Module.autoSave);
@ -349,9 +349,9 @@ define([
App.getChannel().on('save', function(saveResult) { App.save(saveResult); });
});
App.on('start', function(options) {
App.on('start', function(App, options) {
var saveView = new Module.SaveView();
App._appView.bottomRegion.show(saveView);
App._appView.showChildView('bottomRegion', saveView);
});
return Module;

59
assets/js/src/newsletter_editor/components/sidebar.js
View File

@ -52,7 +52,7 @@ define([
Module.registerLayoutWidget = function(widget) { return Module._layoutWidgets.add(widget); };
Module.getLayoutWidgets = function() { return Module._layoutWidgets; };
var SidebarView = Marionette.LayoutView.extend({
var SidebarView = Marionette.View.extend({
getTemplate: function() { return templates.sidebar; },
regions: {
contentRegion: '.mailpoet_content_region',
@ -96,17 +96,17 @@ define([
.on('scroll', this.updateHorizontalScroll.bind(this));
},
onRender: function() {
this.contentRegion.show(new Module.SidebarWidgetsView({
collection: App.getWidgets(),
}));
this.layoutRegion.show(new Module.SidebarLayoutWidgetsView({
collection: App.getLayoutWidgets(),
}));
this.stylesRegion.show(new Module.SidebarStylesView({
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.previewRegion.show(new Module.SidebarPreviewView());
this.showChildView('previewRegion', new Module.SidebarPreviewView());
},
updateHorizontalScroll: function() {
// Fixes the sidebar so that on narrower screens the horizontal
@ -136,15 +136,31 @@ define([
},
});
/**
* 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.CompositeView.extend({
Module.SidebarWidgetsView = Marionette.View.extend({
getTemplate: function() { return templates.sidebarContent; },
getChildView: function(model) {
return model.get('widgetView');
regions: {
widgets: '.mailpoet_region_content'
},
childViewContainer: '.mailpoet_region_content',
initialize: function(widgets) {
this.widgets = widgets;
},
onRender: function() {
this.showChildView('widgets', new Module.SidebarWidgetsCollectionView({
collection: this.widgets
}));
}
});
/**
@ -153,10 +169,11 @@ define([
Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
getTemplate: function() { return templates.sidebarLayout; },
});
/**
* Responsible for managing global styles
*/
Module.SidebarStylesView = Marionette.LayoutView.extend({
Module.SidebarStylesView = Marionette.View.extend({
getTemplate: function() { return templates.sidebarStyles; },
behaviors: {
ColorPickerBehavior: {},
@ -199,7 +216,7 @@ define([
"change #mailpoet_background_color": _.partial(this.changeColorField, 'body.backgroundColor'),
};
},
templateHelpers: function() {
templateContext: function() {
return {
model: this.model.toJSON(),
availableStyles: this.availableStyles.toJSON(),
@ -220,7 +237,7 @@ define([
},
});
Module.SidebarPreviewView = Marionette.LayoutView.extend({
Module.SidebarPreviewView = Marionette.View.extend({
getTemplate: function() { return templates.sidebarPreview; },
events: {
'click .mailpoet_show_preview': 'showPreview',
@ -318,14 +335,14 @@ define([
},
});
Module.NewsletterPreviewView = Marionette.ItemView.extend({
Module.NewsletterPreviewView = Marionette.View.extend({
getTemplate: function() { return templates.newsletterPreview; },
initialize: function(options) {
this.previewUrl = options.previewUrl;
this.width = App.getConfig().get('newsletterPreview.width');
this.height = App.getConfig().get('newsletterPreview.height')
},
templateHelpers: function() {
templateContext: function() {
return {
previewUrl: this.previewUrl,
width: this.width,
@ -334,18 +351,18 @@ define([
}
});
App.on('before:start', function(options) {
App.on('before:start', function(App, options) {
App.registerWidget = Module.registerWidget;
App.getWidgets = Module.getWidgets;
App.registerLayoutWidget = Module.registerLayoutWidget;
App.getLayoutWidgets = Module.getLayoutWidgets;
});
App.on('start', function(options) {
App.on('start', function(App, options) {
var stylesModel = App.getGlobalStyles(),
sidebarView = new SidebarView();
App._appView.sidebarRegion.show(sidebarView);
App._appView.showChildView('sidebarRegion', sidebarView);
});
return Module;

11
assets/js/src/newsletter_editor/components/styles.js
View File

@ -46,11 +46,14 @@ define([
},
});
Module.StylesView = Marionette.ItemView.extend({
Module.StylesView = Marionette.View.extend({
getTemplate: function() { return templates.styles; },
modelEvents: {
'change': 'render',
},
serializeData: function() {
return this.model.toJSON();
}
});
Module._globalStyles = new SuperModel();
@ -65,7 +68,7 @@ define([
return App.getConfig().get('availableStyles');
};
App.on('before:start', function(options) {
App.on('before:start', function(App, options) {
// Expose style methods to global application
App.getGlobalStyles = Module.getGlobalStyles;
App.setGlobalStyles = Module.setGlobalStyles;
@ -76,9 +79,9 @@ define([
this.setGlobalStyles(globalStyles);
});
App.on('start', function(options) {
App.on('start', function(App, options) {
var stylesView = new Module.StylesView({ model: App.getGlobalStyles() });
App._appView.stylesRegion.show(stylesView);
App._appView.showChildView('stylesRegion', stylesView);
});
return Module;

4
package.json
View File

@ -10,8 +10,8 @@
"dependencies": {
"WP-JS-Hooks": "github:carldanley/WP-JS-Hooks",
"backbone": "1.3.3",
"backbone.marionette": "2.4.7",
"backbone.radio": "1.0.5",
"backbone.marionette": "3.2.0",
"backbone.radio": "2.0.0",
"backbone.supermodel": "1.2.0",
"classnames": "^2.1.3",
"codemirror": "^5.8.0",

1
tests/javascript/newsletter_editor/blocks/divider.spec.js
View File

@ -134,6 +134,7 @@ define([
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
dividers: ['solid', 'inset'],
});

3
tests/javascript/newsletter_editor/blocks/footer.spec.js
View File

@ -8,6 +8,9 @@ define([
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (FooterBlock.FooterBlockModel)();
});

1
tests/javascript/newsletter_editor/blocks/posts.spec.js
View File

@ -27,6 +27,7 @@ define([
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
model = new (PostsBlock.PostsBlockModel)();
});

34
webpack.config.js
View File

@ -264,25 +264,25 @@ config.push(_.extend({}, baseConfig, {
'newsletter_editor/blocks/posts.js',
'newsletter_editor/blocks/social.js',
'components/config.spec.js',
'components/content.spec.js',
'components/heading.spec.js',
'components/save.spec.js',
'components/sidebar.spec.js',
'components/styles.spec.js',
'components/communication.spec.js',
//'components/config.spec.js',
//'components/content.spec.js',
//'components/heading.spec.js',
//'components/save.spec.js',
//'components/sidebar.spec.js',
//'components/styles.spec.js',
//'components/communication.spec.js',
'blocks/automatedLatestContent.spec.js',
'blocks/button.spec.js',
//'blocks/automatedLatestContent.spec.js',
//'blocks/button.spec.js',
'blocks/container.spec.js',
'blocks/divider.spec.js',
'blocks/footer.spec.js',
'blocks/header.spec.js',
'blocks/image.spec.js',
'blocks/posts.spec.js',
'blocks/social.spec.js',
'blocks/spacer.spec.js',
'blocks/text.spec.js',
//'blocks/divider.spec.js',
//'blocks/footer.spec.js',
//'blocks/header.spec.js',
//'blocks/image.spec.js',
//'blocks/posts.spec.js',
//'blocks/social.spec.js',
//'blocks/spacer.spec.js',
//'blocks/text.spec.js',
],
},
output: {