Add mouse bindings for search result navigation

app/assets/javascripts/application.js

@@ -12,4 +12,4 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require_tree .
+//= require_tree .

app/assets/javascripts/keybindings.js

@@ -0,0 +1,62 @@
+$(function() {
+
+  var selectedClass = 'selected';
+  var searchField = $("#search-form #q");
+
+  searchField.select();
+
+  Mousetrap.bind(['down'], function(e) {
+    navigateList('down', $("ul.search-results li:first"));
+    haltEvent(e);
+  });
+
+  Mousetrap.bind(['up'], function(e) {
+    navigateList('up', $("ul.search-results li:last"));
+    haltEvent(e);
+  });
+
+  Mousetrap.bind(['enter', 'o'], function(e) {
+    if(goToSelectedResult()) {
+      haltEvent(e);
+    }
+  });
+
+  Mousetrap.bind(['/', 's', 'escape'], function(e) {
+    searchField.focus().select();
+    $("ul.search-results li.selected").removeClass(selectedClass);
+    haltEvent(e);
+  });
+
+  var haltEvent = function(event) {
+    event.stopPropagation();
+    event.preventDefault();   
+  };
+
+  // direction == up|down
+  var navigateList = function(direction, defaultEl) {
+
+    previouslySelectedEl = $("ul.search-results li.selected");
+
+    if(previouslySelectedEl.size() <= 0) {
+      defaultEl.addClass(selectedClass);
+      searchField.blur();
+    } else {
+      previouslySelectedEl.removeClass(selectedClass);
+      newlySelectedEl = direction == 'up' ? previouslySelectedEl.prev() : previouslySelectedEl.next();
+      newlySelectedEl.addClass(selectedClass);
+      if(newlySelectedEl.size() <= 0) {
+        searchField.focus();
+      }
+    }
+  }
+
+  var goToSelectedResult = function() {
+    selectedEl = $("ul.search-results li.selected");
+    if(selectedEl.size() >= 1) {
+      location.href = selectedEl.find("a.gist-url").attr('href');
+      return true;
+    } else {
+      return false;
+    }
+  };
+});

app/helpers/gists_helper.rb

@@ -3,7 +3,7 @@ module GistsHelper
   def search_result_link(result)
     text = (result.highlight && result.highlight.description) ? result.highlight['description'].first.html_safe : result.description
     text = "<em>Untitled</em>".html_safe if text.blank?
-    link_to(text, result.url)
+    link_to(text, result.url, :class => 'gist-url')
   end
 
   def files_display(result)

app/views/gists/search.html.haml

@@ -1,24 +1,23 @@
+%style(type="text/css")
+  :sass
+    ul.search-results
+      list-style-type: none
+      li:nth-child(even)
+        background: #EEE
+      li.selected
+        background: #999
+
 %p
-  = form_tag(search_gists_path, :method => "get") do
+  = form_tag(search_gists_path, :method => "get", :id => "search-form") do
     = label_tag(:q, "Search your gists:")
-    = text_field_tag(:q, params[:q])
+    = text_field_tag(:q, params[:q], :size => 50, :class => "mousetrap")
     = submit_tag("Go")
     = "(last indexed: #{current_user.last_gh_fetch ? current_user.last_gh_fetch.to_formatted_s(:short) : "not yet"})"
 
 - if @results.size > 0
-  %ul
+  %ul.search-results
     - for result in @results
       %li
         %p= search_result_link(result)
-        / %p= result.inspect
-        / %p.files= files_display(result)
-        / - if(result.highlight && result.highlight[:'files.content'])
-        /   - highlights = result.highlight[:'files.content']
-        /   %span.matches= highlights[0..(highlights.size < 2 ? -1 : 1)].join(' . . . ')
 - else
-  %p= "No results found for \"#{params[:q]}\""
-
-:javascript
-  $(function() {
-    $('#q').select();
-  })
+  %p= "No results found for \"#{params[:q]}\""