Simplify settings views to use methods defined in base settings view
This commit is contained in:
@@ -189,11 +189,6 @@ define([
|
||||
"click .mailpoet_done_editing": "close",
|
||||
};
|
||||
},
|
||||
templateContext: function() {
|
||||
return {
|
||||
model: this.model.toJSON(),
|
||||
};
|
||||
},
|
||||
onRender: function() {
|
||||
var that = this;
|
||||
|
||||
|
@@ -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();
|
||||
},
|
||||
|
@@ -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'));
|
||||
|
@@ -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');
|
||||
|
@@ -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(),
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
|
@@ -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(),
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
|
@@ -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();
|
||||
|
@@ -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({
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user