Click anywhere to close an active off-canvas menu

scroll-checker.js

/* SCROLL CHECKER
 *
 * Description:
 * This function scans all incoming clicks.
 * This allows users to easily click outside an active offcanvas menu.
 *
 *
 * Usage:
 * This function analyzes the kinds of clicks that could come a page and an offcanvas menu.
 * It's checking for a hamburger menu, a menu closing mechanism, links in a menu and links on a page
 * Each click should do what you think it does with this function.
 *
 *
 * Params:
 * none - just include and roll my friends
 *
 *
 * HTML Structure
 * This is designed to work with HTML that looks kinda like this
 *    <aside id="sidebar-wrapper">
 *      <div class="sidebar-title-container">
 *        <div class="sidebar-title">Menu</div>
 *        <div class="sidebar-close" id="sidebar-hard-close">
 *          <img src="images/close-white.png" id="sidebar-close-icon" alt="Close this sidebar menu by clicking the X">
 *        </div>
 *      </div>
 *      <ul class="sidebar-nav">
 *        <a href="#"><li>Home</li></a>
 *        <a href="#"><li class="active">Issues</li></a>
 *        <a href="#"><li>Features</li></a>
 *        <a href="#"><li>Departments</li></a>
 *        <a href="#"><li>Sponsors</li></a>
 *        <a href="#"><li>About</li></a>
 *        <a href="#"><li>Contact Us</li></a>
 *      </ul>
 *    </aside>
 */

function scrollChecker () {
  // 1- Analyze all clicks on the document, only true way to make sure we can close sidebar on any click
  $(document).click(function(event) {

    // 2 - If it's a regular anchor tag, handle the anchor tag as a regular ahref redirect
    if( $(event.target).closest('a').length ){

      // 3- Makes sure element clicked actually has ahref
      if(event.target.getAttribute('href') !== null) {
        window.location.href = event.target.getAttribute('href');
      }
      // 4- If we don't have a link, it usually means the link is in the parent element
      else {
        var linkContainer = $(event.target).parent("a");
        window.location.href = linkContainer[0].getAttribute('href');
      }
    }

    // 5- If user clicks inside of menu on X, close the menu
    if( event.target === $('#sidebar-hard-close').get(0) || event.target === $('#sidebar-close-icon').get(0)) {
      $('#sidebar-wrapper').removeClass("activated");
      $(".hamburger-line-1, .hamburger-line-2, .hamburger-line-3").removeClass("activated");
    }

    // 6- Check click event to make sure we aren't clicking inside sidebar AND make sure we aren't clicking the actual sidebar open button
    if(!$(event.target).closest('#sidebar-wrapper').length === true && event.target !== $('.header-hamburger-menu').get(0) && event.target !== $('.hamburger-line-1').get(0) && event.target !== $('.hamburger-line-2').get(0) && event.target !== $('.hamburger-line-3').get(0)){
      event.preventDefault();
      $('#sidebar-wrapper').removeClass("activated");
      $(".hamburger-line-1, .hamburger-line-2, .hamburger-line-3").removeClass("activated");
    }

    // 7- Check event.target and make sure we are clicking the actual hamburger menu
    if(event.target === $('.header-hamburger-menu').get(0) || event.target === $('.hamburger-line-1').get(0) || event.target === $('.hamburger-line-2').get(0) || event.target === $('.hamburger-line-3').get(0)){

      // 8- Then we check to make sure the click of the menu is to close, if so - then we close
      if( $(".hamburger-line-3.activated").length ) {
        $('#sidebar-wrapper').removeClass("activated");
        $(".hamburger-line-1, .hamburger-line-2, .hamburger-line-3").removeClass("activated");

      // 9- If menu click isn't to close, it must be to open, so we open it now
      } else {
        event.preventDefault();
        $('#sidebar-wrapper').addClass("activated");
        $(".hamburger-line-1, .hamburger-line-2, .hamburger-line-3").toggleClass("activated");
        $(".header-sidebar-close").delay(1000).toggleClass("activated");
      }
    }
  });
}
scrollChecker();