TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 03:14:03 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #4346 from novaugust/scroll-posts

Browse Source 
Scroll post-item-view into view
This commit is contained in:
Hannah Wolfe 2014-12-14 23:17:12 +00:00
commit 6200948dc7
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/templates/posts.hbs
View File

@ -11,7 +11,7 @@
</section>
{{#link-to "editor.new" class="btn btn-green" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
</header>
{{#view "paginated-scroll-box" tagName="section" classNames="content-list-content"}}
{{#view "paginated-scroll-box" tagName="section" classNames="content-list-content js-content-scrollbox"}}
<ol class="posts-list">
{{#each post in model itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
{{#link-to "posts.post" post class="permalink" title="Edit this post"}}

34
ghost/admin/views/post-item-view.js
View File

@ -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;