add keybinding to the viewer

app/controllers/comments_controller.rb

@@ -21,7 +21,7 @@ class CommentsController < ApplicationController
     if @comment
       respond_to do |format|
         format.json{ render :json => @comment.as_api_response(:backbone), :status => 201 }
-        format.html{ redirect_to :back}
+        format.html{ render :nothing => true, :status => 201 }
         format.mobile{ render :partial => 'comment', :locals => {:post => @comment.post, :comment => @comment} }
       end
     else

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

@@ -9,25 +9,25 @@ app.pages.PostViewer = app.views.Base.extend({
     "#header-container" : "authorView"
   },
 
-  postView : function(){
-    return new app.views.Post({
+  initialize : function() {
+    this.initViews();
+
+    $(document).bind("keypress", _.bind(this.commentAnywhere, this))
+    $(document).bind("keypress", _.bind(this.invokePane, this))
+    $(document).bind("keyup", _.bind(this.closePane, this))
+  },
+
+  initViews : function() {
+    this.authorView = new app.views.PostViewerAuthor({ model : this.model });
+    this.interactionsView = new app.views.PostViewerInteractions({ model : this.model });
+    this.navView = new app.views.PostViewerNav({ model : this.model });
+
+    this.postView = new app.views.Post({
       model : this.model,
       className : "post loaded",
       templateName : "post-viewer/content/" + this.options.postTemplateName,
       attributes : {"data-template" : this.options.postTemplateName}
-    })
-  },
-
-  navView : function() {
-    return new app.views.PostViewerNav({ model : this.model })
-  },
-
-  interactionsView : function() {
-    return new app.views.PostViewerInteractions({ model : this.model })
-  },
-
-  authorView : function() {
-    return new app.views.PostViewerAuthor({ model : this.model })
+    });
   },
 
   postRenderTemplate : function() {
@@ -42,24 +42,36 @@ app.pages.PostViewer = app.views.Base.extend({
     $(document).keydown(function(e){
       switch(e.keyCode) {
         case 37:
-          navigate(nextPostLocation, "left"); break;
+          navigate(nextPostLocation); break;
         case 39:
-          navigate(previousPostLocation, "right"); break;
+          navigate(previousPostLocation); break;
         default:
           break;
       }
     })
 
-    function navigate(loc, direction) {
-      loc ? window.location = loc : bump(direction)
+    function navigate(loc) {
+      loc ? window.location = loc : null
     }
+  },
 
-    function bump(direction) {
-      $(".backdrop").addClass("bump-" + direction)
-      setTimeout( function(){
-        $(".backdrop").removeClass("bump-" + direction)
-      }, 200)
-    }
+  commentAnywhere : function(evt) {
+    /* ignore enter and space bar */
+    if(evt.keyCode == 13 || evt.keyCode == 32) { return }
+
+    this.interactionsView.invokePane();
+    $('#new-post-comment textarea').focus();
+  },
+
+  invokePane : function(evt) {
+    if(evt.keyCode != 32) { return }
+
+    this.interactionsView.invokePane();
+  },
+
+  closePane : function(evt) {
+    if(evt.keyCode != 27) { return }
+    this.interactionsView.hidePane();
   }
 
 })

public/javascripts/app/views/post_feedback_view.js

@@ -10,17 +10,13 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
     "click .follow" : "toggleFollow",
     "click .reshare" : "resharePost",
 
-    "click .comment" : "comment"
+    "click .comment" : "invokePane"
   },
 
   tooltipSelector : ".label",
 
-  comment : function(evt){
-    if(evt) { evt.preventDefault() }
-    $("#post-info").slideToggle()
-
-    this.removeTooltips()
-    console.log(this.model)
+  invokePane : function(evt){
+    this.trigger("invokePane")
   }
 
 })

public/javascripts/app/views/post_interactions_view.js

@@ -10,17 +10,36 @@ app.views.PostViewerInteractions = app.views.Base.extend({
 
   templateName: "post-viewer/interactions",
 
-  feedbackView : function() {
-    if(!window.app.user()) { return null }
-    return new app.views.PostViewerFeedback({ model : this.model })
+  initialize : function() {
+    this.initViews();
+
+    this.feedbackView.bind("invokePane", this.invokePane, this)
   },
 
-  reactionsView : function() {
-    return new app.views.PostViewerReactions({ model : this.model })
-  },
+  initViews : function() {
+    this.reactionsView = new app.views.PostViewerReactions({ model : this.model })
 
-  newCommentView : function() {
-    if(!window.app.user()) { return null }
-    return new app.views.PostViewerNewComment({ model : this.model })
+    /* subviews that require user */
+    if(window.app.user()) {
+      this.feedbackView = new app.views.PostViewerFeedback({ model : this.model })
+      this.newCommentView = new app.views.PostViewerNewComment({ model : this.model })
     }
+  },
+
+  togglePane : function(evt) {
+    if(evt) { evt.preventDefault() }
+    this.$("#post-info").slideToggle()
+    this.removeTooltips()
+  },
+
+  invokePane : function(evt) {
+    if(evt) { evt.preventDefault() }
+    if(!this.$("#post-info").is(":visible")) { this.togglePane() }
+  },
+
+  hidePane : function(evt) {
+    if(evt) { evt.preventDefault() }
+    if(this.$("#post-info").is(":visible")) { this.togglePane() }
+  }
+
 })

public/stylesheets/sass/new-templates.scss

@@ -339,7 +339,7 @@ $light-grey: #999;
     background-color: #444;
     background-image: url("../images/hatched-bg-dark.png");
 
-    color: #ccc;
+    color: #ddd;
   }
 
   .well {
@@ -417,10 +417,10 @@ $light-grey: #999;
     @include border-radius();
   }
 
-  text-shadow: 0 1px 3px #222;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
 
-  a {
-    color: inherit;
+  a:hover {
+    color: #99CCFF
   }
 
   time {