User stream now uses eyeline for loading more content.

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 });
   });
 };
 

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
   */

app/assets/javascripts/discourse/templates/user/stream.js.handlebars

@@ -1,27 +1,24 @@
-<div id='user-stream'>
-  {{#each view.stream.content}}
-    <div {{bindAttr class=":item hidden deleted moderator_action"}}>
-      <div class='clearfix info'>
-        <a href="{{unbound userUrl}}" class='avatar-link'><div class='avatar-wrapper'>{{avatar this imageSize="large" extraClasses="actor" ignoreTitle="true"}}</div></a>
-        <span class='time'>{{date path="created_at" leaveAgo="true"}}</span>
-        <span class="title">
-          <a href="{{unbound postUrl}}">{{unbound title}}</a>
-        </span>
-        <span class="type">{{unbound descriptionHtml}}</span>
-      </div>
-      <p class='excerpt'>
-      {{{unbound excerpt}}}
-      </p>
-      {{#each children}}
-        <div class='child-actions'>
-          <i class="icon {{unbound icon}}"></i>
-        {{#each items}}
-        <a href="{{unbound userUrl}}" class='avatar-link'><div class='avatar-wrapper'>{{avatar this imageSize="tiny" extraClasses="actor" ignoreTitle="true"}}</div></a>
-        {{/each}}
-        </div>
-      {{/each}}
+{{#each view.stream.content}}
+  <div {{bindAttr class=":item hidden deleted moderator_action"}}>
+    <div class='clearfix info'>
+      <a href="{{unbound userUrl}}" class='avatar-link'><div class='avatar-wrapper'>{{avatar this imageSize="large" extraClasses="actor" ignoreTitle="true"}}</div></a>
+      <span class='time'>{{date path="created_at" leaveAgo="true"}}</span>
+      <span class="title">
+        <a href="{{unbound postUrl}}">{{unbound title}}</a>
+      </span>
+      <span class="type">{{unbound descriptionHtml}}</span>
     </div>
-  {{/each}}
+    <p class='excerpt'>
+    {{{unbound excerpt}}}
+    </p>
+    {{#each children}}
+      <div class='child-actions'>
+        <i class="icon {{unbound icon}}"></i>
+      {{#each items}}
+      <a href="{{unbound userUrl}}" class='avatar-link'><div class='avatar-wrapper'>{{avatar this imageSize="tiny" extraClasses="actor" ignoreTitle="true"}}</div></a>
+      {{/each}}
+      </div>
+    {{/each}}
+  </div>
+{{/each}}
 
-</div>
-<div id="user-stream-bottom"></div>

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(); }
   }
 
 

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();
+    });
+  }
 });
 
 

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;