mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-13 22:41:32 -05:00
4f3a45552c
Closes #3998 - Scroll the active post into view on page load - If the active post changes and the newly active post is offscreen, scroll it into the middle of the screen
52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
import itemView from 'ghost/views/item-view';
|
|
|
|
var PostItemView = itemView.extend({
|
|
classNameBindings: ['isFeatured:featured', 'isPage:page'],
|
|
|
|
isFeatured: Ember.computed.alias('controller.model.featured'),
|
|
|
|
isPage: Ember.computed.alias('controller.model.page'),
|
|
|
|
doubleClick: function () {
|
|
this.get('controller').send('openEditor');
|
|
},
|
|
|
|
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;
|