Add Lotusdocs theme
This commit is contained in:
Abner Coimbre
215
themes/lotusdocs/layouts/partials/docs/footer/flexsearch.html
Normal file
215
themes/lotusdocs/layouts/partials/docs/footer/flexsearch.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<script type="module">
|
||||
var suggestions = document.getElementById('suggestions');
|
||||
var search = document.getElementById('flexsearch');
|
||||
|
||||
const flexsearchContainer = document.getElementById('FlexSearchCollapse');
|
||||
|
||||
const hideFlexsearchBtn = document.getElementById('hideFlexsearch');
|
||||
|
||||
const configObject = { toggle: false }
|
||||
const flexsearchContainerCollapse = new Collapse(flexsearchContainer, configObject) // initialized with no keyboard
|
||||
|
||||
if (search !== null) {
|
||||
document.addEventListener('keydown', inputFocus);
|
||||
flexsearchContainer.addEventListener('shown.bs.collapse', function () {
|
||||
search.focus();
|
||||
});
|
||||
// hide search collapse containder by clicking outside (except top header)
|
||||
var topHeader = document.getElementById("top-header");
|
||||
document.addEventListener('click', function(elem) {
|
||||
if (!flexsearchContainer.contains(elem.target) && !topHeader.contains(elem.target))
|
||||
flexsearchContainerCollapse.hide();
|
||||
});
|
||||
}
|
||||
|
||||
hideFlexsearchBtn.addEventListener('click', () =>{
|
||||
flexsearchContainerCollapse.hide()
|
||||
})
|
||||
|
||||
function inputFocus(e) {
|
||||
if (e.ctrlKey && e.key === '/') {
|
||||
e.preventDefault();
|
||||
flexsearchContainerCollapse.toggle();
|
||||
}
|
||||
if (e.key === 'Escape' ) {
|
||||
search.blur();
|
||||
// suggestions.classList.add('d-none');
|
||||
flexsearchContainerCollapse.hide();
|
||||
}
|
||||
};
|
||||
|
||||
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 suggestionsHidden = suggestions.classList.contains('d-none');
|
||||
if (suggestionsHidden) return;
|
||||
|
||||
const focusableSuggestions= [...suggestions.querySelectorAll('a')];
|
||||
if (focusableSuggestions.length === 0) return;
|
||||
|
||||
const index = focusableSuggestions.indexOf(document.activeElement);
|
||||
|
||||
if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
const nextIndex = index > 0 ? index - 1 : 0;
|
||||
focusableSuggestions[nextIndex].focus();
|
||||
}
|
||||
else if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
const nextIndex= index + 1 < focusableSuggestions.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.Document({
|
||||
// charset: "latin:default",
|
||||
tokenize: {{ .Site.Params.flexsearch.tokenize | default "forward" }},
|
||||
minlength: {{ .Site.Params.flexsearch.minQueryChar | default 0}},
|
||||
cache: {{ .Site.Params.flexsearch.cache | default 100 }},
|
||||
optimize: {{ .Site.Params.flexsearch.optimize | default true }},
|
||||
document: {
|
||||
id: 'id',
|
||||
store: [
|
||||
"href", "title", "description"
|
||||
],
|
||||
index: ["title", "description", "content"]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Not yet supported: https://github.com/nextapps-de/flexsearch#complex-documents
|
||||
|
||||
|
||||
// var docs = [
|
||||
// {{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
|
||||
// {
|
||||
// id: {{ $index }},
|
||||
// href: {{ .Permalink }},
|
||||
// title: {{ .Title }},
|
||||
// description: {{ .Params.description }},
|
||||
// content: {{ .Content }}
|
||||
// },
|
||||
// {{ end -}}
|
||||
// ];
|
||||
|
||||
|
||||
// https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
|
||||
|
||||
{{ $list := slice }}
|
||||
{{- if and (isset .Site.Params.flexsearch "searchsectionsindex") (not (eq (len .Site.Params.flexsearch.searchSectionsIndex) 0)) }}
|
||||
{{- if eq .Site.Params.flexsearch.searchSectionsIndex "ALL" }}
|
||||
{{- $list = .Site.Pages }}
|
||||
{{- else }}
|
||||
{{- $list = (where .Site.Pages "Type" "in" .Site.Params.flexsearch.searchSectionsIndex) }}
|
||||
{{- if (in .Site.Params.flexsearch.searchSectionsIndex "HomePage") }}
|
||||
{{ $list = $list | append .Site.Home }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
{{- $list = (where .Site.Pages "Section" ($.Scratch.Get "pathName")) }}
|
||||
{{- end }}
|
||||
|
||||
{{ $len := (len $list) -}}
|
||||
|
||||
{{ range $index, $element := $list -}}
|
||||
index.add(
|
||||
{
|
||||
id: {{ $index }},
|
||||
href: "{{ .RelPermalink }}",
|
||||
title: {{ .Title }},
|
||||
{{ with .Description -}}
|
||||
description: {{ . }},
|
||||
{{ else -}}
|
||||
description: {{ .Summary | htmlUnescape | plainify }},
|
||||
{{ end -}}
|
||||
content: {{ .Content | htmlUnescape | plainify }}
|
||||
}
|
||||
);
|
||||
{{ end -}}
|
||||
|
||||
search.addEventListener('input', show_results, true);
|
||||
|
||||
function show_results(){
|
||||
const maxResult = {{ .Site.Params.flexsearch.maxResult | default 5}};
|
||||
const minlength = {{ .Site.Params.flexsearch.minQueryChar | default 0}};
|
||||
var searchQuery = sanitizeHTML(this.value);
|
||||
var results = index.search(searchQuery, {limit: maxResult, enrich: true});
|
||||
|
||||
// flatten results since index.search() returns results for each indexed field
|
||||
const flatResults = new Map(); // keyed by href to dedupe results
|
||||
for (const result of results.flatMap(r => r.result)) {
|
||||
if (flatResults.has(result.doc.href)) continue;
|
||||
flatResults.set(result.doc.href, result.doc);
|
||||
}
|
||||
|
||||
suggestions.innerHTML = "";
|
||||
suggestions.classList.remove('d-none');
|
||||
|
||||
// inform user of search query minimum character requirement
|
||||
if (searchQuery.length < minlength) {
|
||||
const minCharMessage = document.createElement('div')
|
||||
minCharMessage.innerHTML = `Please type at least <strong>${minlength}</strong> characters`
|
||||
minCharMessage.classList.add("suggestion__no-results");
|
||||
suggestions.appendChild(minCharMessage);
|
||||
return;
|
||||
} else {
|
||||
// inform user that no results were found
|
||||
if (flatResults.size === 0 && searchQuery) {
|
||||
const noResultsMessage = document.createElement('div')
|
||||
noResultsMessage.innerHTML = {{ i18n "search_no_results" | default "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);
|
||||
|
||||
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);
|
||||
|
||||
suggestions.appendChild(entry);
|
||||
|
||||
if(suggestions.childElementCount == maxResult) break;
|
||||
}
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
Reference in New Issue
Block a user