// Custom JS to toggle the search form const FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR = [
'#gsc-i-id1', '#gs_st50 .gsst_a', '.gsc-search-button .gsc-search-button.gsc-search-button-v2'
]; // Elements that Google Custom Search builds into the page const OPEN_SEARCH_BUTTON_ID = 'openSearchButton'; const OPEN_SEARCH_BUTTON_CLASS = 'header-global__search-icon'; const CLOSE_SEARCH_BUTTON_ID = 'closeSearchButton'; const CLOSE_SEARCH_BUTTON_CLASS = 'header-global__close-icon'; const SEARCH_INPUT_ID = 'gsc-i-id1'; // An element that Google Custom Search builds into the page const HEADER_GLOBAL_NAV_ID = 'headerGlobalNavbar'; const SEARCH_COLLAPSE_ID = 'searchCollapse';
function setElementAttribute(selector, attr, val) {
const el = document.querySelector(selector); el.setAttribute(attr, val);
}
function toggleButtonAttributes(button, removeButtonOption, buttonClass) {
if ( removeButtonOption ) { button.classList.add(buttonClass + '--hidden'); button.setAttribute('aria-hidden', 'true'); button.setAttribute('tabindex', '-1'); } else { button.classList.remove(buttonClass + '--hidden'); button.setAttribute('aria-hidden', 'false'); button.setAttribute('tabindex', '0'); }
}
function handleSearchToggle(searchButtonWasClicked) {
const searchButtonEl = document.getElementById(OPEN_SEARCH_BUTTON_ID); const closeButtonEl = document.getElementById(CLOSE_SEARCH_BUTTON_ID); const searchInputField = document.getElementById(SEARCH_INPUT_ID); let len = FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR.length; if ( searchButtonWasClicked ) { toggleButtonAttributes(searchButtonEl, true, OPEN_SEARCH_BUTTON_CLASS); toggleButtonAttributes(closeButtonEl, false, CLOSE_SEARCH_BUTTON_CLASS); for (var i = 0; i < len; i++) { setElementAttribute(FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR[i], 'tabindex', '0'); } searchInputField.focus(); } else { toggleButtonAttributes(searchButtonEl, false, OPEN_SEARCH_BUTTON_CLASS); toggleButtonAttributes(closeButtonEl, true, CLOSE_SEARCH_BUTTON_CLASS); for (var i = 0; i < len; i++) { setElementAttribute(FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR[i], 'tabindex', '-1'); } }
}
function toggleOtherElements() {
const searchCollapse = document.getElementById(SEARCH_COLLAPSE_ID); const headerGlobalNavbar = document.getElementById(HEADER_GLOBAL_NAV_ID); const collapseAria = searchCollapse.getAttribute('aria-hidden'); searchCollapse.classList.toggle('header-global__search-collapse--visible'); (collapseAria === "true") ? searchCollapse.setAttribute('aria-hidden', 'false') : searchCollapse.setAttribute('aria-hidden', 'true'); headerGlobalNavbar.classList.toggle('header-global__navbar--search-toggle');
}
function checkClickedButton(event) {
let openSearchButtonWasClicked; if ( event.target.closest('#openSearchButton') ) { openSearchButtonWasClicked = true; } else if ( event.target.closest('#closeSearchButton') ) { openSearchButtonWasClicked = false; } handleSearchToggle(openSearchButtonWasClicked); toggleOtherElements();
}
function clickEventHandler(event) {
if ( event.target.closest('#openSearchButton') || event.target.closest('#closeSearchButton') ) { checkClickedButton(event); } else { return; // Bail-out }
}
function addClickEventListener() {
document.addEventListener('click', clickEventHandler);
}
function initSearchToggle() {
if ( ! document.getElementById('openSearchButton') ) return; addClickEventListener();
}
export default initSearchToggle;