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({
stale: ['_container', '_displayOptionsHidden'],
stale: ['_container', '_displayOptionsHidden', '_featuredImagePosition'],
defaults: function () {
return this._getDefaults({
type: 'automatedLatestContentLayout',
@ -68,6 +68,7 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
imageFullWidth: false, // true|false
titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
featuredImagePosition: 'centered', // 'centered'|'left'|'right'|'alternate'|'none'
fullPostFeaturedImagePosition: 'left', // 'centered'|'left'|'right'|'alternate'|'none'
showAuthor: 'no', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Author:',
showCategories: 'no', // 'no'|'aboveText'|'belowText'
@ -83,6 +84,7 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
divider: {},
_container: new (App.getBlockTypeModel('container'))(),
_displayOptionsHidden: true, // true|false
_featuredImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
}, App.getConfig().get('blockDefaults.automatedLatestContentLayout'));
},
relations: function () {
@ -99,6 +101,9 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
this.listenTo(this.get('divider'), 'change', this._handleChanges);
this.on('add remove update reset', this._handleChanges);
this.on('refreshPosts', this.updatePosts, this);
const field = this.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
this.set('_featuredImagePosition', this.get(field));
},
updatePosts: function (posts) {
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_title_alignment': _.partial(this.changeField, 'titleAlignment'),
'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'),
'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
'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.changeField('displayType', event);
const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
this.model.set('_featuredImagePosition', this.model.get(field));
this.render();
},
changeTitleFormat: function (event) {
@ -330,6 +338,11 @@ Module.AutomatedLatestContentLayoutBlockSettingsView = base.BlockSettingsView.ex
}
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) {
var select = this.$('.mailpoet_automated_latest_content_content_type');
var selectedValue = this.model.get('contentType');

View File

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

View File

@ -158,31 +158,31 @@
<div class="mailpoet_form_field_title"><%= __('Featured image position') %></div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>

View File

@ -113,31 +113,31 @@
<div class="mailpoet_form_field_title"><%= __('Featured image position') %></div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<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') %>
</label>
</div>