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                 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         /*
  42          * Makes "skip to content" link work correctly in IE9 and Chrome for better
  43          * accessibility.
  44          *
  45          * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
  46          */
  47         _window.on( 'hashchange.twentyfourteen', function() {
  48                 var hash = location.hash.substring( 1 ), element;
  49
  50                 if ( ! hash ) {
  51                         return;
  52                 }
  53
  54                 element = document.getElementById( hash );
  55
  56                 if ( element ) {
  57                         if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
  58                                 element.tabIndex = -1;
  59                         }
  60
  61                         element.focus();
  62
  63                         // Repositions the window on jump-to-anchor to account for header height.
  64                         window.scrollBy( 0, -80 );
  65                 }
  66         } );
  67
  68         $( function() {
  69                 // Search toggle.
  70                 $( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
  71                         var that    = $( this ),
  72                                 wrapper = $( '#search-container' ),
  73                                 container = that.find( 'a' );
  74
  75                         that.toggleClass( 'active' );
  76                         wrapper.toggleClass( 'hide' );
  77
  78                         if ( that.hasClass( 'active' ) ) {
  79                                 container.attr( 'aria-expanded', 'true' );
  80                         } else {
  81                                 container.attr( 'aria-expanded', 'false' );
  82                         }
  83
  84                         if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
  85                                 wrapper.find( '.search-field' ).focus();
  86                         }
  87                 } );
  88
  89                 /*
  90                  * Fixed header for large screen.
  91                  * If the header becomes more than 48px tall, unfix the header.
  92                  *
  93                  * The callback on the scroll event is only added if there is a header
  94                  * image and we are not on mobile.
  95                  */
  96                 if ( _window.width() > 781 ) {
  97                         var mastheadHeight = $( '#masthead' ).height(),
  98                                 toolbarOffset, mastheadOffset;
  99
 100                         if ( mastheadHeight > 48 ) {
 101                                 body.removeClass( 'masthead-fixed' );
 102                         }
 103
 104                         if ( body.is( '.header-image' ) ) {
 105                                 toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
 106                                 mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
 107
 108                                 _window.on( 'scroll.twentyfourteen', function() {
 109                                         if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
 110                                                 body.addClass( 'masthead-fixed' );
 111                                         } else {
 112                                                 body.removeClass( 'masthead-fixed' );
 113                                         }
 114                                 } );
 115                         }
 116                 }
 117
 118                 // Focus styles for menus.
 119                 $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
 120                         $( this ).parents().toggleClass( 'focus' );
 121                 } );
 122         } );
 123
 124         /**
 125          * @summary Add or remove ARIA attributes.
 126          * Uses jQuery's width() function to determine the size of the window and add
 127          * the default ARIA attributes for the menu toggle if it's visible.
 128          * @since Twenty Fourteen 1.4
 129          */
 130         function onResizeARIA() {
 131                 if ( 781 > _window.width() ) {
 132                         button.attr( 'aria-expanded', 'false' );
 133                         menu.attr( 'aria-expanded', 'false' );
 134                         button.attr( 'aria-controls', 'primary-menu' );
 135                 } else {
 136                         button.removeAttr( 'aria-expanded' );
 137                         menu.removeAttr( 'aria-expanded' );
 138                         button.removeAttr( 'aria-controls' );
 139                 }
 140         }
 141
 142         _window
 143                 .on( 'load.twentyfourteen', onResizeARIA )
 144                 .on( 'resize.twentyfourteen', function() {
 145                         onResizeARIA();
 146         } );
 147
 148         _window.load( function() {
 149                 var footerSidebar,
 150                         isCustomizeSelectiveRefresh = ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh );
 151
 152                 // Arrange footer widgets vertically.
 153                 if ( $.isFunction( $.fn.masonry ) ) {
 154                         footerSidebar = $( '#footer-sidebar' );
 155                         footerSidebar.masonry( {
 156                                 itemSelector: '.widget',
 157                                 columnWidth: function( containerWidth ) {
 158                                         return containerWidth / 4;
 159                                 },
 160                                 gutterWidth: 0,
 161                                 isResizable: true,
 162                                 isRTL: $( 'body' ).is( '.rtl' )
 163                         } );
 164
 165                         if ( isCustomizeSelectiveRefresh ) {
 166
 167                                 // Retain previous masonry-brick initial position.
 168                                 wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
 169                                         var copyPosition = (
 170                                                 placement.partial.extended( wp.customize.widgetsPreview.WidgetPartial ) &&
 171                                                 placement.removedNodes instanceof jQuery &&
 172                                                 placement.removedNodes.is( '.masonry-brick' ) &&
 173                                                 placement.container instanceof jQuery
 174                                         );
 175                                         if ( copyPosition ) {
 176                                                 placement.container.css( {
 177                                                         position: placement.removedNodes.css( 'position' ),
 178                                                         top: placement.removedNodes.css( 'top' ),
 179                                                         left: placement.removedNodes.css( 'left' )
 180                                                 } );
 181                                         }
 182                                 } );
 183
 184                                 // Re-arrange footer widgets after selective refresh event.
 185                                 wp.customize.selectiveRefresh.bind( 'sidebar-updated', function( sidebarPartial ) {
 186                                         if ( 'sidebar-3' === sidebarPartial.sidebarId ) {
 187                                                 footerSidebar.masonry( 'reloadItems' );
 188                                                 footerSidebar.masonry( 'layout' );
 189                                         }
 190                                 } );
 191                         }
 192                 }
 193
 194                 // Initialize audio and video players in Twenty_Fourteen_Ephemera_Widget widget when selectively refreshed in Customizer.
 195                 if ( isCustomizeSelectiveRefresh && wp.mediaelement ) {
 196                         wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function() {
 197                                 wp.mediaelement.initialize();
 198                         } );
 199                 }
 200
 201                 // Initialize Featured Content slider.
 202                 if ( body.is( '.slider' ) ) {
 203                         $( '.featured-content' ).featuredslider( {
 204                                 selector: '.featured-content-inner > article',
 205                                 controlsContainer: '.featured-content'
 206                         } );
 207                 }
 208         } );
 209 } )( jQuery );