diff --git a/ghost/admin/templates/posts.hbs b/ghost/admin/templates/posts.hbs index e48cd9632d..0e5a3e8683 100644 --- a/ghost/admin/templates/posts.hbs +++ b/ghost/admin/templates/posts.hbs @@ -11,7 +11,7 @@ {{#link-to "editor.new" class="btn btn-green" title="New Post"}}{{/link-to}} - {{#view "paginated-scroll-box" tagName="section" classNames="content-list-content"}} + {{#view "paginated-scroll-box" tagName="section" classNames="content-list-content js-content-scrollbox"}}
    {{#each post in model itemController="posts/post" itemView="post-item-view" itemTagName="li"}} {{#link-to "posts.post" post class="permalink" title="Edit this post"}} diff --git a/ghost/admin/views/post-item-view.js b/ghost/admin/views/post-item-view.js index 275e7049b9..cdda131696 100644 --- a/ghost/admin/views/post-item-view.js +++ b/ghost/admin/views/post-item-view.js @@ -13,8 +13,40 @@ var PostItemView = itemView.extend({ click: function () { this.get('controller').send('showPostContent'); - } + }, + scrollIntoView: function () { + if (!this.get('active')) { + return; + } + var element = this.$(), + offset = element.offset().top, + elementHeight = element.height(), + container = Ember.$('.js-content-scrollbox'), + containerHeight = container.height(), + currentScroll = container.scrollTop(), + isBelowTop, + isAboveBottom, + isOnScreen; + isAboveBottom = offset < containerHeight; + isBelowTop = offset > elementHeight; + + isOnScreen = isBelowTop && isAboveBottom; + + if (!isOnScreen) { + // Scroll so that element is centered in container + // 40 is the amount of padding on the container + container.clearQueue().animate({ + scrollTop: currentScroll + offset - 40 - containerHeight / 2 + }); + } + }, + removeScrollBehaviour: function () { + this.removeObserver('active', this, this.scrollIntoView); + }.on('willDestroyElement'), + addScrollBehaviour: function () { + this.addObserver('active', this, this.scrollIntoView); + }.on('didInsertElement') }); export default PostItemView;