diff --git a/assets/css/src/newsletter_editor/contentBlocks/posts.styl b/assets/css/src/newsletter_editor/contentBlocks/posts.styl index 4f60ff8e5a..e15951bdd9 100644 --- a/assets/css/src/newsletter_editor/contentBlocks/posts.styl +++ b/assets/css/src/newsletter_editor/contentBlocks/posts.styl @@ -1,15 +1,12 @@ .mailpoet_posts_block - box-shadow(none) + padding-left: 0 + padding-right: 0 - & > .mailpoet_content - font-size: 1em - text-align: center - background-color: $primary-active-color - margin: 20px 0 - padding: 15px - box-shadow(inset 1px 2px 1px $primary-inset-shadow-color) - color: $white-color - border-radius(3px) +.mailpoet_posts_block_posts + overflow: auto + + & > .mailpoet_block + width: 100% .mailpoet_post_selection_filter_row margin-top: 5px diff --git a/assets/js/src/newsletter_editor/blocks/posts.js b/assets/js/src/newsletter_editor/blocks/posts.js index 1fc2449978..581cec9941 100644 --- a/assets/js/src/newsletter_editor/blocks/posts.js +++ b/assets/js/src/newsletter_editor/blocks/posts.js @@ -31,7 +31,7 @@ define([ base = BaseBlock; Module.PostsBlockModel = base.BlockModel.extend({ - stale: ['_selectedPosts', '_availablePosts'], + stale: ['_selectedPosts', '_availablePosts', '_transformedPosts'], defaults: function() { return this._getDefaults({ type: 'posts', @@ -63,6 +63,7 @@ define([ divider: {}, _selectedPosts: [], _availablePosts: [], + _transformedPosts: new (App.getBlockTypeModel('container'))(), }, App.getConfig().get('blockDefaults.posts')); }, relations: function() { @@ -71,15 +72,26 @@ define([ divider: App.getBlockTypeModel('divider'), _selectedPosts: Backbone.Collection, _availablePosts: Backbone.Collection, + _transformedPosts: App.getBlockTypeModel('container'), }; }, initialize: function() { - var that = this; + var that = this, + POST_REFRESH_DELAY_MS = 500, + refreshAvailablePosts = _.debounce(this.fetchAvailablePosts.bind(this), POST_REFRESH_DELAY_MS), + refreshTransformedPosts = _.debounce(this._refreshTransformedPosts.bind(this), POST_REFRESH_DELAY_MS); + // Attach Radio.Requests API primarily for highlighting _.extend(this, Radio.Requests); this.fetchAvailablePosts(); - this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', this._scheduleFetchAvailablePosts, this); + this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', refreshAvailablePosts); + + this.listenTo(this.get('_selectedPosts'), 'add remove reset', refreshTransformedPosts); + this.on('change:displayType change:titleFormat change:titlePosition change:titleAlignment change:titleIsLink change:imagePadded change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider', refreshTransformedPosts); + this.listenTo(this.get('readMoreButton'), 'change', refreshTransformedPosts); + this.listenTo(this.get('divider'), 'change', refreshTransformedPosts); + this.on('insertSelectedPosts', this._insertSelectedPosts, this); }, fetchAvailablePosts: function() { @@ -93,20 +105,25 @@ define([ console.log('Posts fetchPosts error', arguments); }); }, - /** - * Batch more changes during a specific time, instead of fetching - * ALC posts on each model change - */ - _scheduleFetchAvailablePosts: function() { - var timeout = 500, - that = this; - if (this._fetchPostsTimer !== undefined) { - clearTimeout(this._fetchPostsTimer); + _refreshTransformedPosts: function() { + var that = this, + data = this.toJSON(), + index = this.collection.indexOf(this), + collection = this.get('_transformedPosts'); + + data.posts = this.get('_selectedPosts').pluck('ID'); + + if (data.posts.length === 0) { + that.get('_transformedPosts').get('blocks').reset(); + return; } - this._fetchPostsTimer = setTimeout(function() { - that.fetchAvailablePosts(); - that._fetchPostsTimer = undefined; - }, timeout); + + WordpressComponent.getTransformedPosts(data).done(function(posts) { + console.log('Available posts fetched', arguments); + that.get('_transformedPosts').get('blocks').reset(posts, {parse: true}); + }).fail(function() { + console.log('Posts fetchPosts error', arguments); + }); }, _insertSelectedPosts: function() { var that = this, @@ -131,6 +148,9 @@ define([ className: "mailpoet_block mailpoet_posts_block mailpoet_droppable_block", getTemplate: function() { return templates.postsBlock; }, modelEvents: {}, + regions: _.extend({ + postsRegion: '.mailpoet_posts_block_posts', + }, base.BlockView.prototype.regions), onDragSubstituteBy: function() { return Module.PostsWidgetView; }, initialize: function() { base.BlockView.prototype.initialize.apply(this, arguments); @@ -142,6 +162,13 @@ define([ this.toolsRegion.show(this.toolsView); } this.trigger('showSettings'); + + var ContainerView = App.getBlockTypeView('container'), + renderOptions = { + disableTextEditor: true, + disableDragAndDrop: true, + }; + this.postsRegion.show(new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions })); }, notifyAboutSelf: function() { return this; diff --git a/views/newsletter/templates/blocks/automatedLatestContent/block.hbs b/views/newsletter/templates/blocks/automatedLatestContent/block.hbs index 4ccad5e09a..a20ba39414 100644 --- a/views/newsletter/templates/blocks/automatedLatestContent/block.hbs +++ b/views/newsletter/templates/blocks/automatedLatestContent/block.hbs @@ -1,6 +1,6 @@
-
-
+
+
diff --git a/views/newsletter/templates/blocks/posts/block.hbs b/views/newsletter/templates/blocks/posts/block.hbs index c63da77dc7..2d6297c5ed 100644 --- a/views/newsletter/templates/blocks/posts/block.hbs +++ b/views/newsletter/templates/blocks/posts/block.hbs @@ -1,5 +1,5 @@
- <%= __('Your posts will be inserted here') %> +