functions.js 3.4 KB

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