diff --git a/src/_includes/layouts/common-js.njk b/src/_includes/layouts/common-js.njk index a7ec709142..3b311856b8 100644 --- a/src/_includes/layouts/common-js.njk +++ b/src/_includes/layouts/common-js.njk @@ -39,8 +39,14 @@ 'webinars': 'Webinars', } const placeholder = Object.prototype.hasOwnProperty.call(scopeTitles, searchScope) ? `Search in ${scopeTitles[searchScope]}...` : 'Search...' - + const initialHitsPerPage = 5; + + let hitsPerPage = initialHitsPerPage + let initialQuery = ''; + const searchQuery = (searchClient, query, scope) => { + initialQuery = query + return { sourceId : scope, getItems : () => getAlgoliaResults({ @@ -50,7 +56,7 @@ indexName : 'netlify_00f8cf60-997f-4c4d-9427-a97924358648_live_all', params : { query, - hitsPerPage: 5, + hitsPerPage }, attributesToHighlight: '*', filters: scope.length === 0 ? undefined : `category:${scope}` @@ -104,12 +110,15 @@ `; }, + footer({html}) { + return html``; + } } }; } autocomplete({ - debug: true, + debug: false, container: '#algolia-search', placeholder, getSources({query}) { @@ -127,6 +136,23 @@ document.querySelectorAll('.aa-Panel img').forEach(img => { img.src = img.getAttribute('data-src'); }); + + // reset the number of results per page if the query changes + if (state.query !== initialQuery) { + hitsPerPage = initialHitsPerPage + } + + const loadMoreBtn = document.querySelector('#load-more'); + if (loadMoreBtn) { + loadMoreBtn.onclick = () => { + hitsPerPage += initialHitsPerPage; + + const input = document.querySelector('#algolia-search input'); + + // Trick Autocomplete into refreshing and retrieving more hits per page + input.dispatchEvent(new Event('input', { bubbles: true })); + }; + } } }); } diff --git a/src/css/algolia-theme.css b/src/css/algolia-theme.css index 7eb13eca28..0d13ff27c0 100644 --- a/src/css/algolia-theme.css +++ b/src/css/algolia-theme.css @@ -80,3 +80,17 @@ .aa-Panel .aa-ItemContent .aa-ItemContentBody .aa-ItemContentDescription { color: #777; } + +.aa-Panel .aa-SourceFooter #load-more { + display: block; + width: 100%; + text-align: center; + color: #777; + padding: 10px 0 5px; + font-size: 12px; +} + +.aa-Panel .aa-SourceFooter #load-more:hover { + cursor: pointer; + color: #2563eb; +}