[Summary view] [Print] [Text view]

   1  /**
   2   * Theme functions file
   3   *
   4   * Contains handlers for navigation, accessibility, header sizing
   5   * footer widgets and Featured Content slider
   6   *
   7   */
   8  ( function( $ ) {
   9      var body    = $( 'body' ),
  10          _window = $( window );
  11  
  12      // Enable menu toggle for small screens.
  13      ( function() {
  14          var nav = $( '#primary-navigation' ), button, menu;
  15          if ( ! nav ) {
  16              return;
  17          }
  18  
  19          button = nav.find( '.menu-toggle' );
  20          if ( ! button ) {
  21              return;
  22          }
  23  
  24          // Hide button if menu is missing or empty.
  25          menu = nav.find( '.nav-menu' );
  26          if ( ! menu || ! menu.children().length ) {
  27              button.hide();
  28              return;
  29          }
  30  
  31          $( '.menu-toggle' ).on( 'click.twentyfourteen', function() {
  32              nav.toggleClass( 'toggled-on' );
  33          } );
  34      } )();
  35  
  36      /*
  37       * Makes "skip to content" link work correctly in IE9 and Chrome for better
  38       * accessibility.
  39       *
  40       * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
  41       */
  42      _window.on( 'hashchange.twentyfourteen', function() {
  43          var element = document.getElementById( location.hash.substring( 1 ) );
  44  
  45          if ( element ) {
  46              if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
  47                  element.tabIndex = -1;
  48              }
  49  
  50              element.focus();
  51  
  52              // Repositions the window on jump-to-anchor to account for header height.
  53              window.scrollBy( 0, -80 );
  54          }
  55      } );
  56  
  57      $( function() {
  58          // Search toggle.
  59          $( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
  60              var that    = $( this ),
  61                  wrapper = $( '.search-box-wrapper' );
  62  
  63              that.toggleClass( 'active' );
  64              wrapper.toggleClass( 'hide' );
  65  
  66              if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
  67                  wrapper.find( '.search-field' ).focus();
  68              }
  69          } );
  70  
  71          /*
  72           * Fixed header for large screen.
  73           * If the header becomes more than 48px tall, unfix the header.
  74           *
  75           * The callback on the scroll event is only added if there is a header
  76           * image and we are not on mobile.
  77           */
  78          if ( _window.width() > 781 ) {
  79              var mastheadHeight = $( '#masthead' ).height(),
  80                  toolbarOffset, mastheadOffset;
  81  
  82              if ( mastheadHeight > 48 ) {
  83                  body.removeClass( 'masthead-fixed' );
  84              }
  85  
  86              if ( body.is( '.header-image' ) ) {
  87                  toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
  88                  mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
  89  
  90                  _window.on( 'scroll.twentyfourteen', function() {
  91                      if ( ( window.scrollY > mastheadOffset ) && ( mastheadHeight < 49 ) ) {
  92                          body.addClass( 'masthead-fixed' );
  93                      } else {
  94                          body.removeClass( 'masthead-fixed' );
  95                      }
  96                  } );
  97              }
  98          }
  99  
 100          // Focus styles for menus.
 101          $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
 102              $( this ).parents().toggleClass( 'focus' );
 103          } );
 104      } );
 105  
 106      // Arrange footer widgets vertically.
 107      if ( $.isFunction( $.fn.masonry ) ) {
 108          $( '#footer-sidebar' ).masonry( {
 109              itemSelector: '.widget',
 110              columnWidth: function( containerWidth ) {
 111                  return containerWidth / 4;
 112              },
 113              gutterWidth: 0,
 114              isResizable: true,
 115              isRTL: $( 'body' ).is( '.rtl' )
 116          } );
 117      }
 118  
 119      // Initialize Featured Content slider.
 120      _window.load( function() {
 121          if ( body.is( '.slider' ) ) {
 122              $( '.featured-content' ).featuredslider( {
 123                  selector: '.featured-content-inner > article',
 124                  controlsContainer: '.featured-content'
 125              } );
 126          }
 127      } );
 128  } )( jQuery );