portails/assets/js/index.js

170 lines
4.6 KiB
JavaScript
Raw Normal View History

2020-12-06 12:03:41 +01:00
var suggestions = document.getElementById('suggestions');
2021-09-07 12:08:46 +02:00
var search = document.getElementById('search');
2020-12-06 12:03:41 +01:00
2021-09-07 12:08:46 +02:00
if (search !== null) {
document.addEventListener('keydown', inputFocus);
}
2020-12-06 12:03:41 +01:00
function inputFocus(e) {
2021-09-07 12:08:46 +02:00
if (e.ctrlKey && e.key === '/' ) {
2020-12-06 12:03:41 +01:00
e.preventDefault();
2021-09-07 12:08:46 +02:00
search.focus();
2020-12-06 12:03:41 +01:00
}
2021-09-07 12:08:46 +02:00
if (e.key === 'Escape' ) {
search.blur();
2020-12-06 12:03:41 +01:00
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);
2021-10-13 20:13:19 +02:00
function suggestionFocus(e) {
const suggestionsHidden = suggestions.classList.contains('d-none');
if (suggestionsHidden) return;
2020-12-06 12:03:41 +01:00
2021-10-13 20:13:19 +02:00
const focusableSuggestions= [...suggestions.querySelectorAll('a')];
if (focusableSuggestions.length === 0) return;
2020-12-06 12:03:41 +01:00
2021-10-13 20:13:19 +02:00
const index = focusableSuggestions.indexOf(document.activeElement);
2021-09-07 12:08:46 +02:00
2021-10-13 20:13:19 +02:00
if (e.key === "ArrowUp") {
2020-12-06 12:03:41 +01:00
e.preventDefault();
2021-10-13 20:13:19 +02:00
const nextIndex = index > 0 ? index - 1 : 0;
2020-12-06 12:03:41 +01:00
focusableSuggestions[nextIndex].focus();
}
2021-10-13 20:13:19 +02:00
else if (e.key === "ArrowDown") {
2020-12-06 12:03:41 +01:00
e.preventDefault();
2021-10-13 20:13:19 +02:00
const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
2020-12-06 12:03:41 +01:00
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(){
2021-06-25 13:29:22 +02:00
var index = new FlexSearch.Document({
tokenize: "forward",
cache: 100,
document: {
id: 'id',
store: [
"href", "title", "description"
],
index: ["title", "description", "content"]
}
2020-12-06 12:03:41 +01:00
});
2021-06-25 13:29:22 +02:00
// Not yet supported: https://github.com/nextapps-de/flexsearch#complex-documents
/*
2020-12-06 12:03:41 +01:00
var docs = [
{{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
{
id: {{ $index }},
2021-06-25 13:29:22 +02:00
href: "{{ .Permalink }}",
2020-12-06 12:03:41 +01:00
title: {{ .Title | jsonify }},
description: {{ .Params.description | jsonify }},
content: {{ .Content | jsonify }}
},
{{ end -}}
];
2021-06-25 13:29:22 +02:00
*/
2020-12-06 12:03:41 +01:00
2021-06-25 13:29:22 +02:00
// https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
{{ $list := (where .Site.Pages "Section" "docs") -}}
{{ $len := (len $list) -}}
index.add(
{{ range $index, $element := $list -}}
{
id: {{ $index }},
2021-09-28 16:26:15 +02:00
href: "{{ .RelPermalink }}",
2021-06-25 13:29:22 +02:00
title: {{ .Title | jsonify }},
{{ with .Description -}}
description: {{ . | jsonify }},
{{ else -}}
description: {{ .Summary | plainify | jsonify }},
{{ end -}}
2021-10-14 23:56:35 +02:00
content: {{ .Plain | jsonify }}
2021-06-25 13:29:22 +02:00
})
{{ if ne (add $index 1) $len -}}
.add(
{{ end -}}
{{ end -}}
;
2020-12-06 12:03:41 +01:00
2021-09-07 12:08:46 +02:00
search.addEventListener('input', show_results, true);
2020-12-06 12:03:41 +01:00
function show_results(){
const maxResult = 5;
var searchQuery = this.value;
var results = index.search(searchQuery, {limit: maxResult, enrich: true});
2020-12-06 12:03:41 +01:00
// flatten results since index.search() returns results for each indexed field
const flatResults = new Map(); // keyed by href to dedupe results
2021-10-13 20:13:19 +02:00
for (const result of results.flatMap(r => r.result)) {
if (flatResults.has(result.doc.href)) continue;
flatResults.set(result.doc.href, result.doc);
2021-10-13 20:13:19 +02:00
}
2020-12-06 12:03:41 +01:00
suggestions.innerHTML = "";
suggestions.classList.remove('d-none');
// inform user that no results were found
if (flatResults.size === 0 && searchQuery) {
const noResultsMessage = document.createElement('div')
noResultsMessage.innerHTML = `No results for "<strong>${searchQuery}</strong>"`
noResultsMessage.classList.add("suggestion__no-results");
suggestions.appendChild(noResultsMessage);
return;
}
// construct a list of suggestions
for(const [href, doc] of flatResults) {
const entry = document.createElement('div');
suggestions.appendChild(entry);
const a = document.createElement('a');
a.href = href;
entry.appendChild(a);
2020-12-06 12:03:41 +01:00
const title = document.createElement('span');
title.textContent = doc.title;
title.classList.add("suggestion__title");
a.appendChild(title);
const description = document.createElement('span');
description.textContent = doc.description;
description.classList.add("suggestion__description");
a.appendChild(description);
2020-12-06 12:03:41 +01:00
suggestions.appendChild(entry);
if(suggestions.childElementCount == maxResult) break;
2020-12-06 12:03:41 +01:00
}
}
}());