more work on new stream interactions, hella refactorz.

app/assets/javascripts/app/views/canvas_view.js

@@ -63,7 +63,6 @@ app.views.Canvas = app.views.InfScroll.extend({
   },
 
   reLayout : function(){
-    console.log("relaying out")
     this.$el.isotope("reLayout")
   }
 });

app/assets/javascripts/app/views/feedback_actions.js

@@ -0,0 +1,4 @@
+//=require "./feedback_view"
+app.views.FeedbackActions = app.views.Feedback.extend({
+  templateName : "feedback-actions"
+})

app/assets/javascripts/app/views/feedback_view.js

@@ -4,12 +4,16 @@ app.views.Feedback = app.views.Base.extend({
   className : "info",
 
   events: {
-    "click .like_action" : "toggleLike",
+    "click *[rel='auth-required']" : "requireAuth",
-    "click .reshare_action" : "resharePost"
+    "click .like" : "toggleLike",
+    "click .reshare" : "resharePost"
   },
 
+  tooltipSelector : ".label",
+
   initialize : function() {
     this.model.interactions.on('change', this.render, this);
+    this.initViews && this.initViews() // I don't know why this was failing with $.noop... :(
   },
 
   presenter : function() {
@@ -21,7 +25,7 @@ app.views.Feedback = app.views.Base.extend({
       resharesCount : interactions.resharesCount(),
       userCanReshare : interactions.userCanReshare(),
       userLike : interactions.userLike(),
-      userReshare : interactions.userReshare(),
+      userReshare : interactions.userReshare()
     })
   },
 
@@ -34,5 +38,11 @@ app.views.Feedback = app.views.Base.extend({
     if(evt) { evt.preventDefault(); }
     if(!window.confirm(Diaspora.I18n.t("reshares.post", {name: this.model.reshareAuthor().name}))) { return }
     this.model.interactions.reshare();
+  },
+
+  requireAuth : function(evt) {
+    if( app.currentUser.authenticated() ) { return }
+    alert("you must be logged in to do that!")
+    return false;
   }
 });

app/assets/javascripts/app/views/post-viewer/feedback.js

@@ -1,28 +1,24 @@
 //= require ../feedback_view
-app.views.PostViewerFeedback = app.views.Feedback.extend({
 
+app.views.PostViewerFeedback = app.views.Feedback.extend({
   id : "user-controls",
   className : "",
 
   templateName: "post-viewer/feedback",
 
-  events : {
+  subviews : {
-    "click *[rel='auth-required']" : "requireAuth",
+    ".feedback-actions" : "feedbackActions"
-
+  },
-    "click .like" : "toggleLike",
-    "click .reshare" : "resharePost",
 
+  events :_.extend({}, app.views.Feedback.prototype.events, {
     "click *[rel='invoke-interaction-pane']" : "invokePane",
     "click *[rel='hide-interaction-pane']" : "hidePane"
+  }),
+
+  initViews : function(){
+    this.feedbackActions = new app.views.FeedbackActions({model : this.model})
   },
 
-  tooltipSelector : ".label, .home-button",
-
-  initialize : function(){
-    this.model.interactions.on("change", this.render, this)
-  },
-
-
   postRenderTemplate : function() {
     this.sneakyVisiblity()
   },
@@ -35,10 +31,4 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
 
   invokePane : function(evt){ this.trigger("invokePane") },
   hidePane : function(evt){ this.trigger("hidePane") },
-
+});
-  requireAuth : function(evt) {
-    if( app.currentUser.authenticated() ) { return }
-    alert("you must be logged in to do that!")
-    return false;
-  }
-});

app/assets/javascripts/app/views/post-viewer/reactions.js

@@ -41,4 +41,4 @@ app.views.PostViewerReactions = app.views.Base.extend({
       className : "post-comment media"
     }).render().el);
   }
-});
+});

app/assets/javascripts/app/views/post/canvas_frame.js

@@ -31,15 +31,12 @@ app.views.Post.CanvasFrame = app.views.Post.SmallFrame.extend({
   },
 
   presenter : function(){
-    console.log("here")
-
     return _.extend(this.smallFramePresenter(), {
       adjustedImageHeight : this.adjustedImageHeight()
     })
   },
 
   favoritePost : function(evt) {
-    console.log("in favorite post")
     if(evt) {
       /* follow links instead of faving the targeted post */
       if($(evt.target).is('a')) { return }

app/assets/javascripts/app/views/post/small_frame.js

@@ -29,11 +29,14 @@ app.views.Post.SmallFrame = app.views.Post.extend({
   },
 
   initialize : function() {
-    this.$el.addClass([this.dimensionsClass(), this.colorClass(), this.frameClass()].join(' '))
+    this.addStylingClasses()
-    return this;
   },
 
   postRenderTemplate : function() {
+    this.addStylingClasses()
+  },
+
+  addStylingClasses : function() {
     this.$el.addClass([this.dimensionsClass(), this.colorClass(), this.frameClass()].join(' '))
   },
 

app/assets/javascripts/app/views/post/stream_frame.js

@@ -1,2 +1,24 @@
 app.views.Post.StreamFrame = app.views.Post.SmallFrame.extend({
+  events :_.extend({
+    'click .content' : 'fetchInteractions'
+  }, app.views.Post.SmallFrame.prototype.events),
+
+  subviews :_.extend({
+    '.interactions' : 'interactionsView'
+  }, app.views.Post.SmallFrame.prototype.subviews),
+
+  initialize : function(){
+    this.interactionsView = new app.views.StreamInteractions({model : this.model})
+  },
+
+  postRenderTemplate : function(){
+    this.addStylingClasses()
+    this.$el.append($("<div class='interactions'/>"))
+  },
+
+  fetchInteractions : function() {
+    this.model.interactions.fetch().done(_.bind(function(){
+      this.interactionsView.render()
+    }, this));
+  }
 })

app/assets/javascripts/app/views/post/stream_interactions_view.js

@@ -0,0 +1,13 @@
+app.views.StreamInteractions = app.views.Base.extend({
+  subviews : {
+    ".feedback" : "feedback",
+    ".comments" : "comments"
+  },
+
+  templateName : "stream-interactions",
+
+  initialize : function(){
+    this.feedback = new app.views.FeedbackActions({ model : this.model })
+    this.comments = new app.views.PostViewerFeedback({ model : this.model })
+  }
+})

app/assets/templates/feedback-actions.jst.hbs

@@ -0,0 +1,33 @@
+<a href="#" rel="auth-required" class="label like" title="{{#if userLike}} {{t "viewer.unlike"}} {{else}} {{t "viewer.like"}} {{/if}}">
+    {{#if userLike}}
+    <i class="icon-heart icon-red"></i>
+    {{else}}
+    <i class="icon-heart icon-white"></i>
+    {{/if}}
+    {{likesCount}}
+</a>
+
+{{#if userCanReshare}}
+<a href="#" rel="auth-required" class="label reshare" title="{{#if userReshare}} {{t "viewer.reshared"}} {{else}} {{t "viewer.reshare"}} {{/if}}">
+    {{#if userReshare}}
+    <i class="icon-retweet icon-blue"></i>
+    {{else}}
+    <i class="icon-retweet icon-white"></i>
+    {{/if}}
+    {{resharesCount}}
+</a>
+{{else}}
+<a class="label reshare-viewonly" title="{{#if userReshare}} {{t "viewer.reshared"}} {{else}} {{t "viewer.reshare"}} {{/if}}">
+    {{#if userReshare}}
+    <i class="icon-retweet icon-blue"></i>
+    {{else}}
+    <i class="icon-retweet icon-white"></i>
+    {{/if}}
+    {{resharesCount}}
+</a>
+{{/if}}
+
+<a href="#" class="label comment" rel="invoke-interaction-pane" title="{{t "viewer.comment"}}">
+    <i class="icon-comment icon-white"></i>
+    {{commentsCount}}
+</a>

app/assets/templates/feedback.jst.hbs

@@ -14,7 +14,7 @@
 </span>
 
 
-<a href="#" class="like_action" rel='nofollow'>
+<a href="#" class="like" rel='nofollow'>
   {{#if userLike}}
     {{t "stream.unlike"}}
   {{else}}
@@ -24,7 +24,7 @@
 ·
 
 {{#if userCanReshare}}
-  <a href="#" class="reshare_action" rel='nofollow'>
+  <a href="#" class="reshare" rel='nofollow'>
     {{t "stream.reshare"}}
   </a>
   ·

app/assets/templates/post-viewer/feedback.jst.hbs

@@ -1,36 +1,4 @@
-<a href="#" rel="auth-required" class="label like" title="{{#if userLike}} {{t "viewer.unlike"}} {{else}} {{t "viewer.like"}} {{/if}}">
+<div class="feedback-actions"/>
-  {{#if userLike}}
-    <i class="icon-heart icon-red"></i>
-  {{else}}
-    <i class="icon-heart icon-white"></i>
-  {{/if}}
-  {{likesCount}}
-</a>
-
-{{#if userCanReshare}}
-  <a href="#" rel="auth-required" class="label reshare" title="{{#if userReshare}} {{t "viewer.reshared"}} {{else}} {{t "viewer.reshare"}} {{/if}}">
-    {{#if userReshare}}
-      <i class="icon-retweet icon-blue"></i>
-    {{else}}
-      <i class="icon-retweet icon-white"></i>
-    {{/if}}
-    {{resharesCount}}
-  </a>
-{{else}}
-  <a class="label reshare-viewonly" title="{{#if userReshare}} {{t "viewer.reshared"}} {{else}} {{t "viewer.reshare"}} {{/if}}">
-    {{#if userReshare}}
-      <i class="icon-retweet icon-blue"></i>
-    {{else}}
-      <i class="icon-retweet icon-white"></i>
-    {{/if}}
-    {{resharesCount}}
-   </a>
-{{/if}}
-
-<a href="#" class="label comment" rel="invoke-interaction-pane" title="{{t "viewer.comment"}}">
-  <i class="icon-comment icon-white"></i>
-  {{commentsCount}}
-</a>
 
 <!-- this acts as a dock underlay -->
 <div id="post-info-sneaky" class="passive">

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

@@ -0,0 +1,3 @@
+<div class="feedback"/>
+<div class="comments"/>
+<div class="new-comment"/>

spec/javascripts/app/views/feedback_view_spec.js

@@ -26,7 +26,7 @@ describe("app.views.Feedback", function(){
 
   describe(".render", function(){
     beforeEach(function(){
-      this.link = function(){ return this.view.$(".like_action"); }
+      this.link = function(){ return this.view.$("a.like"); }
       this.view.render();
     })
 
@@ -83,14 +83,13 @@ describe("app.views.Feedback", function(){
       })
 
       it("shows a reshare_action link", function(){
-        expect($(this.view.el).html()).toContain('reshare_action')
+        expect(this.view.$("a.reshare")).toExist()
       });
 
       it("does not show a reshare_action link if the original post has been deleted", function(){
         this.post.set({post_type : "Reshare", root : null})
         this.view.render();
-
+        expect(this.view.$("a.reshare")).not.toExist()
-        expect($(this.view.el).html()).not.toContain('reshare_action');
       })
     })
 
@@ -106,7 +105,7 @@ describe("app.views.Feedback", function(){
       })
 
       it("does not show a reshare_action link", function(){
-        expect($(this.view.el).html()).not.toContain('reshare_action');
+        expect(this.view.$("a.reshare")).not.toExist()
       });
     })
 
@@ -119,7 +118,7 @@ describe("app.views.Feedback", function(){
       it("does not display a reshare_action link", function(){
         this.post.attributes.public = false
         this.view.render();
-        expect($(this.view.el).html()).not.toContain('reshare_action')
+        expect(this.view.$("a.reshare")).not.toExist()
       })
     })
   })
@@ -133,14 +132,14 @@ describe("app.views.Feedback", function(){
 
     it("displays a confirmation dialog", function(){
       spyOn(window, "confirm")
-      this.view.$(".reshare_action").first().click();
+      this.view.$("a.reshare").first().click();
       expect(window.confirm).toHaveBeenCalled();
     })
 
     it("reshares the model", function(){
       spyOn(window, "confirm").andReturn(true);
       spyOn(this.view.model.reshare(), "save").andReturn(new $.Deferred)
-      this.view.$(".reshare_action").first().click();
+      this.view.$("a.reshare").first().click();
       expect(this.view.model.reshare().save).toHaveBeenCalled();
     })
   })

spec/javascripts/app/views/post/stream_frame_spec.js

@@ -0,0 +1,17 @@
+describe("app.views.Post.StreamFrame", function(){
+  beforeEach(function(){
+    this.post = factory.post()
+    this.view = new app.views.Post.StreamFrame({model : this.post})
+  })
+
+  describe("rendering", function(){
+    context("clicking the content", function(){
+      it("fetches the interaction pane", function(){
+        spyOn(this.post.interactions, "fetch").andReturn(new $.Deferred)
+        this.view.render()
+        this.view.$('.content').click()
+        expect(this.post.interactions.fetch).toHaveBeenCalled()
+      })
+    })
+  })
+})

spec/javascripts/support/jasmine.yml

@@ -57,7 +57,7 @@ helpers:
 #   - **/*[sS]pec.js
 #
 spec_files:
-  - "**/*[sS]pec.js"
+  - "**/**/*[sS]pec.js"
 
 # src_dir
 #