1
0
mirror of https://github.com/thangisme/notes.git synced 2024-12-22 22:26:31 -05:00
notes/assets/js/just-the-docs.js

314 lines
10 KiB
JavaScript
Raw Normal View History

2019-05-18 17:51:30 -04:00
---
---
2019-05-19 14:40:54 -04:00
(function (jtd, undefined) {
2019-05-18 17:51:30 -04:00
2017-03-24 09:47:37 -04:00
// Event handling
2019-05-19 14:40:54 -04:00
jtd.addEvent = function(el, type, handler) {
if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
2017-03-24 09:47:37 -04:00
}
2019-05-19 14:40:54 -04:00
jtd.removeEvent = function(el, type, handler) {
if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
}
jtd.onReady = function(ready) {
// in case the document is already rendered
if (document.readyState!='loading') ready();
// modern browsers
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') ready();
});
2017-03-24 09:47:37 -04:00
}
// Show/hide mobile menu
2019-05-19 14:40:54 -04:00
function initNav() {
const mainNav = document.querySelector('.js-main-nav');
const pageHeader = document.querySelector('.js-page-header');
2017-03-24 09:47:37 -04:00
const navTrigger = document.querySelector('.js-main-nav-trigger');
2019-05-19 14:40:54 -04:00
jtd.addEvent(navTrigger, 'click', function(e){
2019-05-12 15:49:19 -04:00
e.preventDefault();
2017-03-24 09:47:37 -04:00
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
mainNav.classList.toggle('nav-open');
pageHeader.classList.toggle('nav-open');
2017-03-24 09:47:37 -04:00
navTrigger.classList.toggle('nav-open');
navTrigger.innerText = textToggle;
navTrigger.setAttribute('data-text-toggle', text);
textToggle = text;
})
}
// Site search
function initSearch() {
var request = new XMLHttpRequest();
2019-05-18 17:51:30 -04:00
request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
2017-03-24 09:47:37 -04:00
2019-05-19 14:40:54 -04:00
request.onload = function(){
2017-03-24 09:47:37 -04:00
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
2019-09-09 15:50:48 -04:00
{% if site.search_tokenizer_separator != nil %}
lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
2019-09-09 15:50:48 -04:00
{% else %}
2019-05-19 11:21:20 -04:00
lunr.tokenizer.separator = /[\s\-/]+/
2019-09-09 16:09:05 -04:00
{% endif %}
2019-09-09 15:50:48 -04:00
var index = lunr(function () {
this.ref('id');
this.field('title', { boost: 200 });
this.field('content', { boost: 2 });
this.field('url');
this.metadataWhitelist = ['position']
for (var i in data) {
this.add({
2019-05-19 14:08:31 -04:00
id: i,
title: data[i].title,
content: data[i].content,
url: data[i].url
});
}
});
searchResults(index, data);
2017-03-24 09:47:37 -04:00
} else {
// We reached our target server, but it returned an error
console.log('Error loading ajax request. Request status:' + request.status);
}
};
2019-05-19 14:40:54 -04:00
request.onerror = function(){
2017-03-24 09:47:37 -04:00
// There was a connection error of some sort
console.log('There was a connection error');
};
request.send();
function searchResults(index, data) {
var index = index;
var docs = data;
2017-03-24 09:47:37 -04:00
var searchInput = document.querySelector('.js-search-input');
var searchResults = document.querySelector('.js-search-results');
2017-03-26 21:09:19 -04:00
function hideResults() {
searchResults.innerHTML = '';
searchResults.classList.remove('active');
}
2019-05-19 14:40:54 -04:00
jtd.addEvent(searchInput, 'keydown', function(e){
switch (e.keyCode) {
case 38: // arrow up
2019-05-18 17:51:30 -04:00
e.preventDefault();
var active = document.querySelector('.search-result.active');
2019-05-18 17:51:30 -04:00
if (active) {
active.classList.remove('active');
2019-05-18 17:51:30 -04:00
if (active.parentElement.previousSibling) {
var previous = active.parentElement.previousSibling.querySelector('.search-result');
previous.classList.add('active');
}
2017-03-24 09:47:37 -04:00
}
return;
case 40: // arrow down
2019-05-18 17:51:30 -04:00
e.preventDefault();
var active = document.querySelector('.search-result.active');
2019-05-18 17:51:30 -04:00
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');
2019-05-18 20:41:18 -04:00
if (next) {
next.classList.add('active');
}
}
return;
case 13: // enter
2019-05-18 17:51:30 -04:00
e.preventDefault();
var active = document.querySelector('.search-result.active');
2019-05-18 17:51:30 -04:00
if (active) {
active.click();
} else {
var first = document.querySelector('.search-result');
2019-05-18 20:41:18 -04:00
if (first) {
first.click();
}
2019-05-18 17:51:30 -04:00
}
return;
}
});
2017-03-26 21:09:19 -04:00
2019-05-19 14:40:54 -04:00
jtd.addEvent(searchInput, 'keyup', function(e){
switch (e.keyCode) {
case 27: // When esc key is pressed, hide the results and clear the field
2017-03-26 21:09:19 -04:00
hideResults();
searchInput.value = '';
return;
case 38: // arrow up
case 40: // arrow down
case 13: // enter
2019-05-18 17:51:30 -04:00
e.preventDefault();
return;
}
hideResults();
var input = this.value;
if (input === '') {
return;
}
var results = index.query(function (query) {
var tokens = lunr.tokenizer(input)
query.term(tokens, {
boost: 10
});
query.term(tokens, {
wildcard: lunr.Query.wildcard.TRAILING
});
});
if (results.length > 0) {
searchResults.classList.add('active');
var resultsList = document.createElement('ul');
resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList);
for (var i in results) {
var result = results[i];
var doc = docs[result.ref];
var resultsListItem = document.createElement('li');
resultsListItem.classList.add('search-results-list-item');
resultsList.appendChild(resultsListItem);
var resultLink = document.createElement('a');
resultLink.classList.add('search-result');
resultLink.setAttribute('href', doc.url);
resultsListItem.appendChild(resultLink);
var resultTitle = document.createElement('div');
resultTitle.classList.add('search-result-title');
resultTitle.innerText = doc.title;
resultLink.appendChild(resultTitle);
2019-08-13 17:24:36 -04:00
var resultRelUrl = document.createElement('span');
resultRelUrl.classList.add('search-result-rel-url');
resultRelUrl.innerText = doc.relUrl;
resultTitle.appendChild(resultRelUrl);
var metadata = result.matchData.metadata;
var contentFound = false;
for (var j in metadata) {
if (metadata[j].title) {
var position = metadata[j].title.position[0];
var start = position[0];
var end = position[0] + position[1];
2019-08-13 17:34:42 -04:00
resultTitle.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length)+'<span class="search-result-rel-url">'+doc.relUrl+'</span>';
} else if (metadata[j].content && !contentFound) {
contentFound = true;
var position = metadata[j].content.position[0];
var start = position[0];
var end = position[0] + position[1];
var previewStart = start;
var previewEnd = end;
var ellipsesBefore = true;
var ellipsesAfter = true;
for (var k = 0; k < 3; k++) {
var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
var nextDot = doc.content.lastIndexOf('.', previewStart - 2);
if ((nextDot > 0) && (nextDot > nextSpace)) {
previewStart = nextDot + 1;
ellipsesBefore = false;
break;
}
if (nextSpace < 0) {
previewStart = 0;
ellipsesBefore = false;
break;
}
previewStart = nextSpace + 1;
}
for (var k = 0; k < 10; k++) {
var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
var nextDot = doc.content.indexOf('.', previewEnd + 1);
if ((nextDot > 0) && (nextDot < nextSpace)) {
2019-05-19 11:21:20 -04:00
previewEnd = nextDot;
ellipsesAfter = false;
break;
}
if (nextSpace < 0) {
previewEnd = doc.content.length;
ellipsesAfter = false;
break;
}
previewEnd = nextSpace;
}
var preview = doc.content.substring(previewStart, start);
if (ellipsesBefore) {
preview = '... ' + preview;
}
preview += '<span class="search-result-highlight">' + doc.content.substring(start, end) + '</span>';
preview += doc.content.substring(end, previewEnd);
if (ellipsesAfter) {
2019-05-19 11:21:20 -04:00
preview += ' ...';
}
var resultPreview = document.createElement('div');
resultPreview.classList.add('search-result-preview');
resultPreview.innerHTML = preview;
resultLink.appendChild(resultPreview);
}
}
2017-03-26 21:09:19 -04:00
}
}
2017-03-24 09:47:37 -04:00
});
2019-05-19 14:40:54 -04:00
jtd.addEvent(searchInput, 'blur', function(){
2019-05-18 20:41:18 -04:00
setTimeout(function(){ hideResults() }, 300);
});
2017-03-24 09:47:37 -04:00
}
}
// Focus
function pageFocus() {
var mainContent = document.querySelector('.js-main-content');
mainContent.focus();
}
// Switch theme
jtd.getTheme = function() {
var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
}
jtd.setTheme = function(theme) {
var cssFile = document.querySelector('[rel="stylesheet"]');
cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | absolute_url }}' + theme + '.css');
}
2017-03-24 09:47:37 -04:00
// Document ready
2019-05-19 14:40:54 -04:00
jtd.onReady(function(){
initNav();
pageFocus();
if (typeof lunr !== 'undefined') {
initSearch();
}
2017-03-24 09:47:37 -04:00
});
2019-05-19 14:40:54 -04:00
})(window.jtd = window.jtd || {});
2019-07-20 15:51:26 -04:00
{% include js/custom.js %}