Permalink
Browse files

Add mouse bindings for search result navigation

  • Loading branch information...
1 parent 41997d5 commit b88cc5af838027b565b37e5859afa9f06678ccc8 @rwdaigle committed Oct 12, 2012
@@ -12,4 +12,4 @@
//
//= require jquery
//= require jquery_ujs
-//= require_tree .
+//= require_tree .
@@ -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;
+ }
+ };
+});

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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)
@@ -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]}\""

0 comments on commit b88cc5a

Please sign in to comment.