🔧 🌱 Complete the local search feature.
This commit is contained in:
凡梦星尘
130
static/js/third-party/search/algolia-search.js
vendored
130
static/js/third-party/search/algolia-search.js
vendored
@@ -1,130 +0,0 @@
|
||||
/* global instantsearch, algoliasearch, CONFIG, pjax */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const { indexName, appID, apiKey, hits } = CONFIG.algolia;
|
||||
|
||||
const search = instantsearch({
|
||||
indexName,
|
||||
searchClient : algoliasearch(appID, apiKey),
|
||||
searchFunction: helper => {
|
||||
if (document.querySelector('.search-input').value) {
|
||||
helper.search();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof pjax === 'object') {
|
||||
search.on('render', () => {
|
||||
pjax.refresh(document.querySelector('.algolia-hits'));
|
||||
});
|
||||
}
|
||||
|
||||
// Registering Widgets
|
||||
search.addWidgets([
|
||||
instantsearch.widgets.configure({
|
||||
hitsPerPage: hits.per_page || 10
|
||||
}),
|
||||
|
||||
instantsearch.widgets.searchBox({
|
||||
container : '.search-input-container',
|
||||
placeholder : CONFIG.i18n.placeholder,
|
||||
// Hide default icons of algolia search
|
||||
showReset : false,
|
||||
showSubmit : false,
|
||||
showLoadingIndicator: false,
|
||||
cssClasses : {
|
||||
input: 'search-input'
|
||||
}
|
||||
}),
|
||||
|
||||
instantsearch.widgets.stats({
|
||||
container: '.algolia-stats',
|
||||
templates: {
|
||||
text: data => {
|
||||
const stats = CONFIG.i18n.hits_time
|
||||
.replace('${hits}', data.nbHits)
|
||||
.replace('${time}', data.processingTimeMS);
|
||||
return `<span>${stats}</span>
|
||||
<img src="${CONFIG.images}/logo-algolia-nebula-blue-full.svg" alt="Algolia">`;
|
||||
}
|
||||
},
|
||||
cssClasses: {
|
||||
text: 'search-stats'
|
||||
}
|
||||
}),
|
||||
|
||||
instantsearch.widgets.hits({
|
||||
container : '.algolia-hits',
|
||||
escapeHTML: false,
|
||||
templates : {
|
||||
item: data => {
|
||||
const { title, excerpt, excerptStrip, contentStripTruncate } = data._highlightResult;
|
||||
let result = `<a href="${data.permalink}" class="search-result-title">${title.value}</a>`;
|
||||
const content = excerpt || excerptStrip || contentStripTruncate;
|
||||
if (content && content.value) {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = content.value;
|
||||
result += `<a href="${data.permalink}"><p class="search-result">${div.textContent.substring(0, 100)}...</p></a>`;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
empty: data => {
|
||||
return `<div class="algolia-hits-empty">
|
||||
${CONFIG.i18n.empty.replace('${query}', data.query)}
|
||||
</div>`;
|
||||
}
|
||||
},
|
||||
cssClasses: {
|
||||
list: 'search-result-list'
|
||||
}
|
||||
}),
|
||||
|
||||
instantsearch.widgets.pagination({
|
||||
container: '.algolia-pagination',
|
||||
scrollTo : false,
|
||||
showFirst: false,
|
||||
showLast : false,
|
||||
templates: {
|
||||
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: {
|
||||
list : ['pagination', 'algolia-pagination'],
|
||||
item : 'pagination-item',
|
||||
link : 'page-number',
|
||||
selectedItem: 'current',
|
||||
disabledItem: 'disabled-item'
|
||||
}
|
||||
})
|
||||
]);
|
||||
|
||||
search.start();
|
||||
|
||||
// Handle and trigger popup window
|
||||
document.querySelectorAll('.popup-trigger').forEach(element => {
|
||||
element.addEventListener('click', () => {
|
||||
document.body.classList.add('search-active');
|
||||
setTimeout(() => document.querySelector('.search-input').focus(), 500);
|
||||
});
|
||||
});
|
||||
|
||||
// Monitor main search box
|
||||
const onPopupClose = () => {
|
||||
document.body.classList.remove('search-active');
|
||||
};
|
||||
|
||||
document.querySelector('.search-pop-overlay').addEventListener('click', event => {
|
||||
if (event.target === document.querySelector('.search-pop-overlay')) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
|
||||
document.addEventListener('pjax:success', onPopupClose);
|
||||
window.addEventListener('keyup', event => {
|
||||
if (event.key === 'Escape') {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
});
|
||||
99
static/js/third-party/search/local-search.js
vendored
99
static/js/third-party/search/local-search.js
vendored
@@ -1,99 +0,0 @@
|
||||
/* global CONFIG, pjax, LocalSearch */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (!CONFIG.path) {
|
||||
// Search DB path
|
||||
console.warn('`hexo-generator-searchdb` plugin is not installed!');
|
||||
return;
|
||||
}
|
||||
const localSearch = new LocalSearch({
|
||||
path : CONFIG.path,
|
||||
top_n_per_article: CONFIG.localsearch.top_n_per_article,
|
||||
unescape : CONFIG.localsearch.unescape
|
||||
});
|
||||
|
||||
const input = document.querySelector('.search-input');
|
||||
|
||||
const inputEventFunction = () => {
|
||||
if (!localSearch.isfetched) return;
|
||||
const searchText = input.value.trim().toLowerCase();
|
||||
const keywords = searchText.split(/[-\s]+/);
|
||||
const container = document.querySelector('.search-result-container');
|
||||
let resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// Perform local searching
|
||||
resultItems = localSearch.getResultItems(keywords);
|
||||
}
|
||||
if (keywords.length === 1 && keywords[0] === '') {
|
||||
container.classList.add('no-result');
|
||||
container.innerHTML = '<div class="search-result-icon"><i class="fa fa-search fa-5x"></i></div>';
|
||||
} else if (resultItems.length === 0) {
|
||||
container.classList.add('no-result');
|
||||
container.innerHTML = '<div class="search-result-icon"><i class="far fa-frown fa-5x"></i></div>';
|
||||
} else {
|
||||
resultItems.sort((left, right) => {
|
||||
if (left.includedCount !== right.includedCount) {
|
||||
return right.includedCount - left.includedCount;
|
||||
} else if (left.hitCount !== right.hitCount) {
|
||||
return right.hitCount - left.hitCount;
|
||||
}
|
||||
return right.id - left.id;
|
||||
});
|
||||
const stats = CONFIG.i18n.hits.replace('${hits}', resultItems.length);
|
||||
|
||||
container.classList.remove('no-result');
|
||||
container.innerHTML = `<div class="search-stats">${stats}</div>
|
||||
<hr>
|
||||
<ul class="search-result-list">${resultItems.map(result => result.item).join('')}</ul>`;
|
||||
if (typeof pjax === 'object') pjax.refresh(container);
|
||||
}
|
||||
};
|
||||
|
||||
localSearch.highlightSearchWords(document.querySelector('.post-body'));
|
||||
if (CONFIG.localsearch.preload) {
|
||||
localSearch.fetchData();
|
||||
}
|
||||
|
||||
if (CONFIG.localsearch.trigger === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
document.querySelector('.search-icon').addEventListener('click', inputEventFunction);
|
||||
input.addEventListener('keypress', event => {
|
||||
if (event.key === 'Enter') {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
window.addEventListener('search:loaded', inputEventFunction);
|
||||
|
||||
// Handle and trigger popup window
|
||||
document.querySelectorAll('.popup-trigger').forEach(element => {
|
||||
element.addEventListener('click', () => {
|
||||
document.body.classList.add('search-active');
|
||||
// Wait for search-popup animation to complete
|
||||
setTimeout(() => input.focus(), 500);
|
||||
if (!localSearch.isfetched) localSearch.fetchData();
|
||||
});
|
||||
});
|
||||
|
||||
// Monitor main search box
|
||||
const onPopupClose = () => {
|
||||
document.body.classList.remove('search-active');
|
||||
};
|
||||
|
||||
document.querySelector('.search-pop-overlay').addEventListener('click', event => {
|
||||
if (event.target === document.querySelector('.search-pop-overlay')) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
|
||||
document.addEventListener('pjax:success', () => {
|
||||
localSearch.highlightSearchWords(document.querySelector('.post-body'));
|
||||
onPopupClose();
|
||||
});
|
||||
window.addEventListener('keyup', event => {
|
||||
if (event.key === 'Escape') {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user