54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
|
import * as Sentry from '@sentry/browser';
|
||
|
|
import { HEADER_INIT_EVENTS } from './constants';
|
||
|
|
|
||
|
|
async function eventHandler(callback = () => {}) {
|
||
|
|
if (this.newHeaderSearchFeatureFlag) {
|
||
|
|
const { initHeaderSearchApp } = await import(
|
||
|
|
/* webpackChunkName: 'globalSearch' */ '~/header_search'
|
||
|
|
).catch((error) => Sentry.captureException(error));
|
||
|
|
|
||
|
|
// In case the user started searching before we bootstrapped,
|
||
|
|
// let's pass the search along.
|
||
|
|
const initialSearchValue = this.searchInputBox.value;
|
||
|
|
initHeaderSearchApp(initialSearchValue);
|
||
|
|
|
||
|
|
// this is new #search input element. We need to re-find it.
|
||
|
|
// And re-focus in it.
|
||
|
|
document.querySelector('#search').focus();
|
||
|
|
callback();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { default: initSearchAutocomplete } = await import(
|
||
|
|
/* webpackChunkName: 'globalSearch' */ '../search_autocomplete'
|
||
|
|
).catch((error) => Sentry.captureException(error));
|
||
|
|
|
||
|
|
const searchDropdown = initSearchAutocomplete();
|
||
|
|
searchDropdown.onSearchInputFocus();
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
|
||
|
|
function cleanEventListeners() {
|
||
|
|
HEADER_INIT_EVENTS.forEach((eventType) => {
|
||
|
|
document.querySelector('#search').removeEventListener(eventType, eventHandler);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function initHeaderSearch() {
|
||
|
|
const searchInputBox = document.querySelector('#search');
|
||
|
|
|
||
|
|
HEADER_INIT_EVENTS.forEach((eventType) => {
|
||
|
|
searchInputBox?.addEventListener(
|
||
|
|
eventType,
|
||
|
|
eventHandler.bind(
|
||
|
|
{ searchInputBox, newHeaderSearchFeatureFlag: gon?.features?.newHeaderSearch },
|
||
|
|
cleanEventListeners,
|
||
|
|
),
|
||
|
|
{ once: true },
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
export default initHeaderSearch;
|
||
|
|
export { eventHandler, cleanEventListeners };
|