Search: Result navigation with up/down
This commit is contained in:
parent
4dcba1943c
commit
26e16a83eb
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
,
|
,
|
||||||
|
|
Loading…
Reference in New Issue