[Summary view] [Print] [Text view]

   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.length || ! button.length ) {
  38              return;
  39          }
  40  
  41          // Hide button if menu is missing or empty.
  42          if ( ! menu.length || ! 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       * Add or remove ARIA attributes.
  79       *
  80       * Uses jQuery's width() function to determine the size of the window and add
  81       * the default ARIA attributes for the menu toggle if it's visible.
  82       *
  83       * @since Twenty Thirteen 1.5
  84       */
  85  	function onResizeARIA() {
  86          if ( 643 > _window.width() ) {
  87              button.attr( 'aria-expanded', 'false' );
  88              menu.attr( 'aria-expanded', 'false' );
  89              button.attr( 'aria-controls', 'primary-menu' );
  90          } else {
  91              button.removeAttr( 'aria-expanded' );
  92              menu.removeAttr( 'aria-expanded' );
  93              button.removeAttr( 'aria-controls' );
  94          }
  95      }
  96  
  97      _window
  98          .on( 'load.twentythirteen', onResizeARIA )
  99          .on( 'resize.twentythirteen', function() {
 100              onResizeARIA();
 101      } );
 102  
 103      /**
 104       * Makes "skip to content" link work correctly in IE9 and Chrome for better
 105       * accessibility.
 106       *
 107       * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
 108       */
 109      _window.on( 'hashchange.twentythirteen', function() {
 110          var element = document.getElementById( location.hash.substring( 1 ) );
 111  
 112          if ( element ) {
 113              if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
 114                  element.tabIndex = -1;
 115              }
 116  
 117              element.focus();
 118          }
 119      } );
 120  
 121      /**
 122       * Arranges footer widgets vertically.
 123       */
 124      $( function() {
 125          var columnWidth, widgetArea;
 126          if ( typeof $.fn.masonry !== 'function' ) {
 127              return;
 128          }
 129          columnWidth = body.is( '.sidebar' ) ? 228 : 245;
 130          widgetArea = $( '#secondary .widget-area' );
 131  
 132          widgetArea.masonry( {
 133              itemSelector: '.widget',
 134              columnWidth: columnWidth,
 135              gutterWidth: 20,
 136              isRTL: body.is( '.rtl' )
 137          } );
 138  
 139          if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
 140  
 141              // Retain previous masonry-brick initial position.
 142              wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
 143                  var copyPosition = (
 144                      placement.partial.extended( wp.customize.widgetsPreview.WidgetPartial ) &&
 145                      placement.removedNodes instanceof jQuery &&
 146                      placement.removedNodes.is( '.masonry-brick' ) &&
 147                      placement.container instanceof jQuery
 148                  );
 149                  if ( copyPosition ) {
 150                      placement.container.css( {
 151                          position: placement.removedNodes.css( 'position' ),
 152                          top: placement.removedNodes.css( 'top' ),
 153                          left: placement.removedNodes.css( 'left' )
 154                      } );
 155                  }
 156              } );
 157  
 158              // Re-arrange footer widgets when sidebar is updated via selective refresh in the Customizer.
 159              wp.customize.selectiveRefresh.bind( 'sidebar-updated', function( sidebarPartial ) {
 160                  if ( 'sidebar-1' === sidebarPartial.sidebarId ) {
 161                      widgetArea.masonry( 'reloadItems' );
 162                      widgetArea.masonry( 'layout' );
 163                  }
 164              } );
 165          }
 166      } );
 167  } )( jQuery );