From 374ec73fa42b25b70304c38cddd61221678a3a8e Mon Sep 17 00:00:00 2001
From: Dennis Collinson <dennis.collective@gmail.com>
Date: Wed, 30 May 2012 18:05:27 -0700
Subject: [PATCH] make it clearer which frame is active, and fixes for
 scrolling flow.

---
 app/assets/javascripts/app/pages/stream.js    | 27 +++++++++----------
 .../stylesheets/new_styles/_canvas.scss       |  9 +++++--
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/app/pages/stream.js b/app/assets/javascripts/app/pages/stream.js
index 94ccb4ece..dbe59fa25 100644
--- a/app/assets/javascripts/app/pages/stream.js
+++ b/app/assets/javascripts/app/pages/stream.js
@@ -15,19 +15,22 @@ app.pages.Stream = app.views.Base.extend({
     this.stream.preloadOrFetch()
 
     this.streamView = new app.pages.Stream.InfiniteScrollView({ model : this.stream })
-    var interactions = this.interactionsView = new app.views.StreamInteractions()
-
-    this.stream.on("frame:interacted", function(post){
-      interactions.setInteractions(post)
-    })
+    this.interactionsView = new app.views.StreamInteractions()
 
     this.streamView.on('loadMore', this.updateUrlState, this);
     this.stream.on("fetched", this.refreshScrollSpy, this)
+    this.stream.on("frame:interacted", this.selectFrame, this)
   },
 
   postRenderTemplate : function() {
     this.$("#header").css("background-image", "url(" + app.currentUser.get("wallpaper") + ")")
-   _.defer(function(){$('body').scrollspy({target : '.stream-frame-wrapper', offset : 50})})
+   _.defer(function(){$('body').scrollspy({target : '.stream-frame-wrapper', offset : 205})})
+  },
+
+  selectFrame : function(post){
+    this.$(".stream-frame-wrapper").removeClass("selected-frame")
+    this.$(".stream-frame-wrapper[data-id=" + post.id +"]").addClass("selected-frame")
+    this.interactionsView.setInteractions(post)
   },
 
   updateUrlState : function(){
@@ -42,15 +45,11 @@ app.pages.Stream = app.views.Base.extend({
   },
 
   triggerInteractionLoad : function(evt){
-    var id = $(evt.target).data("id");
-    this.focusedPost = this.stream.items.get(id)
+    this._throttledInteractions = this._throttledInteractions || _.bind(_.throttle(function(id){
+      this.selectFrame(this.stream.items.get(id))
+    }, 500), this)
 
-    this._throttledInteractions = this._throttledInteractions || _.bind(_.throttle(this.updateInteractions, 1000), this)
-    this._throttledInteractions()
-  },
-
-  updateInteractions: function () {
-    this.interactionsView.setInteractions(this.focusedPost)
+    this._throttledInteractions($(evt.target).data("id"))
   },
 
   refreshScrollSpy : function(){
diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss
index c1b1ad93e..f83d2387e 100644
--- a/app/assets/stylesheets/new_styles/_canvas.scss
+++ b/app/assets/stylesheets/new_styles/_canvas.scss
@@ -412,6 +412,9 @@ color: white;
 
 #stream-content {
   .stream-frame {
+    .stream-frame-wrapper {
+      position: relative; //interactions scroll spy gets confused about div height when there are images without this line.
+    }
     margin-bottom : 40px;
 
     .stream-frame-feedback {
@@ -439,8 +442,10 @@ color: white;
       }
     }
 
-    .active {
-      border: 10px solid red;
+    .selected-frame {
+      .content {
+        border: 10px solid red;
+      }
     }
   }