navigation.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /**
  2. * File navigation.js.
  3. *
  4. * Handles toggling the navigation menu for small screens and enables TAB key
  5. * navigation support for dropdown menus.
  6. */
  7. ( function() {
  8. var container, button, menu, links, i, len;
  9. container = document.getElementById( 'site-navigation' );
  10. if ( ! container ) {
  11. return;
  12. }
  13. button = container.getElementsByTagName( 'button' )[0];
  14. if ( 'undefined' === typeof button ) {
  15. return;
  16. }
  17. menu = container.getElementsByTagName( 'ul' )[0];
  18. // Hide menu toggle button if menu is empty and return early.
  19. if ( 'undefined' === typeof menu ) {
  20. button.style.display = 'none';
  21. return;
  22. }
  23. menu.setAttribute( 'aria-expanded', 'false' );
  24. if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
  25. menu.className += ' nav-menu';
  26. }
  27. button.onclick = function() {
  28. if ( -1 !== container.className.indexOf( 'toggled' ) ) {
  29. container.className = container.className.replace( ' toggled', '' );
  30. button.setAttribute( 'aria-expanded', 'false' );
  31. menu.setAttribute( 'aria-expanded', 'false' );
  32. } else {
  33. container.className += ' toggled';
  34. button.setAttribute( 'aria-expanded', 'true' );
  35. menu.setAttribute( 'aria-expanded', 'true' );
  36. }
  37. };
  38. // Get all the link elements within the menu.
  39. links = menu.getElementsByTagName( 'a' );
  40. // Each time a menu link is focused or blurred, toggle focus.
  41. for ( i = 0, len = links.length; i < len; i++ ) {
  42. links[i].addEventListener( 'focus', toggleFocus, true );
  43. links[i].addEventListener( 'blur', toggleFocus, true );
  44. }
  45. /**
  46. * Sets or removes .focus class on an element.
  47. */
  48. function toggleFocus() {
  49. var self = this;
  50. // Move up through the ancestors of the current link until we hit .nav-menu.
  51. while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
  52. // On li elements toggle the class .focus.
  53. if ( 'li' === self.tagName.toLowerCase() ) {
  54. if ( -1 !== self.className.indexOf( 'focus' ) ) {
  55. self.className = self.className.replace( ' focus', '' );
  56. } else {
  57. self.className += ' focus';
  58. }
  59. }
  60. self = self.parentElement;
  61. }
  62. }
  63. /**
  64. * Toggles `focus` class to allow submenu access on tablets.
  65. */
  66. ( function( container ) {
  67. var touchStartFn, i,
  68. parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
  69. if ( 'ontouchstart' in window ) {
  70. touchStartFn = function( e ) {
  71. var menuItem = this.parentNode, i;
  72. if ( ! menuItem.classList.contains( 'focus' ) ) {
  73. e.preventDefault();
  74. for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
  75. if ( menuItem === menuItem.parentNode.children[i] ) {
  76. continue;
  77. }
  78. menuItem.parentNode.children[i].classList.remove( 'focus' );
  79. }
  80. menuItem.classList.add( 'focus' );
  81. } else {
  82. menuItem.classList.remove( 'focus' );
  83. }
  84. };
  85. for ( i = 0; i < parentLink.length; ++i ) {
  86. parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
  87. }
  88. }
  89. }( container ) );
  90. } )();