Update products display options - title properties

[MAILPOET-1843]
This commit is contained in:
Ján Mikláš
2019-04-01 15:37:38 +02:00
committed by Rostislav Wolný
parent 78587c7271
commit 83ffbcad8e
3 changed files with 46 additions and 74 deletions

View File

@@ -44,8 +44,8 @@ Module.ProductsBlockModel = base.BlockModel.extend({
terms: [], // List of category and tag objects terms: [], // List of category and tag objects
search: '', // Search keyword term search: '', // Search keyword term
inclusionType: 'include', // 'include'|'exclude' inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly' displayType: 'titleOnly', // 'short'|'full'|'titleOnly'
titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul' titleFormat: 'h1', // 'h1'|'h2'|'h3'
titleAlignment: 'left', // 'left'|'center'|'right' titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true titleIsLink: false, // false|true
imageFullWidth: false, // true|false imageFullWidth: false, // true|false
@@ -467,13 +467,13 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
'click .mailpoet_posts_select_button': 'showButtonSettings', 'click .mailpoet_posts_select_button': 'showButtonSettings',
'click .mailpoet_posts_select_divider': 'showDividerSettings', 'click .mailpoet_posts_select_divider': 'showDividerSettings',
'change .mailpoet_posts_read_more_type': 'changeReadMoreType', 'change .mailpoet_posts_read_more_type': 'changeReadMoreType',
'change .mailpoet_posts_display_type': 'changeDisplayType', 'change .mailpoet_products_display_type': 'changeDisplayType',
'change .mailpoet_posts_title_format': 'changeTitleFormat', 'change .mailpoet_products_title_format': 'changeTitleFormat',
'change .mailpoet_posts_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'), 'change .mailpoet_products_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
'change .mailpoet_posts_show_divider': _.partial(this.changeBoolField, 'showDivider'), 'change .mailpoet_posts_show_divider': _.partial(this.changeBoolField, 'showDivider'),
'input .mailpoet_posts_show_amount': _.partial(this.changeField, 'amount'), 'input .mailpoet_posts_show_amount': _.partial(this.changeField, 'amount'),
'change .mailpoet_posts_include_or_exclude': _.partial(this.changeField, 'inclusionType'), 'change .mailpoet_posts_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
'change .mailpoet_posts_title_alignment': _.partial(this.changeField, 'titleAlignment'), 'change .mailpoet_products_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': _.partial(this.changeField, 'featuredImagePosition'),
'change .mailpoet_posts_show_author': _.partial(this.changeField, 'showAuthor'), 'change .mailpoet_posts_show_author': _.partial(this.changeField, 'showAuthor'),
@@ -482,7 +482,7 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
'input .mailpoet_posts_categories': _.partial(this.changeField, 'categoriesPrecededBy'), 'input .mailpoet_posts_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
'input .mailpoet_posts_read_more_text': _.partial(this.changeField, 'readMoreText'), 'input .mailpoet_posts_read_more_text': _.partial(this.changeField, 'readMoreText'),
'change .mailpoet_posts_sort_by': _.partial(this.changeField, 'sortBy'), 'change .mailpoet_posts_sort_by': _.partial(this.changeField, 'sortBy'),
'change .mailpoet_automated_latest_content_title_position': _.partial(this.changeField, 'titlePosition'), 'change .mailpoet_products_title_position': _.partial(this.changeField, 'titlePosition'),
}; };
}, },
templateContext: function templateContext() { templateContext: function templateContext() {
@@ -524,21 +524,12 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
}, },
changeDisplayType: function changeDisplayType(event) { changeDisplayType: function changeDisplayType(event) {
var value = jQuery(event.target).val(); var value = jQuery(event.target).val();
if (value === 'titleOnly') { if (value !== 'titleOnly') {
this.$('.mailpoet_posts_title_as_list').removeClass('mailpoet_hidden'); this.$('.mailpoet_products_title_position').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_image_full_width_option').addClass('mailpoet_hidden'); this.$('.mailpoet_products_title_position_separator').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_image_separator').addClass('mailpoet_hidden');
} else { } else {
this.$('.mailpoet_posts_title_as_list').addClass('mailpoet_hidden'); this.$('.mailpoet_products_title_position').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_image_full_width_option').removeClass('mailpoet_hidden'); this.$('.mailpoet_products_title_position_separator').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_image_separator').removeClass('mailpoet_hidden');
// Reset titleFormat if it was set to List when switching away from displayType=titleOnly
if (this.model.get('titleFormat') === 'ul') {
this.model.set('titleFormat', 'h1');
this.$('.mailpoet_posts_title_format').val(['h1']);
this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
}
} }
if (value === 'excerpt') { if (value === 'excerpt') {
@@ -551,16 +542,6 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
}, },
changeTitleFormat: function changeTitleFormat(event) { changeTitleFormat: function changeTitleFormat(event) {
var value = jQuery(event.target).val(); var value = jQuery(event.target).val();
if (value === 'ul') {
this.$('.mailpoet_posts_non_title_list_options').addClass('mailpoet_hidden');
this.model.set('titleIsLink', true);
this.$('.mailpoet_posts_title_as_link').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_links').val(['true']);
} else {
this.$('.mailpoet_posts_non_title_list_options').removeClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
}
this.changeField('titleFormat', event); this.changeField('titleFormat', event);
}, },
}); });

View File

@@ -1337,8 +1337,8 @@
contentType: 'product', contentType: 'product',
postStatus: 'publish', // 'draft'|'pending'|'publish' postStatus: 'publish', // 'draft'|'pending'|'publish'
inclusionType: 'include', // 'include'|'exclude' inclusionType: 'include', // 'include'|'exclude'
displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly' displayType: 'titleOnly', // 'short'|'full'|'titleOnly'
titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul' titleFormat: 'h1', // 'h1'|'h2'|'h3'
titleAlignment: 'left', // 'left'|'center'|'right' titleAlignment: 'left', // 'left'|'center'|'right'
titleIsLink: false, // false|true titleIsLink: false, // false|true
imageFullWidth: false, // true|false imageFullWidth: false, // true|false

View File

@@ -1,22 +1,22 @@
<div class="mailpoet_form_field"> <div class="mailpoet_form_field">
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_display_type" class="mailpoet_posts_display_type" value="excerpt" {{#ifCond model.displayType '==' 'excerpt'}}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_products_display_type" class="mailpoet_products_display_type" value="titleOnly" {{#ifCond model.displayType '==' 'titleOnly'}}CHECKED{{/ifCond}}/>
<%= __('Excerpt') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_posts_display_type" class="mailpoet_posts_display_type" value="full" {{#ifCond model.displayType '==' 'full'}}CHECKED{{/ifCond}}/>
<%= __('Full post') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_posts_display_type" class="mailpoet_posts_display_type" value="titleOnly" {{#ifCond model.displayType '==' 'titleOnly'}}CHECKED{{/ifCond}} />
<%= __('Title only') %> <%= __('Title only') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_products_display_type" class="mailpoet_products_display_type" value="short" {{#ifCond model.displayType '==' 'short'}}CHECKED{{/ifCond}}/>
<%= __('Title and a short description') %>
</label>
</div>
<div class="mailpoet_form_field_radio_option">
<label>
<input type="radio" name="mailpoet_products_display_type" class="mailpoet_products_display_type" value="full" {{#ifCond model.displayType '==' 'full'}}CHECKED{{/ifCond}} />
<%= __('Title and description') %>
</label>
</div>
</div> </div>
<hr class="mailpoet_separator" /> <hr class="mailpoet_separator" />
@@ -25,91 +25,84 @@
<div class="mailpoet_form_field_title"><%= __('Title Format') %></div> <div class="mailpoet_form_field_title"><%= __('Title Format') %></div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_title_format" class="mailpoet_posts_title_format" value="h1" {{#ifCond model.titleFormat '==' 'h1'}}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_products_title_format" class="mailpoet_products_title_format" value="h1" {{#ifCond model.titleFormat '==' 'h1'}}CHECKED{{/ifCond}}/>
<%= __('Heading 1') %> <%= __('Heading 1') %>
</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_title_format" class="mailpoet_posts_title_format" value="h2" {{#ifCond model.titleFormat '==' 'h2'}}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_products_title_format" class="mailpoet_products_title_format" value="h2" {{#ifCond model.titleFormat '==' 'h2'}}CHECKED{{/ifCond}}/>
<%= __('Heading 2') %> <%= __('Heading 2') %>
</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_title_format" class="mailpoet_posts_title_format" value="h3" {{#ifCond model.titleFormat '==' 'h3'}}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_products_title_format" class="mailpoet_products_title_format" value="h3" {{#ifCond model.titleFormat '==' 'h3'}}CHECKED{{/ifCond}}/>
<%= __('Heading 3') %> <%= __('Heading 3') %>
</label> </label>
</div> </div>
<div class="mailpoet_form_field_radio_option mailpoet_posts_title_as_list {{#ifCond model.titleFormat '!=' 'titleOnly'}}mailpoet_hidden{{/ifCond}}">
<label>
<input type="radio" name="mailpoet_posts_title_format" class="mailpoet_posts_title_format" value="ul" {{#ifCond model.titleFormat '==' 'ul'}}CHECKED{{/ifCond}}/>
<%= __('Show as list') %>
</label>
</div>
</div> </div>
<div class="mailpoet_form_field"> <div class="mailpoet_form_field">
<div class="mailpoet_form_field_title"><%= __('Title Alignment') %></div> <div class="mailpoet_form_field_title"><%= __('Title Alignment') %></div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_title_alignment" class="mailpoet_posts_title_alignment" value="left" {{#ifCond model.titleAlignment '==' 'left'}}CHECKED{{/ifCond}} /> <input type="radio" name="mailpoet_products_title_alignment" class="mailpoet_products_title_alignment" value="left" {{#ifCond model.titleAlignment '==' '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_title_alignment" class="mailpoet_posts_title_alignment" value="center" {{#ifCond model.titleAlignment '==' 'center'}}CHECKED{{/ifCond}} /> <input type="radio" name="mailpoet_products_title_alignment" class="mailpoet_products_title_alignment" value="center" {{#ifCond model.titleAlignment '==' 'center'}}CHECKED{{/ifCond}} />
<%= __('Center') %> <%= __('Center') %>
</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_title_alignment" class="mailpoet_posts_title_alignment" value="right" {{#ifCond model.titleAlignment '==' 'right'}}CHECKED{{/ifCond}} /> <input type="radio" name="mailpoet_products_title_alignment" class="mailpoet_products_title_alignment" value="right" {{#ifCond model.titleAlignment '==' 'right'}}CHECKED{{/ifCond}} />
<%= __('Right') %> <%= __('Right') %>
</label> </label>
</div> </div>
</div> </div>
<div class="mailpoet_form_field mailpoet_posts_title_as_link {{#ifCond model.titleFormat '===' 'ul'}}mailpoet_hidden{{/ifCond}}"> <div class="mailpoet_form_field">
<div class="mailpoet_form_field_title"><%= __('Make the post title into a link') %></div> <div class="mailpoet_form_field_title"><%= __('Make the post title into a link') %></div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">
<label> <label>
<input type="radio" name="mailpoet_posts_title_as_links" class="mailpoet_posts_title_as_links" value="true" {{#if model.titleIsLink}}CHECKED{{/if}}/> <input type="radio" name="mailpoet_products_title_as_links" class="mailpoet_products_title_as_links" value="true" {{#if model.titleIsLink}}CHECKED{{/if}}/>
<%= __('Yes') %> <%= __('Yes') %>
</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_title_as_links" class="mailpoet_posts_title_as_links" value="false" {{#unless model.titleIsLink}}CHECKED{{/unless}}/> <input type="radio" name="mailpoet_products_title_as_links" class="mailpoet_products_title_as_links" value="false" {{#unless model.titleIsLink}}CHECKED{{/unless}}/>
<%= __('No') %> <%= __('No') %>
</label> </label>
</div> </div>
</div> </div>
<hr class="mailpoet_separator mailpoet_automated_latest_content_title_position_separator {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}" /> <hr class="mailpoet_separator" />
<div class="mailpoet_form_field mailpoet_automated_latest_content_title_position {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}"> <div class="mailpoet_form_field mailpoet_products_title_position {{#ifCond model.displayType '===' 'titleOnly'}}mailpoet_hidden{{/ifCond}}">
<div class="mailpoet_form_field_title"><%= _x('Title position', 'Setting in the email designer to position the blog post title') %></div> <div class="mailpoet_form_field_title"><%= _x('Product title position', 'Setting in the email designer to position the blog post title') %></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_title_position" class="mailpoet_automated_latest_content_title_position" value="abovePost" {{#ifCond model.titlePosition '!=' 'aboveExcerpt'}}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_products_title_position" class="mailpoet_products_title_position" value="abovePost" {{#ifCond model.titlePosition '!=' 'aboveExcerpt'}}CHECKED{{/ifCond}}/>
<%= _x('Above the post', 'Display the post title above the post block') %> <%= _x('Above the product', 'Display the post title above the post block') %>
</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_title_position" class="mailpoet_automated_latest_content_title_position" value="aboveExcerpt" {{#ifCond model.titlePosition '==' 'aboveExcerpt'}}CHECKED{{/ifCond}}/> <input type="radio" name="mailpoet_products_title_position" class="mailpoet_products_title_position" value="aboveExcerpt" {{#ifCond model.titlePosition '==' 'aboveExcerpt'}}CHECKED{{/ifCond}}/>
<%= _x('Above the excerpt text', 'Display the post title above the post excerpt') %> <%= _x('Above the product description', 'Display the post title above the post excerpt') %>
</label> </label>
</div> </div>
</div> </div>
<hr class="mailpoet_separator mailpoet_posts_image_separator {{#ifCond model.displayType '===' 'titleOnly'}}mailpoet_hidden{{/ifCond}}" /> <hr class="mailpoet_separator mailpoet_products_title_position_separator {{#ifCond model.displayType '===' 'titleOnly'}}mailpoet_hidden{{/ifCond}}" />
<div class="mailpoet_posts_non_title_list_options {{#ifCond model.displayType '==' 'titleOnly'}}{{#ifCond model.titleFormat '==' 'ul'}}mailpoet_hidden{{/ifCond}}{{/ifCond}}"> <div> <!-- empty div for better git diff -->
<div class="mailpoet_form_field mailpoet_posts_featured_image_position_container">
<div class="mailpoet_form_field mailpoet_posts_featured_image_position_container {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}">
<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>
@@ -240,9 +233,7 @@
</div> </div>
<hr class="mailpoet_separator" /> <hr class="mailpoet_separator" />
</div>
<div class="mailpoet_posts_non_title_list_options {{#ifCond model.displayType '==' 'titleOnly'}}{{#ifCond model.titleFormat '==' 'ul'}}mailpoet_hidden{{/ifCond}}{{/ifCond}}">
<div class="mailpoet_form_field"> <div class="mailpoet_form_field">
<div class="mailpoet_form_field_title mailpoet_form_field_title_small mailpoet_form_field_title_inline"><%= __('Show divider between posts') %></div> <div class="mailpoet_form_field_title mailpoet_form_field_title_small mailpoet_form_field_title_inline"><%= __('Show divider between posts') %></div>
<div class="mailpoet_form_field_radio_option"> <div class="mailpoet_form_field_radio_option">