// // // // TODO: Combine method bellow with a class added to the nav when it is desktop size and above // // // // // // Custom JS to Close the Navigation menu, if its open, & if the screen goes above 992px wide (Bootstrap 4 'lg' devices) const NAV_ELEMENT_ID_STRING = 'headerGlobalNavbar'; const NAVBAR_COLLAPSE_ID = 'headerGlobalNavbarContent'; // ID built into the sites' HTML const NAVBAR_IS_DESKTOP = 'header-global__navbar–lg'; const NAVBAR_ELEMENT = document.getElementById(NAV_ELEMENT_ID_STRING);
function removeClassFromElement(el, classString) {
el.classList.remove(classString);
}
function collapseElement(dropdownToggle) {
//console.log( $(dropdownToggle) ); $(dropdownToggle).collapse('hide'); // Bootstrap 4 `.collapse()` method. removeClassFromElement(NAVBAR_ELEMENT, NAVBAR_IS_DESKTOP);
}
function checkDropdownCollapseState(el) {
let dropdownToggle = el.parentElement //console.log(el.parentElement.classList); if ( dropdownToggle.classList.contains('show') ) { // 'show' is a Bootstrap 4 class that makes `.collapse` items visible. // Checking to see if the Menu is open //console.log(el); collapseElement(dropdownToggle); }
}
function loopOverNodeList(nodeList) {
//console.log(nodeList); let len = nodeList.length; for (var i = 0; i < len; i++) { const dropdownMenu = nodeList[i]; checkDropdownCollapseState(dropdownMenu); }
}
function windowResizeHandler() {
const navbarEl = windowResizeHandler.element; if ( window.innerWidth <= 992 && navbarEl.classList.contains(NAVBAR_IS_DESKTOP) ) { const menuCollapseElement = document.getElementById(NAVBAR_COLLAPSE_ID); const dropdownMenuNodeList = menuCollapseElement.querySelectorAll('.dropdown-toggle'); loopOverNodeList(dropdownMenuNodeList); //checkNavbarCollapseState(menuCollapseElement); }
}
function addClassToElement(el, classString) {
el.classList.add(classString);
}
function checkWindowWidth() {
const windowIsWiderThanBootStrapLarge = window.innerWidth >= 992; windowIsWiderThanBootStrapLarge ? addClassToElement(NAVBAR_ELEMENT, NAVBAR_IS_DESKTOP) : null;
}
function toggleDropdownOnWindowResize() {
windowResizeHandler.element = NAVBAR_ELEMENT; checkWindowWidth(); window.addEventListener('resize', windowResizeHandler);
}
export default toggleDropdownOnWindowResize;