1
0
mirror of https://github.com/thangisme/notes.git synced 2024-12-22 08:26:34 -05:00

Improved search navigation

This commit is contained in:
Silvio Giebl 2019-05-18 23:51:30 +02:00
parent e64a6aa239
commit 6f225b0d28
2 changed files with 28 additions and 33 deletions

View File

@ -109,17 +109,13 @@
padding-left: $sp-3;
padding-right: $sp-3;
&:hover {
&:hover, &.active {
background-color: darken($body-background-color, 5%);
}
@include mq(md) {
padding-left: $sp-4;
padding-right: $sp-4;
&.active {
background-color: darken($body-background-color, 5%);
}
}
.search-result-title {

View File

@ -1,3 +1,6 @@
---
---
// Event handling
function addEvent(el, type, handler) {
@ -31,25 +34,8 @@ function toggleNav(){
// Site search
function initSearch() {
// Get the generated search_data.json file so lunr.js can search it locally.
sc = document.getElementsByTagName("script");
source = '';
for(idx = 0; idx < sc.length; idx++)
{
s = sc.item(idx);
if(s.src && s.src.match(/just-the-docs\.js$/))
{ source = s.src; }
}
jsPath = source.replace('just-the-docs.js', '');
jsonPath = jsPath + 'search-data.json';
var request = new XMLHttpRequest();
request.open('GET', jsonPath, true);
request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
@ -101,24 +87,39 @@ function initSearch() {
addEvent(searchInput, 'keydown', function(e){
switch (e.keyCode) {
case 38: // arrow up
e.preventDefault();
var active = document.querySelector('.search-result.active');
if (active.parentElement.previousSibling) {
var previous = active.parentElement.previousSibling.querySelector('.search-result');
if (active) {
active.classList.remove('active');
previous.classList.add('active');
if (active.parentElement.previousSibling) {
var previous = active.parentElement.previousSibling.querySelector('.search-result');
previous.classList.add('active');
}
}
return;
case 40: // arrow down
e.preventDefault();
var active = document.querySelector('.search-result.active');
if (active.parentElement.nextSibling) {
var next = active.parentElement.nextSibling.querySelector('.search-result');
active.classList.remove('active');
if (active) {
if (active.parentElement.nextSibling) {
var next = active.parentElement.nextSibling.querySelector('.search-result');
active.classList.remove('active');
next.classList.add('active');
}
} else {
var next = document.querySelector('.search-result');
next.classList.add('active');
}
return;
case 13: // enter
e.preventDefault();
var active = document.querySelector('.search-result.active');
active.click();
if (active) {
active.click();
} else {
var first = document.querySelector('.search-result');
first.click();
}
return;
}
});
@ -132,6 +133,7 @@ function initSearch() {
case 38: // arrow up
case 40: // arrow down
case 13: // enter
e.preventDefault();
return;
}
@ -168,9 +170,6 @@ function initSearch() {
var resultLink = document.createElement('a');
resultLink.classList.add('search-result');
if (i == 0) {
resultLink.classList.add('active');
}
resultLink.setAttribute('href', doc.url);
resultsListItem.appendChild(resultLink);