Fix indentaition in *.js files (auto-fix by ESLint)
[MAILPOET-1829]
This commit is contained in:
Jan Jakeš
M. Shull
@@ -11,435 +11,435 @@ import jQuery from 'jquery';
|
||||
import App from 'newsletter_editor/App';
|
||||
import BaseBlock from 'newsletter_editor/blocks/base';
|
||||
|
||||
var Module = {};
|
||||
var base = BaseBlock;
|
||||
var BlockCollection;
|
||||
var Module = {};
|
||||
var base = BaseBlock;
|
||||
var BlockCollection;
|
||||
|
||||
BlockCollection = Backbone.Collection.extend({
|
||||
model: base.BlockModel,
|
||||
initialize: function () {
|
||||
this.on('add change remove', function () { App.getChannel().trigger('autoSave'); });
|
||||
},
|
||||
parse: function (response) {
|
||||
return _.map(response, function (block) {
|
||||
var Type = App.getBlockTypeModel(block.type);
|
||||
// TODO: If type has no registered model, use a backup one
|
||||
return new Type(block, { parse: true });
|
||||
BlockCollection = Backbone.Collection.extend({
|
||||
model: base.BlockModel,
|
||||
initialize: function () {
|
||||
this.on('add change remove', function () { App.getChannel().trigger('autoSave'); });
|
||||
},
|
||||
parse: function (response) {
|
||||
return _.map(response, function (block) {
|
||||
var Type = App.getBlockTypeModel(block.type);
|
||||
// TODO: If type has no registered model, use a backup one
|
||||
return new Type(block, { parse: true });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockModel = base.BlockModel.extend({
|
||||
relations: {
|
||||
blocks: BlockCollection
|
||||
},
|
||||
defaults: function () {
|
||||
return this._getDefaults({
|
||||
type: 'container',
|
||||
columnLayout: false,
|
||||
orientation: 'vertical',
|
||||
image: {
|
||||
src: null,
|
||||
display: 'scale'
|
||||
},
|
||||
styles: {
|
||||
block: {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
},
|
||||
blocks: new BlockCollection()
|
||||
}, App.getConfig().get('blockDefaults.container'));
|
||||
},
|
||||
_updateDefaults: function updateDefaults() {},
|
||||
validate: function () {
|
||||
// Recursively propagate validation checks to blocks in the tree
|
||||
var invalidBlock = this.get('blocks').find(function (block) { return !block.isValid(); });
|
||||
if (invalidBlock) {
|
||||
return invalidBlock.validationError;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
parse: function (response) {
|
||||
// If container has any blocks - add them to a collection
|
||||
if (response.type === 'container' && _.has(response, 'blocks') && response.blocks.constructor === Array) {
|
||||
response.blocks = new BlockCollection(response.blocks, {
|
||||
parse: true
|
||||
});
|
||||
}
|
||||
});
|
||||
return response;
|
||||
},
|
||||
getChildren: function () {
|
||||
var models = this.get('blocks').map(function (model) {
|
||||
return [model, model.getChildren()];
|
||||
});
|
||||
|
||||
Module.ContainerBlockModel = base.BlockModel.extend({
|
||||
relations: {
|
||||
blocks: BlockCollection
|
||||
},
|
||||
defaults: function () {
|
||||
return this._getDefaults({
|
||||
type: 'container',
|
||||
columnLayout: false,
|
||||
orientation: 'vertical',
|
||||
image: {
|
||||
src: null,
|
||||
display: 'scale'
|
||||
},
|
||||
styles: {
|
||||
block: {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
},
|
||||
blocks: new BlockCollection()
|
||||
}, App.getConfig().get('blockDefaults.container'));
|
||||
},
|
||||
_updateDefaults: function updateDefaults() {},
|
||||
validate: function () {
|
||||
// Recursively propagate validation checks to blocks in the tree
|
||||
var invalidBlock = this.get('blocks').find(function (block) { return !block.isValid(); });
|
||||
if (invalidBlock) {
|
||||
return invalidBlock.validationError;
|
||||
return _.flatten(models);
|
||||
}
|
||||
});
|
||||
|
||||
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: function () { return Module.ContainerBlockEmptyView; },
|
||||
emptyViewOptions: function () { return { renderOptions: this.renderOptions }; },
|
||||
initialize: function (options) {
|
||||
this.renderOptions = options.renderOptions;
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockView = base.BlockView.extend({
|
||||
regions: _.extend({}, base.BlockView.prototype.regions, {
|
||||
blocks: {
|
||||
el: '> .mailpoet_container',
|
||||
replaceElement: true
|
||||
}
|
||||
}),
|
||||
className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.containerBlock; },
|
||||
events: _.extend({}, base.BlockView.prototype.events, {
|
||||
'click .mailpoet_newsletter_layer_selector': 'toggleEditingLayer'
|
||||
}),
|
||||
ui: {
|
||||
tools: '> .mailpoet_tools'
|
||||
},
|
||||
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
|
||||
ContainerDropZoneBehavior: {},
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
hideOriginal: true,
|
||||
onDrop: function (options) {
|
||||
// After a clone of model has been dropped, cleanup
|
||||
// and destroy self
|
||||
options.dragBehavior.view.model.destroy();
|
||||
},
|
||||
onDragSubstituteBy: function (behavior) {
|
||||
var WidgetView;
|
||||
var node;
|
||||
// When block is being dragged, display the widget icon instead.
|
||||
// This will create an instance of block's widget view and
|
||||
// use it's rendered DOM element instead of the content block
|
||||
if (_.isFunction(behavior.view.onDragSubstituteBy)) {
|
||||
WidgetView = new (behavior.view.onDragSubstituteBy())();
|
||||
WidgetView.render();
|
||||
node = WidgetView.$el.get(0).cloneNode(true);
|
||||
WidgetView.destroy();
|
||||
return node;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
testAttachToInstance: function (model, view) {
|
||||
// Attach Draggable only to layout containers and disable it
|
||||
// for root and column containers.
|
||||
return view.renderOptions.depth === 1;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
parse: function (response) {
|
||||
// If container has any blocks - add them to a collection
|
||||
if (response.type === 'container' && _.has(response, 'blocks') && response.blocks.constructor === Array) {
|
||||
response.blocks = new BlockCollection(response.blocks, {
|
||||
parse: true
|
||||
}
|
||||
}),
|
||||
onDragSubstituteBy: function () {
|
||||
// For two and three column layouts display their respective widgets,
|
||||
// otherwise always default to one column layout widget
|
||||
if (this.renderOptions.depth === 1) {
|
||||
if (this.model.get('blocks').length === 3) return Module.ThreeColumnContainerWidgetView;
|
||||
if (this.model.get('blocks').length === 2) return Module.TwoColumnContainerWidgetView;
|
||||
}
|
||||
return Module.OneColumnContainerWidgetView;
|
||||
},
|
||||
initialize: function (options) {
|
||||
base.BlockView.prototype.initialize.apply(this, arguments);
|
||||
|
||||
this.renderOptions = _.defaults(options.renderOptions || {}, {});
|
||||
},
|
||||
onRender: function () {
|
||||
var classIrregular = '';
|
||||
var columnLayout;
|
||||
this.toolsView = new Module.ContainerBlockToolsView({
|
||||
model: this.model,
|
||||
tools: {
|
||||
settings: this.renderOptions.depth === 1,
|
||||
delete: this.renderOptions.depth === 1,
|
||||
duplicate: true,
|
||||
move: this.renderOptions.depth === 1,
|
||||
layerSelector: false
|
||||
}
|
||||
});
|
||||
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
|
||||
columnLayout = this.model.get('columnLayout');
|
||||
if (typeof columnLayout === 'string') {
|
||||
classIrregular = 'mailpoet_irregular_width_contents_container column_layout_' + columnLayout;
|
||||
}
|
||||
this.$('> .mailpoet_container').attr('class',
|
||||
'mailpoet_container mailpoet_container_' + this.model.get('orientation') + ' ' + classIrregular);
|
||||
},
|
||||
showTools: function (mouseEvent) {
|
||||
// Skip if user is dragging/resizing
|
||||
if (mouseEvent && mouseEvent.buttons > 0) {
|
||||
return;
|
||||
}
|
||||
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
|
||||
this.$(this.ui.tools).addClass('mailpoet_display_tools');
|
||||
this.$el.addClass('mailpoet_highlight');
|
||||
this.toolsView.triggerMethod('showTools');
|
||||
}
|
||||
},
|
||||
hideTools: function () {
|
||||
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
|
||||
this.$(this.ui.tools).removeClass('mailpoet_display_tools');
|
||||
this.$el.removeClass('mailpoet_highlight');
|
||||
this.toolsView.triggerMethod('hideTools');
|
||||
}
|
||||
},
|
||||
toggleEditingLayer: function (event) {
|
||||
var that = this;
|
||||
var $toggleButton = this.$('> .mailpoet_tools .mailpoet_newsletter_layer_selector');
|
||||
var $overlay = jQuery('.mailpoet_layer_overlay');
|
||||
var $container = this.$('> .mailpoet_container');
|
||||
var disableContainerLayer = function () {
|
||||
that.$el.removeClass('mailpoet_container_layer_active');
|
||||
$toggleButton.removeClass('mailpoet_container_layer_active');
|
||||
$container.removeClass('mailpoet_layer_highlight');
|
||||
$overlay.hide();
|
||||
$overlay.off('click');
|
||||
};
|
||||
var enableContainerLayer = function () {
|
||||
that.$el.addClass('mailpoet_container_layer_active');
|
||||
$toggleButton.addClass('mailpoet_container_layer_active');
|
||||
$container.addClass('mailpoet_layer_highlight');
|
||||
$overlay.click(disableContainerLayer);
|
||||
$overlay.show();
|
||||
};
|
||||
if ($toggleButton.hasClass('mailpoet_container_layer_active')) {
|
||||
disableContainerLayer();
|
||||
} else {
|
||||
enableContainerLayer();
|
||||
}
|
||||
event.stopPropagation();
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockEmptyView = Marionette.View.extend({
|
||||
getTemplate: function () { return window.templates.containerEmpty; },
|
||||
initialize: function (options) {
|
||||
this.renderOptions = _.defaults(options.renderOptions || {}, {});
|
||||
},
|
||||
templateContext: function () {
|
||||
return {
|
||||
isRoot: this.renderOptions.depth === 0,
|
||||
emptyContainerMessage: this.renderOptions.emptyContainerMessage || ''
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockToolsView = base.BlockToolsView.extend({
|
||||
getSettingsView: function () { return Module.ContainerBlockSettingsView; }
|
||||
});
|
||||
|
||||
Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
|
||||
behaviors: _.extend({}, base.BlockSettingsView.prototype.behaviors, {
|
||||
MediaManagerBehavior: {
|
||||
onSelect: 'onImageSelect'
|
||||
}
|
||||
}),
|
||||
getTemplate: function () { return window.templates.containerBlockSettings; },
|
||||
events: function () {
|
||||
return {
|
||||
'change .mailpoet_field_container_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
|
||||
'click .mailpoet_done_editing': 'close',
|
||||
'change .mailpoet_field_display_type': 'changeDisplayType'
|
||||
};
|
||||
},
|
||||
initialize: function () {
|
||||
base.BlockSettingsView.prototype.initialize.apply(this, arguments);
|
||||
|
||||
this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({
|
||||
collection: this.model.get('blocks')
|
||||
});
|
||||
},
|
||||
changeDisplayType: function (event) {
|
||||
this.model.get('image').set('display', event.target.value);
|
||||
this.model.trigger('change');
|
||||
},
|
||||
onImageSelect: function (image) {
|
||||
this.model.set('image.src', image.src);
|
||||
this.model.trigger('change');
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
|
||||
childView: function () { return Module.ContainerBlockColumnSettingsView; },
|
||||
childViewOptions: function (model, index) {
|
||||
return {
|
||||
columnIndex: index
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
|
||||
getTemplate: function () { return window.templates.containerBlockColumnSettings; },
|
||||
initialize: function (options) {
|
||||
this.columnNumber = (options.columnIndex || 0) + 1;
|
||||
},
|
||||
templateContext: function () {
|
||||
return {
|
||||
model: this.model.toJSON(),
|
||||
columnNumber: this.columnNumber
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
Module.OneColumnContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.oneColumnLayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
return new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
}
|
||||
return response;
|
||||
},
|
||||
getChildren: function () {
|
||||
var models = this.get('blocks').map(function (model) {
|
||||
return [model, model.getChildren()];
|
||||
});
|
||||
|
||||
return _.flatten(models);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
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: function () { return Module.ContainerBlockEmptyView; },
|
||||
emptyViewOptions: function () { return { renderOptions: this.renderOptions }; },
|
||||
initialize: function (options) {
|
||||
this.renderOptions = options.renderOptions;
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockView = base.BlockView.extend({
|
||||
regions: _.extend({}, base.BlockView.prototype.regions, {
|
||||
blocks: {
|
||||
el: '> .mailpoet_container',
|
||||
replaceElement: true
|
||||
}
|
||||
}),
|
||||
className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.containerBlock; },
|
||||
events: _.extend({}, base.BlockView.prototype.events, {
|
||||
'click .mailpoet_newsletter_layer_selector': 'toggleEditingLayer'
|
||||
}),
|
||||
ui: {
|
||||
tools: '> .mailpoet_tools'
|
||||
},
|
||||
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
|
||||
ContainerDropZoneBehavior: {},
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
hideOriginal: true,
|
||||
onDrop: function (options) {
|
||||
// After a clone of model has been dropped, cleanup
|
||||
// and destroy self
|
||||
options.dragBehavior.view.model.destroy();
|
||||
},
|
||||
onDragSubstituteBy: function (behavior) {
|
||||
var WidgetView;
|
||||
var node;
|
||||
// When block is being dragged, display the widget icon instead.
|
||||
// This will create an instance of block's widget view and
|
||||
// use it's rendered DOM element instead of the content block
|
||||
if (_.isFunction(behavior.view.onDragSubstituteBy)) {
|
||||
WidgetView = new (behavior.view.onDragSubstituteBy())();
|
||||
WidgetView.render();
|
||||
node = WidgetView.$el.get(0).cloneNode(true);
|
||||
WidgetView.destroy();
|
||||
return node;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
testAttachToInstance: function (model, view) {
|
||||
// Attach Draggable only to layout containers and disable it
|
||||
// for root and column containers.
|
||||
return view.renderOptions.depth === 1;
|
||||
}
|
||||
}
|
||||
}),
|
||||
onDragSubstituteBy: function () {
|
||||
// For two and three column layouts display their respective widgets,
|
||||
// otherwise always default to one column layout widget
|
||||
if (this.renderOptions.depth === 1) {
|
||||
if (this.model.get('blocks').length === 3) return Module.ThreeColumnContainerWidgetView;
|
||||
if (this.model.get('blocks').length === 2) return Module.TwoColumnContainerWidgetView;
|
||||
}
|
||||
return Module.OneColumnContainerWidgetView;
|
||||
},
|
||||
initialize: function (options) {
|
||||
base.BlockView.prototype.initialize.apply(this, arguments);
|
||||
|
||||
this.renderOptions = _.defaults(options.renderOptions || {}, {});
|
||||
},
|
||||
onRender: function () {
|
||||
var classIrregular = '';
|
||||
var columnLayout;
|
||||
this.toolsView = new Module.ContainerBlockToolsView({
|
||||
model: this.model,
|
||||
tools: {
|
||||
settings: this.renderOptions.depth === 1,
|
||||
delete: this.renderOptions.depth === 1,
|
||||
duplicate: true,
|
||||
move: this.renderOptions.depth === 1,
|
||||
layerSelector: false
|
||||
}
|
||||
});
|
||||
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
|
||||
columnLayout = this.model.get('columnLayout');
|
||||
if (typeof columnLayout === 'string') {
|
||||
classIrregular = 'mailpoet_irregular_width_contents_container column_layout_' + columnLayout;
|
||||
}
|
||||
this.$('> .mailpoet_container').attr('class',
|
||||
'mailpoet_container mailpoet_container_' + this.model.get('orientation') + ' ' + classIrregular);
|
||||
},
|
||||
showTools: function (mouseEvent) {
|
||||
// Skip if user is dragging/resizing
|
||||
if (mouseEvent && mouseEvent.buttons > 0) {
|
||||
return;
|
||||
}
|
||||
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
|
||||
this.$(this.ui.tools).addClass('mailpoet_display_tools');
|
||||
this.$el.addClass('mailpoet_highlight');
|
||||
this.toolsView.triggerMethod('showTools');
|
||||
}
|
||||
},
|
||||
hideTools: function () {
|
||||
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
|
||||
this.$(this.ui.tools).removeClass('mailpoet_display_tools');
|
||||
this.$el.removeClass('mailpoet_highlight');
|
||||
this.toolsView.triggerMethod('hideTools');
|
||||
}
|
||||
},
|
||||
toggleEditingLayer: function (event) {
|
||||
var that = this;
|
||||
var $toggleButton = this.$('> .mailpoet_tools .mailpoet_newsletter_layer_selector');
|
||||
var $overlay = jQuery('.mailpoet_layer_overlay');
|
||||
var $container = this.$('> .mailpoet_container');
|
||||
var disableContainerLayer = function () {
|
||||
that.$el.removeClass('mailpoet_container_layer_active');
|
||||
$toggleButton.removeClass('mailpoet_container_layer_active');
|
||||
$container.removeClass('mailpoet_layer_highlight');
|
||||
$overlay.hide();
|
||||
$overlay.off('click');
|
||||
};
|
||||
var enableContainerLayer = function () {
|
||||
that.$el.addClass('mailpoet_container_layer_active');
|
||||
$toggleButton.addClass('mailpoet_container_layer_active');
|
||||
$container.addClass('mailpoet_layer_highlight');
|
||||
$overlay.click(disableContainerLayer);
|
||||
$overlay.show();
|
||||
};
|
||||
if ($toggleButton.hasClass('mailpoet_container_layer_active')) {
|
||||
disableContainerLayer();
|
||||
} else {
|
||||
enableContainerLayer();
|
||||
}
|
||||
event.stopPropagation();
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockEmptyView = Marionette.View.extend({
|
||||
getTemplate: function () { return window.templates.containerEmpty; },
|
||||
initialize: function (options) {
|
||||
this.renderOptions = _.defaults(options.renderOptions || {}, {});
|
||||
},
|
||||
templateContext: function () {
|
||||
return {
|
||||
isRoot: this.renderOptions.depth === 0,
|
||||
emptyContainerMessage: this.renderOptions.emptyContainerMessage || ''
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockToolsView = base.BlockToolsView.extend({
|
||||
getSettingsView: function () { return Module.ContainerBlockSettingsView; }
|
||||
});
|
||||
|
||||
Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
|
||||
behaviors: _.extend({}, base.BlockSettingsView.prototype.behaviors, {
|
||||
MediaManagerBehavior: {
|
||||
onSelect: 'onImageSelect'
|
||||
}
|
||||
}),
|
||||
getTemplate: function () { return window.templates.containerBlockSettings; },
|
||||
events: function () {
|
||||
return {
|
||||
'change .mailpoet_field_container_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
|
||||
'click .mailpoet_done_editing': 'close',
|
||||
'change .mailpoet_field_display_type': 'changeDisplayType'
|
||||
};
|
||||
},
|
||||
initialize: function () {
|
||||
base.BlockSettingsView.prototype.initialize.apply(this, arguments);
|
||||
|
||||
this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({
|
||||
collection: this.model.get('blocks')
|
||||
});
|
||||
},
|
||||
changeDisplayType: function (event) {
|
||||
this.model.get('image').set('display', event.target.value);
|
||||
this.model.trigger('change');
|
||||
},
|
||||
onImageSelect: function (image) {
|
||||
this.model.set('image.src', image.src);
|
||||
this.model.trigger('change');
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
|
||||
childView: function () { return Module.ContainerBlockColumnSettingsView; },
|
||||
childViewOptions: function (model, index) {
|
||||
return {
|
||||
columnIndex: index
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
|
||||
getTemplate: function () { return window.templates.containerBlockColumnSettings; },
|
||||
initialize: function (options) {
|
||||
this.columnNumber = (options.columnIndex || 0) + 1;
|
||||
},
|
||||
templateContext: function () {
|
||||
return {
|
||||
model: this.model.toJSON(),
|
||||
columnNumber: this.columnNumber
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
Module.OneColumnContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.oneColumnLayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
return new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
}
|
||||
Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.twoColumnLayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
return new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.twoColumnLayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
return new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
}
|
||||
Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.threeColumnLayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
return new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.threeColumnLayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
return new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
}
|
||||
Module.TwoColumn12ContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.twoColumn12LayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
var block = new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
block.set('columnLayout', '1_2');
|
||||
return block;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Module.TwoColumn12ContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.twoColumn12LayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
var block = new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
block.set('columnLayout', '1_2');
|
||||
return block;
|
||||
}
|
||||
Module.TwoColumn21ContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.twoColumn21LayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
var block = new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
block.set('columnLayout', '2_1');
|
||||
return block;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
App.on('before:start', function (BeforeStartApp) {
|
||||
BeforeStartApp.registerBlockType('container', {
|
||||
blockModel: Module.ContainerBlockModel,
|
||||
blockView: Module.ContainerBlockView
|
||||
});
|
||||
|
||||
Module.TwoColumn21ContainerWidgetView = base.WidgetView.extend({
|
||||
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
||||
getTemplate: function () { return window.templates.twoColumn21LayoutInsertion; },
|
||||
behaviors: {
|
||||
DraggableBehavior: {
|
||||
cloneOriginal: true,
|
||||
drop: function () {
|
||||
var block = new Module.ContainerBlockModel({
|
||||
orientation: 'horizontal',
|
||||
blocks: [
|
||||
new Module.ContainerBlockModel(),
|
||||
new Module.ContainerBlockModel()
|
||||
]
|
||||
});
|
||||
block.set('columnLayout', '2_1');
|
||||
return block;
|
||||
}
|
||||
}
|
||||
}
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'oneColumnLayout',
|
||||
priority: 100,
|
||||
widgetView: Module.OneColumnContainerWidgetView
|
||||
});
|
||||
|
||||
App.on('before:start', function (BeforeStartApp) {
|
||||
BeforeStartApp.registerBlockType('container', {
|
||||
blockModel: Module.ContainerBlockModel,
|
||||
blockView: Module.ContainerBlockView
|
||||
});
|
||||
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'oneColumnLayout',
|
||||
priority: 100,
|
||||
widgetView: Module.OneColumnContainerWidgetView
|
||||
});
|
||||
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'twoColumnLayout',
|
||||
priority: 100,
|
||||
widgetView: Module.TwoColumnContainerWidgetView
|
||||
});
|
||||
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'threeColumnLayout',
|
||||
priority: 100,
|
||||
widgetView: Module.ThreeColumnContainerWidgetView
|
||||
});
|
||||
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'twoColumn12Layout',
|
||||
priority: 100,
|
||||
widgetView: Module.TwoColumn12ContainerWidgetView
|
||||
});
|
||||
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'twoColumn21Layout',
|
||||
priority: 100,
|
||||
widgetView: Module.TwoColumn21ContainerWidgetView
|
||||
});
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'twoColumnLayout',
|
||||
priority: 100,
|
||||
widgetView: Module.TwoColumnContainerWidgetView
|
||||
});
|
||||
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'threeColumnLayout',
|
||||
priority: 100,
|
||||
widgetView: Module.ThreeColumnContainerWidgetView
|
||||
});
|
||||
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'twoColumn12Layout',
|
||||
priority: 100,
|
||||
widgetView: Module.TwoColumn12ContainerWidgetView
|
||||
});
|
||||
|
||||
BeforeStartApp.registerLayoutWidget({
|
||||
name: 'twoColumn21Layout',
|
||||
priority: 100,
|
||||
widgetView: Module.TwoColumn21ContainerWidgetView
|
||||
});
|
||||
});
|
||||
|
||||
export default Module;
|
||||
|
||||
Reference in New Issue
Block a user