From 1aa8b7231f1ca9216672ea798aa27163033ef33d Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Sun, 6 Dec 2020 12:03:41 +0100 Subject: [PATCH] test: update split js --- assets/js/app.js | 138 ------------------ assets/js/index.js | 157 +++++++++++++++++++-- layouts/partials/footer/script-footer.html | 4 +- 3 files changed, 148 insertions(+), 151 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index 2499559..fa64c92 100644 --- a/assets/js/app.js +++ b/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 = 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'); diff --git a/assets/js/index.js b/assets/js/index.js index 82dfda8..28808a8 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -1,11 +1,146 @@ -var docs = [ -{{ range $index, $page := (where .Site.Pages "Section" "docs") -}} - { - id: {{ $index }}, - href: "{{ .Permalink | absURL }}", - title: {{ .Title | jsonify }}, - description: {{ .Params.description | jsonify }}, - content: {{ .Content | jsonify }} - }, -{{ end -}} -]; \ No newline at end of file +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") -}} + { + id: {{ $index }}, + href: "{{ .Permalink | absURL }}", + title: {{ .Title | jsonify }}, + description: {{ .Params.description | jsonify }}, + content: {{ .Content | jsonify }} + }, + {{ 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 = 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; + } + +}()); diff --git a/layouts/partials/footer/script-footer.html b/layouts/partials/footer/script-footer.html index 61d9baa..3ac55a5 100644 --- a/layouts/partials/footer/script-footer.html +++ b/layouts/partials/footer/script-footer.html @@ -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" -}} - + {{ 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" -}} - + {{ end -}} \ No newline at end of file