[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          nav, button, menu;
  12  
  13      nav = $( '#primary-navigation' );
  14      button = nav.find( '.menu-toggle' );
  15      menu = nav.find( '.nav-menu' );
  16  
  17      // Enable menu toggle for small screens.
  18      ( function() {
  19          if ( ! nav.length || ! button.length ) {
  20              return;
  21          }
  22  
  23          // Hide button if menu is missing or empty.
  24          if ( ! menu.length || ! menu.children().length ) {
  25              button.hide();
  26              return;
  27          }
  28  
  29          button.on( 'click.twentyfourteen', function() {
  30              nav.toggleClass( 'toggled-on' );
  31              if ( nav.hasClass( 'toggled-on' ) ) {
  32                  $( this ).attr( 'aria-expanded', 'true' );
  33                  menu.attr( 'aria-expanded', 'true' );
  34              } else {
  35                  $( this ).attr( 'aria-expanded', 'false' );
  36                  menu.attr( 'aria-expanded', 'false' );
  37              }
  38          } );
  39      } )();
  40  
  41      $( function() {
  42          // Search toggle.
  43          $( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
  44              var that    = $( this ),
  45                  wrapper = $( '#search-container' ),
  46                  container = that.find( 'a' );
  47  
  48              that.toggleClass( 'active' );
  49              wrapper.toggleClass( 'hide' );
  50  
  51              if ( that.hasClass( 'active' ) ) {
  52                  container.attr( 'aria-expanded', 'true' );
  53              } else {
  54                  container.attr( 'aria-expanded', 'false' );
  55              }
  56  
  57              if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
  58                  wrapper.find( '.search-field' ).focus();
  59              }
  60          } );
  61  
  62          /*
  63           * Fixed header for large screen.
  64           * If the header becomes more than 48px tall, unfix the header.
  65           *
  66           * The callback on the scroll event is only added if there is a header
  67           * image and we are not on mobile.
  68           */
  69          if ( _window.width() > 781 ) {
  70              var mastheadHeight = $( '#masthead' ).height(),
  71                  toolbarOffset, mastheadOffset;
  72  
  73              if ( mastheadHeight > 48 ) {
  74                  body.removeClass( 'masthead-fixed' );
  75              }
  76  
  77              if ( body.is( '.header-image' ) ) {
  78                  toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
  79                  mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
  80  
  81                  _window.on( 'scroll.twentyfourteen', function() {
  82                      if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
  83                          body.addClass( 'masthead-fixed' );
  84                      } else {
  85                          body.removeClass( 'masthead-fixed' );
  86                      }
  87                  } );
  88              }
  89          }
  90  
  91          // Focus styles for menus.
  92          $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
  93              $( this ).parents().toggleClass( 'focus' );
  94          } );
  95      } );
  96  
  97      /**
  98       * Add or remove ARIA attributes.
  99       *
 100       * Uses jQuery's width() function to determine the size of the window and add
 101       * the default ARIA attributes for the menu toggle if it's visible.
 102       *
 103       * @since Twenty Fourteen 1.4
 104       */
 105  	function onResizeARIA() {
 106          if ( 781 > _window.width() ) {
 107              button.attr( 'aria-expanded', 'false' );
 108              menu.attr( 'aria-expanded', 'false' );
 109              button.attr( 'aria-controls', 'primary-menu' );
 110          } else {
 111              button.removeAttr( 'aria-expanded' );
 112              menu.removeAttr( 'aria-expanded' );
 113              button.removeAttr( 'aria-controls' );
 114          }
 115      }
 116  
 117      _window
 118          .on( 'load.twentyfourteen', onResizeARIA )
 119          .on( 'resize.twentyfourteen', function() {
 120              onResizeARIA();
 121      } );
 122  
 123      _window.on( 'load', function() {
 124          var footerSidebar,
 125              isCustomizeSelectiveRefresh = ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh );
 126  
 127          // Arrange footer widgets vertically.
 128          if ( typeof $.fn.masonry === 'function' ) {
 129              footerSidebar = $( '#footer-sidebar' );
 130              footerSidebar.masonry( {
 131                  itemSelector: '.widget',
 132                  columnWidth: function( containerWidth ) {
 133                      return containerWidth / 4;
 134                  },
 135                  gutterWidth: 0,
 136                  isResizable: true,
 137                  isRTL: $( 'body' ).is( '.rtl' )
 138              } );
 139  
 140              if ( isCustomizeSelectiveRefresh ) {
 141  
 142                  // Retain previous masonry-brick initial position.
 143                  wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
 144                      var copyPosition = (
 145                          placement.partial.extended( wp.customize.widgetsPreview.WidgetPartial ) &&
 146                          placement.removedNodes instanceof jQuery &&
 147                          placement.removedNodes.is( '.masonry-brick' ) &&
 148                          placement.container instanceof jQuery
 149                      );
 150                      if ( copyPosition ) {
 151                          placement.container.css( {
 152                              position: placement.removedNodes.css( 'position' ),
 153                              top: placement.removedNodes.css( 'top' ),
 154                              left: placement.removedNodes.css( 'left' )
 155                          } );
 156                      }
 157                  } );
 158  
 159                  // Re-arrange footer widgets after selective refresh event.
 160                  wp.customize.selectiveRefresh.bind( 'sidebar-updated', function( sidebarPartial ) {
 161                      if ( 'sidebar-3' === sidebarPartial.sidebarId ) {
 162                          footerSidebar.masonry( 'reloadItems' );
 163                          footerSidebar.masonry( 'layout' );
 164                      }
 165                  } );
 166              }
 167          }
 168  
 169          // Initialize audio and video players in Twenty_Fourteen_Ephemera_Widget widget when selectively refreshed in Customizer.
 170          if ( isCustomizeSelectiveRefresh && wp.mediaelement ) {
 171              wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function() {
 172                  wp.mediaelement.initialize();
 173              } );
 174          }
 175  
 176          // Initialize Featured Content slider.
 177          if ( body.is( '.slider' ) ) {
 178              $( '.featured-content' ).featuredslider( {
 179                  selector: '.featured-content-inner > article',
 180                  controlsContainer: '.featured-content'
 181              } );
 182          }
 183      } );
 184  } )( jQuery );