Add new 'fullPostFeaturedImagePosition' for full post image positioning

[MAILPOET-2491]
This commit is contained in:
Jan Jakeš
2020-02-12 14:44:25 +01:00
committed by Jack Kitterhing
parent 515131e55d
commit efb779e3e7
4 changed files with 40 additions and 14 deletions

View File

@ -52,7 +52,7 @@ Module.ALCLayoutSupervisor = SuperModel.extend({
}); });
Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
stale: ['_container', '_displayOptionsHidden'], stale: ['_container', '_displayOptionsHidden', '_featuredImagePosition'],
defaults: function () { defaults: function () {
return this._getDefaults({ return this._getDefaults({
type: 'automatedLatestContentLayout', type: 'automatedLatestContentLayout',
@ -68,6 +68,7 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
imageFullWidth: false, // true|false imageFullWidth: false, // true|false
titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt' titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
featuredImagePosition: 'centered', // 'centered'|'left'|'right'|'alternate'|'none' featuredImagePosition: 'centered', // 'centered'|'left'|'right'|'alternate'|'none'
fullPostFeaturedImagePosition: 'left', // 'centered'|'left'|'right'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText' showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:', authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText' showCategories: 'no', // 'no'|'aboveText'|'belowText'
@ -83,6 +84,7 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
divider: {}, divider: {},
_container: new (App.getBlockTypeModel('container'))(), _container: new (App.getBlockTypeModel('container'))(),
_displayOptionsHidden: true, // true|false _displayOptionsHidden: true, // true|false
_featuredImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
}, App.getConfig().get('blockDefaults.automatedLatestContentLayout')); }, App.getConfig().get('blockDefaults.automatedLatestContentLayout'));
}, },
relations: function () { relations: function () {
@ -99,6 +101,9 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
this.listenTo(this.get('divider'), 'change', this._handleChanges); this.listenTo(this.get('divider'), 'change', this._handleChanges);
this.on('add remove update reset', this._handleChanges); this.on('add remove update reset', this._handleChanges);
this.on('refreshPosts', this.updatePosts, this); this.on('refreshPosts', this.updatePosts, this);
const field = this.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
this.set('_featuredImagePosition', this.get(field));
}, },
updatePosts: function (posts) { updatePosts: function (posts) {
this.get('_container.blocks').reset(posts, { parse: true }); this.get('_container.blocks').reset(posts, { parse: true });
@ -182,7 +187,7 @@ Module.AutomatedLatestContentLayoutBlockSettingsView = base.BlockSettingsView.ex
'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(this.changeField, 'inclusionType'), 'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
'change .mailpoet_automated_latest_content_title_alignment': _.partial(this.changeField, 'titleAlignment'), 'change .mailpoet_automated_latest_content_title_alignment': _.partial(this.changeField, 'titleAlignment'),
'change .mailpoet_automated_latest_content_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'), 'change .mailpoet_automated_latest_content_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
'change .mailpoet_automated_latest_content_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'), 'change .mailpoet_automated_latest_content_featured_image_position': 'changeFeaturedImagePosition',
'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'), 'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'),
'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'), 'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
'change .mailpoet_automated_latest_content_show_categories': _.partial(this.changeField, 'showCategories'), 'change .mailpoet_automated_latest_content_show_categories': _.partial(this.changeField, 'showCategories'),
@ -314,6 +319,9 @@ Module.AutomatedLatestContentLayoutBlockSettingsView = base.BlockSettingsView.ex
this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden'); this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
} }
this.changeField('displayType', event); this.changeField('displayType', event);
const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
this.model.set('_featuredImagePosition', this.model.get(field));
this.render(); this.render();
}, },
changeTitleFormat: function (event) { changeTitleFormat: function (event) {
@ -330,6 +338,11 @@ Module.AutomatedLatestContentLayoutBlockSettingsView = base.BlockSettingsView.ex
} }
this.changeField('titleFormat', event); this.changeField('titleFormat', event);
}, },
changeFeaturedImagePosition: function (event) {
const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
this.changeField(field, event);
this.changeField('_featuredImagePosition', event);
},
_updateContentTypes: function (postTypes) { _updateContentTypes: function (postTypes) {
var select = this.$('.mailpoet_automated_latest_content_content_type'); var select = this.$('.mailpoet_automated_latest_content_content_type');
var selectedValue = this.model.get('contentType'); var selectedValue = this.model.get('contentType');

View File

@ -33,7 +33,7 @@ var PostSelectionSettingsView;
var PostsSelectionCollectionView; var PostsSelectionCollectionView;
Module.PostsBlockModel = base.BlockModel.extend({ Module.PostsBlockModel = base.BlockModel.extend({
stale: ['_selectedPosts', '_availablePosts', '_transformedPosts'], stale: ['_selectedPosts', '_availablePosts', '_transformedPosts', '_featuredImagePosition'],
defaults: function () { defaults: function () {
return this._getDefaults({ return this._getDefaults({
type: 'posts', type: 'posts',
@ -52,6 +52,7 @@ Module.PostsBlockModel = base.BlockModel.extend({
imageFullWidth: false, // true|false imageFullWidth: false, // true|false
titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt' titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
featuredImagePosition: 'centered', // 'centered'|'right'|'left'|'alternate'|'none' featuredImagePosition: 'centered', // 'centered'|'right'|'left'|'alternate'|'none'
fullPostFeaturedImagePosition: 'left', // 'centered'|'left'|'right'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText' showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:', authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText' showCategories: 'no', // 'no'|'aboveText'|'belowText'
@ -68,6 +69,7 @@ Module.PostsBlockModel = base.BlockModel.extend({
_selectedPosts: [], _selectedPosts: [],
_availablePosts: [], _availablePosts: [],
_transformedPosts: new (App.getBlockTypeModel('container'))(), _transformedPosts: new (App.getBlockTypeModel('container'))(),
_featuredImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
}, App.getConfig().get('blockDefaults.posts')); }, App.getConfig().get('blockDefaults.posts'));
}, },
relations: function () { relations: function () {
@ -105,6 +107,9 @@ Module.PostsBlockModel = base.BlockModel.extend({
this.listenTo(App.getChannel(), 'hideSettings', this.destroy); this.listenTo(App.getChannel(), 'hideSettings', this.destroy);
this.on('insertSelectedPosts', this._insertSelectedPosts, this); this.on('insertSelectedPosts', this._insertSelectedPosts, this);
const field = this.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
this.set('_featuredImagePosition', this.get(field));
}, },
fetchAvailablePosts: function () { fetchAvailablePosts: function () {
var that = this; var that = this;
@ -485,7 +490,7 @@ PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
'change .mailpoet_posts_content_type': _.partial(this.changeField, 'contentType'), 'change .mailpoet_posts_content_type': _.partial(this.changeField, 'contentType'),
'change .mailpoet_posts_title_alignment': _.partial(this.changeField, 'titleAlignment'), 'change .mailpoet_posts_title_alignment': _.partial(this.changeField, 'titleAlignment'),
'change .mailpoet_posts_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'), 'change .mailpoet_posts_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
'change .mailpoet_posts_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'), 'change .mailpoet_posts_featured_image_position': 'changeFeaturedImagePosition',
'change .mailpoet_posts_show_author': _.partial(this.changeField, 'showAuthor'), 'change .mailpoet_posts_show_author': _.partial(this.changeField, 'showAuthor'),
'input .mailpoet_posts_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'), 'input .mailpoet_posts_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
'change .mailpoet_posts_show_categories': _.partial(this.changeField, 'showCategories'), 'change .mailpoet_posts_show_categories': _.partial(this.changeField, 'showCategories'),
@ -541,6 +546,9 @@ PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden'); this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
} }
this.changeField('displayType', event); this.changeField('displayType', event);
const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
this.model.set('_featuredImagePosition', this.model.get(field));
this.render(); this.render();
}, },
changeTitleFormat: function (event) { changeTitleFormat: function (event) {
@ -557,6 +565,11 @@ PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
} }
this.changeField('titleFormat', event); this.changeField('titleFormat', event);
}, },
changeFeaturedImagePosition: function (event) {
const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
this.changeField(field, event);
this.changeField('_featuredImagePosition', event);
},
}); });
Module.PostsWidgetView = base.WidgetView.extend({ Module.PostsWidgetView = base.WidgetView.extend({

View File

@ -158,31 +158,31 @@
<div class="mailpoet_form_field_title"><%= __('Featured image position') %></div> <div class="mailpoet_form_field_title"><%= __('Featured image position') %></div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="centered" {{#ifCond model.featuredImagePosition '==' 'centered' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="centered" {{#ifCond _featuredImagePosition '==' 'centered' }}CHECKED{{/ifCond}}/>
<%= __('Centered') %> <%= __('Centered') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="left" {{#ifCond model.featuredImagePosition '==' 'left' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="left" {{#ifCond _featuredImagePosition '==' 'left' }}CHECKED{{/ifCond}}/>
<%= __('Left') %> <%= __('Left') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="right" {{#ifCond model.featuredImagePosition '==' 'right' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="right" {{#ifCond _featuredImagePosition '==' 'right' }}CHECKED{{/ifCond}}/>
<%= __('Right') %> <%= __('Right') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="alternate" {{#ifCond model.featuredImagePosition '==' 'alternate' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="alternate" {{#ifCond _featuredImagePosition '==' 'alternate' }}CHECKED{{/ifCond}}/>
<%= __('Alternate') %> <%= __('Alternate') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="none" {{#ifCond model.featuredImagePosition '==' 'none' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_automated_latest_content_featured_image_position" class="mailpoet_automated_latest_content_featured_image_position" value="none" {{#ifCond _featuredImagePosition '==' 'none' }}CHECKED{{/ifCond}}/>
<%= __('None') %> <%= __('None') %>
</label> </label>
</div> </div>

View File

@ -113,31 +113,31 @@
<div class="mailpoet_form_field_title"><%= __('Featured image position') %></div> <div class="mailpoet_form_field_title"><%= __('Featured image position') %></div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="centered" {{#ifCond model.featuredImagePosition '==' 'centered' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="centered" {{#ifCond _featuredImagePosition '==' 'centered' }}CHECKED{{/ifCond}}/>
<%= __('Centered') %> <%= __('Centered') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="left" {{#ifCond model.featuredImagePosition '==' 'left' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="left" {{#ifCond _featuredImagePosition '==' 'left' }}CHECKED{{/ifCond}}/>
<%= __('Left') %> <%= __('Left') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="right" {{#ifCond model.featuredImagePosition '==' 'right' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="right" {{#ifCond _featuredImagePosition '==' 'right' }}CHECKED{{/ifCond}}/>
<%= __('Right') %> <%= __('Right') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="alternate" {{#ifCond model.featuredImagePosition '==' 'alternate' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="alternate" {{#ifCond _featuredImagePosition '==' 'alternate' }}CHECKED{{/ifCond}}/>
<%= __('Alternate') %> <%= __('Alternate') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="none" {{#ifCond model.featuredImagePosition '==' 'none' }}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="none" {{#ifCond _featuredImagePosition '==' 'none' }}CHECKED{{/ifCond}}/>
<%= __('None') %> <%= __('None') %>
</label> </label>
</div> </div>