navigation.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. for ( i = 0; i < parentLink.length; ++i ) {
  52. parentLink[i].addEventListener( ( 'ontouchstart' in window ? 'touchstart' : 'click' ), toggleNav, false );
  53. }
  54. }( container ) );
  55. } )( jQuery );