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

   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 hash = location.hash.substring( 1 ), element;
  44
  45                 if ( ! hash ) {
  46                         return;
  47                 }
  48
  49                 element = document.getElementById( hash );
  50
  51                 if ( element ) {
  52                         if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
  53                                 element.tabIndex = -1;
  54                         }
  55
  56                         element.focus();
  57
  58                         // Repositions the window on jump-to-anchor to account for header height.
  59                         window.scrollBy( 0, -80 );
  60                 }
  61         } );
  62
  63         $( function() {
  64                 // Search toggle.
  65                 $( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
  66                         var that    = $( this ),
  67                                 wrapper = $( '.search-box-wrapper' );
  68
  69                         that.toggleClass( 'active' );
  70                         wrapper.toggleClass( 'hide' );
  71
  72                         if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
  73                                 wrapper.find( '.search-field' ).focus();
  74                         }
  75                 } );
  76
  77                 /*
  78                  * Fixed header for large screen.
  79                  * If the header becomes more than 48px tall, unfix the header.
  80                  *
  81                  * The callback on the scroll event is only added if there is a header
  82                  * image and we are not on mobile.
  83                  */
  84                 if ( _window.width() > 781 ) {
  85                         var mastheadHeight = $( '#masthead' ).height(),
  86                                 toolbarOffset, mastheadOffset;
  87
  88                         if ( mastheadHeight > 48 ) {
  89                                 body.removeClass( 'masthead-fixed' );
  90                         }
  91
  92                         if ( body.is( '.header-image' ) ) {
  93                                 toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
  94                                 mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
  95
  96                                 _window.on( 'scroll.twentyfourteen', function() {
  97                                         if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
  98                                                 body.addClass( 'masthead-fixed' );
  99                                         } else {
 100                                                 body.removeClass( 'masthead-fixed' );
 101                                         }
 102                                 } );
 103                         }
 104                 }
 105
 106                 // Focus styles for menus.
 107                 $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
 108                         $( this ).parents().toggleClass( 'focus' );
 109                 } );
 110         } );
 111
 112         _window.load( function() {
 113                 // Arrange footer widgets vertically.
 114                 if ( $.isFunction( $.fn.masonry ) ) {
 115                         $( '#footer-sidebar' ).masonry( {
 116                                 itemSelector: '.widget',
 117                                 columnWidth: function( containerWidth ) {
 118                                         return containerWidth / 4;
 119                                 },
 120                                 gutterWidth: 0,
 121                                 isResizable: true,
 122                                 isRTL: $( 'body' ).is( '.rtl' )
 123                         } );
 124                 }
 125
 126                 // Initialize Featured Content slider.
 127                 if ( body.is( '.slider' ) ) {
 128                         $( '.featured-content' ).featuredslider( {
 129                                 selector: '.featured-content-inner > article',
 130                                 controlsContainer: '.featured-content'
 131                         } );
 132                 }
 133         } );
 134 } )( jQuery );