DG DH; pagination on backbone stream

app/controllers/multis_controller.rb

@@ -13,7 +13,7 @@ class MultisController < ApplicationController
 
     respond_with do |format|
       format.html{ default_stream_action(Stream::Multi) }
-      format.json{ render :json => stream(Stream::Multi).stream_posts.to_json(:include => :author) }
+      format.json{ render :json => stream(Stream::Multi).stream_posts.to_json(:include => {:author => {:include => :profile}}) }
     end
   end
 end

app/views/shared/_stream_element.html.underscore

@@ -2,26 +2,36 @@
 
 <div id="<%= post.guid %>" class="stream_element">
   <div class="right controls">
-    <span>block</span>
-    <span>delete_or_hide</span>
+    <a href="#" class="block_user control_icon">
+     <img src="/images/icons/ignoreuser.png">
+    </a>
+
+    <a href="#" class="delete control_icon remove_post">
+      <img src="/images/deletelabel.png"/>
+    </a>
 
     <img src="/images/ajax-loader.gif" class="hide_loader hidden"/>
   </div>
 
   <div class="sm_body">
+
+    <a href="/people/<%= post.author.id %>">
+      <img src="<%= post.author.profile.image_url_small %>" class="avatar" data-person-id="<%= post.author.id %>"/>
+    </a>
+
     <div class="content">
       <div class="post_initial_info">
         <span class="from">
           <a href="/people/<%= post.author.id %>">
-            <%= post.author.diaspora_handle %>
+            <%= post.author.profile.full_name %>
           </a>
         </span>
 
         <span class="details">
           -
-          <span class="timeago">
-            <%= post.created_at %>
-          </span>
+          <a href="/posts/<%= post.id %>">
+            <time class="timeago" datetime="<%= post.created_at %>"/>
+          </a>
         </span>
 
         <p>

public/javascripts/collections/stream.js

@@ -1,4 +1,12 @@
 var BackboneStream = Backbone.Collection.extend({
-  url: "stream.json",
+  url: function() {
+    if(this.models.length) {
+      return "stream.json?max_time=" + _.last(this.models).intTime() / 1000;
+    }
+    else {
+      return "stream.json";
+    }
+  },
+
   model: Post
 });

public/javascripts/models/post.js

@@ -1,3 +1,10 @@
 var Post = Backbone.Model.extend({
-  url: "/posts/:id"
+  url: "/posts/:id",
+  intTime: function(){
+    return +new Date(this.postAttributes().created_at);
+  },
+
+  postAttributes: function() {
+    return this.attributes[_.keys(this.attributes)[0]];
+  }
 });

public/javascripts/views/stream-view.js

@@ -5,17 +5,42 @@ $(function() {
 
     template: _.template($('#stream-element-template').html()),
 
+    events: {
+      "click #paginate": "loadMore"
+    },
+
     initialize: function(){
-      _.bindAll(this, "appendPost");
+      _.bindAll(this, "appendPost", "collectionFetched");
 
       this.collection = new window.BackboneStream;
       this.collection.bind("add", this.appendPost);
-      this.collection.fetch({add: true});
+      this.loadMore();
     },
 
     appendPost: function(model) {
       $(this.el).append(this.template(model.toJSON()));
     },
+
+    collectionFetched: function() {
+      this.$(".details time").timeago();
+
+      this.$("#paginate").remove();
+      $(this.el).append($("<a>", {
+        href: this.collection.url(),
+        id: "paginate"
+      }).text('more'));
+    },
+
+    loadMore: function(evt) {
+      if(evt) {
+        evt.preventDefault();
+      }
+
+      this.collection.fetch({
+        add: true,
+        success: this.collectionFetched
+      });
+    }
   });
 
   if(window.useBackbone) {