DG DC add stream faces to page party

app/views/aspects/index.html.haml

@@ -56,5 +56,10 @@
 
 .span-5.rightBar.last
   /= render 'aspects/selected_contacts', :stream => @stream
+  #selected_aspect_contacts.section
+    .title.no_icon
+      %h5
+        = @stream.title
+    .content
 
   = render 'shared/right_sections'

app/views/templates/_templates.haml

@@ -11,7 +11,8 @@
   "status_message",
   "activity_streams_photo",
   "reshare",
-  "likes_info"].each do |template_name|
+  "likes_info",
+  "stream_faces"].each do |template_name|
 
   %script{:id => "#{template_name.gsub("_","-")}-template", :type => 'text/template'}
     != File.read("#{Rails.root}/app/views/templates/#{template_name}.jst")

app/views/templates/stream_faces.jst

+<% _.each(people, function(person) { %>
+  <a href="/people/<%= person.id %>" title="<%= person.name %>">
+    <img class="avatar" src="<%= person.avatar.small %>" />
+  </a>
+<% }) %>

public/javascripts/app/router.js

@@ -15,6 +15,9 @@ app.Router = Backbone.Router.extend({
   stream : function() {
     app.stream = new app.views.Stream().render();
     $("#main_stream").html(app.stream.el);
+
+    var streamFacesView = new app.views.StreamFaces({collection : app.stream.collection}).render();
+    $('#selected_aspect_contacts .content').html(streamFacesView.el);
   }
 });
 

public/javascripts/app/views/stream_faces_view.js

+app.views.StreamFaces = app.views.Base.extend({
+
+  template_name : "#stream-faces-template",
+
+  initialize : function(){
+    this.updatePeople()
+    this.collection.bind("add", this.updatePeople, this)
+  },
+
+  presenter : function() {
+    return {people : this.people}
+  },
+
+  updatePeople : function(){
+    if(this.people && this.people.length >= 15) { return }
+    this.people = _(this.collection.models).chain()
+      .map(function(post){ return post.get("author") })
+      .compact()
+      .uniq(false, function(person){ return person.id })
+      .value()
+      .slice(0,15);
+
+    this.render();
+  }
+})

spec/javascripts/app/views/stream_faces_view_spec.js

+describe("app.views.StreamFaces", function(){
+  beforeEach(function(){
+    var rebeccaBlack = factory.author({name : "Rebecca Black", id : 1492})
+    this.post1 = factory.post({author : rebeccaBlack})
+    this.post2 = factory.post({author : factory.author({name : "John Stamos", id : 1987})})
+    this.post3 = factory.post({author : factory.author({name : "Michelle Tanner", id : 1986})})
+    this.post4 = factory.post({author : factory.author({name : "Barack Obama", id : 2000})})
+    this.post5 = factory.post({author : factory.author({name : "Obie-won Kenobie", id : 2020})})
+    this.post6 = factory.post({author : rebeccaBlack})
+    this.post7 = factory.post({author : rebeccaBlack})
+
+    this.stream = new app.collections.Stream([this.post1, this.post2, this.post3, this.post4, this.post5, this.post6, this.post7]);
+    this.view = new app.views.StreamFaces({collection : this.stream})
+  })
+
+  it("should take them unique", function(){
+    this.view.render()
+    expect(this.view.people.length).toBe(5)
+  })
+
+  it("findsPeople when the collection changes", function(){
+    this.stream.add(factory.post({author : factory.author({name : "Harriet Tubman"})}))
+    expect(this.view.people.length).toBe(6)
+  })
+
+
+  describe(".render", function(){
+    beforeEach(function(){
+      this.view.render()
+    })
+
+    it("appends the people's avatars", function(){
+      expect(this.view.$("img").length).toBe(5)
+    })
+
+    it("links to the people", function(){
+      expect(this.view.$("a").length).toBe(5)
+    })
+
+    it("rerenders when people are added, but caps to 15 people", function(){
+      var posts = _.map(_.range(20), function(){ return factory.post()})
+      this.stream.reset(posts) //add 20 posts silently to the collection
+      this.stream.add(factory.post) //trigger an update
+      expect(this.view.$("img").length).toBe(15)
+    })
+  })
+})

spec/javascripts/helpers/factory.js

+factory = {
+  id : {
+    current : 0,
+    next : function(){
+      return factory.id.current += 1
+    }
+  },
+
+  guid : function(){
+    return 'omGUID' + this.id.next()
+  },
+
+  like : function(overrides){
+    var defaultAttrs = {
+      "created_at" : "2012-01-04T00:55:30Z",
+      "author" : this.author(),
+      "guid" : this.guid(),
+      "id" : this.id.next()
+    }
+
+    return _.extend(defaultAttrs, overrides)
+  },
+
+  author : function(overrides){
+    var id = this.id.next()
+      var defaultAttrs = {
+        "name":"Awesome User" + id,
+        "id": id,
+        "avatar":{
+          "large":"http://localhost:3000/images/user/uma.jpg",
+          "medium":"http://localhost:3000/images/user/uma.jpg",
+          "small":"http://localhost:3000/images/user/uma.jpg"}
+      }
+
+    return _.extend(defaultAttrs, overrides)
+  },
+
+  post :  function(overrides) {
+    var defaultAttrs = {
+      "provider_display_name" : null,
+      "created_at" : "2012-01-03T19:53:13Z",
+      "last_three_comments" : null,
+      "public" : false,
+      "guid" : this.guid(),
+      "image_url" : null,
+      "author" : this.author(),
+      "o_embed_cache" : null,
+      "photos" : [],
+      "text" : "jasmine is bomb",
+      "reshares_count" : 0,
+      "id" : this.id.next(),
+      "object_url" : null,
+      "root" : null,
+      "post_type" : "StatusMessage",
+      "likes_count" : 0,
+      "comments_count" : 0,
+      "photos_count" : 0
+    }
+
+    return new app.models.Post(_.extend(defaultAttrs, overrides))
+  }
+}