https://www.whymarche.com/wp-content/themes/melina/assets/js/functions.js?ver=20181229

1/**
2 * File functions.js.
3 *
4 * Contains handlers for navigation, search and scroll to top button.
5 */
6
7( function( $ ) {
8  "use strict";
9
10  var body, masthead, menuToggle, headerMenu, menuPrimary, menuSecondary, resizeTimer;
11
12  function initMainNavigation( container ) {
13    // Add dropdown toggle that displays child menu items.
14    var dropdownToggle = $( '<button />', {
15      'class': 'dropdown-toggle',
16      'aria-expanded': false
17    } ).append( $( '<span />', {
18      'class': 'screen-reader-text',
19      text: screenReaderText.expand
20    } ) );
21
22    container.find( '.menu-item-has-children > a' ).after( dropdownToggle );
23
24    // Set the active submenu dropdown toggle button initial state.
25    container.find( '.current-menu-ancestor > button' )
26      .addClass( 'toggled-on' )
27      .attr( 'aria-expanded', 'true' )
28      .find( '.screen-reader-text' )
29      .text( screenReaderText.collapse );
30    // Set the active submenu initial state.
31    container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
32
33    container.find( '.dropdown-toggle' ).click( function( e ) {
34      var _this            = $( this ),
35          screenReaderSpan = _this.find( '.screen-reader-text' );
36
37      e.preventDefault();
38      _this.toggleClass( 'toggled-on' );
39      _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
40
41      _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
42
43      screenReaderSpan.text( screenReaderSpan.text() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
44    } );
45  }
46
47  initMainNavigation( $( '.header__menu--primary' ) );
48  initMainNavigation( $( '.header__menu--secondary' ) );
49
50  masthead      = $( '#masthead' );
51  menuToggle    = masthead.find( '#menu-toggle' );
52  headerMenu    = masthead.find( '#header-menu' );
53  menuPrimary   = masthead.find( '#menu-primary' );
54  menuSecondary = masthead.find( '#menu-secondary' );
55
56  // Enable menuToggle.
57  ( function() {
58    // Return early if menuToggle is missing.
59    if ( ! menuToggle.length ) {
60      return;
61    }
62
63    // Add an initial values for the attribute.
64    menuToggle.add( menuPrimary ).add( menuSecondary ).attr( 'aria-expanded', 'false' );
65
66    menuToggle.on( 'click.melina', function() {
67      $( this ).add( headerMenu ).toggleClass( 'toggled-on' );
68
69      $( this ).add( menuPrimary ).add( menuSecondary ).attr( 'aria-expanded', $( this ).add( menuPrimary ).add( menuSecondary ).hasClass( 'toggled-on' ) );
70    } );
71  } )();
72
73  // Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
74  ( function() {
75    if ( ! menuPrimary.length || ! menuPrimary.children().length ) {
76      return;
77    }
78
79    // Toggle `focus` class to allow submenu access on tablets.
80    function toggleFocusClassTouchScreen() {
81      if ( window.innerWidth >= 960 ) {
82
83        $( document.body ).on( 'touchstart.melina', function( e ) {
84          if ( ! $( e.target ).closest( '.header__menu--primary li' ).length ) {
85            $( '.header__menu--primary li' ).removeClass( 'focus' );
86          }
87        } );
88
89        menuPrimary.find( '.menu-item-has-children > a' ).on( 'touchstart.melina', function( e ) {
90          var el = $( this ).parent( 'li' );
91
92          if ( ! el.hasClass( 'focus' ) ) {
93            e.preventDefault();
94            el.toggleClass( 'focus' );
95            el.siblings( '.focus' ).removeClass( 'focus' );
96          }
97        } );
98
99      } else {
100        menuPrimary.find( '.menu-item-has-children > a' ).unbind( 'touchstart.melina' );
101      }
102    }
103
104    if ( 'ontouchstart' in window ) {
105      $( window ).on( 'resize.melina', toggleFocusClassTouchScreen );
106      toggleFocusClassTouchScreen();
107    }
108
109    menuPrimary.find( 'a' ).on( 'focus.melina blur.melina', function() {
110      $( this ).parents( '.menu-item' ).toggleClass( 'focus' );
111    } );
112  } )();
113
114  function initShowComments( container ) {
115    // Add "Show Comments" button.
116    var showCommentsButton = $( '<button />', {
117      'class': 'button button--show-commets',
118      'aria-expanded': false
119    } ).append( $( '<span />', {
120      'class': 'button__text',
121      text: showCommentsText.show
122    } ) );
123
124    container.find( '.comments-area__wrapper' ).before( showCommentsButton );
125
126    container.find( '.button.button--show-commets' ).click( function( e ) {
127      var _this            = $( this ),

128          showCommentsSpan = _this.find( '.button__text' );
129
130      e.preventDefault();
131      _this.toggleClass( 'toggled-on' );
132      _this.next( '.comments-area__wrapper' ).toggleClass( 'toggled-on' );
133
134      _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
135
136      showCommentsSpan.text( showCommentsSpan.text() === showCommentsText.show ? showCommentsText.close : showCommentsText.show );
137    } );
138  }
139
140  initShowComments( $( '#comments' ) );
141
142  // Shows comments area by certain anchors.
143  function showCommentsByAnchor() {
144    var anchor = window.location.hash.replace("#","");
145
146    if ( ! anchor.length ) {
147      return;
148    }
149
150    if ( anchor == "comments" || anchor == "respond" || anchor.includes("comment-") ) {
151      $( '.comments-area__wrapper' ).slideDown( 0 );
152    }
153  }
154
155  $( document ).ready( function() {
156    body = $( document.body );
157
158    $( window ).on( 'scroll.melina', function() {
159      // Scroll to top button.
160      if ( $( this ).scrollTop() > $( window ).height() / 2 ) {
161        $( '#scroll-to-top' ).fadeIn( 1000 );
162      } else {
163        $( '#scroll-to-top' ).fadeOut( 1000 );
164      }
165    } );
166
167    // Scroll to top button.
168    $( '#scroll-to-top' ).on( 'click.melina', function() {
169      $( 'html, body' ).animate( { scrollTop: 0 }, 1000 );
170      return false;
171    } );
172
173    // Show/Hide Comments
174    $( '.comments-area__wrapper' ).hide();
175
176    $( '.button--show-commets' ).toggle(
177      function() {
178        $( '.comments-area__wrapper' ).slideDown( 200, function() {
179					$.scrollTo( $( '.comments-area__wrapper' ), {
180						duration: 600,
181						offset: { 'top': -48 }
182					} );
183				} );
184      },
185      function() {
186        $( '.comments-area__wrapper' ).slideUp( 200 );
187      }
188    );
189
190    // Show comments by anchor.
191    showCommentsByAnchor();
192
193    // Search.
194    $( '#menu-item-search > a' ).on( 'click.melina', function( event ) {
195      event.preventDefault();
196      $( '#search-overlay' ).addClass( 'search-overlay--open' );
197      $( '#search-overlay > form > input[type="search"]' ).focus();
198    } );
199
200    $( '#search-overlay, #search-overlay .button--close' ).on( 'click.melina keyup.melina', function( event ) {
201      if ( event.target == this || event.target.className == 'button--close' || event.keyCode == 27 ) {
202        $( this ).removeClass( 'search-overlay--open' );
203      }
204    } );
205  } );
206} )( jQuery );