Guide_3DS/_includes/search/algolia-search-scripts.html
lifehackerhansol 5641d7e51a first rebase
ALSO: Remove fading on dropdown menu click. This is also a bug on the actual upstream, when the cursor leaves the screen the menu disappears but the fading doesn't.
This causes things like the menu saying it's open when it's not and closed when open. I'm not dealing with an upstream bug.
2022-01-11 10:23:27 -08:00

62 lines
2 KiB
HTML

<!-- Including InstantSearch.js library and styling -->
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css">
<script>
// Instanciating InstantSearch.js with Algolia credentials
const search = instantsearch({
appId: '{{ site.algolia.application_id }}',
apiKey: '{{ site.algolia.search_only_api_key }}',
indexName: '{{ site.algolia.index_name }}',
searchParameters: {
restrictSearchableAttributes: [
'title',
'content'
]
}
});
const hitTemplate = function(hit) {
const url = hit.url;
const title = hit._highlightResult.title.value;
const content = hit._highlightResult.html.value;
return `
<div class="list__item">
<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
<h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2>
<div class="archive__item-excerpt" itemprop="description">${content}</div>
</article>
</div>
`;
}
// Adding searchbar and results widgets
search.addWidget(
instantsearch.widgets.searchBox({
container: '.search-searchbar',
{% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %}
placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '.search-hits',
templates: {
item: hitTemplate,
empty: '{{ site.data.ui-text[site.locale].search_algolia_no_results | default: "No results" }}',
}
})
);
// Starting the search only when toggle is clicked
$(document).ready(function () {
$(".search__toggle").on("click", function() {
if(!search.started) {
search.start();
}
});
});
</script>