Sha256: bb73579a1e5838b8eecefade1da6d8122ba17d96399ffd10f561377635fdcd59
Contents?: true
Size: 1.86 KB
Versions: 17
Compression:
Stored size: 1.86 KB
Contents
// Custom JS to Close the Navigation menu, if its open, & if the screen goes above 992px wide (Bootstrap 4 'lg' devices)
const searchCollapseVisibleClass = 'nav-global__search-collapse--visible'; // Class in the HTML when the search collapse is open/visible
const globalNavSearchVisibleClass = 'nav-global__search-toggle';
const localNavSearchVisibleClass = 'nav-local__search-toggle';
function removeClassFromElement(el, classToRemove) {
el.classList.remove(classToRemove);
}
function checkElementCollapseState(el, classToCheckFor) {
if ( ! el.classList.contains(classToCheckFor) )
return;
removeClassFromElement(el, classToCheckFor);
}
function toggleSearchIconToX(searchIcon) {
const searchSpan = searchIcon.querySelector('#searchImg');
searchIcon.setAttribute('aria-label', 'Toggle Search');
searchSpan.setAttribute('alt', 'Open icon');
searchSpan.setAttribute('style', 'background-image: url("/assets/img/search.svg")');
}
function checkSearchToggleIcon(searchIcon) {
let ariaLabel = searchIcon.getAttribute('aria-label');
if ( ! ariaLabel === 'Toggle Close' )
return;
toggleSearchIconToX(searchIcon);
}
function windowResizeHandler() {
if ( window.innerWidth >= 992 ) {
const searchCollapseElement = document.getElementById('searchCollapse');
const globalNav = document.getElementById('globalNav');
const localNav = document.getElementById('mainNav');
const searchIcon = document.getElementById('searchIcon');
checkElementCollapseState(searchCollapseElement, searchCollapseVisibleClass);
checkElementCollapseState(globalNav, globalNavSearchVisibleClass);
checkElementCollapseState(localNav, localNavSearchVisibleClass);
checkSearchToggleIcon(searchIcon);
}
}
function toggleSearchDropdownOnWindowResize() {
window.addEventListener('resize', windowResizeHandler);
}
export default toggleSearchDropdownOnWindowResize;
Version data entries
17 entries across 17 versions & 1 rubygems