DG DC MS; stream has one interactions div

app/assets/javascripts/app/pages/post-viewer.js

@@ -9,7 +9,7 @@ app.pages.PostViewer = app.views.Base.extend({
   },
 
   initialize : function(options) {
-    var post = this.model = new app.models.Post({ id : options.id });
+    this.model = new app.models.Post({ id : options.id });
     this.model.preloadOrFetch().done(_.bind(this.initViews, this));
     this.model.interactions.fetch() //async, yo, might want to throttle this later.
 

app/assets/javascripts/app/pages/stream.js

@@ -11,7 +11,8 @@ app.pages.Stream = app.views.Base.extend({
   templateName : "stream",
 
   subviews : {
-    "#stream-content" : "streamView"
+    "#stream-content" : "streamView",
+    "#stream-interactions" : "interactionsView"
   },
 
   initialize : function(){
@@ -19,5 +20,10 @@ app.pages.Stream = app.views.Base.extend({
     this.stream.preloadOrFetch();
 
     this.streamView = new app.views.NewStream({ model : this.stream })
+    var interactions = this.interactionsView = new app.views.StreamInteractions()
+
+    this.on("frame:interacted", function(post){
+      interactions.setInteractions(post)
+    })
   }
 });

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

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

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

@@ -5,8 +5,7 @@ app.views.PostViewerInteractions = app.views.Base.extend({
   subviews : {
     "#post-feedback" : "feedbackView",
     "#post-reactions" : "reactionsView",
-    "#new-post-comment" : "newCommentView",
-    ".interaction_counts" : "interactionCountsView"
+    "#new-post-comment" : "newCommentView"
   },
 
   templateName: "post-viewer/interactions",

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

@@ -1,24 +1,9 @@
 app.views.Post.StreamFrame = app.views.Post.SmallFrame.extend({
-  events :_.extend({
-    'click .content' : 'fetchInteractions'
+  events : _.extend({
+    'click .content' : 'triggerInteracted'
   }, 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));
+  triggerInteracted : function() {
+    app.page.trigger("frame:interacted", this.model)
   }
 })

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

@@ -1,13 +1,27 @@
 app.views.StreamInteractions = app.views.Base.extend({
-  subviews : {
+
+  id : "post-info",
+
+  subviews:{
     ".feedback" : "feedback",
-    ".comments" : "comments"
+    ".comments" : "comments",
+    ".new-comment" : "newCommentView"
   },
 
   templateName : "stream-interactions",
 
-  initialize : function(){
-    this.feedback = new app.views.FeedbackActions({ model : this.model })
-    this.comments = new app.views.PostViewerFeedback({ model : this.model })
+  setInteractions : function (model) {
+    model.interactions.fetch().done(
+      _.bind(function () {
+        this.render()
+      }, this));
+
+    this.feedback = new app.views.FeedbackActions({ model: model })
+    this.comments = new app.views.PostViewerReactions({ model: model.interactions })
+    this.newCommentView = new app.views.PostViewerNewComment({ model : model })
+  },
+
+  postRenderTemplate : function(){
+    console.log(this.$el)
   }
-})
+});

app/assets/stylesheets/new_styles/_interactions.scss

@@ -308,3 +308,19 @@
   right: 8px;
   top: 8px;
 }
+
+
+/* stream specific wrapper */
+#stream-interactions {
+  position : fixed;
+  width : 420px;
+
+  #post-info {
+    text-align : left;
+    margin-top : 10px;
+  }
+
+  #user-controls {
+    padding : 7px;
+  }
+}

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

@@ -1,30 +1,30 @@
 <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>
+        <i class="icon-heart icon-red"></i>
     {{else}}
-    <i class="icon-heart icon-white"></i>
+        <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>
+    <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>
+    <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"}}">

app/assets/templates/stream.jst.hbs

@@ -4,6 +4,9 @@
             <div class="span5">
                 <section id="stream-content"/>
             </div>
+            <div class="span5">
+                <section id="stream-interactions"/>
+            </div>
         </div>
     </div>
 </div>

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

@@ -2,6 +2,7 @@ describe("app.views.Post.StreamFrame", function(){
   beforeEach(function(){
     this.post = factory.post()
     this.view = new app.views.Post.StreamFrame({model : this.post})
+    app.page = new app.pages.Stream({model : new app.models.Stream()})
   })
 
   describe("rendering", function(){
@@ -14,4 +15,4 @@ describe("app.views.Post.StreamFrame", function(){
       })
     })
   })
-})
+});