From 4f890a439cdd113c58bdb379a55381a4738d1a37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Wed, 9 Sep 2015 17:41:34 +0200 Subject: [PATCH] FIX: automatically load pages of topics list until it fills up the entire screen --- .../discourse/mixins/load-more.js.es6 | 11 ++++--- .../discourse/mixins/scrolling.js.es6 | 24 +++++++------- .../discourse/views/discovery-topics.js.es6 | 33 ++++++++++--------- 3 files changed, 36 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/discourse/mixins/load-more.js.es6 b/app/assets/javascripts/discourse/mixins/load-more.js.es6 index d0e63e4ba..69a7534f7 100644 --- a/app/assets/javascripts/discourse/mixins/load-more.js.es6 +++ b/app/assets/javascripts/discourse/mixins/load-more.js.es6 @@ -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') + } }); diff --git a/app/assets/javascripts/discourse/mixins/scrolling.js.es6 b/app/assets/javascripts/discourse/mixins/scrolling.js.es6 index ffa40294f..b9f75d3df 100644 --- a/app/assets/javascripts/discourse/mixins/scrolling.js.es6 +++ b/app/assets/javascripts/discourse/mixins/scrolling.js.es6 @@ -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); } }); diff --git a/app/assets/javascripts/discourse/views/discovery-topics.js.es6 b/app/assets/javascripts/discourse/views/discovery-topics.js.es6 index 448db126e..7a7665d70 100644 --- a/app/assets/javascripts/discourse/views/discovery-topics.js.es6 +++ b/app/assets/javascripts/discourse/views/discovery-topics.js.es6 @@ -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() {