ethanyoo.com/themes/geronimo/static/js/fixedsearch.js

238 lines
8.8 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// js/fixedsearch.js
/*--------------------------------------------------------------
fixedsearch — Super fast, client side search for Hugo.io with Fusejs.io
based on https://gist.github.com/cmod/5410eae147e4318164258742dd053993
--------------------------------------------------------------*/
if (typeof variable !== 'undefined') {
console.log('fixedsearch.js already loaded');
} else {
fixedsearch = function(){
var search_form = document.getElementById('search-form'); // search form
var search_input = document.getElementById('search-input'); // input box for search
var search_submit = document.getElementById('search-submit'); // form submit button
var search_results = document.getElementById('search-results'); // targets the <ul>
var fuse; // holds our search engine
var search__focus = false; // check to true to make visible by default
var results_available = false; // did we get any search results?
var first_run = true; // allow us to delay loading json data unless search activated
var first = search_results.firstChild; // first child of search list
var last = search_results.lastChild; // last child of search list
search_form.classList.remove('noscript'); // JavaScript is active
search_form.setAttribute('data-focus', search__focus);
/*--------------------------------------------------------------
The main keyboard event listener running the show
--------------------------------------------------------------*/
document.addEventListener('keydown', function(e) {
// console.log(event); // DEBUG
// Ctrl + / to show or hide Search
// if (event.metaKey && event.which === 191) {
if (event.ctrlKey && event.which === 191) {
search_toggle_focus(e); // toggle visibility of search box
}
});
/*--------------------------------------------------------------
The main keyboard event listener running the show
--------------------------------------------------------------*/
search_form.addEventListener('keydown', function(e) {
// Allow ESC (27) to close search box
if (e.keyCode == 27) {
search__focus = true; // make sure toggle removes focus
search_toggle_focus(e);
}
// DOWN (40) arrow
if (e.keyCode == 40) {
if (results_available) {
e.preventDefault(); // stop window from scrolling
if ( document.activeElement == search_input) { first.focus(); } // if the currently focused element is the main input --> focus the first <li>
else if ( document.activeElement == last ) { first.focus(); } // if we're at the bottom, loop to the start
// else if ( document.activeElement == last ) { last.focus(); } // if we're at the bottom, stay there
else { document.activeElement.parentElement.nextSibling.firstElementChild.focus(); } // otherwise select the next search result
}
}
// UP (38) arrow
if (e.keyCode == 38) {
if (results_available) {
e.preventDefault(); // stop window from scrolling
if ( document.activeElement == search_input) { search_input.focus(); } // If we're in the input box, do nothing
else if ( document.activeElement == first) { search_input.focus(); } // If we're at the first item, go to input box
else { document.activeElement.parentElement.previousSibling.firstElementChild.focus(); } // Otherwise, select the search result above the current active one
}
}
// Use Enter (13) to move to the first result
if (e.keyCode == 13) {
if (results_available && document.activeElement == search_input) {
e.preventDefault(); // stop form from being submitted
first.focus();
}
}
// Use Backspace (8) to switch back to the search input
if (e.keyCode == 8) {
if (document.activeElement != search_input) {
e.preventDefault(); // stop browser from going back in history
search_input.focus();
}
}
});
/*--------------------------------------------------------------
Load our json data and builds fuse.js search index
--------------------------------------------------------------*/
search_form.addEventListener('focusin', function(e) {
search_init(); // try to load the search index
});
/*--------------------------------------------------------------
Make submit button toggle focus
--------------------------------------------------------------*/
search_form.addEventListener('submit', function(e) {
search_toggle_focus(e);
e.preventDefault();
return false;
});
/*--------------------------------------------------------------
Remove focus on blur
--------------------------------------------------------------*/
search_form.addEventListener('focusout', function(e) {
if (e.relatedTarget === null) {
search_toggle_focus(e);
}
else if (e.relatedTarget.type === 'submit') {
e.stopPropagation();
}
});
/*--------------------------------------------------------------
Toggle focus UI of form
--------------------------------------------------------------*/
function search_toggle_focus(e) {
// console.log(e); // DEBUG
// order of operations is very important to keep focus where it should stay
if (!search__focus) {
search_submit.value = '';
search_form.setAttribute('data-focus', true);
search_input.focus(); // move focus to search box
search__focus = true;
}
else {
search_submit.value = '⌕';
search_form.setAttribute('data-focus', false);
document.activeElement.blur(); // remove focus from search box
search__focus = false;
}
}
/*--------------------------------------------------------------
Fetch some json without jquery
--------------------------------------------------------------*/
function fetch_JSON(path, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
if (callback) callback(data);
}
}
};
httpRequest.open('GET', path);
httpRequest.send();
}
/*--------------------------------------------------------------
Load script
based on https://stackoverflow.com/a/55451823
--------------------------------------------------------------*/
function load_script(url) {
return new Promise(function(resolve, reject) {
let script = document.createElement("script");
script.onerror = reject;
script.onload = resolve;
if (document.currentScript) {
document.currentScript.parentNode.insertBefore(script, document.currentScript);
}
else {
document.head.appendChild(script)
}
script.src = url;
});
}
/*--------------------------------------------------------------
Load our search index, only executed once
on first call of search box (Ctrl + /)
--------------------------------------------------------------*/
function search_init() {
if (first_run) {
load_script(window.location.origin + '/js/fuse.js').then(() => {
search_input.value = ""; // reset default value
first_run = false; // let's never do this again
fetch_JSON('/index.json', function(data){
var options = { // fuse.js options; check fuse.js website for details
shouldSort: true,
location: 0,
distance: 100,
threshold: 0.4,
minMatchCharLength: 2,
keys: [
'permalink',
'title',
'date',
'description',
'tags'
]
};
fuse = new Fuse(data, options); // build the index from the json file
search_input.addEventListener('keyup', function(e) { // execute search as each character is typed
search_exec(this.value);
});
// console.log("index.json loaded"); // DEBUG
});
}).catch((error) => { console.log('fixedsearch failed to load: ' + error); });
}
}
/*--------------------------------------------------------------
Using the index we loaded on Ctrl + /, run
a search query (for "term") every time a letter is typed
in the search box
--------------------------------------------------------------*/
function search_exec(term) {
let results = fuse.search(term); // the actual query being run using fuse.js
let search_items = ''; // our results bucket
if (results.length === 0) { // no results based on what was typed into the input box
results_available = false;
search_items = '';
} else { // build our html
for (let item in results.slice(0,5)) { // only show first 5 results
search_items = search_items +
`<li><a href="${results[item].item.permalink}" tabindex="0">
<span class="title">${results[item].item.title}</span>
<span class="date">${results[item].item.date}</span>
<span class="description">${results[item].item.description}</span>
<span class="tags">${results[item].item.tags.join(', ')}</span>
</a></li>`;
}
results_available = true;
}
search_results.innerHTML = search_items;
if (results.length > 0) {
first = search_results.firstChild.firstElementChild; // first result container — used for checking against keyboard up/down location
last = search_results.lastChild.firstElementChild; // last result container — used for checking against keyboard up/down location
}
}
}();
}