https://hopesdoorny.org/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+
7 */
8(function( $ ) {
9
10	// Make sure JS class is added.
11	$( document ).ready( function() {
12		$( 'body' ).addClass( 'js' );
13	});
14
15	// Run on page scroll.
16	$( window ).scroll( function() {
17
18		// Toggle header class after threshold point.
19		if ( $( document ).scrollTop() > 50 ) {
20			$( '.site-container' ).addClass( 'shadow' );
21		} else {
22			$( '.site-container' ).removeClass( 'shadow' );
23		}
24
25	});
26
27	// Determine height of site footer, add bottom margin to site container.
28	var $header    = $( '.site-header' ),
29		$hsToggle  = $( '.toggle-header-search' ),
30		$hsWrap    = $( '#header-search-wrap' ),
31		$hsInput   = $hsWrap.find( 'input[type="search"]' ),
32		$footer    = $( '.site-footer' ),
33		$container = $( '.site-container' );
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 ( event.keyCode === 9 && ! $header.hasClass( 'search-visible' ) ) {
56			return;
57		}
58
59		event.preventDefault();
60		handleKeyDown( event );
61
62	});
63

64	// Handler for tabbing out of the search bar when focused.
65	$hsInput.on( 'keydown', function( event ) {
66
67		if ( event.keyCode === 9 ) {
68			hideSearch( event.target );
69		}
70
71	});
72
73	// Helper function to show the search form.
74	function showSearch() {
75
76		$header.addClass( 'search-visible' );
77		$hsWrap.fadeIn( 'fast' ).find( 'input[type="search"]' ).focus();
78		$hsToggle.attr( 'aria-expanded', true );
79
80	}
81
82	// Helper function to hide the search form.
83	function hideSearch() {
84
85		$hsWrap.fadeOut( 'fast' ).parents( '.site-header' ).removeClass( 'search-visible' );
86		$hsToggle.attr( 'aria-expanded', false );
87
88	}
89
90	// Keydown handler function for toggling search field visibility.
91	function handleKeyDown( event ) {
92
93		// Enter/Space, respectively.
94		if ( event.keyCode === 13 || event.keyCode === 32 ) {
95
96			event.preventDefault();
97
98			if ( $( event.target ).hasClass( 'close' ) ) {
99				hideSearch();
100			} else {
101				showSearch();
102			}
103
104		}
105
106	}
107
108})( jQuery );