github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-03 07:33:36 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix jumpy downward post loading

Browse Source
This commit is contained in:
Toby Zerner 2015-02-08 15:58:53 +10:30
parent 199bbcf5d4
commit d053b5760e
1 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
framework/core/ember/app/components/discussions/stream-item.js
View File

@ -77,32 +77,34 @@ export default Ember.Component.extend({
return false; return false;
} }
// If new posts are being loaded in an upwards direction, then when they // If new posts are being loaded in an upwards direction, then when
// are rendered, the rest of the posts will be pushed down the page. // they are rendered, the rest of the posts will be pushed down the
// However, we want to maintain the current scroll position relative to // page. If loaded in a downwards direction from the end of a
// the content after the gap. To do this, we need to find item directly // discussion, the terminal gap will disappear and the page will
// after the gap and use it as an anchor. // scroll up a bit before the new posts are rendered. In order to
if (this.get('direction') === 'up') { // maintain the current scroll position relative to the content
var anchor = this.$().nextAll('.item:first'); // before/after the gap, we need to find item directly after the gap
// and use it as an anchor.
var siblingFunc = this.get('direction') === 'up' ? 'nextAll' : 'prevAll';
var anchor = this.$()[siblingFunc]('.item:first');
// Immediately after the posts have been loaded (but before they // Immediately after the posts have been loaded (but before they
// have been rendered,) we want to grab the distance from the top of // have been rendered,) we want to grab the distance from the top of
// the viewport to the top of the anchor element. // the viewport to the top of the anchor element.
this.get('stream').one('postsLoaded', function() { this.get('stream').one('postsLoaded', function() {
if (anchor.length) { if (anchor.length) {
var scrollOffset = anchor.offset().top - $(document).scrollTop(); var scrollOffset = anchor.offset().top - $(document).scrollTop();
} }
// After they have been rendered, we scroll back to a position // After they have been rendered, we scroll back to a position
// so that the distance from the top of the viewport to the top // so that the distance from the top of the viewport to the top
// of the anchor element is the same as before. If there is no // of the anchor element is the same as before. If there is no
// anchor (i.e. this gap is terminal,) then we'll scroll to the // anchor (i.e. this gap is terminal,) then we'll scroll to the
// bottom of the document. // bottom of the document.
Ember.run.scheduleOnce('afterRender', function() { Ember.run.scheduleOnce('afterRender', function() {
$('body').scrollTop(anchor.length ? anchor.offset().top - scrollOffset : $('body').height()); $('body').scrollTop(anchor.length ? anchor.offset().top - scrollOffset : $('body').height());
});
}); });
} });
// Tell the controller that we want to load the range of posts that this // Tell the controller that we want to load the range of posts that this
// gap represents. We also specify which direction we want to load the // gap represents. We also specify which direction we want to load the