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
|
|
|
|
|
2022-06-25 03:07:03 +02:00
|
|
|
{{ $list := slice }}
|
2022-06-25 05:36:32 +02:00
|
|
|
{{- if and (isset .Site.Params.options "searchsectionsindex") (not (eq (len .Site.Params.options.searchSectionsIndex) 0)) }}
|
|
|
|
{{- if eq .Site.Params.options.searchSectionsIndex "ALL" }}
|
|
|
|
{{- $list = .Site.Pages }}
|
2022-06-25 03:07:03 +02:00
|
|
|
{{- else }}
|
|
|
|
{{- $list = (where .Site.Pages "Type" "in" .Site.Params.options.searchSectionsIndex) }}
|
2022-06-25 13:59:06 +02:00
|
|
|
{{- if (in .Site.Params.options.searchSectionsIndex "HomePage") }}
|
|
|
|
{{ $list = $list | append .Site.Home }}
|
|
|
|
{{- end }}
|
2022-06-25 03:07:03 +02:00
|
|
|
{{- end }}
|
2022-06-25 05:36:32 +02:00
|
|
|
{{- else }}
|
|
|
|
{{- $list = (where .Site.Pages "Section" "docs") }}
|
|
|
|
{{- end }}
|
2022-06-25 03:07:03 +02:00
|
|
|
|
2021-06-25 13:29:22 +02:00
|
|
|
{{ $len := (len $list) -}}
|
|
|
|
|
2022-04-30 18:55:56 +02:00
|
|
|
{{ range $index, $element := $list -}}
|
|
|
|
index.add(
|
2021-06-25 13:29:22 +02:00
|
|
|
{
|
|
|
|
id: {{ $index }},
|
2021-09-28 16:26:15 +02:00
|
|
|
href: "{{ .RelPermalink }}",
|
2021-06-25 13:29:22 +02:00
|
|
|
title: {{ .Title | jsonify }},
|
2021-10-13 17:17:28 +02:00
|
|
|
{{ with .Description -}}
|
|
|
|
description: {{ . | jsonify }},
|
|
|
|
{{ else -}}
|
|
|
|
description: {{ .Summary | plainify | jsonify }},
|
|
|
|
{{ end -}}
|
2021-10-14 23:56:35 +02:00
|
|
|
content: {{ .Plain | jsonify }}
|
2022-04-30 18:55:56 +02:00
|
|
|
}
|
|
|
|
);
|
|
|
|
{{ 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(){
|
2021-08-10 15:53:17 +02:00
|
|
|
const maxResult = 5;
|
2021-10-15 15:12:42 +02:00
|
|
|
var searchQuery = this.value;
|
|
|
|
var results = index.search(searchQuery, {limit: maxResult, enrich: true});
|
2020-12-06 12:03:41 +01:00
|
|
|
|
2021-10-15 15:12:42 +02:00
|
|
|
// flatten results since index.search() returns results for each indexed field
|
2021-10-15 15:16:33 +02:00
|
|
|
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)) {
|
2021-10-15 15:16:33 +02:00
|
|
|
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
|
|
|
|
2021-10-15 15:12:42 +02:00
|
|
|
suggestions.innerHTML = "";
|
|
|
|
suggestions.classList.remove('d-none');
|
|
|
|
|
2021-10-15 15:38:04 +02:00
|
|
|
// inform user that no results were found
|
2021-10-15 15:42:26 +02:00
|
|
|
if (flatResults.size === 0 && searchQuery) {
|
2021-10-15 15:38:04 +02:00
|
|
|
const noResultsMessage = document.createElement('div')
|
|
|
|
noResultsMessage.innerHTML = `No results for "<strong>${searchQuery}</strong>"`
|
|
|
|
noResultsMessage.classList.add("suggestion__no-results");
|
|
|
|
suggestions.appendChild(noResultsMessage);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-10-15 15:12:42 +02:00
|
|
|
// construct a list of suggestions
|
2021-10-15 15:16:33 +02:00
|
|
|
for(const [href, doc] of flatResults) {
|
2021-08-10 15:53:17 +02:00
|
|
|
const entry = document.createElement('div');
|
2021-10-15 15:12:42 +02:00
|
|
|
suggestions.appendChild(entry);
|
|
|
|
|
|
|
|
const a = document.createElement('a');
|
|
|
|
a.href = href;
|
|
|
|
entry.appendChild(a);
|
2020-12-06 12:03:41 +01:00
|
|
|
|
2021-10-15 15:12:42 +02:00
|
|
|
const title = document.createElement('span');
|
|
|
|
title.textContent = doc.title;
|
2021-10-15 15:34:57 +02:00
|
|
|
title.classList.add("suggestion__title");
|
2021-10-15 15:12:42 +02:00
|
|
|
a.appendChild(title);
|
|
|
|
|
|
|
|
const description = document.createElement('span');
|
|
|
|
description.textContent = doc.description;
|
2021-10-15 15:34:57 +02:00
|
|
|
description.classList.add("suggestion__description");
|
2021-10-15 15:12:42 +02:00
|
|
|
a.appendChild(description);
|
2020-12-06 12:03:41 +01:00
|
|
|
|
2021-08-10 15:53:17 +02:00
|
|
|
suggestions.appendChild(entry);
|
2021-10-15 15:12:42 +02:00
|
|
|
|
2021-08-10 15:53:17 +02:00
|
|
|
if(suggestions.childElementCount == maxResult) break;
|
2020-12-06 12:03:41 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}());
|