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

   1 /**
   2  * Functionality specific to Twenty Thirteen.
   3  *
   4  * Provides helper functions to enhance the theme experience.
   5  */
   6
   7 ( function( $ ) {
   8         var body    = $( 'body' ),
   9             _window = $( window ),
  10                 nav, button, menu;
  11
  12         nav = $( '#site-navigation' );
  13         button = nav.find( '.menu-toggle' );
  14         menu = nav.find( '.nav-menu' );
  15
  16         /**
  17          * Adds a top margin to the footer if the sidebar widget area is higher
  18          * than the rest of the page, to help the footer always visually clear
  19          * the sidebar.
  20          */
  21         $( function() {
  22                 if ( body.is( '.sidebar' ) ) {
  23                         var sidebar   = $( '#secondary .widget-area' ),
  24                             secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(),
  25                             margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;
  26
  27                         if ( margin > 0 && _window.innerWidth() > 999 ) {
  28                                 $( '#colophon' ).css( 'margin-top', margin + 'px' );
  29                         }
  30                 }
  31         } );
  32
  33         /**
  34          * Enables menu toggle for small screens.
  35          */
  36         ( function() {
  37                 if ( ! nav || ! button ) {
  38                         return;
  39                 }
  40
  41                 // Hide button if menu is missing or empty.
  42                 if ( ! menu || ! menu.children().length ) {
  43                         button.hide();
  44                         return;
  45                 }
  46
  47                 button.on( 'click.twentythirteen', function() {
  48                         nav.toggleClass( 'toggled-on' );
  49                         if ( nav.hasClass( 'toggled-on' ) ) {
  50                                 $( this ).attr( 'aria-expanded', 'true' );
  51                                 menu.attr( 'aria-expanded', 'true' );
  52                         } else {
  53                                 $( this ).attr( 'aria-expanded', 'false' );
  54                                 menu.attr( 'aria-expanded', 'false' );
  55                         }
  56                 } );
  57
  58                 // Fix sub-menus for touch devices.
  59                 if ( 'ontouchstart' in window ) {
  60                         menu.find( '.menu-item-has-children > a, .page_item_has_children > a' ).on( 'touchstart.twentythirteen', function( e ) {
  61                                 var el = $( this ).parent( 'li' );
  62
  63                                 if ( ! el.hasClass( 'focus' ) ) {
  64                                         e.preventDefault();
  65                                         el.toggleClass( 'focus' );
  66                                         el.siblings( '.focus' ).removeClass( 'focus' );
  67                                 }
  68                         } );
  69                 }
  70
  71                 // Better focus for hidden submenu items for accessibility.
  72                 menu.find( 'a' ).on( 'focus.twentythirteen blur.twentythirteen', function() {
  73                         $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
  74                 } );
  75         } )();
  76
  77         /**
  78          * @summary Add or remove ARIA attributes.
  79          * Uses jQuery's width() function to determine the size of the window and add
  80          * the default ARIA attributes for the menu toggle if it's visible.
  81          * @since Twenty Thirteen 1.5
  82          */
  83         function onResizeARIA() {
  84                 if ( 643 > _window.width() ) {
  85                         button.attr( 'aria-expanded', 'false' );
  86                         menu.attr( 'aria-expanded', 'false' );
  87                         button.attr( 'aria-controls', 'primary-menu' );
  88                 } else {
  89                         button.removeAttr( 'aria-expanded' );
  90                         menu.removeAttr( 'aria-expanded' );
  91                         button.removeAttr( 'aria-controls' );
  92                 }
  93         }
  94
  95         _window
  96                 .on( 'load.twentythirteen', onResizeARIA )
  97                 .on( 'resize.twentythirteen', function() {
  98                         onResizeARIA();
  99         } );
 100
 101         /**
 102          * Makes "skip to content" link work correctly in IE9 and Chrome for better
 103          * accessibility.
 104          *
 105          * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
 106          */
 107         _window.on( 'hashchange.twentythirteen', function() {
 108                 var element = document.getElementById( location.hash.substring( 1 ) );
 109
 110                 if ( element ) {
 111                         if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
 112                                 element.tabIndex = -1;
 113                         }
 114
 115                         element.focus();
 116                 }
 117         } );
 118
 119         /**
 120          * Arranges footer widgets vertically.
 121          */
 122         if ( $.isFunction( $.fn.masonry ) ) {
 123                 var columnWidth = body.is( '.sidebar' ) ? 228 : 245;
 124
 125                 $( '#secondary .widget-area' ).masonry( {
 126                         itemSelector: '.widget',
 127                         columnWidth: columnWidth,
 128                         gutterWidth: 20,
 129                         isRTL: body.is( '.rtl' )
 130                 } );
 131         }
 132 } )( jQuery );