diff options
Diffstat (limited to 'app/assets/javascripts/header_search/init.js')
-rw-r--r-- | app/assets/javascripts/header_search/init.js | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/header_search/init.js b/app/assets/javascripts/header_search/init.js new file mode 100644 index 00000000000..4e9404007ec --- /dev/null +++ b/app/assets/javascripts/header_search/init.js @@ -0,0 +1,53 @@ +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 }; |