diff --git a/app/views/aspects/index.html.haml b/app/views/aspects/index.html.haml
index ff5f18bea0b7f0451b5ac1909c208c1211e72a92..278899a73bb115bdccb3e16205f58b85ad43dc8f 100644
--- a/app/views/aspects/index.html.haml
+++ b/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'
diff --git a/app/views/templates/_templates.haml b/app/views/templates/_templates.haml
index 00064d3f8a28e52d1eabe02261ac249e8e370264..db497c8e2a2c08217a18157043d4f58334d86000 100644
--- a/app/views/templates/_templates.haml
+++ b/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")
diff --git a/app/views/templates/stream_faces.jst b/app/views/templates/stream_faces.jst
new file mode 100644
index 0000000000000000000000000000000000000000..fb59576c4b58bf3f5b1e7b6891788fda84933ef6
--- /dev/null
+++ b/app/views/templates/stream_faces.jst
@@ -0,0 +1,5 @@
+<% _.each(people, function(person) { %>
+ <a href="/people/<%= person.id %>" title="<%= person.name %>">
+ <img class="avatar" src="<%= person.avatar.small %>" />
+ </a>
+<% }) %>
diff --git a/public/javascripts/app/router.js b/public/javascripts/app/router.js
index 37c540ef58a17b0951046f14d0b8ca10942680ca..dde392e68e8e8c931e34e9aecd8a98e26c99d992 100644
--- a/public/javascripts/app/router.js
+++ b/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);
}
});
diff --git a/public/javascripts/app/views/stream_faces_view.js b/public/javascripts/app/views/stream_faces_view.js
new file mode 100644
index 0000000000000000000000000000000000000000..7bd1427aee2a490c24d0c939739ecb95f8e119ce
--- /dev/null
+++ b/public/javascripts/app/views/stream_faces_view.js
@@ -0,0 +1,25 @@
+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();
+ }
+})
diff --git a/spec/javascripts/app/views/stream_faces_view_spec.js b/spec/javascripts/app/views/stream_faces_view_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..d94a8bc9935292d38e3bb241f8f6707226e30a13
--- /dev/null
+++ b/spec/javascripts/app/views/stream_faces_view_spec.js
@@ -0,0 +1,47 @@
+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)
+ })
+ })
+})
diff --git a/spec/javascripts/helpers/factory.js b/spec/javascripts/helpers/factory.js
new file mode 100644
index 0000000000000000000000000000000000000000..92dd30341e3be095912ee3c04a5139c4ab1cf8ba
--- /dev/null
+++ b/spec/javascripts/helpers/factory.js
@@ -0,0 +1,62 @@
+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))
+ }
+}