|
|
@@ -6,72 +6,108 @@
|
|
|
**************************************************/
|
|
|
|
|
|
import {algoliaConfig, i18n, content_type} from '@params';
|
|
|
+import algoliasearch from 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch.esm.browser.js';
|
|
|
+// import instantsearch from 'https://cdn.jsdelivr.net/npm/instantsearch.js@4/es/index.js'
|
|
|
+// import {searchBox, infiniteHits} from 'https://cdn.jsdelivr.net/npm/instantsearch.js@4/es/widgets/index.js';
|
|
|
|
|
|
function getTemplate(templateName) {
|
|
|
return document.querySelector(`#${templateName}-template`).innerHTML;
|
|
|
}
|
|
|
|
|
|
-if (typeof instantsearch === 'function' && $('#search-box').length) {
|
|
|
- const options = {
|
|
|
- appId: algoliaConfig.appId,
|
|
|
- apiKey: algoliaConfig.apiKey,
|
|
|
- indexName: algoliaConfig.indexName,
|
|
|
- routing: true,
|
|
|
- searchParameters: {
|
|
|
- hitsPerPage: 10,
|
|
|
- },
|
|
|
- searchFunction: function (helper) {
|
|
|
- let searchResults = document.querySelector('#search-hits');
|
|
|
- let commonQueries = document.querySelector('#search-common-queries');
|
|
|
- if (helper.state.query === '') {
|
|
|
- searchResults.style.display = 'none';
|
|
|
- commonQueries.style.display = 'block';
|
|
|
- return;
|
|
|
- }
|
|
|
- helper.search();
|
|
|
- commonQueries.style.display = 'none';
|
|
|
- searchResults.style.display = 'block';
|
|
|
- },
|
|
|
- };
|
|
|
-
|
|
|
- const search = instantsearch(options);
|
|
|
+// Get query from URI.
|
|
|
+function getSearchQuery(name) {
|
|
|
+ return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
|
|
|
+}
|
|
|
|
|
|
- // Initialize search box.
|
|
|
- search.addWidget(
|
|
|
- instantsearch.widgets.searchBox({
|
|
|
- container: '#search-box',
|
|
|
- autofocus: true,
|
|
|
- reset: true,
|
|
|
- poweredBy: algoliaConfig.poweredBy,
|
|
|
- placeholder: i18n.placeholder,
|
|
|
- }),
|
|
|
- );
|
|
|
+// On page load, check for search query in URL.
|
|
|
+document.addEventListener('DOMContentLoaded', () => {
|
|
|
+ let queryURL = getSearchQuery('q');
|
|
|
+ if (queryURL) {
|
|
|
+ $('body').addClass('searching');
|
|
|
+ $('.search-results').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 200);
|
|
|
+ let commonQueries = document.querySelector('#search-common-queries');
|
|
|
+ commonQueries.style.display = 'none';
|
|
|
+ }
|
|
|
|
|
|
- // Initialize search results.
|
|
|
- search.addWidget(
|
|
|
- instantsearch.widgets.infiniteHits({
|
|
|
- container: '#search-hits',
|
|
|
- escapeHits: true,
|
|
|
- templates: {
|
|
|
- empty: '<div class="search-no-results">' + i18n.no_results + '</div>',
|
|
|
- item: getTemplate('search-hit-algolia'),
|
|
|
+ if (typeof instantsearch === 'function' && $('#search-box').length) {
|
|
|
+ const search = instantsearch({
|
|
|
+ indexName: algoliaConfig.indexName,
|
|
|
+ searchClient: algoliasearch(algoliaConfig.appId, algoliaConfig.apiKey), //'appId', 'apiKey'),
|
|
|
+ routing: {
|
|
|
+ router: instantsearch.routers.history({
|
|
|
+ parseURL() {
|
|
|
+ return {
|
|
|
+ q: getSearchQuery('q'),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ stateMapping: {
|
|
|
+ stateToRoute(uiState) {
|
|
|
+ const indexUiState = uiState[algoliaConfig.indexName];
|
|
|
+ return {
|
|
|
+ q: indexUiState.query,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ routeToState(routeState) {
|
|
|
+ return {
|
|
|
+ [algoliaConfig.indexName]: {
|
|
|
+ query: routeState.q,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
- cssClasses: {
|
|
|
- showmoreButton: 'btn btn-outline-primary',
|
|
|
- },
|
|
|
- }),
|
|
|
- );
|
|
|
+ });
|
|
|
|
|
|
- // On render search results, localize the content type metadata.
|
|
|
- search.on('render', function () {
|
|
|
- $('.search-hit-type').each(function () {
|
|
|
- let content_key = $(this).text();
|
|
|
- if (content_key in content_type) {
|
|
|
- $(this).text(content_type[content_key]);
|
|
|
- }
|
|
|
+ // Initialize search box.
|
|
|
+ search.addWidget(
|
|
|
+ instantsearch.widgets.searchBox({
|
|
|
+ container: '#search-box',
|
|
|
+ autofocus: true,
|
|
|
+ showReset: true,
|
|
|
+ //poweredBy: algoliaConfig.poweredBy,
|
|
|
+ placeholder: i18n.placeholder,
|
|
|
+ queryHook(query, search) {
|
|
|
+ let searchResults = document.querySelector('#search-hits');
|
|
|
+ let commonQueries = document.querySelector('#search-common-queries');
|
|
|
+ if (query === '') {
|
|
|
+ searchResults.style.display = 'none';
|
|
|
+ commonQueries.style.display = 'block';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ search(query);
|
|
|
+ commonQueries.style.display = 'none';
|
|
|
+ searchResults.style.display = 'block';
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ );
|
|
|
+
|
|
|
+ // Initialize search results.
|
|
|
+ search.addWidget(
|
|
|
+ instantsearch.widgets.infiniteHits({
|
|
|
+ container: '#search-hits',
|
|
|
+ escapeHTML: true,
|
|
|
+ templates: {
|
|
|
+ empty: '<div class="search-no-results">' + i18n.no_results + '</div>',
|
|
|
+ item: getTemplate('search-hit-algolia'),
|
|
|
+ },
|
|
|
+ cssClasses: {
|
|
|
+ loadMore: 'btn btn-outline-primary',
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ );
|
|
|
+
|
|
|
+ // On render search results, localize the content type metadata.
|
|
|
+ search.on('render', function () {
|
|
|
+ $('.search-hit-type').each(function () {
|
|
|
+ let content_key = $(this).text();
|
|
|
+ if (content_key in content_type) {
|
|
|
+ $(this).text(content_type[content_key]);
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
- });
|
|
|
|
|
|
- // Start search.
|
|
|
- search.start();
|
|
|
-}
|
|
|
+ // Start search.
|
|
|
+ search.start();
|
|
|
+ }
|
|
|
+});
|
George Cushen