FIX: automatically load pages of topics list until it fills up the entire screen

This commit is contained in:
Régis Hanol 2015-09-09 17:41:34 +02:00
parent 3ee5cea9e2
commit 4f890a439c
3 changed files with 36 additions and 32 deletions

View File

@ -1,5 +1,6 @@
import Eyeline from 'discourse/lib/eyeline';
import Scrolling from 'discourse/mixins/scrolling';
import { on } from 'ember-addons/ember-computed-decorators';
// Provides the ability to load more items for a view which is scrolled to the bottom.
export default Ember.Mixin.create(Ember.ViewTargetActionSupport, Scrolling, {
@ -9,15 +10,17 @@ export default Ember.Mixin.create(Ember.ViewTargetActionSupport, Scrolling, {
if (eyeline) { eyeline.update(); }
},
_bindEyeline: function() {
@on("didInsertElement")
_bindEyeline() {
const eyeline = new Eyeline(this.get('eyelineSelector') + ":last");
this.set('eyeline', eyeline);
eyeline.on('sawBottom', () => this.send('loadMore'));
this.bindScrolling();
}.on('didInsertElement'),
},
_removeEyeline: function() {
@on("willDestroyElement")
_removeEyeline() {
this.unbindScrolling();
}.on('willDestroyElement')
}
});

View File

@ -6,16 +6,16 @@ import debounce from 'discourse/lib/debounce';
easier.
**/
const ScrollingDOMMethods = {
bindOnScroll: function(onScrollMethod, name) {
bindOnScroll(onScrollMethod, name) {
name = name || 'default';
$(document).bind('touchmove.discourse-' + name, onScrollMethod);
$(window).bind('scroll.discourse-' + name, onScrollMethod);
$(document).bind(`touchmove.discourse-${name}`, onScrollMethod);
$(window).bind(`scroll.discourse-${name}`, onScrollMethod);
},
unbindOnScroll: function(name) {
unbindOnScroll(name) {
name = name || 'default';
$(window).unbind('scroll.discourse-' + name);
$(document).unbind('touchmove.discourse-' + name);
$(window).unbind(`scroll.discourse-${name}`);
$(document).unbind(`touchmove.discourse-${name}`);
}
};
@ -23,16 +23,15 @@ const Scrolling = Ember.Mixin.create({
// Begin watching for scroll events. By default they will be called at max every 100ms.
// call with {debounce: N} for a diff time
bindScrolling: function(opts) {
opts = opts || {debounce: 100};
bindScrolling(opts) {
opts = opts || { debounce: 100 };
// So we can not call the scrolled event while transitioning
const router = Discourse.__container__.lookup('router:main').router;
const self = this;
var onScrollMethod = function() {
let onScrollMethod = () => {
if (router.activeTransition) { return; }
return Em.run.scheduleOnce('afterRender', self, 'scrolled');
return Ember.run.scheduleOnce('afterRender', this, 'scrolled');
};
if (opts.debounce) {
@ -40,10 +39,9 @@ const Scrolling = Ember.Mixin.create({
}
ScrollingDOMMethods.bindOnScroll(onScrollMethod, opts.name);
Em.run.scheduleOnce('afterRender', onScrollMethod);
},
unbindScrolling: function(name) {
unbindScrolling(name) {
ScrollingDOMMethods.unbindOnScroll(name);
}
});

View File

@ -1,5 +1,7 @@
import UrlRefresh from 'discourse/mixins/url-refresh';
import LoadMore from "discourse/mixins/load-more";
import { on } from "ember-addons/ember-computed-decorators";
import computed from "ember-addons/ember-computed-decorators";
export default Ember.View.extend(LoadMore, UrlRefresh, {
eyelineSelector: '.topic-list-item',
@ -8,30 +10,31 @@ export default Ember.View.extend(LoadMore, UrlRefresh, {
loadMore() {
const self = this;
Discourse.notifyTitle(0);
this.get('controller').loadMoreTopics().then(function (hasMoreResults) {
Em.run.schedule('afterRender', function() {
self.saveScrollPosition();
});
this.get('controller').loadMoreTopics().then(hasMoreResults => {
Ember.run.schedule('afterRender', () => self.saveScrollPosition());
if (!hasMoreResults) {
self.get('eyeline').flushRest();
this.get('eyeline').flushRest();
} else if ($(window).height() >= $(document).height()) {
this.send("loadMore");
}
});
}
},
_readjustScrollPosition: function() {
@on("didInsertElement")
_readjustScrollPosition() {
const scrollTo = this.session.get('topicListScrollPosition');
if (typeof scrollTo !== "undefined") {
Em.run.schedule('afterRender', function() {
$(window).scrollTop(scrollTo+1);
});
if (scrollTo && scrollTo >= 0) {
Ember.run.schedule('afterRender', () => $(window).scrollTop(scrollTo + 1));
} else if ($(window).height() >= $(document).height()) {
this.send("loadMore");
}
}.on('didInsertElement'),
},
_updateTitle: function() {
Discourse.notifyTitle(this.get('controller.topicTrackingState.incomingCount'));
}.observes('controller.topicTrackingState.incomingCount'),
@computed("controller.topicTrackingState.incomingCount")
_updateTitle(incomingCount) {
Discourse.notifyTitle(incomingCount);
},
// Remember where we were scrolled to
saveScrollPosition() {