test: update split js
This commit is contained in:
Henk Verlinde
parent
6b2608c493
commit
1aa8b7231f
138
assets/js/app.js
138
assets/js/app.js
|
|
@ -1,5 +1,3 @@
|
|||
/* global FlexSearch docs:true a:true t:true d:true */
|
||||
|
||||
document.getElementById('mode').addEventListener('click', () => {
|
||||
|
||||
document.body.classList.toggle('dark');
|
||||
|
|
@ -13,142 +11,6 @@ if (localStorage.getItem('theme') === 'dark') {
|
|||
|
||||
}
|
||||
|
||||
var suggestions = document.getElementById('suggestions');
|
||||
var userinput = document.getElementById('userinput');
|
||||
|
||||
document.addEventListener('keydown', inputFocus);
|
||||
|
||||
function inputFocus(e) {
|
||||
|
||||
if (e.keyCode === 191 ) {
|
||||
e.preventDefault();
|
||||
userinput.focus();
|
||||
}
|
||||
|
||||
if (e.keyCode === 27 ) {
|
||||
userinput.blur();
|
||||
suggestions.classList.add('d-none');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
|
||||
var isClickInsideElement = suggestions.contains(event.target);
|
||||
|
||||
if (!isClickInsideElement) {
|
||||
suggestions.classList.add('d-none');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
Source:
|
||||
- https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
|
||||
*/
|
||||
|
||||
document.addEventListener('keydown',suggestionFocus);
|
||||
|
||||
function suggestionFocus(e){
|
||||
|
||||
const focusableSuggestions= suggestions.querySelectorAll('a');
|
||||
const focusable= [...focusableSuggestions];
|
||||
const index = focusable.indexOf(document.activeElement);
|
||||
|
||||
let nextIndex = 0;
|
||||
|
||||
if (e.keyCode === 38) {
|
||||
e.preventDefault();
|
||||
nextIndex= index > 0 ? index-1 : 0;
|
||||
focusableSuggestions[nextIndex].focus();
|
||||
}
|
||||
else if (e.keyCode === 40) {
|
||||
e.preventDefault();
|
||||
nextIndex= index+1 < focusable.length ? index+1 : index;
|
||||
focusableSuggestions[nextIndex].focus();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Source:
|
||||
- https://github.com/nextapps-de/flexsearch#index-documents-field-search
|
||||
- https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
|
||||
*/
|
||||
|
||||
(function(){
|
||||
|
||||
var index = new FlexSearch({
|
||||
preset: 'score',
|
||||
cache: true,
|
||||
doc: {
|
||||
id: 'id',
|
||||
field: [
|
||||
'title',
|
||||
'description',
|
||||
'content',
|
||||
],
|
||||
store: [
|
||||
'href',
|
||||
'title',
|
||||
'description',
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
index.add(docs);
|
||||
|
||||
userinput.addEventListener('input', show_results, true);
|
||||
suggestions.addEventListener('click', accept_suggestion, true);
|
||||
|
||||
function show_results(){
|
||||
|
||||
var value = this.value;
|
||||
var results = index.search(value, 5);
|
||||
var entry, childs = suggestions.childNodes;
|
||||
var i = 0, len = results.length;
|
||||
|
||||
suggestions.classList.remove('d-none');
|
||||
|
||||
results.forEach(function(page) {
|
||||
|
||||
entry = document.createElement('div');
|
||||
|
||||
entry.innerHTML = '<a href><span></span><span></span></a>';
|
||||
|
||||
a = entry.querySelector('a'),
|
||||
t = entry.querySelector('span:first-child'),
|
||||
d = entry.querySelector('span:nth-child(2)');
|
||||
|
||||
a.href = page.href;
|
||||
t.textContent = page.title;
|
||||
d.textContent = page.description;
|
||||
|
||||
suggestions.appendChild(entry);
|
||||
|
||||
});
|
||||
|
||||
while(childs.length > len){
|
||||
|
||||
suggestions.removeChild(childs[i])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function accept_suggestion(){
|
||||
|
||||
while(suggestions.lastChild){
|
||||
|
||||
suggestions.removeChild(suggestions.lastChild);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
}());
|
||||
|
||||
/* eslint-disable */
|
||||
var clipboard = new ClipboardJS('.btn-clipboard');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,87 @@
|
|||
var suggestions = document.getElementById('suggestions');
|
||||
var userinput = document.getElementById('userinput');
|
||||
|
||||
document.addEventListener('keydown', inputFocus);
|
||||
|
||||
function inputFocus(e) {
|
||||
|
||||
if (e.keyCode === 191 ) {
|
||||
e.preventDefault();
|
||||
userinput.focus();
|
||||
}
|
||||
|
||||
if (e.keyCode === 27 ) {
|
||||
userinput.blur();
|
||||
suggestions.classList.add('d-none');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
|
||||
var isClickInsideElement = suggestions.contains(event.target);
|
||||
|
||||
if (!isClickInsideElement) {
|
||||
suggestions.classList.add('d-none');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
Source:
|
||||
- https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
|
||||
*/
|
||||
|
||||
document.addEventListener('keydown',suggestionFocus);
|
||||
|
||||
function suggestionFocus(e){
|
||||
|
||||
const focusableSuggestions= suggestions.querySelectorAll('a');
|
||||
const focusable= [...focusableSuggestions];
|
||||
const index = focusable.indexOf(document.activeElement);
|
||||
|
||||
let nextIndex = 0;
|
||||
|
||||
if (e.keyCode === 38) {
|
||||
e.preventDefault();
|
||||
nextIndex= index > 0 ? index-1 : 0;
|
||||
focusableSuggestions[nextIndex].focus();
|
||||
}
|
||||
else if (e.keyCode === 40) {
|
||||
e.preventDefault();
|
||||
nextIndex= index+1 < focusable.length ? index+1 : index;
|
||||
focusableSuggestions[nextIndex].focus();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Source:
|
||||
- https://github.com/nextapps-de/flexsearch#index-documents-field-search
|
||||
- https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
|
||||
*/
|
||||
|
||||
(function(){
|
||||
|
||||
var index = new FlexSearch({
|
||||
preset: 'score',
|
||||
cache: true,
|
||||
doc: {
|
||||
id: 'id',
|
||||
field: [
|
||||
'title',
|
||||
'description',
|
||||
'content',
|
||||
],
|
||||
store: [
|
||||
'href',
|
||||
'title',
|
||||
'description',
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
var docs = [
|
||||
{{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
|
||||
{
|
||||
|
|
@ -9,3 +93,54 @@ var docs = [
|
|||
},
|
||||
{{ end -}}
|
||||
];
|
||||
|
||||
index.add(docs);
|
||||
|
||||
userinput.addEventListener('input', show_results, true);
|
||||
suggestions.addEventListener('click', accept_suggestion, true);
|
||||
|
||||
function show_results(){
|
||||
|
||||
var value = this.value;
|
||||
var results = index.search(value, 5);
|
||||
var entry, childs = suggestions.childNodes;
|
||||
var i = 0, len = results.length;
|
||||
|
||||
suggestions.classList.remove('d-none');
|
||||
|
||||
results.forEach(function(page) {
|
||||
|
||||
entry = document.createElement('div');
|
||||
|
||||
entry.innerHTML = '<a href><span></span><span></span></a>';
|
||||
|
||||
a = entry.querySelector('a'),
|
||||
t = entry.querySelector('span:first-child'),
|
||||
d = entry.querySelector('span:nth-child(2)');
|
||||
|
||||
a.href = page.href;
|
||||
t.textContent = page.title;
|
||||
d.textContent = page.description;
|
||||
|
||||
suggestions.appendChild(entry);
|
||||
|
||||
});
|
||||
|
||||
while(childs.length > len){
|
||||
|
||||
suggestions.removeChild(childs[i])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function accept_suggestion(){
|
||||
|
||||
while(suggestions.lastChild){
|
||||
|
||||
suggestions.removeChild(suggestions.lastChild);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
{{ if eq (hugo.Environment) "development" -}}
|
||||
{{ $app := resources.Get "js/app.js" -}}
|
||||
{{ $js := slice $lazysizes $clipboard $flexsearch $app | resources.Concat "main.js" -}}
|
||||
<script src="{{ $index.Permalink }}" defer></script>
|
||||
<script src="{{ $js.Permalink }}" defer></script>
|
||||
<script src="{{ $index.Permalink }}" defer></script>
|
||||
{{ else -}}
|
||||
{{ $instantPage := resources.Get "js/vendor/instant.page/instantpage.js" | minify -}}
|
||||
{{ $app := resources.Get "js/app.js" | minify -}}
|
||||
{{ $js := slice $lazysizes $clipboard $flexsearch $instantPage $app | resources.Concat "main.js" -}}
|
||||
{{ $jsProd := $js | resources.Fingerprint "sha512" -}}
|
||||
{{ $indexProd := $index | resources.Minify | resources.Fingerprint "sha512" -}}
|
||||
<script src="{{ $indexProd.Permalink }}" integrity="{{ $indexProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
|
||||
<script src="{{ $jsProd.Permalink }}" integrity="{{ $jsProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
|
||||
<script src="{{ $indexProd.Permalink }}" integrity="{{ $indexProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
|
||||
{{ end -}}
|
||||
Loading…
Reference in New Issue