thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-02-21 06:57:46 -05:00
Code Issues Projects Releases Wiki Activity

Improved search navigation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_sass/search.scss
View File

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

55
assets/js/just-the-docs.js
View File

@ -1,3 +1,6 @@
---
---
// Event handling // Event handling
function addEvent(el, type, handler) { function addEvent(el, type, handler) {
@ -31,25 +34,8 @@ function toggleNav(){
// Site search // Site search
function initSearch() { 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(); var request = new XMLHttpRequest();
request.open('GET', jsonPath, true); request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
request.onload = function() { request.onload = function() {
if (request.status >= 200 && request.status < 400) { if (request.status >= 200 && request.status < 400) {
@ -101,24 +87,39 @@ function initSearch() {
addEvent(searchInput, 'keydown', function(e){ addEvent(searchInput, 'keydown', function(e){
switch (e.keyCode) { switch (e.keyCode) {
case 38: // arrow up case 38: // arrow up
e.preventDefault();
var active = document.querySelector('.search-result.active'); var active = document.querySelector('.search-result.active');
if (active.parentElement.previousSibling) { if (active) {
var previous = active.parentElement.previousSibling.querySelector('.search-result');
active.classList.remove('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; return;
case 40: // arrow down case 40: // arrow down
e.preventDefault();
var active = document.querySelector('.search-result.active'); var active = document.querySelector('.search-result.active');
if (active.parentElement.nextSibling) { if (active) {
var next = active.parentElement.nextSibling.querySelector('.search-result'); if (active.parentElement.nextSibling) {
active.classList.remove('active'); 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'); next.classList.add('active');
} }
return; return;
case 13: // enter case 13: // enter
e.preventDefault();
var active = document.querySelector('.search-result.active'); var active = document.querySelector('.search-result.active');
active.click(); if (active) {
active.click();
} else {
var first = document.querySelector('.search-result');
first.click();
}
return; return;
} }
}); });
@ -132,6 +133,7 @@ function initSearch() {
case 38: // arrow up case 38: // arrow up
case 40: // arrow down case 40: // arrow down
case 13: // enter case 13: // enter
e.preventDefault();
return; return;
} }
@ -168,9 +170,6 @@ function initSearch() {
var resultLink = document.createElement('a'); var resultLink = document.createElement('a');
resultLink.classList.add('search-result'); resultLink.classList.add('search-result');
if (i == 0) {
resultLink.classList.add('active');
}
resultLink.setAttribute('href', doc.url); resultLink.setAttribute('href', doc.url);
resultsListItem.appendChild(resultLink); resultsListItem.appendChild(resultLink);