108 lines
2.8 KiB
JavaScript
108 lines
2.8 KiB
JavaScript
|
import throttle from 'lodash/throttle';
|
||
|
|
import URI from 'url-parse';
|
||
|
|
import qs from 'querystringify';
|
||
|
|
import history from './history';
|
||
|
|
|
||
|
|
export const DEFAULTS = {
|
||
|
|
uri: '',
|
||
|
|
limit: 20,
|
||
|
|
snippet: 300,
|
||
|
|
min: 3,
|
||
|
|
search_type: 'auto',
|
||
|
|
in_page: false,
|
||
|
|
live_update: true,
|
||
|
|
};
|
||
|
|
|
||
|
|
const historyPush = ({ value = false, params = false } = {}) => {
|
||
|
|
const uri = new URI(global.location.href, true);
|
||
|
|
|
||
|
|
if (params === false) {
|
||
|
|
delete uri.query.q;
|
||
|
|
} else {
|
||
|
|
uri.query.q = params;
|
||
|
|
}
|
||
|
|
|
||
|
|
const querystring = qs.stringify(uri.query, '?');
|
||
|
|
|
||
|
|
history.push(`${uri.pathname}${querystring}`, {
|
||
|
|
historyValue: value, type: 'tntsearch',
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const throttling = throttle(async ({ input, results, historyValue = false } = {}) => {
|
||
|
|
if (!input || !results) { return false; }
|
||
|
|
|
||
|
|
const value = historyValue || input.value.trim();
|
||
|
|
const clear = input.nextElementSibling;
|
||
|
|
const data = Object.assign({}, DEFAULTS, JSON.parse(input.dataset.tntsearch || '{}'));
|
||
|
|
|
||
|
|
if (!value) {
|
||
|
|
results.style.display = 'none';
|
||
|
|
|
||
|
|
if (data.in_page) {
|
||
|
|
clear.style.display = 'none';
|
||
|
|
|
||
|
|
if (historyValue === false && data.live_update) {
|
||
|
|
historyPush({ value });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (value.length < data.min) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data.in_page) {
|
||
|
|
clear.style.display = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
const params = {
|
||
|
|
q: encodeURIComponent(value),
|
||
|
|
l: data.limit,
|
||
|
|
sl: data.snippet,
|
||
|
|
search_type: data.search_type,
|
||
|
|
ajax: true,
|
||
|
|
};
|
||
|
|
|
||
|
|
const startEvent = new Event('tntsearch:start');
|
||
|
|
const query = Object.keys(params)
|
||
|
|
.map(k => `${k}=${params[k]}`)
|
||
|
|
.join('&');
|
||
|
|
|
||
|
|
input.dispatchEvent(startEvent);
|
||
|
|
fetch(`${data.uri}?${query}`, { credentials: 'same-origin' })
|
||
|
|
.then((response) => response.text())
|
||
|
|
.then((response) => {
|
||
|
|
if (data.in_page && data.live_update && !historyValue) {
|
||
|
|
historyPush({ value, params: params.q });
|
||
|
|
}
|
||
|
|
return response;
|
||
|
|
})
|
||
|
|
.then((response) => {
|
||
|
|
const doneEvent = new Event('tntsearch:done');
|
||
|
|
results.style.display = '';
|
||
|
|
results.innerHTML = response;
|
||
|
|
input.dispatchEvent(doneEvent);
|
||
|
|
|
||
|
|
return response;
|
||
|
|
});
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}, 350, { leading: false });
|
||
|
|
|
||
|
|
history.listen((location) => {
|
||
|
|
if (location.state && location.state.type === 'tntsearch') {
|
||
|
|
location.state.input = document.querySelector('.tntsearch-field-inpage');
|
||
|
|
location.state.results = document.querySelector('.tntsearch-results-inpage');
|
||
|
|
|
||
|
|
if (location.state.input && location.state.results) {
|
||
|
|
location.state.input.value = location.state.historyValue;
|
||
|
|
throttling({ ...location.state });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
export default throttling;
|