Contents

const NAV_LINKS_SELECTOR = '.nav-link';  // Bootstrap 4 class
const MENU_COLLAPSE_JQUERY = $('#mainNavContent'); // Bootstrap 4 crap that requires $() w/ an ID from the HTML
const MENU_COLLAPSE = 'mainNavContent';  // ID from the HTML
const HIDE = 'hide';  // Bootstrap 4 class
const SHOW = 'show';  // Bootstrap 4 class

function hideBootstrapMenu() {
  MENU_COLLAPSE_JQUERY.collapse(HIDE);
}

function checkIfMenuIsOpen() {
  if ( document.getElementById(MENU_COLLAPSE).classList.contains(SHOW) ) {
    return true;
  }
  return false;
}

function hideMenuIfOpen(menuIsOpen) {
  if ( menuIsOpen ) {
    hideBootstrapMenu();
  } else {
    return;
  }
}

function clickHandlerFunction(e) {
  if ( !e.target.matches(NAV_LINKS_SELECTOR) )  // Bail out of the rest of the code if the click event's target is not what we want!
    return;

  const menuIsOpen = checkIfMenuIsOpen();

  hideMenuIfOpen(menuIsOpen);
}

function addEventListenerFunction(element, clickEvent) {
  element.addEventListener(clickEvent, clickHandlerFunction, false);
}

function closeMenuOnClick() {
  const clickEvent = 'click';
  const element = document;

  addEventListenerFunction(element, clickEvent);
}

export default closeMenuOnClick;

Version data entries

22 entries across 22 versions & 1 rubygems

Version	Path
kcc-gem-theme-1.17.2	assets/js/theme/script/closeMenuOnClick.js
kcc-gem-theme-1.16.2	assets/js/theme/script/closeMenuOnClick.js