navigation.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /**
  2. * navigation.js
  3. *
  4. * Handles toggling the navigation menu for small screens and enables tab
  5. * support for dropdown menus.
  6. */
  7. ( function( $ ) {
  8. var container, moreMenu, menu, button, links, subMenus;
  9. container = document.getElementById( 'site-navigation' );
  10. if ( ! container ) {
  11. return;
  12. }
  13. // Here, we're going to look for the priority plus menu item to determine if we're on a small screen
  14. moreMenu = document.getElementById( 'more-menu' );
  15. if ( ! moreMenu ) {
  16. return;
  17. }
  18. menu = container.getElementsByTagName( 'ul' )[0];
  19. // If menu is empty, return early.
  20. if ( 'undefined' === typeof menu ) {
  21. return;
  22. }
  23. menu.setAttribute( 'aria-expanded', 'false' );
  24. if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
  25. menu.className += ' nav-menu';
  26. }
  27. // Get all the link elements within the menu.
  28. links = menu.getElementsByTagName( 'a' );
  29. subMenus = menu.getElementsByTagName( 'ul' );
  30. /**
  31. * Toggles `focus` class to allow submenu access on tablets.
  32. */
  33. ( function( container ) {
  34. var toggleNav, i,
  35. parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
  36. toggleNav = function( e ) {
  37. var menuItem = this.parentNode, i;
  38. if ( ! menuItem.classList.contains( 'focus' ) ) {
  39. e.preventDefault();
  40. for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
  41. if ( menuItem === menuItem.parentNode.children[i] ) {
  42. continue;
  43. }
  44. menuItem.parentNode.children[i].classList.remove( 'focus' );
  45. }
  46. menuItem.classList.add( 'focus' );
  47. } else {
  48. menuItem.classList.remove( 'focus' );
  49. }
  50. };
  51. // if ( window.matchMedia( "( max-width: 767px )" ).matches ) {
  52. for ( i = 0; i < parentLink.length; ++i ) {
  53. parentLink[i].addEventListener( ( 'ontouchstart' in window ? 'touchstart' : 'click' ), toggleNav, false );
  54. }
  55. // }
  56. }( container ) );
  57. } )( jQuery );