navigation.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. /**
  2. * navigation.js
  3. *
  4. * Handles toggling the navigation menu for small screens.
  5. */
  6. ( function() {
  7. var container, button, menu;
  8. container = document.getElementById( 'site-navigation' );
  9. if ( ! container )
  10. return;
  11. button = container.getElementsByTagName( 'button' )[0];
  12. if ( 'undefined' === typeof button )
  13. return;
  14. menu = container.getElementsByTagName( 'ul' )[0];
  15. // Hide menu toggle button if menu is empty and return early.
  16. if ( 'undefined' === typeof menu ) {
  17. button.style.display = 'none';
  18. return;
  19. }
  20. if ( -1 === menu.className.indexOf( 'nav-menu' ) )
  21. menu.className += ' nav-menu';
  22. button.onclick = function() {
  23. if ( -1 !== container.className.indexOf( 'toggled' ) )
  24. container.className = container.className.replace( ' toggled', '' );
  25. else
  26. container.className += ' toggled';
  27. };
  28. // Fix child menus for touch devices.
  29. function fixMenuTouchTaps( container ) {
  30. var touchStartFn,
  31. parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
  32. if ( 'ontouchstart' in window ) {
  33. touchStartFn = function( e ) {
  34. var menuItem = this.parentNode;
  35. if ( ! menuItem.classList.contains( 'focus' ) ) {
  36. e.preventDefault();
  37. for( var i = 0; i < menuItem.parentNode.children.length; ++i ) {
  38. if ( menuItem === menuItem.parentNode.children[i] ) {
  39. continue;
  40. }
  41. menuItem.parentNode.children[i].classList.remove( 'focus' );
  42. }
  43. menuItem.classList.add( 'focus' );
  44. } else {
  45. menuItem.classList.remove( 'focus' );
  46. }
  47. };
  48. for ( var i = 0; i < parentLink.length; ++i ) {
  49. parentLink[i].addEventListener( 'touchstart', touchStartFn, false )
  50. }
  51. }
  52. }
  53. fixMenuTouchTaps( container );
  54. } )();