wp-content/themes/twentyseventeen/assets/js/navigation.js

   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' ).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 );