diff --git a/app/views/templates/likes_info.jst b/app/views/templates/likes_info.jst index 94f23bd3c..6758e5ffc 100644 --- a/app/views/templates/likes_info.jst +++ b/app/views/templates/likes_info.jst @@ -1,6 +1,16 @@ <% if(likes_count > 0) { %> Heart - - <%= Diaspora.I18n.t('stream.likes', {count: likes_count}) %> - + <% if(likes && likes.length == 0) { %> + + <%= Diaspora.I18n.t('stream.likes', {count: likes_count}) %> + + <% } else { %> + + <% _.each(likes, function(like){ %> + "> + " class="avatar" title="<%= like.get("author").name %>"/> + + <% }) %> + + <% } %> <% } %> diff --git a/public/javascripts/app/models/post.js b/public/javascripts/app/models/post.js index 8ab106e49..3560276f8 100644 --- a/public/javascripts/app/models/post.js +++ b/public/javascripts/app/models/post.js @@ -2,7 +2,7 @@ app.models.Post = Backbone.Model.extend({ urlRoot : "/posts", initialize : function() { this.comments = new app.collections.Comments(this.get("last_three_comments"), {post : this}); - this.likes = new app.collections.Likes(this.get("user_like"), { post : this}); // load in the user like initially + this.likes = new app.collections.Likes([], {post : this}); // load in the user like initially }, createdAt : function() { diff --git a/public/javascripts/app/views/likes_info_view.js b/public/javascripts/app/views/likes_info_view.js index 9af8ed0ad..d889b1c67 100644 --- a/public/javascripts/app/views/likes_info_view.js +++ b/public/javascripts/app/views/likes_info_view.js @@ -2,6 +2,25 @@ app.views.LikesInfo = app.views.StreamObject.extend({ template_name : "#likes-info-template", - className : "likes_container" + className : "likes_container", + events : { + "click .expand_likes" : "showAvatars" + }, + + tooltipSelector : ".avatar", + + presenter : function() { + return _.extend(this.defaultPresenter(), {likes : this.model.likes.models}) + }, + + showAvatars : function(evt){ + if(evt) { evt.preventDefault() } + var self = this; + this.model.likes.fetch() + .done(function(resp){ + // set like attribute and like collection + self.model.set({likes : self.model.likes.reset(resp)}) + }) + } }); diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 142b3ec21..34d27c8cc 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -3449,9 +3449,11 @@ a.toggle_selector .likes_list .avatar + :position relative :float none :height 20px :width 20px + :top 5px #gs-name-form-spinner :position absolute diff --git a/spec/javascripts/app/views/likes_info_spec.js b/spec/javascripts/app/views/likes_info_view_spec.js similarity index 64% rename from spec/javascripts/app/views/likes_info_spec.js rename to spec/javascripts/app/views/likes_info_view_spec.js index 53e4855be..fa2ad9acd 100644 --- a/spec/javascripts/app/views/likes_info_spec.js +++ b/spec/javascripts/app/views/likes_info_view_spec.js @@ -28,5 +28,24 @@ describe("app.views.LikesInfo", function(){ expect($(this.view.el).html().trim()).toBe(""); }) }) + + describe("showAvatars", function(){ + beforeEach(function(){ + spyOn(this.post.likes, "fetch").andCallThrough() + }) + + it("calls fetch on the model's like collection", function(){ + this.view.showAvatars(); + expect(this.post.likes.fetch).toHaveBeenCalled(); + }) + + it("sets the fetched response to the model's likes", function(){ + //placeholder... not sure how to test done functionalty here + }) + + it("re-renders the view", function(){ + //placeholder... not sure how to test done functionalty here + }) + }) })