[Summary view] [Print] [Text view]

   1  /**
   2   * Handles toggling the navigation menu for small screens and
   3   * accessibility for submenu items.
   4   */
   5  ( function() {
   6      var nav = document.getElementById( 'site-navigation' ), button, menu;
   7      if ( ! nav ) {
   8          return;
   9      }
  10  
  11      button = nav.getElementsByTagName( 'button' )[0];
  12      menu   = nav.getElementsByTagName( 'ul' )[0];
  13      if ( ! button ) {
  14          return;
  15      }
  16  
  17      // Hide button if menu is missing or empty.
  18      if ( ! menu || ! menu.childNodes.length ) {
  19          button.style.display = 'none';
  20          return;
  21      }
  22  
  23      // Assign an ID for the default page list if no menu is set as Primary.
  24      if ( ! menu.id ) {
  25          menu.id = 'twentytwelve-page-list-menu';
  26      }
  27  
  28      button.setAttribute( 'aria-controls', menu.id );
  29      button.setAttribute( 'aria-expanded', 'false' );
  30  
  31      button.onclick = function() {
  32          if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
  33              menu.className = 'nav-menu';
  34          }
  35  
  36          if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
  37              button.setAttribute( 'aria-expanded', 'false' );
  38              button.className = button.className.replace( ' toggled-on', '' );
  39              menu.className = menu.className.replace( ' toggled-on', '' );
  40          } else {
  41              button.setAttribute( 'aria-expanded', 'true' );
  42              button.className += ' toggled-on';
  43              menu.className += ' toggled-on';
  44          }
  45      };
  46  } )();
  47  
  48  // Better focus for hidden submenu items for accessibility.
  49  ( function( $ ) {
  50      $( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
  51          $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
  52      } );
  53  
  54    if ( 'ontouchstart' in window ) {
  55      $('body').on( 'touchstart.twentytwelve',  '.menu-item-has-children > a, .page_item_has_children > a', function( e ) {
  56        var el = $( this ).parent( 'li' );
  57  
  58        if ( ! el.hasClass( 'focus' ) ) {
  59          e.preventDefault();
  60          el.toggleClass( 'focus' );
  61          el.siblings( '.focus').removeClass( 'focus' );
  62        }
  63      } );
  64    }
  65  } )( jQuery );