Search: Result navigation with up/down

This commit is contained in:
Phaiax 2017-11-14 21:57:06 +01:00
parent 4dcba1943c
commit 26e16a83eb
2 changed files with 53 additions and 0 deletions

View File

@ -220,6 +220,8 @@ ul#searchresults {
} }
ul#searchresults li { ul#searchresults li {
margin: 10px 0px; margin: 10px 0px;
padding: 2px;
border-radius: 2px;
} }
ul#searchresults .breadcrumbs { ul#searchresults .breadcrumbs {
float: right; float: right;
@ -445,6 +447,9 @@ ul#searchresults span.teaser em {
.light .searchresults-outer { .light .searchresults-outer {
border-bottom-color: #888; border-bottom-color: #888;
} }
.light ul#searchresults li.focus {
background-color: #e4f2fe;
}
.light .breadcrumbs { .light .breadcrumbs {
color: #CCC; color: #CCC;
} }
@ -583,6 +588,9 @@ ul#searchresults span.teaser em {
.coal .searchresults-outer { .coal .searchresults-outer {
border-bottom-color: #98a3ad; border-bottom-color: #98a3ad;
} }
.coal ul#searchresults li.focus {
background-color: #2b2b2f;
}
.coal .breadcrumbs { .coal .breadcrumbs {
color: #686868; color: #686868;
} }
@ -721,6 +729,9 @@ ul#searchresults span.teaser em {
.navy .searchresults-outer { .navy .searchresults-outer {
border-bottom-color: #5c5c68; border-bottom-color: #5c5c68;
} }
.navy ul#searchresults li.focus {
background-color: #242430;
}
.navy .breadcrumbs { .navy .breadcrumbs {
color: #5c5c68; color: #5c5c68;
} }
@ -859,6 +870,9 @@ ul#searchresults span.teaser em {
.rust .searchresults-outer { .rust .searchresults-outer {
border-bottom-color: #888; border-bottom-color: #888;
} }
.rust ul#searchresults li.focus {
background-color: #dec2a2;
}
.rust .breadcrumbs { .rust .breadcrumbs {
color: #757575; color: #757575;
} }
@ -1001,6 +1015,9 @@ ul#searchresults span.teaser em {
.ayu .searchresults-outer { .ayu .searchresults-outer {
border-bottom-color: #888; border-bottom-color: #888;
} }
.ayu ul#searchresults li.focus {
background-color: #252932;
}
.ayu .breadcrumbs { .ayu .breadcrumbs {
color: #5f5f5f; color: #5f5f5f;
} }

View File

@ -32,6 +32,9 @@ $( document ).ready(function() {
SEARCH_HOTKEY_KEYCODE: 83, SEARCH_HOTKEY_KEYCODE: 83,
ESCAPE_KEYCODE: 27, ESCAPE_KEYCODE: 27,
DOWN_KEYCODE: 40,
UP_KEYCODE: 38,
SELECT_KEYCODE: 13,
formatSearchMetric : function(count, searchterm) { formatSearchMetric : function(count, searchterm) {
if (count == 1) { if (count == 1) {
@ -371,6 +374,7 @@ $( document ).ready(function() {
, ,
globalKeyHandler : function (e) { globalKeyHandler : function (e) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; } if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
if (e.keyCode == this.ESCAPE_KEYCODE) { if (e.keyCode == this.ESCAPE_KEYCODE) {
e.preventDefault(); e.preventDefault();
this.searchbar.removeClass("active"); this.searchbar.removeClass("active");
@ -386,6 +390,38 @@ $( document ).ready(function() {
e.preventDefault(); e.preventDefault();
this.searchbar_outer.slideDown() this.searchbar_outer.slideDown()
this.searchbar.focus(); 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');
}
} }
} }
, ,