diff --git a/src/theme/book.css b/src/theme/book.css index e1b9d9ec..c4d27620 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -220,6 +220,8 @@ ul#searchresults { } ul#searchresults li { margin: 10px 0px; + padding: 2px; + border-radius: 2px; } ul#searchresults .breadcrumbs { float: right; @@ -445,6 +447,9 @@ ul#searchresults span.teaser em { .light .searchresults-outer { border-bottom-color: #888; } +.light ul#searchresults li.focus { + background-color: #e4f2fe; +} .light .breadcrumbs { color: #CCC; } @@ -583,6 +588,9 @@ ul#searchresults span.teaser em { .coal .searchresults-outer { border-bottom-color: #98a3ad; } +.coal ul#searchresults li.focus { + background-color: #2b2b2f; +} .coal .breadcrumbs { color: #686868; } @@ -721,6 +729,9 @@ ul#searchresults span.teaser em { .navy .searchresults-outer { border-bottom-color: #5c5c68; } +.navy ul#searchresults li.focus { + background-color: #242430; +} .navy .breadcrumbs { color: #5c5c68; } @@ -859,6 +870,9 @@ ul#searchresults span.teaser em { .rust .searchresults-outer { border-bottom-color: #888; } +.rust ul#searchresults li.focus { + background-color: #dec2a2; +} .rust .breadcrumbs { color: #757575; } @@ -1001,6 +1015,9 @@ ul#searchresults span.teaser em { .ayu .searchresults-outer { border-bottom-color: #888; } +.ayu ul#searchresults li.focus { + background-color: #252932; +} .ayu .breadcrumbs { color: #5f5f5f; } diff --git a/src/theme/book.js b/src/theme/book.js index b2191328..5151bace 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -32,6 +32,9 @@ $( document ).ready(function() { SEARCH_HOTKEY_KEYCODE: 83, ESCAPE_KEYCODE: 27, + DOWN_KEYCODE: 40, + UP_KEYCODE: 38, + SELECT_KEYCODE: 13, formatSearchMetric : function(count, searchterm) { if (count == 1) { @@ -371,6 +374,7 @@ $( document ).ready(function() { , globalKeyHandler : function (e) { if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; } + if (e.keyCode == this.ESCAPE_KEYCODE) { e.preventDefault(); this.searchbar.removeClass("active"); @@ -386,6 +390,38 @@ $( document ).ready(function() { e.preventDefault(); this.searchbar_outer.slideDown() this.searchbar.focus(); + return; + } + if (this.hasFocus() && e.keyCode == this.DOWN_KEYCODE) { + e.preventDefault(); + this.unfocusSearchbar(); + this.searchresults.children('li').first().addClass("focus"); + return; + } + if (!this.hasFocus() && (e.keyCode == this.DOWN_KEYCODE + || e.keyCode == this.UP_KEYCODE + || e.keyCode == this.SELECT_KEYCODE)) { + // not `:focus` because browser does annoying scrolling + var current_focus = search.searchresults.find("li.focus"); + if (current_focus.length == 0) return; + e.preventDefault(); + if (e.keyCode == this.DOWN_KEYCODE) { + var next = current_focus.next() + if (next.length > 0) { + current_focus.removeClass("focus"); + next.addClass("focus"); + } + } else if (e.keyCode == this.UP_KEYCODE) { + current_focus.removeClass("focus"); + var prev = current_focus.prev(); + if (prev.length == 0) { + this.searchbar.focus(); + } else { + prev.addClass("focus"); + } + } else { + window.location = current_focus.children('a').attr('href'); + } } } ,