110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
/* global instantsearch, CONFIG */
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const algoliaSettings = CONFIG.algolia;
|
|
|
|
let search = instantsearch({
|
|
appId : algoliaSettings.appID,
|
|
apiKey : algoliaSettings.apiKey,
|
|
indexName : algoliaSettings.indexName,
|
|
searchFunction: helper => {
|
|
let searchInput = document.querySelector('#search-input input');
|
|
if (searchInput.value) {
|
|
helper.search();
|
|
}
|
|
}
|
|
});
|
|
|
|
window.pjax && search.on('render', () => {
|
|
window.pjax.refresh(document.getElementById('algolia-hits'));
|
|
});
|
|
|
|
// Registering Widgets
|
|
[
|
|
instantsearch.widgets.searchBox({
|
|
container : '#search-input',
|
|
placeholder: algoliaSettings.labels.input_placeholder
|
|
}),
|
|
|
|
instantsearch.widgets.stats({
|
|
container: '#algolia-stats',
|
|
templates: {
|
|
body: data => {
|
|
let stats = algoliaSettings.labels.hits_stats
|
|
.replace(/\$\{hits}/, data.nbHits)
|
|
.replace(/\$\{time}/, data.processingTimeMS);
|
|
return `${stats}
|
|
<span class="algolia-powered">
|
|
<img src="${CONFIG.root}images/algolia_logo.svg" alt="Algolia">
|
|
</span>
|
|
<hr>`;
|
|
}
|
|
}
|
|
}),
|
|
|
|
instantsearch.widgets.hits({
|
|
container : '#algolia-hits',
|
|
hitsPerPage: algoliaSettings.hits.per_page || 10,
|
|
templates : {
|
|
item: data => {
|
|
let link = data.permalink ? data.permalink : CONFIG.root + data.path;
|
|
return `<a href="${link}" class="algolia-hit-item-link">${data._highlightResult.title.value}</a>`;
|
|
},
|
|
empty: data => {
|
|
return `<div id="algolia-hits-empty">
|
|
${algoliaSettings.labels.hits_empty.replace(/\$\{query}/, data.query)}
|
|
</div>`;
|
|
}
|
|
},
|
|
cssClasses: {
|
|
item: 'algolia-hit-item'
|
|
}
|
|
}),
|
|
|
|
instantsearch.widgets.pagination({
|
|
container : '#algolia-pagination',
|
|
scrollTo : false,
|
|
showFirstLast: false,
|
|
labels : {
|
|
first : '<i class="fa fa-angle-double-left"></i>',
|
|
last : '<i class="fa fa-angle-double-right"></i>',
|
|
previous: '<i class="fa fa-angle-left"></i>',
|
|
next : '<i class="fa fa-angle-right"></i>'
|
|
},
|
|
cssClasses: {
|
|
root : 'pagination',
|
|
item : 'pagination-item',
|
|
link : 'page-number',
|
|
active : 'current',
|
|
disabled: 'disabled-item'
|
|
}
|
|
})
|
|
].forEach(search.addWidget, search);
|
|
|
|
search.start();
|
|
|
|
// Handle and trigger popup window
|
|
document.querySelector('.popup-trigger').addEventListener('click', () => {
|
|
document.body.style.overflow = 'hidden';
|
|
document.querySelector('.search-pop-overlay').style.display = 'block';
|
|
document.querySelector('.popup').style.display = 'block';
|
|
document.querySelector('#search-input input').focus();
|
|
});
|
|
|
|
// Monitor main search box
|
|
const onPopupClose = () => {
|
|
document.body.style.overflow = '';
|
|
document.querySelector('.search-pop-overlay').style.display = 'none';
|
|
document.querySelector('.popup').style.display = 'none';
|
|
};
|
|
|
|
document.querySelector('.search-pop-overlay').addEventListener('click', onPopupClose);
|
|
document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
|
|
window.addEventListener('pjax:success', onPopupClose);
|
|
window.addEventListener('keyup', event => {
|
|
if (event.which === 27) {
|
|
onPopupClose();
|
|
}
|
|
});
|
|
});
|