https://www.myc.org.au/wp-content/themes/monochrome-pro/js/global.js?ver=1.0.0

1/**
2 * This script adds the jquery effects to the Monochrome Pro Theme.
3 *
4 * @package Monochrome\JS
5 * @author StudioPress
6 * @license GPL-2.0-or-later
7 */
8( function( $ ) {
9
10	// Cache DOM selectors.
11	var $header    = $( '.site-header' ),
12		$hsToggle  = $( '.toggle-header-search' ),
13		$hsWrap    = $( '#header-search-wrap' ),
14		$hsInput   = $hsWrap.find( 'input[type="search"]' ),
15		$footer    = $( '.site-footer' ),
16		$container = $( '.site-container' );
17
18	// Make sure JS class is added.
19	$( document ).ready( function() {
20		$( 'body' ).addClass( 'js' );
21	});
22
23	// Run on page scroll.
24	$( window ).scroll( function() {
25
26		// Toggle header class after threshold point.
27		if ( 50 < $( document ).scrollTop() ) {
28			$( '.site-container' ).addClass( 'shadow' );
29		} else {
30			$( '.site-container' ).removeClass( 'shadow' );
31		}
32
33	});
34
35	// Set the container margin to the footer height for effect.
36	$container.css( 'margin-bottom', $footer.outerHeight() );
37
38	// Handler for click a show/hide button.
39	$hsToggle.on( 'click', function( event ) {
40
41		event.preventDefault();
42
43		if ( $( this ).hasClass( 'close' ) ) {
44			hideSearch();
45		} else {
46			showSearch();
47		}
48
49	});
50
51	// Handler for pressing show/hide button.
52	$hsToggle.on( 'keydown', function( event ) {
53
54		// If tabbing from toggle button, and search is hidden, exit early.
55		if ( 9 === event.keyCode && ! $header.hasClass( 'search-visible' ) ) {
56			return;
57		}
58
59		event.preventDefault();
60		handleKeyDown( event );
61
62	});
63
64	// Hide search when tabbing or escaping out of the search bar.
65	$hsInput.on( 'keydown', function( event ) {
66
67		// Tab: 9, Esc: 27.
68		if ( 9 === event.keyCode || 27 === event.keyCode ) {
69			hideSearch( event.target );
70		}
71
72	});
73
74	// Hide search on blur, such as when clicking outside it.
75	$hsInput.on( 'blur', hideSearch );
76
77	// Helper function to show the search form.
78	function showSearch() {
79
80		$header.addClass( 'search-visible' );
81		$hsWrap.fadeIn( 'fast' ).find( 'input[type="search"]' ).focus();
82		$hsToggle.attr( 'aria-expanded', true );
83
84	}
85
86	// Helper function to hide the search form.
87	function hideSearch() {
88
89		$hsWrap.fadeOut( 'fast' ).parents( '.site-header' ).removeClass( 'search-visible' );
90		$hsToggle.attr( 'aria-expanded', false );
91
92	}
93
94	// Keydown handler function for toggling search field visibility.
95	function handleKeyDown( event ) {
96
97		// Enter/Space, respectively.
98		if ( 13 === event.keyCode || 32 === event.keyCode ) {
99
100			event.preventDefault();
101
102			if ( $( event.target ).hasClass( 'close' ) ) {
103				hideSearch();
104			} else {
105				showSearch();
106			}
107
108		}
109
110	}
111
112}( jQuery ) );