[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       * Arranges footer widgets vertically.
 105       */
 106      $( function() {
 107          var columnWidth, widgetArea;
 108          if ( typeof $.fn.masonry !== 'function' ) {
 109              return;
 110          }
 111          columnWidth = body.is( '.sidebar' ) ? 228 : 245;
 112          widgetArea = $( '#secondary .widget-area' );
 113  
 114          widgetArea.masonry( {
 115              itemSelector: '.widget',
 116              columnWidth: columnWidth,
 117              gutterWidth: 20,
 118              isRTL: body.is( '.rtl' )
 119          } );
 120  
 121          if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
 122  
 123              // Retain previous masonry-brick initial position.
 124              wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
 125                  var copyPosition = (
 126                      placement.partial.extended( wp.customize.widgetsPreview.WidgetPartial ) &&
 127                      placement.removedNodes instanceof jQuery &&
 128                      placement.removedNodes.is( '.masonry-brick' ) &&
 129                      placement.container instanceof jQuery
 130                  );
 131                  if ( copyPosition ) {
 132                      placement.container.css( {
 133                          position: placement.removedNodes.css( 'position' ),
 134                          top: placement.removedNodes.css( 'top' ),
 135                          left: placement.removedNodes.css( 'left' )
 136                      } );
 137                  }
 138              } );
 139  
 140              // Re-arrange footer widgets when sidebar is updated via selective refresh in the Customizer.
 141              wp.customize.selectiveRefresh.bind( 'sidebar-updated', function( sidebarPartial ) {
 142                  if ( 'sidebar-1' === sidebarPartial.sidebarId ) {
 143                      widgetArea.masonry( 'reloadItems' );
 144                      widgetArea.masonry( 'layout' );
 145                  }
 146              } );
 147          }
 148      } );
 149  } )( jQuery );