Simplify settings views to use methods defined in base settings view

This commit is contained in:
Tautvidas Sipavičius
2017-04-16 13:09:01 +03:00
parent 167a605658
commit aa2416f353
12 changed files with 33 additions and 142 deletions

View File

@@ -189,11 +189,6 @@ define([
"click .mailpoet_done_editing": "close",
};
},
templateContext: function() {
return {
model: this.model.toJSON(),
};
},
onRender: function() {
var that = this;

View File

@@ -125,6 +125,12 @@ define([
return this.model.clone();
}.bind(this);
},
disableDragging: function() {
this.$el.addClass('mailpoet_ignore_drag');
},
enableDragging: function() {
this.$el.removeClass('mailpoet_ignore_drag');
},
showBlock: function() {
if (this._isFirstRender) {
this.transitionIn();
@@ -240,6 +246,11 @@ define([
MailPoet.Modal.panel(panelParams);
}
},
templateContext: function() {
return {
model: this.model.toJSON()
};
},
close: function(event) {
this.destroy();
},

View File

@@ -99,11 +99,10 @@ define([
};
},
templateContext: function() {
return {
model: this.model.toJSON(),
return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
availableStyles: App.getAvailableStyles().toJSON(),
renderOptions: this.renderOptions,
};
});
},
applyToAll: function() {
App.getChannel().trigger('replaceAllButtonStyles', _.pick(this.model.toJSON(), 'styles', 'type'));

View File

@@ -105,11 +105,10 @@ define([
};
},
templateContext: function() {
return {
model: this.model.toJSON(),
return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
availableStyles: App.getAvailableStyles().toJSON(),
renderOptions: this.renderOptions,
};
});
},
changeStyle: function(event) {
var style = jQuery(event.currentTarget).data('style');

View File

@@ -68,12 +68,6 @@ define([
this.enableDragging();
this.enableShowingTools();
},
disableDragging: function() {
this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
},
enableDragging: function() {
this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
},
});
Module.FooterBlockToolsView = base.BlockToolsView.extend({
@@ -97,10 +91,9 @@ define([
};
},
templateContext: function() {
return {
model: this.model.toJSON(),
return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
availableStyles: App.getAvailableStyles().toJSON(),
};
});
},
});

View File

@@ -68,12 +68,6 @@ define([
this.enableDragging();
this.enableShowingTools();
},
disableDragging: function() {
this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
},
enableDragging: function() {
this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
},
});
Module.HeaderBlockToolsView = base.BlockToolsView.extend({
@@ -97,10 +91,9 @@ define([
};
},
templateContext: function() {
return {
model: this.model.toJSON(),
return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
availableStyles: App.getAvailableStyles().toJSON(),
};
});
},
});

View File

@@ -103,60 +103,19 @@ define([
childView: SocialIconView,
});
Module.SocialBlockView = Marionette.View.extend({
Module.SocialBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
getTemplate: function() { return templates.socialBlock; },
modelEvents: {
'change': 'render',
'delete': 'deleteBlock',
},
events: {
"mouseover": "showTools",
"mouseout": "hideTools",
},
regions: {
toolsRegion: '> .mailpoet_tools',
regions: _.extend({}, base.BlockView.prototype.regions, {
icons: '.mailpoet_social'
},
}),
ui: {
tools: '> .mailpoet_tools'
},
behaviors: {
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, 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;
}
},
},
HighlightEditingBehavior: {},
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
ShowSettingsBehavior: {},
},
}),
onDragSubstituteBy: function() { return Module.SocialWidgetView; },
initialize: function() {
this.on('showSettings', this.showSettings, this);
},
templateContext: function() {
return {
model: this.model.toJSON(),
viewCid: this.cid,
};
},
onRender: function() {
this.toolsView = new Module.SocialBlockToolsView({ model: this.model });
this.showChildView('toolsRegion', this.toolsView);
@@ -164,56 +123,6 @@ define([
collection: this.model.get('icons')
}))
},
showTools: function(_event) {
this.$(this.ui.tools).addClass('mailpoet_display_tools');
_event.stopPropagation();
},
hideTools: function(_event) {
this.$(this.ui.tools).removeClass('mailpoet_display_tools');
_event.stopPropagation();
},
showSettings: function(options) {
this.toolsView.triggerMethod('showSettings', options);
},
getDropFunc: function() {
return function() {
return this.model.clone();
}.bind(this);
},
deleteBlock: function() {
this.transitionOut().done(function() {
this.model.destroy();
}.bind(this));
},
transitionIn: function() {
return this._transition('slideDown', 'fadeIn', 'easeIn');
},
transitionOut: function() {
return this._transition('slideUp', 'fadeOut', 'easeOut');
},
_transition: function(slideDirection, fadeDirection, easing) {
var promise = jQuery.Deferred();
this.$el.velocity(
slideDirection,
{
duration: 250,
easing: easing,
complete: function() {
promise.resolve();
}.bind(this),
}
).velocity(
fadeDirection,
{
duration: 250,
easing: easing,
queue: false, // Do not enqueue, trigger animation in parallel
}
);
return promise;
},
});
Module.SocialBlockToolsView = base.BlockToolsView.extend({
@@ -270,12 +179,11 @@ define([
// 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') }; }),
allIconSets = App.getAvailableStyles().get('socialIconSets');
return {
model: this.model.toJSON(),
return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
iconTypes: availableIconTypes,
currentType: icons.get(this.model.get('iconType')).toJSON(),
allIconSets: allIconSets.toJSON(),
};
});
},
deleteIcon: function() {
this.model.destroy();

View File

@@ -71,13 +71,6 @@ define([
this.enableDragging();
this.enableShowingTools();
},
disableDragging: function() {
this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
},
enableDragging: function() {
this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
},
});
Module.TextBlockToolsView = base.BlockToolsView.extend({

View File

@@ -2,7 +2,7 @@
<div class="mailpoet_form_field">
<label>
<div class="mailpoet_form_field_input_option">
<input type="text" name="background-color" class="mailpoet_field_container_background_color mailpoet_color" value="{{ styles.block.backgroundColor }}" />
<input type="text" name="background-color" class="mailpoet_field_container_background_color mailpoet_color" value="{{ model.styles.block.backgroundColor }}" />
</div>
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background') %></div>
</label>

View File

@@ -3,7 +3,7 @@
<label>
<div class="mailpoet_form_field_title"><%= __('Link') %> <span class="mailpoet_form_field_optional">(<%= __('Optional') %>)</div>
<div class="mailpoet_form_field_input_option">
<input type="text" name="src" class="mailpoet_input mailpoet_field_image_link" value="{{ link }}" placeholder="http://" />
<input type="text" name="src" class="mailpoet_input mailpoet_field_image_link" value="{{ model.link }}" placeholder="http://" />
</div>
</label>
</div>
@@ -11,7 +11,7 @@
<label>
<div class="mailpoet_form_field_title"><%= __('Address') %></div>
<div class="mailpoet_form_field_input_option">
<input type="text" name="src" class="mailpoet_input mailpoet_field_image_address" value="{{ src }}" placeholder="http://" /><br />
<input type="text" name="src" class="mailpoet_input mailpoet_field_image_address" value="{{ model.src }}" placeholder="http://" /><br />
</div>
</label>
</div>
@@ -19,14 +19,14 @@
<label>
<div class="mailpoet_form_field_title"><%= __('Alternative text') %></div>
<div class="mailpoet_form_field_input_option">
<input type="text" name="alt" class="mailpoet_input mailpoet_field_image_alt_text" value="{{ alt }}" />
<input type="text" name="alt" class="mailpoet_input mailpoet_field_image_alt_text" value="{{ model.alt }}" />
</div>
</label>
</div>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_checkbox_option">
<label>
<input type="checkbox" name="fullWidth" class="mailpoet_field_image_full_width" value="true" {{#if fullWidth }}CHECKED{{/if}}/>
<input type="checkbox" name="fullWidth" class="mailpoet_field_image_full_width" value="true" {{#if model.fullWidth }}CHECKED{{/if}}/>
<%= __('Full width') %>
</label>
</div>

View File

@@ -1,7 +1,7 @@
<h3><%= __('Spacer') %></h3>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_input_option">
<input type="text" name="background-color" class="mailpoet_field_spacer_background_color mailpoet_color" value="{{ styles.block.backgroundColor }}" />
<input type="text" name="background-color" class="mailpoet_field_spacer_background_color mailpoet_color" value="{{ model.styles.block.backgroundColor }}" />
</div>
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background') %></div>
</div>

View File

@@ -1,2 +1,2 @@
<h3><%= __('Text') %></h3>
<%= __('Text') %>: <textarea name="text" class="text" rows="5" cols="40">{{ text }}</textarea>
<%= __('Text') %>: <textarea name="text" class="text" rows="5" cols="40">{{ model.text }}</textarea>