Display reshares under the post

app/assets/javascripts/app/views/likes_info_view.js

@@ -5,26 +5,32 @@ app.views.LikesInfo = app.views.Base.extend({
   templateName : "likes-info",
 
   events : {
-    "click .expand_likes" : "showAvatars"
+    "click .expand-likes" : "showAvatars"
   },
 
   tooltipSelector : ".avatar",
 
   initialize : function() {
     this.model.interactions.bind('change', this.render, this);
+    this.displayAvatars = false;
   },
 
   presenter : function() {
     return _.extend(this.defaultPresenter(), {
       likes : this.model.interactions.likes.toJSON(),
       likesCount : this.model.interactions.likesCount(),
-      likes_fetched : this.model.interactions.get("fetched"),
+      displayAvatars : this.model.interactions.get("fetched") && this.displayAvatars
     });
   },
 
   showAvatars : function(evt){
     if(evt) { evt.preventDefault() }
-    this.model.interactions.fetch();
+    this.displayAvatars = true;
+    if(!this.model.interactions.get("fetched")){
+      this.model.interactions.fetch();
+    } else {
+      this.model.interactions.trigger("change");
+    }
   }
 });
 // @license-end

app/assets/javascripts/app/views/reshares_info_view.js

@@ -0,0 +1,36 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+
+app.views.ResharesInfo = app.views.Base.extend({
+
+  templateName : "reshares-info",
+
+  events : {
+    "click .expand-reshares" : "showAvatars"
+  },
+
+  tooltipSelector : ".avatar",
+
+  initialize : function() {
+    this.model.interactions.bind("change", this.render, this);
+    this.displayAvatars = false;
+  },
+
+  presenter : function() {
+    return _.extend(this.defaultPresenter(), {
+      reshares : this.model.interactions.reshares.toJSON(),
+      resharesCount : this.model.interactions.resharesCount(),
+      displayAvatars : this.model.interactions.get("fetched") && this.displayAvatars
+    });
+  },
+
+  showAvatars : function(evt){
+    if(evt) { evt.preventDefault() }
+    this.displayAvatars = true;
+    if(!this.model.interactions.get("fetched")){
+      this.model.interactions.fetch();
+    } else {
+      this.model.interactions.trigger("change");
+    }
+  }
+});
+// @license-end

app/assets/javascripts/app/views/stream_post_views.js

@@ -7,6 +7,7 @@ app.views.StreamPost = app.views.Post.extend({
   subviews : {
     ".feedback" : "feedbackView",
     ".likes" : "likesInfoView",
+    ".reshares" : "resharesInfoView",
     ".comments" : "commentStreamView",
     ".post-content" : "postContentView",
     ".oembed" : "oEmbedView",
@@ -55,6 +56,10 @@ app.views.StreamPost = app.views.Post.extend({
     return new app.views.LikesInfo({model : this.model});
   },
 
+  resharesInfoView : function(){
+    return new app.views.ResharesInfo({model : this.model});
+  },
+
   feedbackView : function(){
     if(!app.currentUser.authenticated()) { return null }
     return new app.views.Feedback({model : this.model});

app/assets/stylesheets/stream_element.scss

@@ -65,31 +65,6 @@
       font-size: $font-size-small;
       line-height: $font-size-small;
     }
-    .likes {
-      margin-top: 10px;
-      font-size: 12px;
-      line-height: 16px;
-      .author-name, .bd { display: inline-block; }
-      .author-name { margin-right: 3px; }
-      .entypo-heart {
-        display: inline-block;
-        font-size: 16px;
-        vertical-align: top;
-        margin-top: -2px;
-        margin-right: 5px;
-      }
-    }
-    .stream_photo {
-      float: left;
-      margin-top: 6px;
-    }
-    .status-message-location {
-      font-size: $font-size-small;
-      color: $text-grey;
-    }
-    .leaflet-control-zoom {
-      display: block;
-    }
     .post-content p:last-of-type { margin-bottom: 0; }
     .nsfw-shield {
       color: $text-grey;
@@ -158,3 +133,42 @@
     border: 1px solid $brand-primary;
   }
 }
+
+.stream_element {
+  .likes,
+  .reshares {
+    font-size: 12px;
+    line-height: 16px;
+    margin-top: 10px;
+
+    .author-name,
+    .bd {
+      display: inline-block;
+    }
+
+    .author-name { margin-right: 3px; }
+
+    .entypo-heart,
+    .entypo-reshare {
+      display: inline-block;
+      font-size: 16px;
+      line-height: $line-height-computed;
+      margin-right: 5px;
+      vertical-align: top;
+    }
+  }
+
+  .stream_photo {
+    float: left;
+    margin-top: 6px;
+  }
+
+  .status-message-location {
+    color: $text-grey;
+    font-size: $font-size-small;
+  }
+
+  .leaflet-control-zoom {
+    display: block;
+  }
+}

app/assets/templates/likes-info_tpl.jst.hbs

@@ -4,8 +4,8 @@
       <i class="entypo-heart"></i>
 
       <div class="bd">
-        {{#unless likes_fetched}}
-          <a href="#" class="expand_likes gray">
+        {{#unless displayAvatars}}
+          <a href="#" class="expand-likes gray">
             {{t "stream.likes" count=likesCount}}
           </a>
 

app/assets/templates/reshare_tpl.jst.hbs

@@ -17,11 +17,6 @@
               <a href="/posts/{{id}}">
                 <time class="timeago" datetime="{{created_at}}"/>
               </a>
-
-              {{#if interactions.reshares_count}}
-                -
-                {{t "stream.reshares" count=interactions.reshares_count}}
-              {{/if}}
             </span>
           </div>
       {{/with}}

app/assets/templates/reshares-info_tpl.jst.hbs

@@ -0,0 +1,23 @@
+{{#if resharesCount}}
+  <div class="comment">
+    <div class="media">
+      <i class="entypo-reshare"></i>
+
+      <div class="bd">
+        {{#unless displayAvatars}}
+          <a href="#" class="expand-reshares gray">
+            {{t "stream.reshares" count=resharesCount}}
+          </a>
+
+        {{else}}
+
+          {{#each reshares}}
+            {{#linkToAuthor author}}
+              {{{personImage this 'small' 'micro'}}}
+            {{/linkToAuthor}}
+          {{/each}}
+        {{/unless}}
+      </div>
+    </div>
+  </div>
+{{/if}}

app/assets/templates/stream-element_tpl.jst.hbs

@@ -49,11 +49,6 @@
         <a href="/posts/{{id}}" class="permalink" title="{{t "stream.permalink"}}">
           <i class="entypo-link"></i>
         </a>
-
-        {{#if interactions.reshares_count}}
-          -
-          {{t "stream.reshares" count=interactions.reshares_count}}
-        {{/if}}
       </span>
     </div>
 
@@ -62,6 +57,7 @@
 
     <div class="feedback nsfw-hidden"> </div>
     <div class="likes nsfw-hidden"> </div>
+    <div class="reshares nsfw-hidden"> </div>
     <div class="comments nsfw-hidden"> </div>
   </div>
 </div>

spec/javascripts/app/views/likes_info_view_spec.js

@@ -1,14 +1,6 @@
 describe("app.views.LikesInfo", function(){
   beforeEach(function(){
     loginAs({id : -1, name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
-
-    Diaspora.I18n.load({stream : {
-      pins : {
-        zero : "<%= count %> Pins",
-        one : "<%= count %> Pin"}
-      }
-    });
-
     var posts = $.parseJSON(spec.readFixture("stream_json"));
     this.post = new app.models.Post(posts[0]); // post with a like
     this.view = new app.views.LikesInfo({model: this.post});
@@ -18,7 +10,7 @@ describe("app.views.LikesInfo", function(){
     it("displays a the like count if it is above zero", function() {
       spyOn(this.view.model.interactions, "likesCount").and.returnValue(3);
       this.view.render();
-      expect($(this.view.el).find(".expand_likes").length).toBe(1);
+      expect($(this.view.el).find(".expand-likes").length).toBe(1);
     });
 
     it("does not display the like count if it is zero", function() {
@@ -44,12 +36,10 @@ describe("app.views.LikesInfo", function(){
       expect(this.post.interactions.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
+    it("sets 'displayAvatars' to true", function(){
+      this.view.displayAvatars = false;
+      this.view.showAvatars();
+      expect(this.view.displayAvatars).toBeTruthy();
     });
   });
 });

spec/javascripts/app/views/reshares_info_view_spec.js

@@ -0,0 +1,46 @@
+describe("app.views.ResharesInfo", function(){
+  beforeEach(function(){
+    loginAs({id : -1, name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
+
+    var posts = $.parseJSON(spec.readFixture("stream_json"));
+    this.post = new app.models.Post(posts[0]); // post with a like
+    this.view = new app.views.ResharesInfo({model: this.post});
+  });
+
+  describe(".render", function(){
+    it("displays a the reshare count if it is above zero", function() {
+      spyOn(this.view.model.interactions, "resharesCount").and.returnValue(3);
+      this.view.render();
+      expect($(this.view.el).find(".expand-reshares").length).toBe(1);
+    });
+
+    it("does not display the reshare count if it is zero", function() {
+      spyOn(this.view.model.interactions, "resharesCount").and.returnValue(0);
+      this.view.render();
+      expect($(this.view.el).html().trim()).toBe("");
+    });
+
+    it("fires on a model change", function(){
+      spyOn(this.view, "postRenderTemplate");
+      this.view.model.interactions.trigger("change");
+      expect(this.view.postRenderTemplate).toHaveBeenCalled();
+    });
+  });
+
+  describe("showAvatars", function(){
+    beforeEach(function(){
+      spyOn(this.post.interactions, "fetch").and.callThrough();
+    });
+
+    it("calls fetch on the model's reshare collection", function(){
+      this.view.showAvatars();
+      expect(this.post.interactions.fetch).toHaveBeenCalled();
+    });
+
+    it("sets 'displayAvatars' to true", function(){
+      this.view.displayAvatars = false;
+      this.view.showAvatars();
+      expect(this.view.displayAvatars).toBeTruthy();
+    });
+  });
+});

spec/javascripts/app/views/stream_post_spec.js

@@ -66,18 +66,16 @@ describe("app.views.StreamPost", function(){
       }});
     });
 
-    context("reshare", function(){
+    context("reshares", function(){
       it("displays a reshare count", function(){
-        this.statusMessage.set({ interactions: {reshares_count : 2 }});
+        this.statusMessage.interactions.set({"reshares_count": 2});
         var view = new this.PostViewClass({model : this.statusMessage}).render();
-
         expect($(view.el).html()).toContain(Diaspora.I18n.t('stream.reshares', {count: 2}));
       });
 
       it("does not display a reshare count for 'zero'", function(){
-        this.statusMessage.interactions.set({ interactions: { reshares_count : 0}} );
+        this.statusMessage.interactions.set({"reshares_count": 0});
         var view = new this.PostViewClass({model : this.statusMessage}).render();
-
         expect($(view.el).html()).not.toContain("0 Reshares");
       });
     });
@@ -86,13 +84,12 @@ describe("app.views.StreamPost", function(){
       it("displays a like count", function(){
         this.statusMessage.interactions.set({likes_count : 1});
         var view = new this.PostViewClass({model : this.statusMessage}).render();
-
         expect($(view.el).html()).toContain(Diaspora.I18n.t('stream.likes', {count: 1}));
       });
+
       it("does not display a like count for 'zero'", function(){
         this.statusMessage.interactions.set({likes_count : 0});
         var view = new this.PostViewClass({model : this.statusMessage}).render();
-
         expect($(view.el).html()).not.toContain("0 Likes");
       });
     });