// Custom JS to Close the Navigation menu, if its open, & if the screen goes above 992px wide (Bootstrap 4 'lg' devices) const SEARCH_COLLAPSE_ID = 'searchCollapse'; // ID built into the sites' HTML const SEARCH_COLLAPSE_IS_VISIBLE_CLASS = 'nav-global__search-collapse–visible'; // Class in the HTML when the search collapse is open/visible const GLOBAL_NAV_ID = 'globalNav'; const LOCAL_NAV_ID = 'mainNav'; const GLOBAL_NAV_SEARCH_IS_VISIBLE_CLASS = 'nav-global__search-toggle'; const LOCAL_NAV_SEARCH_IS_VISIBLE_CLASS = 'nav-local__search-toggle'; const SEARCH_ICON_ID = 'searchIcon'; const SEARCH_ICON_SPAN_QUERY_SELECTOR = '#searchImg';

function removeClassFromElement(el, classToRemove) {

el.classList.remove(classToRemove);

}

function checkElementCollapseState(el, classToCheckFor) {

if ( ! el.classList.contains(classToCheckFor) )
  return;

removeClassFromElement(el, classToCheckFor);

}

function toggleSearchIconToX(el) {

const span = el.querySelector(SEARCH_ICON_SPAN_QUERY_SELECTOR);

el.setAttribute('aria-label', 'Toggle Search');
span.setAttribute('alt', 'Open icon');
span.setAttribute('style', 'background-image: url("/assets/img/search.svg")');

}

function checkSearchToggleIcon(el) {

let ariaLabel = el.getAttribute('aria-label');

if ( ! ariaLabel === 'Toggle Close' )
  return;

toggleSearchIconToX(el)

}

function windowResizeHandler() {

if ( window.innerWidth >= 992 ) {
  const searchCollapseElement = document.getElementById(SEARCH_COLLAPSE_ID);
  const globalNav = document.getElementById(GLOBAL_NAV_ID);
  const localNav = document.getElementById(LOCAL_NAV_ID);
  const searchIcon = document.getElementById(SEARCH_ICON_ID);

  checkElementCollapseState(searchCollapseElement, SEARCH_COLLAPSE_IS_VISIBLE_CLASS);
  checkElementCollapseState(globalNav, GLOBAL_NAV_SEARCH_IS_VISIBLE_CLASS);
  checkElementCollapseState(localNav, LOCAL_NAV_SEARCH_IS_VISIBLE_CLASS);
  checkSearchToggleIcon(searchIcon);
}

}

function toggleSearchDropdownOnWindowResize() {

window.addEventListener('resize', windowResizeHandler);

}

export default toggleSearchDropdownOnWindowResize;