import initSearchToggle from './searchToggleMegaNav.js';
const FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR = [
'#gsc-i-id1', '#gs_st50 .gsst_a', '.gsc-search-button .gsc-search-button.gsc-search-button-v2'
]; const SEARCH_INPUT_ID = 'gsc-i-id1'; // ID OF THE GOOGLE CUSTOM SEARCH (GCS) INPUT ELEMENT // Not in the DOM until the GCS JS fires `gcsInit()` const SEARCH_DIV_WRAPPER_ID = 'searchCollapse'; // ID OF THE DIV BUILT INTO THE SITES HTML WHICH WRAPS THE GCS
function checkXIcon() {
const checkXIconOnLoad = (function() { let executed = false; return function() { if (!executed) { executed = true; // do checkXIconOnLoad const icon = document.getElementById('xIcon'); const xIsHidden = icon.getAttribute('style') === 'display: none;'; xIsHidden ? removeClear() : clearXIcon(); } }; })(); checkXIconOnLoad(); // "do checkXIconOnLoad" happens
}
function clearXIcon() {
const targetEl = document.querySelector('button.gsc-search-button-v2'); targetEl.classList.add('gsc-overrides__clear-x');
}
function removeClear() {
const targetEl = document.querySelector('button.gsc-search-button-v2'); targetEl.classList.remove('gsc-overrides__clear-x');
}
function addId() {
const xIcon = document.querySelector('.gsst_a'); xIcon.setAttribute('id', 'xIcon');
}
function addAttribute(selector, attr, val) {
const el = document.querySelector(selector); el.setAttribute(attr, val);
}
function gcsInit() { // Init The GCS JS
var cx = '006320264078644364913:sy48bet-lr8'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
}
function googleCustomSearchInit() {
if ( document.getElementById(SEARCH_DIV_WRAPPER_ID) ) { let initSearchPromise = new Promise((resolve, reject) => { gcsInit(); resolve(); }); initSearchPromise.then(() => { let addIdPromise = new Promise((resolve, reject) => { const targetNode = document.getElementById('searchCollapse'); const config = { attributes: true, childList: true, subtree: true }; const callback = function(mutationsList, observer) { for(const mutation of mutationsList) { if (mutation.type == 'childList') { addId(); let len = FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR.length; for (var i = 0; i < len; i++) { addAttribute(FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR[i], 'tabindex', '-1'); // Make Elements initially unfocusable, so that screen readers don't pick up the hidden GCS } resolve(); } } }; const observer = new MutationObserver(callback); // Using a MutationObserver to watch for changes in the Google Custom Search Elements that got built into the page from `gcsInit()` observer.observe(targetNode, config); // Later, you can stop observing //observer.disconnect(); }); addIdPromise.then(() => { checkXIcon(); const targetNode = document.getElementById('xIcon'); const config = { attributes: true, childList: true, subtree: true }; const callback = function(mutationsList, observer) { for(const mutation of mutationsList) { if (mutation.type == 'attributes') { const xIsHidden = targetNode.getAttribute('style') === 'display: none;'; if (xIsHidden) { removeClear(); } else { clearXIcon(); } } } }; const observer = new MutationObserver(callback); observer.observe(targetNode, config); // Later, you can stop observing //observer.disconnect(); initSearchToggle(); }); }); }
}
export default googleCustomSearchInit;