Improve "jump to last" scrolling behaviour

This commit is contained in:
Toby Zerner 2015-01-30 13:05:42 +10:30
parent 12622e6c28
commit 5edc3eba83
4 changed files with 27 additions and 10 deletions

View File

@ -238,7 +238,7 @@ export default Ember.Component.extend({
});
},
goToIndex: function(index) {
goToIndex: function(index, backwards) {
// Let's start by telling our listeners that we're going to load
// posts at this index. Elsewhere we will listen and consequently
// scroll down to the appropriate position.
@ -248,11 +248,30 @@ export default Ember.Component.extend({
// are loaded. We will tell our listeners when they are. Again, a
// listener will scroll down to the appropriate post.
var controller = this;
this.get('stream').loadNearIndex(index).then(function() {
this.get('stream').loadNearIndex(index, backwards).then(function() {
controller.trigger('loadedIndex', index);
});
},
goToFirst: function() {
this.send('goToIndex', 0);
},
goToLast: function() {
this.send('goToIndex', this.get('stream.count') - 1, true);
// If the post stream is loading some new posts, then after it's
// done we'll want to immediately scroll down to the bottom of the
// page.
if (! this.get('stream.lastLoaded')) {
this.get('stream').one('postsLoaded', function() {
Ember.run.scheduleOnce('afterRender', function() {
$('html, body').stop(true).scrollTop($('body').height());
});
});
}
},
loadRange: function(start, end, backwards) {
this.get('stream').loadRange(start, end, backwards);
}

View File

@ -382,11 +382,11 @@ export default Ember.Component.extend({
actions: {
first: function() {
this.get('streamContent').send('goToIndex', 0);
this.get('streamContent').send('goToFirst');
},
last: function() {
this.get('streamContent').send('goToIndex', this.get('count') - 1);
this.get('streamContent').send('goToLast');
}
}
});

View File

@ -109,7 +109,7 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
});
},
loadNearIndex: function(index) {
loadNearIndex: function(index, backwards) {
// Find the item in the post stream which is nearest to this index. If
// it turns out the be the actual post we're trying to load, then we can
// return a resolved promise (i.e. we don't need to make an API
@ -118,10 +118,8 @@ export default Ember.ArrayProxy.extend(Ember.Evented, {
if (item) {
if (! item.gap) {
return Ember.RSVP.resolve([item.get('content')]);
} else {
item.set('direction', 'down').set('loading', true);
}
return this.loadRange(Math.max(item.indexStart, index - this.get('postLoadCount') / 2), item.indexEnd);
return this.loadRange(Math.max(item.indexStart, index - this.get('postLoadCount') / 2), item.indexEnd, backwards);
}
return Ember.RSVP.reject();

View File

@ -56,7 +56,7 @@ export default Ember.View.extend(Ember.Evented, {
// ------------------------------------------------------------------------
// Whenever the controller has switched out the old discussion model for a
// new one, we want to
// new one, we want to begin loading posts according to the ?start param.
loadStreamContentForNewDiscussion: function() {
if (this.get('controller.loaded')) {
this.goToNumber(this.get('controller.start'));
@ -93,7 +93,7 @@ export default Ember.View.extend(Ember.Evented, {
label: 'Reply',
icon: 'reply',
action: function() {
view.get('streamContent').send('goToIndex', view.get('controller.stream.count') - 1);
view.get('streamContent').send('goToLast');
view.get('controller').send('reply');
},
});