[Summary view] [Print] [Text view]

   1  /* global screenReaderText */
   2  /**
   3   * Theme functions file.
   4   *
   5   * Contains handlers for navigation and widget area.
   6   */
   7  
   8  ( function( $ ) {
   9      var body, masthead, menuToggle, siteNavigation, socialNavigation, siteHeaderMenu, resizeTimer;
  10  
  11  	function initMainNavigation( container ) {
  12  
  13          // Add dropdown toggle that displays child menu items.
  14          var dropdownToggle = $( '<button />', {
  15              'class': 'dropdown-toggle',
  16              'aria-expanded': false
  17          } ).append( $( '<span />', {
  18              'class': 'screen-reader-text',
  19              text: screenReaderText.expand
  20          } ) );
  21  
  22          container.find( '.menu-item-has-children > a' ).after( dropdownToggle );
  23  
  24          // Toggle buttons and submenu items with active children menu items.
  25          container.find( '.current-menu-ancestor > button' ).addClass( 'toggled-on' );
  26          container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
  27  
  28          // Add menu items with submenus to aria-haspopup="true".
  29          container.find( '.menu-item-has-children' ).attr( 'aria-haspopup', 'true' );
  30  
  31          container.find( '.dropdown-toggle' ).on( 'click', function( e ) {
  32              var _this            = $( this ),
  33                  screenReaderSpan = _this.find( '.screen-reader-text' );
  34  
  35              e.preventDefault();
  36              _this.toggleClass( 'toggled-on' );
  37              _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
  38  
  39              // jscs:disable
  40              _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
  41              // jscs:enable
  42              screenReaderSpan.text( screenReaderSpan.text() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
  43          } );
  44      }
  45      initMainNavigation( $( '.main-navigation' ) );
  46  
  47      masthead         = $( '#masthead' );
  48      menuToggle       = masthead.find( '#menu-toggle' );
  49      siteHeaderMenu   = masthead.find( '#site-header-menu' );
  50      siteNavigation   = masthead.find( '#site-navigation' );
  51      socialNavigation = masthead.find( '#social-navigation' );
  52  
  53      // Enable menuToggle.
  54      ( function() {
  55  
  56          // Return early if menuToggle is missing.
  57          if ( ! menuToggle.length ) {
  58              return;
  59          }
  60  
  61          // Add an initial values for the attribute.
  62          menuToggle.add( siteNavigation ).add( socialNavigation ).attr( 'aria-expanded', 'false' );
  63  
  64          menuToggle.on( 'click.twentysixteen', function() {
  65              $( this ).add( siteHeaderMenu ).toggleClass( 'toggled-on' );
  66  
  67              // jscs:disable
  68              $( this ).add( siteNavigation ).add( socialNavigation ).attr( 'aria-expanded', $( this ).add( siteNavigation ).add( socialNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
  69              // jscs:enable
  70          } );
  71      } )();
  72  
  73      // Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
  74      ( function() {
  75          if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
  76              return;
  77          }
  78  
  79          // Toggle `focus` class to allow submenu access on tablets.
  80  		function toggleFocusClassTouchScreen() {
  81              if ( window.innerWidth >= 910 ) {
  82                  $( document.body ).on( 'touchstart.twentysixteen', function( e ) {
  83                      if ( ! $( e.target ).closest( '.main-navigation li' ).length ) {
  84                          $( '.main-navigation li' ).removeClass( 'focus' );
  85                      }
  86                  } );
  87                  siteNavigation.find( '.menu-item-has-children > a' ).on( 'touchstart.twentysixteen', function( e ) {
  88                      var el = $( this ).parent( 'li' );
  89  
  90                      if ( ! el.hasClass( 'focus' ) ) {
  91                          e.preventDefault();
  92                          el.toggleClass( 'focus' );
  93                          el.siblings( '.focus' ).removeClass( 'focus' );
  94                      }
  95                  } );
  96              } else {
  97                  siteNavigation.find( '.menu-item-has-children > a' ).unbind( 'touchstart.twentysixteen' );
  98              }
  99          }
 100  
 101          if ( 'ontouchstart' in window ) {
 102              $( window ).on( 'resize.twentysixteen', toggleFocusClassTouchScreen );
 103              toggleFocusClassTouchScreen();
 104          }
 105  
 106          siteNavigation.find( 'a' ).on( 'focus.twentysixteen blur.twentysixteen', function() {
 107              $( this ).parents( '.menu-item' ).toggleClass( 'focus' );
 108          } );
 109      } )();
 110  
 111      // Add the default ARIA attributes for the menu toggle and the navigations.
 112  	function onResizeARIA() {
 113          if ( window.innerWidth < 910 ) {
 114              if ( menuToggle.hasClass( 'toggled-on' ) ) {
 115                  menuToggle.attr( 'aria-expanded', 'true' );
 116              } else {
 117                  menuToggle.attr( 'aria-expanded', 'false' );
 118              }
 119  
 120              if ( siteHeaderMenu.hasClass( 'toggled-on' ) ) {
 121                  siteNavigation.attr( 'aria-expanded', 'true' );
 122                  socialNavigation.attr( 'aria-expanded', 'true' );
 123              } else {
 124                  siteNavigation.attr( 'aria-expanded', 'false' );
 125                  socialNavigation.attr( 'aria-expanded', 'false' );
 126              }
 127  
 128              menuToggle.attr( 'aria-controls', 'site-navigation social-navigation' );
 129          } else {
 130              menuToggle.removeAttr( 'aria-expanded' );
 131              siteNavigation.removeAttr( 'aria-expanded' );
 132              socialNavigation.removeAttr( 'aria-expanded' );
 133              menuToggle.removeAttr( 'aria-controls' );
 134          }
 135      }
 136  
 137      // Add 'below-entry-meta' class to elements.
 138  	function belowEntryMetaClass( param ) {
 139          if ( body.hasClass( 'page' ) || body.hasClass( 'search' ) || body.hasClass( 'single-attachment' ) || body.hasClass( 'error404' ) ) {
 140              return;
 141          }
 142  
 143          $( '.entry-content' ).find( param ).each( function() {
 144              var element              = $( this ),
 145                  elementPos           = element.offset(),
 146                  elementPosTop        = elementPos.top,
 147                  entryFooter          = element.closest( 'article' ).find( '.entry-footer' ),
 148                  entryFooterPos       = entryFooter.offset(),
 149                  entryFooterPosBottom = entryFooterPos.top + ( entryFooter.height() + 28 ),
 150                  caption              = element.closest( 'figure' ),
 151                  figcaption           = element.next( 'figcaption' ),
 152                  newImg;
 153  
 154              // Add 'below-entry-meta' to elements below the entry meta.
 155              if ( elementPosTop > entryFooterPosBottom ) {
 156  
 157                  // Check if full-size images and captions are larger than or equal to 840px.
 158                  if ( 'img.size-full' === param || '.wp-block-image img' === param ) {
 159  
 160                      // Create an image to find native image width of resized images (i.e. max-width: 100%).
 161                      newImg = new Image();
 162                      newImg.src = element.attr( 'src' );
 163  
 164                      $( newImg ).on( 'load.twentysixteen', function() {
 165                          if ( newImg.width >= 840 ) {
 166  
 167                              // Check if an image in an image block has a width attribute; if its value is less than 840, return.
 168                              if ( '.wp-block-image img' === param && element.is( '[width]' ) && element.attr( 'width' ) < 840 ) {
 169                                  return;
 170                              }
 171  
 172                              element.addClass( 'below-entry-meta' );
 173  
 174                              if ( caption.hasClass( 'wp-caption' ) ) {
 175                                  caption.addClass( 'below-entry-meta' );
 176                                  caption.removeAttr( 'style' );
 177                              }
 178  
 179                              if ( figcaption ) {
 180                                  figcaption.addClass( 'below-entry-meta' );
 181                              }
 182                          }
 183                      } );
 184                  } else {
 185                      element.addClass( 'below-entry-meta' );
 186                  }
 187              } else {
 188                  element.removeClass( 'below-entry-meta' );
 189                  caption.removeClass( 'below-entry-meta' );
 190              }
 191          } );
 192      }
 193  
 194      $( function() {
 195          body = $( document.body );
 196  
 197          $( window )
 198              .on( 'load.twentysixteen', onResizeARIA )
 199              .on( 'resize.twentysixteen', function() {
 200                  clearTimeout( resizeTimer );
 201                  resizeTimer = setTimeout( function() {
 202                      belowEntryMetaClass( 'img.size-full' );
 203                      belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
 204                      belowEntryMetaClass( '.wp-block-image img' );
 205                  }, 300 );
 206                  onResizeARIA();
 207              } );
 208  
 209          belowEntryMetaClass( 'img.size-full' );
 210          belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
 211          belowEntryMetaClass( '.wp-block-image img' );
 212      } );
 213  } )( jQuery );