diff --git a/app/assets/javascripts/discourse/components/eyeline.js b/app/assets/javascripts/discourse/components/eyeline.js index 81d21e372..1dc3defb3 100644 --- a/app/assets/javascripts/discourse/components/eyeline.js +++ b/app/assets/javascripts/discourse/components/eyeline.js @@ -18,31 +18,31 @@ Discourse.Eyeline = function Eyeline(selector) { /** - Call this to analyze the positions of all the nodes in a set + Call this to analyze the positions of all the nodes in a set - returns: a hash with top, bottom and onScreen items + returns: a hash with top, bottom and onScreen items {top: , bottom:, onScreen:} **/ Discourse.Eyeline.analyze = function(rows) { - var current, goingUp, i, increment, offset, + var current, goingUp, i, increment, offset, winHeight, winOffset, detected, onScreen, bottom, top, outerHeight; - + if (rows.length === 0) return; - + i = parseInt(rows.length / 2, 10); increment = parseInt(rows.length / 4, 10); goingUp = undefined; winOffset = window.pageYOffset || $('html').scrollTop(); winHeight = window.innerHeight || $(window).height(); - + while (true) { if (i === 0 || (i >= rows.length - 1)) { break; } current = $(rows[i]); offset = current.offset(); - + if (offset.top - winHeight < winOffset) { if (offset.top + current.outerHeight() - window.innerHeight > winOffset) { break; @@ -69,22 +69,22 @@ Discourse.Eyeline.analyze = function(rows) { goingUp = undefined; } } - + onScreen = []; bottom = i; // quick analysis of whats on screen while(true) { if(i < 0) { break;} - + current = $(rows[i]); offset = current.offset(); outerHeight = current.outerHeight(); - + // on screen if(offset.top > winOffset && offset.top + outerHeight < winOffset + winHeight) { onScreen.unshift(i); } else { - + if(offset.top < winOffset) { top = i; break; @@ -94,7 +94,7 @@ Discourse.Eyeline.analyze = function(rows) { } i -=1; } - + return({top: top, bottom: bottom, onScreen: onScreen}); }; @@ -169,11 +169,10 @@ Discourse.Eyeline.prototype.update = function() { @method flushRest **/ Discourse.Eyeline.prototype.flushRest = function() { - var _this = this; + var eyeline = this; return $(this.selector).each(function(i, elem) { - var $elem; - $elem = $(elem); - return _this.trigger('saw', { detail: $elem }); + var $elem = $(elem); + return eyeline.trigger('saw', { detail: $elem }); }); }; diff --git a/app/assets/javascripts/discourse/mixins/scrolling.js b/app/assets/javascripts/discourse/mixins/scrolling.js index 875d71297..d42b67c38 100644 --- a/app/assets/javascripts/discourse/mixins/scrolling.js +++ b/app/assets/javascripts/discourse/mixins/scrolling.js @@ -35,7 +35,7 @@ Discourse.Scrolling = Em.Mixin.create({ }, /** - Begin watching for scroll events. They will be called at max every 100ms. + Stop watching for scroll events. @method unbindScrolling */ diff --git a/app/assets/javascripts/discourse/templates/user/stream.js.handlebars b/app/assets/javascripts/discourse/templates/user/stream.js.handlebars index ef49ca4ad..180d610de 100644 --- a/app/assets/javascripts/discourse/templates/user/stream.js.handlebars +++ b/app/assets/javascripts/discourse/templates/user/stream.js.handlebars @@ -1,27 +1,24 @@ -
- {{#each view.stream.content}} - -
diff --git a/app/assets/javascripts/discourse/views/list/list_topics_view.js b/app/assets/javascripts/discourse/views/list/list_topics_view.js index 58dde1c94..f101664e2 100644 --- a/app/assets/javascripts/discourse/views/list/list_topics_view.js +++ b/app/assets/javascripts/discourse/views/list/list_topics_view.js @@ -76,9 +76,9 @@ Discourse.ListTopicsView = Discourse.View.extend(Discourse.Scrolling, { // When the topic list is scrolled scrolled: function(e) { - var _ref; this.saveScrollPos(); - return (_ref = this.get('eyeline')) ? _ref.update() : void 0; + var eyeline = this.get('eyeline'); + if (eyeline) { eyeline.update(); } } diff --git a/app/assets/javascripts/discourse/views/user/user_stream_view.js b/app/assets/javascripts/discourse/views/user/user_stream_view.js index 09faac697..216db69f8 100644 --- a/app/assets/javascripts/discourse/views/user/user_stream_view.js +++ b/app/assets/javascripts/discourse/views/user/user_stream_view.js @@ -9,34 +9,23 @@ **/ Discourse.UserStreamView = Discourse.View.extend(Discourse.Scrolling, { templateName: 'user/stream', + loading: false, + elementId: 'user-stream', scrolled: function(e) { + var eyeline = this.get('eyeline'); + if (eyeline) { eyeline.update(); } + }, - var $userStreamBottom = $('#user-stream-bottom'); - if ($userStreamBottom.data('loading')) return; + loadMore: function() { + var userStreamView = this; + if (userStreamView.get('loading')) { return; } - var position = $userStreamBottom.position(); - if (!($userStreamBottom && position)) return; - - var docViewTop = $(window).scrollTop(); - var windowHeight = $(window).height(); - var docViewBottom = docViewTop + windowHeight; - - if (position.top < docViewBottom) { - $userStreamBottom.data('loading', true); - this.set('loading', true); - - var userStreamView = this; - var user = this.get('stream.user'); - var stream = this.get('stream'); - - stream.findItems().then(function() { - userStreamView.set('loading', false); - Em.run.schedule('afterRender', function() { - $userStreamBottom.data('loading', null); - }); - }); - } + var stream = this.get('stream'); + stream.findItems().then(function() { + userStreamView.set('loading', false); + userStreamView.get('eyeline').flushRest(); + }); }, willDestroyElement: function() { @@ -45,8 +34,15 @@ Discourse.UserStreamView = Discourse.View.extend(Discourse.Scrolling, { didInsertElement: function() { this.bindScrolling(); - } + var eyeline = new Discourse.Eyeline('#user-stream .item'); + this.set('eyeline', eyeline); + + var userStreamView = this; + eyeline.on('sawBottom', function() { + userStreamView.loadMore(); + }); + } }); diff --git a/app/assets/stylesheets/application/user.css.scss b/app/assets/stylesheets/application/user.css.scss index 7666b7b2f..8805aa21b 100644 --- a/app/assets/stylesheets/application/user.css.scss +++ b/app/assets/stylesheets/application/user.css.scss @@ -237,14 +237,11 @@ } } -#user-stream-bottom { - margin-bottom: 50px; - clear: both; -} - #user-stream { width: 840px; float: left; + margin-bottom: 50px; + .excerpt { margin: 5px 0px; font-size: 13px;