|
|
@@ -25,17 +25,17 @@ import 'select2';
|
|
|
|
|
|
|
|
|
|
|
|
var Module = {};
|
|
|
|
var Module = {};
|
|
|
|
var base = BaseBlock;
|
|
|
|
var base = BaseBlock;
|
|
|
|
var PostsDisplayOptionsSettingsView;
|
|
|
|
var ProductsDisplayOptionsSettingsView;
|
|
|
|
var SinglePostSelectionSettingsView;
|
|
|
|
var SingleProductSelectionSettingsView;
|
|
|
|
var EmptyPostSelectionSettingsView;
|
|
|
|
var EmptyProductSelectionSettingsView;
|
|
|
|
var PostSelectionSettingsView;
|
|
|
|
var ProductSelectionSettingsView;
|
|
|
|
var PostsSelectionCollectionView;
|
|
|
|
var ProductSelectionCollectionView;
|
|
|
|
|
|
|
|
|
|
|
|
Module.PostsBlockModel = base.BlockModel.extend({
|
|
|
|
Module.ProductsBlockModel = base.BlockModel.extend({
|
|
|
|
stale: ['_selectedPosts', '_availablePosts', '_transformedPosts'],
|
|
|
|
stale: ['_selectedProducts', '_availableProducts', '_transformedProducts'],
|
|
|
|
defaults: function productsModelDefaults() {
|
|
|
|
defaults: function productsModelDefaults() {
|
|
|
|
return this._getDefaults({
|
|
|
|
return this._getDefaults({
|
|
|
|
type: 'posts',
|
|
|
|
type: 'products',
|
|
|
|
withLayout: true,
|
|
|
|
withLayout: true,
|
|
|
|
amount: '10',
|
|
|
|
amount: '10',
|
|
|
|
offset: 0,
|
|
|
|
offset: 0,
|
|
|
@@ -64,125 +64,128 @@ Module.PostsBlockModel = base.BlockModel.extend({
|
|
|
|
sortBy: 'newest', // 'newest'|'oldest',
|
|
|
|
sortBy: 'newest', // 'newest'|'oldest',
|
|
|
|
showDivider: true, // true|false
|
|
|
|
showDivider: true, // true|false
|
|
|
|
divider: {},
|
|
|
|
divider: {},
|
|
|
|
_selectedPosts: [],
|
|
|
|
_selectedProducts: [],
|
|
|
|
_availablePosts: [],
|
|
|
|
_availableProducts: [],
|
|
|
|
_transformedPosts: new (App.getBlockTypeModel('container'))(),
|
|
|
|
_transformedProducts: new (App.getBlockTypeModel('container'))(),
|
|
|
|
}, App.getConfig().get('blockDefaults.posts'));
|
|
|
|
}, App.getConfig().get('blockDefaults.posts'));
|
|
|
|
},
|
|
|
|
},
|
|
|
|
relations: function relations() {
|
|
|
|
relations: function relations() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
readMoreButton: App.getBlockTypeModel('button'),
|
|
|
|
readMoreButton: App.getBlockTypeModel('button'),
|
|
|
|
divider: App.getBlockTypeModel('divider'),
|
|
|
|
divider: App.getBlockTypeModel('divider'),
|
|
|
|
_selectedPosts: Backbone.Collection,
|
|
|
|
_selectedProducts: Backbone.Collection,
|
|
|
|
_availablePosts: Backbone.Collection,
|
|
|
|
_availableProducts: Backbone.Collection,
|
|
|
|
_transformedPosts: App.getBlockTypeModel('container'),
|
|
|
|
_transformedProducts: App.getBlockTypeModel('container'),
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
initialize: function initialize() {
|
|
|
|
initialize: function initialize() {
|
|
|
|
var POST_REFRESH_DELAY_MS = 500;
|
|
|
|
var PRODUCT_REFRESH_DELAY_MS = 500;
|
|
|
|
var refreshAvailablePosts = _.debounce(
|
|
|
|
var refreshAvailableProducts = _.debounce(
|
|
|
|
this.fetchAvailablePosts.bind(this),
|
|
|
|
this.fetchAvailableProducts.bind(this),
|
|
|
|
POST_REFRESH_DELAY_MS
|
|
|
|
PRODUCT_REFRESH_DELAY_MS
|
|
|
|
);
|
|
|
|
);
|
|
|
|
var refreshTransformedPosts = _.debounce(
|
|
|
|
var refreshTransformedProducts = _.debounce(
|
|
|
|
this._refreshTransformedPosts.bind(this),
|
|
|
|
this._refreshTransformedProducts.bind(this),
|
|
|
|
POST_REFRESH_DELAY_MS
|
|
|
|
PRODUCT_REFRESH_DELAY_MS
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// Attach Radio.Requests API primarily for highlighting
|
|
|
|
// Attach Radio.Requests API primarily for highlighting
|
|
|
|
_.extend(this, Radio.Requests);
|
|
|
|
_.extend(this, Radio.Requests);
|
|
|
|
|
|
|
|
|
|
|
|
this.fetchAvailablePosts();
|
|
|
|
this.fetchAvailableProducts();
|
|
|
|
this.on('change', this._updateDefaults, this);
|
|
|
|
this.on('change', this._updateDefaults, this);
|
|
|
|
this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', refreshAvailablePosts);
|
|
|
|
this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', refreshAvailableProducts);
|
|
|
|
this.on('loadMorePosts', this._loadMorePosts, this);
|
|
|
|
this.on('loadMoreProducts', this._loadMoreProducts, this);
|
|
|
|
|
|
|
|
|
|
|
|
this.listenTo(this.get('_selectedPosts'), 'add remove reset', refreshTransformedPosts);
|
|
|
|
this.listenTo(this.get('_selectedProducts'), 'add remove reset', refreshTransformedProducts);
|
|
|
|
this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider change:titlePosition', refreshTransformedPosts);
|
|
|
|
this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider change:titlePosition', refreshTransformedProducts);
|
|
|
|
this.listenTo(this.get('readMoreButton'), 'change', refreshTransformedPosts);
|
|
|
|
this.listenTo(this.get('readMoreButton'), 'change', refreshTransformedProducts);
|
|
|
|
this.listenTo(this.get('divider'), 'change', refreshTransformedPosts);
|
|
|
|
this.listenTo(this.get('divider'), 'change', refreshTransformedProducts);
|
|
|
|
|
|
|
|
|
|
|
|
this.on('insertSelectedPosts', this._insertSelectedPosts, this);
|
|
|
|
this.on('insertSelectedProducts', this._insertSelectedProducts, this);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
fetchAvailablePosts: function fetchAvailablePosts() {
|
|
|
|
fetchAvailableProducts: function fetchAvailableProducts() {
|
|
|
|
var that = this;
|
|
|
|
var that = this;
|
|
|
|
this.set('offset', 0);
|
|
|
|
this.set('offset', 0);
|
|
|
|
CommunicationComponent.getPosts(this.toJSON()).done(function getPostsDone(posts) {
|
|
|
|
CommunicationComponent.getPosts(this.toJSON()).done(function getPostsDone(products) {
|
|
|
|
that.get('_availablePosts').reset(posts);
|
|
|
|
that.get('_availableProducts').reset(products);
|
|
|
|
that.get('_selectedPosts').reset(); // Empty out the collection
|
|
|
|
that.get('_selectedProducts').reset(); // Empty out the collection
|
|
|
|
that.trigger('change:_availablePosts');
|
|
|
|
that.trigger('change:_availableProducts');
|
|
|
|
}).fail(function getPostsFail() {
|
|
|
|
}).fail(function getProductsFail() {
|
|
|
|
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
|
|
|
|
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
_loadMorePosts: function loadMorePosts() {
|
|
|
|
_loadMoreProducts: function loadMoreProducts() {
|
|
|
|
var that = this;
|
|
|
|
var that = this;
|
|
|
|
var postCount = this.get('_availablePosts').length;
|
|
|
|
var productsCount = this.get('_availableProducts').length;
|
|
|
|
var nextOffset = this.get('offset') + Number(this.get('amount'));
|
|
|
|
var nextOffset = this.get('offset') + Number(this.get('amount'));
|
|
|
|
|
|
|
|
|
|
|
|
if (postCount === 0 || postCount < nextOffset) {
|
|
|
|
if (productsCount === 0 || productsCount < nextOffset) {
|
|
|
|
// No more posts to load
|
|
|
|
// No more posts to load
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.set('offset', nextOffset);
|
|
|
|
this.set('offset', nextOffset);
|
|
|
|
this.trigger('loadingMorePosts');
|
|
|
|
this.trigger('loadingMoreProducts');
|
|
|
|
|
|
|
|
|
|
|
|
CommunicationComponent.getPosts(this.toJSON()).done(function getPostsDone(posts) {
|
|
|
|
CommunicationComponent.getPosts(this.toJSON()).done(function getPostsDone(products) {
|
|
|
|
that.get('_availablePosts').add(posts);
|
|
|
|
that.get('_availableProducts').add(products);
|
|
|
|
that.trigger('change:_availablePosts');
|
|
|
|
that.trigger('change:_availableProducts');
|
|
|
|
}).fail(function getPostsFail() {
|
|
|
|
}).fail(function getProductsFail() {
|
|
|
|
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
|
|
|
|
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
|
|
|
|
}).always(function getPostsAlways() {
|
|
|
|
}).always(function getProductsAlways() {
|
|
|
|
that.trigger('morePostsLoaded');
|
|
|
|
that.trigger('moreProductsLoaded');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
return true;
|
|
|
|
return true;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
_refreshTransformedPosts: function refreshTransformedPosts() {
|
|
|
|
_refreshTransformedProducts: function refreshTransformedProducts() {
|
|
|
|
var that = this;
|
|
|
|
var that = this;
|
|
|
|
var data = this.toJSON();
|
|
|
|
var data = this.toJSON();
|
|
|
|
|
|
|
|
|
|
|
|
data.posts = this.get('_selectedPosts').pluck('ID');
|
|
|
|
data.posts = this.get('_selectedProducts').pluck('ID');
|
|
|
|
|
|
|
|
|
|
|
|
if (data.posts.length === 0) {
|
|
|
|
if (data.posts.length === 0) {
|
|
|
|
this.get('_transformedPosts').get('blocks').reset();
|
|
|
|
this.get('_transformedProducts').get('blocks').reset();
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
CommunicationComponent.getTransformedPosts(data).done(function getTransformedPostsDone(posts) {
|
|
|
|
CommunicationComponent.getTransformedPosts(data)
|
|
|
|
that.get('_transformedPosts').get('blocks').reset(posts, { parse: true });
|
|
|
|
.done(function getTransformedPostsDone(products) {
|
|
|
|
}).fail(function getTransformedPostsFail() {
|
|
|
|
that.get('_transformedProducts').get('blocks').reset(products, { parse: true });
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.fail(function getTransformedProductsFail() {
|
|
|
|
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
|
|
|
|
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
_insertSelectedPosts: function insertSelectedPosts() {
|
|
|
|
_insertSelectedProducts: function insertSelectedProducts() {
|
|
|
|
var data = this.toJSON();
|
|
|
|
var data = this.toJSON();
|
|
|
|
var index = this.collection.indexOf(this);
|
|
|
|
var index = this.collection.indexOf(this);
|
|
|
|
var collection = this.collection;
|
|
|
|
var collection = this.collection;
|
|
|
|
|
|
|
|
|
|
|
|
data.posts = this.get('_selectedPosts').pluck('ID');
|
|
|
|
data.posts = this.get('_selectedProducts').pluck('ID');
|
|
|
|
|
|
|
|
|
|
|
|
if (data.posts.length === 0) return;
|
|
|
|
if (data.posts.length === 0) return;
|
|
|
|
|
|
|
|
|
|
|
|
CommunicationComponent.getTransformedPosts(data).done(function getTransformedPostsDone(posts) {
|
|
|
|
CommunicationComponent.getTransformedPosts(data)
|
|
|
|
collection.add(JSON.parse(JSON.stringify(posts)), { at: index });
|
|
|
|
.done(function getTransformedPostsDone(proucts) {
|
|
|
|
}).fail(function getTransformedPostsFail() {
|
|
|
|
collection.add(JSON.parse(JSON.stringify(proucts)), { at: index });
|
|
|
|
|
|
|
|
}).fail(function getTransformedProductsFail() {
|
|
|
|
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
|
|
|
|
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
Module.PostsBlockView = base.BlockView.extend({
|
|
|
|
Module.ProductsBlockView = base.BlockView.extend({
|
|
|
|
className: 'mailpoet_block mailpoet_posts_block mailpoet_droppable_block',
|
|
|
|
className: 'mailpoet_block mailpoet_products_block mailpoet_droppable_block',
|
|
|
|
getTemplate: function getTemplate() { return window.templates.productsBlock; },
|
|
|
|
getTemplate: function getTemplate() { return window.templates.productsBlock; },
|
|
|
|
modelEvents: {}, // Forcefully disable all events
|
|
|
|
modelEvents: {}, // Forcefully disable all events
|
|
|
|
regions: _.extend({
|
|
|
|
regions: _.extend({
|
|
|
|
postsRegion: '.mailpoet_posts_container',
|
|
|
|
productsRegion: '.mailpoet_products_container',
|
|
|
|
}, base.BlockView.prototype.regions),
|
|
|
|
}, base.BlockView.prototype.regions),
|
|
|
|
onDragSubstituteBy: function onDragSubstituteBy() { return Module.PostsWidgetView; },
|
|
|
|
onDragSubstituteBy: function onDragSubstituteBy() { return Module.ProductsWidgetView; },
|
|
|
|
initialize: function initialize() {
|
|
|
|
initialize: function initialize() {
|
|
|
|
base.BlockView.prototype.initialize.apply(this, arguments);
|
|
|
|
base.BlockView.prototype.initialize.apply(this, arguments);
|
|
|
|
|
|
|
|
|
|
|
|
this.toolsView = new Module.PostsBlockToolsView({ model: this.model });
|
|
|
|
this.toolsView = new Module.ProductsBlockToolsView({ model: this.model });
|
|
|
|
this.model.reply('blockView', this.notifyAboutSelf, this);
|
|
|
|
this.model.reply('blockView', this.notifyAboutSelf, this);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onRender: function onRender() {
|
|
|
|
onRender: function onRender() {
|
|
|
@@ -199,7 +202,7 @@ Module.PostsBlockView = base.BlockView.extend({
|
|
|
|
disableDragAndDrop: true,
|
|
|
|
disableDragAndDrop: true,
|
|
|
|
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
|
|
|
|
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
|
|
|
|
};
|
|
|
|
};
|
|
|
|
this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
|
|
|
|
this.showChildView('productsRegion', new ContainerView({ model: this.model.get('_transformedProducts'), renderOptions: renderOptions }));
|
|
|
|
},
|
|
|
|
},
|
|
|
|
notifyAboutSelf: function notifyAboutSelf() {
|
|
|
|
notifyAboutSelf: function notifyAboutSelf() {
|
|
|
|
return this;
|
|
|
|
return this;
|
|
|
@@ -209,20 +212,20 @@ Module.PostsBlockView = base.BlockView.extend({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
Module.PostsBlockToolsView = base.BlockToolsView.extend({
|
|
|
|
Module.ProductsBlockToolsView = base.BlockToolsView.extend({
|
|
|
|
getSettingsView: function getSettingsView() { return Module.PostsBlockSettingsView; },
|
|
|
|
getSettingsView: function getSettingsView() { return Module.ProductsBlockSettingsView; },
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
|
|
|
|
Module.ProductsBlockSettingsView = base.BlockSettingsView.extend({
|
|
|
|
getTemplate: function getTemplate() { return window.templates.productsBlockSettings; },
|
|
|
|
getTemplate: function getTemplate() { return window.templates.productsBlockSettings; },
|
|
|
|
regions: {
|
|
|
|
regions: {
|
|
|
|
selectionRegion: '.mailpoet_settings_posts_selection',
|
|
|
|
selectionRegion: '.mailpoet_settings_products_selection',
|
|
|
|
displayOptionsRegion: '.mailpoet_settings_posts_display_options',
|
|
|
|
displayOptionsRegion: '.mailpoet_settings_products_display_options',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
events: {
|
|
|
|
events: {
|
|
|
|
'click .mailpoet_settings_posts_show_display_options': 'switchToDisplayOptions',
|
|
|
|
'click .mailpoet_settings_products_show_display_options': 'switchToDisplayOptions',
|
|
|
|
'click .mailpoet_settings_posts_show_post_selection': 'switchToPostSelection',
|
|
|
|
'click .mailpoet_settings_products_show_product_selection': 'switchToProductSelection',
|
|
|
|
'click .mailpoet_settings_posts_insert_selected': 'insertPosts',
|
|
|
|
'click .mailpoet_settings_products_insert_selected': 'insertProducts',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
templateContext: function templateContext() {
|
|
|
|
templateContext: function templateContext() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
@@ -231,8 +234,8 @@ Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
initialize: function initialize() {
|
|
|
|
initialize: function initialize() {
|
|
|
|
this.model.trigger('startEditing');
|
|
|
|
this.model.trigger('startEditing');
|
|
|
|
this.selectionView = new PostSelectionSettingsView({ model: this.model });
|
|
|
|
this.selectionView = new ProductSelectionSettingsView({ model: this.model });
|
|
|
|
this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
|
|
|
|
this.displayOptionsView = new ProductsDisplayOptionsSettingsView({ model: this.model });
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onRender: function onRender() {
|
|
|
|
onRender: function onRender() {
|
|
|
|
var that = this;
|
|
|
|
var that = this;
|
|
|
@@ -258,33 +261,33 @@ Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
switchToDisplayOptions: function switchToDisplayOptions() {
|
|
|
|
switchToDisplayOptions: function switchToDisplayOptions() {
|
|
|
|
// Switch content view
|
|
|
|
// Switch content view
|
|
|
|
this.$('.mailpoet_settings_posts_selection').addClass('mailpoet_closed');
|
|
|
|
this.$('.mailpoet_settings_products_selection').addClass('mailpoet_closed');
|
|
|
|
this.$('.mailpoet_settings_posts_display_options').removeClass('mailpoet_closed');
|
|
|
|
this.$('.mailpoet_settings_products_display_options').removeClass('mailpoet_closed');
|
|
|
|
|
|
|
|
|
|
|
|
// Switch controls
|
|
|
|
// Switch controls
|
|
|
|
this.$('.mailpoet_settings_posts_show_display_options').addClass('mailpoet_hidden');
|
|
|
|
this.$('.mailpoet_settings_products_show_display_options').addClass('mailpoet_hidden');
|
|
|
|
this.$('.mailpoet_settings_posts_show_post_selection').removeClass('mailpoet_hidden');
|
|
|
|
this.$('.mailpoet_settings_products_show_product_selection').removeClass('mailpoet_hidden');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
switchToPostSelection: function switchToPostSelection() {
|
|
|
|
switchToProductSelection: function switchToProductSelection() {
|
|
|
|
// Switch content view
|
|
|
|
// Switch content view
|
|
|
|
this.$('.mailpoet_settings_posts_display_options').addClass('mailpoet_closed');
|
|
|
|
this.$('.mailpoet_settings_products_display_options').addClass('mailpoet_closed');
|
|
|
|
this.$('.mailpoet_settings_posts_selection').removeClass('mailpoet_closed');
|
|
|
|
this.$('.mailpoet_settings_products_selection').removeClass('mailpoet_closed');
|
|
|
|
|
|
|
|
|
|
|
|
// Switch controls
|
|
|
|
// Switch controls
|
|
|
|
this.$('.mailpoet_settings_posts_show_post_selection').addClass('mailpoet_hidden');
|
|
|
|
this.$('.mailpoet_settings_products_show_product_selection').addClass('mailpoet_hidden');
|
|
|
|
this.$('.mailpoet_settings_posts_show_display_options').removeClass('mailpoet_hidden');
|
|
|
|
this.$('.mailpoet_settings_products_show_display_options').removeClass('mailpoet_hidden');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
insertPosts: function insertPosts() {
|
|
|
|
insertProducts: function insertProducts() {
|
|
|
|
this.model.trigger('insertSelectedPosts');
|
|
|
|
this.model.trigger('insertSelectedProducts');
|
|
|
|
this.model.destroy();
|
|
|
|
this.model.destroy();
|
|
|
|
this.close();
|
|
|
|
this.close();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
PostsSelectionCollectionView = Marionette.CollectionView.extend({
|
|
|
|
ProductSelectionCollectionView = Marionette.CollectionView.extend({
|
|
|
|
className: 'mailpoet_post_scroll_container',
|
|
|
|
className: 'mailpoet_post_scroll_container',
|
|
|
|
childView: function childView() { return SinglePostSelectionSettingsView; },
|
|
|
|
childView: function childView() { return SingleProductSelectionSettingsView; },
|
|
|
|
emptyView: function emptyView() { return EmptyPostSelectionSettingsView; },
|
|
|
|
emptyView: function emptyView() { return EmptyProductSelectionSettingsView; },
|
|
|
|
childViewOptions: function childViewOptions() {
|
|
|
|
childViewOptions: function childViewOptions() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
blockModel: this.blockModel,
|
|
|
|
blockModel: this.blockModel,
|
|
|
@@ -294,18 +297,18 @@ PostsSelectionCollectionView = Marionette.CollectionView.extend({
|
|
|
|
this.blockModel = options.blockModel;
|
|
|
|
this.blockModel = options.blockModel;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
events: {
|
|
|
|
events: {
|
|
|
|
scroll: 'onPostsScroll',
|
|
|
|
scroll: 'onProductsScroll',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onPostsScroll: function onPostsScroll(event) {
|
|
|
|
onProductsScroll: function onProductsScroll(event) {
|
|
|
|
var $postsBox = jQuery(event.target);
|
|
|
|
var $postsBox = jQuery(event.target);
|
|
|
|
if ($postsBox.scrollTop() + $postsBox.innerHeight() >= $postsBox[0].scrollHeight) {
|
|
|
|
if ($postsBox.scrollTop() + $postsBox.innerHeight() >= $postsBox[0].scrollHeight) {
|
|
|
|
// Load more posts if scrolled to bottom
|
|
|
|
// Load more posts if scrolled to bottom
|
|
|
|
this.blockModel.trigger('loadMorePosts');
|
|
|
|
this.blockModel.trigger('loadMoreProducts');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
PostSelectionSettingsView = Marionette.View.extend({
|
|
|
|
ProductSelectionSettingsView = Marionette.View.extend({
|
|
|
|
getTemplate: function getTemplate() {
|
|
|
|
getTemplate: function getTemplate() {
|
|
|
|
return window.templates.postSelectionProductsBlockSettings;
|
|
|
|
return window.templates.postSelectionProductsBlockSettings;
|
|
|
|
},
|
|
|
|
},
|
|
|
@@ -326,10 +329,10 @@ PostSelectionSettingsView = Marionette.View.extend({
|
|
|
|
this.$('.mailpoet_post_scroll_container').scrollTop(0);
|
|
|
|
this.$('.mailpoet_post_scroll_container').scrollTop(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
loadingMorePosts: function loadingMorePosts() {
|
|
|
|
loadingMoreProducts: function loadingMoreProducts() {
|
|
|
|
this.$('.mailpoet_post_selection_loading').css('visibility', 'visible');
|
|
|
|
this.$('.mailpoet_post_selection_loading').css('visibility', 'visible');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
morePostsLoaded: function morePostsLoaded() {
|
|
|
|
moreProductsLoaded: function moreProductsLoaded() {
|
|
|
|
this.$('.mailpoet_post_selection_loading').css('visibility', 'hidden');
|
|
|
|
this.$('.mailpoet_post_selection_loading').css('visibility', 'hidden');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
@@ -339,15 +342,15 @@ PostSelectionSettingsView = Marionette.View.extend({
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onRender: function onRender() {
|
|
|
|
onRender: function onRender() {
|
|
|
|
var postsView;
|
|
|
|
var productsView;
|
|
|
|
// Dynamically update available post types
|
|
|
|
// Dynamically update available post types
|
|
|
|
CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
|
|
|
|
CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
|
|
|
|
postsView = new PostsSelectionCollectionView({
|
|
|
|
productsView = new ProductSelectionCollectionView({
|
|
|
|
collection: this.model.get('_availablePosts'),
|
|
|
|
collection: this.model.get('_availableProducts'),
|
|
|
|
blockModel: this.model,
|
|
|
|
blockModel: this.model,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.showChildView('posts', postsView);
|
|
|
|
this.showChildView('posts', productsView);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onAttach: function onAttach() {
|
|
|
|
onAttach: function onAttach() {
|
|
|
|
var that = this;
|
|
|
|
var that = this;
|
|
|
@@ -424,12 +427,12 @@ PostSelectionSettingsView = Marionette.View.extend({
|
|
|
|
changeField: function changeField(field, event) {
|
|
|
|
changeField: function changeField(field, event) {
|
|
|
|
this.model.set(field, jQuery(event.target).val());
|
|
|
|
this.model.set(field, jQuery(event.target).val());
|
|
|
|
},
|
|
|
|
},
|
|
|
|
_updateContentTypes: function updateContentTypes(postTypes) {
|
|
|
|
_updateContentTypes: function updateContentTypes(productTypes) {
|
|
|
|
var select = this.$('.mailpoet_settings_posts_content_type');
|
|
|
|
var select = this.$('.mailpoet_settings_posts_content_type');
|
|
|
|
var selectedValue = this.model.get('contentType');
|
|
|
|
var selectedValue = this.model.get('contentType');
|
|
|
|
|
|
|
|
|
|
|
|
select.find('option').remove();
|
|
|
|
select.find('option').remove();
|
|
|
|
_.each(postTypes, function postTypesMap(type) {
|
|
|
|
_.each(productTypes, function productTypesMap(type) {
|
|
|
|
select.append(jQuery('<option>', {
|
|
|
|
select.append(jQuery('<option>', {
|
|
|
|
value: type.name,
|
|
|
|
value: type.name,
|
|
|
|
text: type.label,
|
|
|
|
text: type.label,
|
|
|
@@ -439,15 +442,15 @@ PostSelectionSettingsView = Marionette.View.extend({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
EmptyPostSelectionSettingsView = Marionette.View.extend({
|
|
|
|
EmptyProductSelectionSettingsView = Marionette.View.extend({
|
|
|
|
getTemplate: function getTemplate() { return window.templates.emptyPostProductsBlockSettings; },
|
|
|
|
getTemplate: function getTemplate() { return window.templates.emptyPostProductsBlockSettings; },
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
SinglePostSelectionSettingsView = Marionette.View.extend({
|
|
|
|
SingleProductSelectionSettingsView = Marionette.View.extend({
|
|
|
|
getTemplate: function getTemplate() { return window.templates.singlePostProductsBlockSettings; },
|
|
|
|
getTemplate: function getTemplate() { return window.templates.singlePostProductsBlockSettings; },
|
|
|
|
events: function events() {
|
|
|
|
events: function events() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
'change .mailpoet_select_post_checkbox': 'postSelectionChange',
|
|
|
|
'change .mailpoet_select_product_checkbox': 'productSelectionChange',
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
templateContext: function templateContext() {
|
|
|
|
templateContext: function templateContext() {
|
|
|
@@ -459,18 +462,18 @@ SinglePostSelectionSettingsView = Marionette.View.extend({
|
|
|
|
initialize: function initialize(options) {
|
|
|
|
initialize: function initialize(options) {
|
|
|
|
this.blockModel = options.blockModel;
|
|
|
|
this.blockModel = options.blockModel;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
postSelectionChange: function postSelectionChange(event) {
|
|
|
|
productSelectionChange: function productSelectionChange(event) {
|
|
|
|
var checkBox = jQuery(event.target);
|
|
|
|
var checkBox = jQuery(event.target);
|
|
|
|
var selectedPostsCollection = this.blockModel.get('_selectedPosts');
|
|
|
|
var selectedProductsCollection = this.blockModel.get('_selectedProducts');
|
|
|
|
if (checkBox.prop('checked')) {
|
|
|
|
if (checkBox.prop('checked')) {
|
|
|
|
selectedPostsCollection.add(this.model);
|
|
|
|
selectedProductsCollection.add(this.model);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
selectedPostsCollection.remove(this.model);
|
|
|
|
selectedProductsCollection.remove(this.model);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
|
|
|
|
ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
|
|
|
|
getTemplate: function getTemplate() {
|
|
|
|
getTemplate: function getTemplate() {
|
|
|
|
return window.templates.displayOptionsProductsBlockSettings;
|
|
|
|
return window.templates.displayOptionsProductsBlockSettings;
|
|
|
|
},
|
|
|
|
},
|
|
|
@@ -578,14 +581,14 @@ PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
Module.PostsWidgetView = base.WidgetView.extend({
|
|
|
|
Module.ProductsWidgetView = base.WidgetView.extend({
|
|
|
|
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
|
|
|
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
|
|
|
|
getTemplate: function getTemplate() { return window.templates.productsInsertion; },
|
|
|
|
getTemplate: function getTemplate() { return window.templates.productsInsertion; },
|
|
|
|
behaviors: {
|
|
|
|
behaviors: {
|
|
|
|
DraggableBehavior: {
|
|
|
|
DraggableBehavior: {
|
|
|
|
cloneOriginal: true,
|
|
|
|
cloneOriginal: true,
|
|
|
|
drop: function drop() {
|
|
|
|
drop: function drop() {
|
|
|
|
return new Module.PostsBlockModel({}, { parse: true });
|
|
|
|
return new Module.ProductsBlockModel({}, { parse: true });
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
@@ -596,13 +599,13 @@ App.on('before:start', function beforeStartApp(BeforeStartApp) {
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
BeforeStartApp.registerBlockType('products', {
|
|
|
|
BeforeStartApp.registerBlockType('products', {
|
|
|
|
blockModel: Module.PostsBlockModel,
|
|
|
|
blockModel: Module.ProductsBlockModel,
|
|
|
|
blockView: Module.PostsBlockView,
|
|
|
|
blockView: Module.ProductsBlockView,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
BeforeStartApp.registerWidget({
|
|
|
|
BeforeStartApp.registerWidget({
|
|
|
|
name: 'products',
|
|
|
|
name: 'products',
|
|
|
|
widgetView: Module.PostsWidgetView,
|
|
|
|
widgetView: Module.ProductsWidgetView,
|
|
|
|
priority: 98,
|
|
|
|
priority: 98,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|