From b4923a77f0f7533ff8708ea75274ec470ac33a1e Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Wed, 22 Feb 2012 19:19:24 -0800 Subject: [PATCH] add keybinding to the viewer --- app/controllers/comments_controller.rb | 2 +- public/javascripts/app/pages/post-viewer.js | 62 +++++++++++-------- .../app/views/post_feedback_view.js | 10 +-- .../app/views/post_interactions_view.js | 35 ++++++++--- public/stylesheets/sass/new-templates.scss | 8 +-- 5 files changed, 72 insertions(+), 45 deletions(-) diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 44a149e9e..6c43f2455 100644 --- a/app/controllers/comments_controller.rb +++ b/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 diff --git a/public/javascripts/app/pages/post-viewer.js b/public/javascripts/app/pages/post-viewer.js index 74f3733c4..898262a2c 100644 --- a/public/javascripts/app/pages/post-viewer.js +++ b/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(); } }) diff --git a/public/javascripts/app/views/post_feedback_view.js b/public/javascripts/app/views/post_feedback_view.js index 07e9cc892..47eab9af5 100644 --- a/public/javascripts/app/views/post_feedback_view.js +++ b/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") } }) diff --git a/public/javascripts/app/views/post_interactions_view.js b/public/javascripts/app/views/post_interactions_view.js index 6c6b5f1ea..fcb354273 100644 --- a/public/javascripts/app/views/post_interactions_view.js +++ b/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 }) + + /* 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 }) + } }, - newCommentView : function() { - if(!window.app.user()) { return null } - return 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() } } + }) diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss index 8cff27b99..4e5a7803d 100644 --- a/public/stylesheets/sass/new-templates.scss +++ b/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 {