[Summary view] [Print] [Text view]

   1  /* global twentyseventeenScreenReaderText */
   2  /**
   3   * Theme functions file.
   4   *
   5   * Contains handlers for navigation and widget area.
   6   */
   7  
   8  (function( $ ) {
   9      var masthead, menuToggle, siteNavContain, siteNavigation;
  10  
  11  	function initMainNavigation( container ) {
  12  
  13          // Add dropdown toggle that displays child menu items.
  14          var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false })
  15              .append( twentyseventeenScreenReaderText.icon )
  16              .append( $( '<span />', { 'class': 'screen-reader-text', text: twentyseventeenScreenReaderText.expand }) );
  17  
  18          container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
  19  
  20          // Set the active submenu dropdown toggle button initial state.
  21          container.find( '.current-menu-ancestor > button' )
  22              .addClass( 'toggled-on' )
  23              .attr( 'aria-expanded', 'true' )
  24              .find( '.screen-reader-text' )
  25              .text( twentyseventeenScreenReaderText.collapse );
  26          // Set the active submenu initial state.
  27          container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
  28  
  29          container.find( '.dropdown-toggle' ).on( 'click', function( e ) {
  30              var _this = $( this ),
  31                  screenReaderSpan = _this.find( '.screen-reader-text' );
  32  
  33              e.preventDefault();
  34              _this.toggleClass( 'toggled-on' );
  35              _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
  36  
  37              _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
  38  
  39              screenReaderSpan.text( screenReaderSpan.text() === twentyseventeenScreenReaderText.expand ? twentyseventeenScreenReaderText.collapse : twentyseventeenScreenReaderText.expand );
  40          });
  41      }
  42  
  43      initMainNavigation( $( '.main-navigation' ) );
  44  
  45      masthead       = $( '#masthead' );
  46      menuToggle     = masthead.find( '.menu-toggle' );
  47      siteNavContain = masthead.find( '.main-navigation' );
  48      siteNavigation = masthead.find( '.main-navigation > div > ul' );
  49  
  50      // Enable menuToggle.
  51      (function() {
  52  
  53          // Return early if menuToggle is missing.
  54          if ( ! menuToggle.length ) {
  55              return;
  56          }
  57  
  58          // Add an initial value for the attribute.
  59          menuToggle.attr( 'aria-expanded', 'false' );
  60  
  61          menuToggle.on( 'click.twentyseventeen', function() {
  62              siteNavContain.toggleClass( 'toggled-on' );
  63  
  64              $( this ).attr( 'aria-expanded', siteNavContain.hasClass( 'toggled-on' ) );
  65          });
  66      })();
  67  
  68      // Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
  69      (function() {
  70          if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
  71              return;
  72          }
  73  
  74          // Toggle `focus` class to allow submenu access on tablets.
  75  		function toggleFocusClassTouchScreen() {
  76              if ( 'none' === $( '.menu-toggle' ).css( 'display' ) ) {
  77  
  78                  $( document.body ).on( 'touchstart.twentyseventeen', function( e ) {
  79                      if ( ! $( e.target ).closest( '.main-navigation li' ).length ) {
  80                          $( '.main-navigation li' ).removeClass( 'focus' );
  81                      }
  82                  });
  83  
  84                  siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' )
  85                      .on( 'touchstart.twentyseventeen', function( e ) {
  86                          var el = $( this ).parent( 'li' );
  87  
  88                          if ( ! el.hasClass( 'focus' ) ) {
  89                              e.preventDefault();
  90                              el.toggleClass( 'focus' );
  91                              el.siblings( '.focus' ).removeClass( 'focus' );
  92                          }
  93                      });
  94  
  95              } else {
  96                  siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).unbind( 'touchstart.twentyseventeen' );
  97              }
  98          }
  99  
 100          if ( 'ontouchstart' in window ) {
 101              $( window ).on( 'resize.twentyseventeen', toggleFocusClassTouchScreen );
 102              toggleFocusClassTouchScreen();
 103          }
 104  
 105          siteNavigation.find( 'a' ).on( 'focus.twentyseventeen blur.twentyseventeen', function() {
 106              $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
 107          });
 108      })();
 109  })( jQuery );