navigation.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. ( function( $ ) {
  2. var debounce = function( func, wait ) {
  3. var timeout, args, context, timestamp;
  4. return function() {
  5. context = this;
  6. args = [].slice.call( arguments, 0 );
  7. timestamp = new Date();
  8. var later = function() {
  9. var last = ( new Date() ) - timestamp;
  10. if ( last < wait ) {
  11. timeout = setTimeout( later, wait - last );
  12. } else {
  13. timeout = null;
  14. func.apply( context, args );
  15. }
  16. };
  17. if ( ! timeout ) {
  18. timeout = setTimeout( later, wait );
  19. }
  20. };
  21. };
  22. function menuDropdownToggle() {
  23. $( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a, .widget_nav_menu .page_item_has_children > a, .widget_nav_menu .menu-item-has-children > a' ).each( function() {
  24. if ( ! $( this ).find( '.dropdown-toggle' ).length ) {
  25. $( this ).append( '<button class="dropdown-toggle" aria-expanded="false"/>' );
  26. }
  27. } );
  28. if ( $( window ).width() > 959 ) {
  29. $( '.main-navigation .dropdown-toggle' ).remove();
  30. }
  31. }
  32. $( window ).load( menuDropdownToggle ).resize( debounce( menuDropdownToggle, 500 ) );
  33. $( window ).load( function() {
  34. var menu = $( '#masthead' ).find( 'div' );
  35. if ( ! menu || ! menu.children().length ) {
  36. return;
  37. }
  38. $( '.dropdown-toggle' ).click( function( event ) {
  39. event.preventDefault();
  40. $( this ).toggleClass( 'toggled' );
  41. $( this ).parent().next( '.children, .sub-menu' ).toggleClass( 'toggled' );
  42. $( this ).attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
  43. } );
  44. if ( 'ontouchstart' in window ) {
  45. menu.find( '.menu-item-has-children > a' ).on( 'touchstart', function( e ) {
  46. var el = $( this ).parent( 'li' );
  47. if ( ! el.hasClass( 'focus' ) ) {
  48. e.preventDefault();
  49. el.toggleClass( 'focus' );
  50. el.siblings( '.focus' ).removeClass( 'focus' );
  51. }
  52. } );
  53. }
  54. menu.find( 'a' ).on( 'focus blur', function() {
  55. $( this ).parents( '.menu-item' ).toggleClass( 'focus' );
  56. } );
  57. } );
  58. } )( jQuery );
  59. ( function() {
  60. var container, button, menu;
  61. container = document.getElementById( 'site-navigation' );
  62. if ( ! container ) {
  63. return;
  64. }
  65. button = container.getElementsByTagName( 'button' )[0];
  66. if ( 'undefined' === typeof button ) {
  67. return;
  68. }
  69. menu = container.getElementsByTagName( 'ul' )[0];
  70. if ( 'undefined' === typeof menu ) {
  71. button.style.display = 'none';
  72. return;
  73. }
  74. menu.setAttribute( 'aria-expanded', 'false' );
  75. if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
  76. menu.className += ' nav-menu';
  77. }
  78. button.onclick = function() {
  79. if ( -1 !== container.className.indexOf( 'toggled' ) ) {
  80. container.className = container.className.replace( ' toggled', '' );
  81. button.setAttribute( 'aria-expanded', 'false' );
  82. menu.setAttribute( 'aria-expanded', 'false' );
  83. } else {
  84. container.className += ' toggled';
  85. button.setAttribute( 'aria-expanded', 'true' );
  86. menu.setAttribute( 'aria-expanded', 'true' );
  87. }
  88. };
  89. } )();