scripts.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /*!
  2. * Script for AltoFocus
  3. *
  4. * @package Altofocus
  5. */
  6. /* global altoFocusFlexSliderText */
  7. ( function( $ ) {
  8. /**
  9. * Set variables
  10. */
  11. var body,
  12. $wrapper = $( '.js body' ),
  13. $widgetlist = $( '.widget > ul' ).not( '.widget_wpcom_social_media_icons_widget > ul, .widget_author_grid > ul, .jetpack_widget_social_icons > ul' ),
  14. $gallery_slider = $( '.flexslider' );
  15. /**
  16. * Debounce script
  17. */
  18. function altofocus_debounce(func, wait, immediate) {
  19. var timeout;
  20. return function() {
  21. var context = this,
  22. args = arguments;
  23. var later = function() {
  24. timeout = null;
  25. if (!immediate) {
  26. func.apply(context, args);
  27. }
  28. };
  29. var callNow = immediate && !timeout;
  30. clearTimeout(timeout);
  31. timeout = setTimeout(later, wait);
  32. if (callNow) {
  33. func.apply(context, args);
  34. }
  35. };
  36. }
  37. /**
  38. * Stick header to window when scrolling passes the masthead height threshold
  39. */
  40. function stickyPageHeader() {
  41. // get the amount the window has scrolled
  42. var scroll = $( this ).scrollTop(),
  43. header_height = $( '#masthead' ).outerHeight(),
  44. $page_header = $( '.hfeed .page-header' );
  45. // add the 'fixed' class to the header menu based on the window position
  46. if ( scroll >= header_height ) {
  47. $page_header.addClass( 'sticky' );
  48. } else {
  49. $page_header.removeClass( 'sticky' );
  50. }
  51. }
  52. /**
  53. * Split widget lists
  54. */
  55. function initColumnLists() {
  56. $widgetlist.columnlist({
  57. size : 2,
  58. 'class' : 'widget-list',
  59. incrementClass : 'widget-list-'
  60. });
  61. }
  62. /**
  63. * Init Gallery Slider
  64. */
  65. function initGallerySlider() {
  66. // Determine text direction
  67. var $text_direction = true;
  68. if ( $( 'html' ).attr( 'dir' ) === 'rtl' ) {
  69. $text_direction = false;
  70. }
  71. $gallery_slider.flexslider({
  72. // options
  73. animation: "slide",
  74. selector: ".slides > .slide",
  75. smoothHeight: true,
  76. slideshow: false,
  77. rtl: $text_direction,
  78. prevText: '<span class="screen-reader-text">'+ altoFocusFlexSliderText.previous +'</span> <span class="meta-nav" aria-hidden="true"><svg class="arrow-icon left-arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect class="rectangle" x="0" y="0" width="40" height="40" /><polyline class="arrow" points="27,6 13,20 27,34" /></svg></span>',
  79. nextText: '<span class="screen-reader-text">'+ altoFocusFlexSliderText.next +'</span> <span class="meta-nav" aria-hidden="true"><svg class="arrow-icon right-arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect class="rectangle" x="0" y="0" width="40" height="40" /><polyline class="arrow" points="13 34 27 20 13 6" /></svg></span>',
  80. });
  81. }
  82. /*
  83. * Fade in page
  84. * - only if js is enabled
  85. */
  86. function fadeInPage() {
  87. $wrapper.animate({
  88. opacity: 1,
  89. }, 100);
  90. }
  91. /**
  92. * Execute functions
  93. */
  94. $( document )
  95. .ready( initColumnLists )
  96. .ready( initGallerySlider )
  97. .ready( fadeInPage )
  98. .ready( function() {
  99. body = $( document.body );
  100. window.addEventListener( 'scroll', altofocus_debounce( stickyPageHeader, 20, 1 ) );
  101. } );
  102. })(jQuery);