wp-content/themes/twentysixteen/js/functions.js

   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' ).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                                 newImg;
 152
 153                         // Add 'below-entry-meta' to elements below the entry meta.
 154                         if ( elementPosTop > entryFooterPosBottom ) {
 155
 156                                 // Check if full-size images and captions are larger than or equal to 840px.
 157                                 if ( 'img.size-full' === param ) {
 158
 159                                         // Create an image to find native image width of resized images (i.e. max-width: 100%).
 160                                         newImg = new Image();
 161                                         newImg.src = element.attr( 'src' );
 162
 163                                         $( newImg ).on( 'load.twentysixteen', function() {
 164                                                 if ( newImg.width >= 840  ) {
 165                                                         element.addClass( 'below-entry-meta' );
 166
 167                                                         if ( caption.hasClass( 'wp-caption' ) ) {
 168                                                                 caption.addClass( 'below-entry-meta' );
 169                                                                 caption.removeAttr( 'style' );
 170                                                         }
 171                                                 }
 172                                         } );
 173                                 } else {
 174                                         element.addClass( 'below-entry-meta' );
 175                                 }
 176                         } else {
 177                                 element.removeClass( 'below-entry-meta' );
 178                                 caption.removeClass( 'below-entry-meta' );
 179                         }
 180                 } );
 181         }
 182
 183         $( document ).ready( function() {
 184                 body = $( document.body );
 185
 186                 $( window )
 187                         .on( 'load.twentysixteen', onResizeARIA )
 188                         .on( 'resize.twentysixteen', function() {
 189                                 clearTimeout( resizeTimer );
 190                                 resizeTimer = setTimeout( function() {
 191                                         belowEntryMetaClass( 'img.size-full' );
 192                                         belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
 193                                 }, 300 );
 194                                 onResizeARIA();
 195                         } );
 196
 197                 belowEntryMetaClass( 'img.size-full' );
 198                 belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
 199         } );
 200 } )( jQuery );