https://www.yarnsandfibers.com/wp-content/uploads/hummingbird-assets/2321fa276b95ec1e318953423b11ad3f.js

1/**handles:twentyseventeen-global**/
2/* global twentyseventeenScreenReaderText */
3(function( $ ) {
4
5	// Variables and DOM Caching.
6	var $body = $( 'body' ),
7		$customHeader = $body.find( '.custom-header' ),
8		$branding = $customHeader.find( '.site-branding' ),
9		$navigation = $body.find( '.navigation-top' ),
10		$navWrap = $navigation.find( '.wrap' ),
11		$navMenuItem = $navigation.find( '.menu-item' ),
12		$menuToggle = $navigation.find( '.menu-toggle' ),
13		$menuScrollDown = $body.find( '.menu-scroll-down' ),
14		$sidebar = $body.find( '#secondary' ),
15		$entryContent = $body.find( '.entry-content' ),
16		$formatQuote = $body.find( '.format-quote blockquote' ),
17		isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ),
18		navigationFixedClass = 'site-navigation-fixed',
19		navigationHeight,
20		navigationOuterHeight,
21		navPadding,
22		navMenuItemHeight,
23		idealNavHeight,
24		navIsNotTooTall,
25		headerOffset,
26		menuTop = 0,
27		resizeTimer;
28
29	// Ensure the sticky navigation doesn't cover current focused links.
30	$( 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]', '.site-content-contain' ).filter( ':visible' ).focus( function() {
31		if ( $navigation.hasClass( 'site-navigation-fixed' ) ) {
32			var windowScrollTop = $( window ).scrollTop(),
33				fixedNavHeight = $navigation.height(),
34				itemScrollTop = $( this ).offset().top,
35				offsetDiff = itemScrollTop - windowScrollTop;
36
37			// Account for Admin bar.
38			if ( $( '#wpadminbar' ).length ) {
39				offsetDiff -= $( '#wpadminbar' ).height();
40			}
41
42			if ( offsetDiff < fixedNavHeight ) {
43				$( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 0 );
44			}
45		}
46	});
47
48	// Set properties of navigation.
49	function setNavProps() {
50		navigationHeight      = $navigation.height();
51		navigationOuterHeight = $navigation.outerHeight();
52		navPadding            = parseFloat( $navWrap.css( 'padding-top' ) ) * 2;
53		navMenuItemHeight     = $navMenuItem.outerHeight() * 2;
54		idealNavHeight        = navPadding + navMenuItemHeight;
55		navIsNotTooTall       = navigationHeight <= idealNavHeight;
56	}
57
58	// Make navigation 'stick'.
59	function adjustScrollClass() {
60
61		// Make sure we're not on a mobile screen.
62		if ( 'none' === $menuToggle.css( 'display' ) ) {
63
64			// Make sure the nav isn't taller than two rows.
65			if ( navIsNotTooTall ) {
66
67				// When there's a custom header image or video, the header offset includes the height of the navigation.
68				if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
69					headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
70				} else {
71					headerOffset = $customHeader.innerHeight();
72				}
73
74				// If the scroll is more than the custom header, set the fixed class.
75				if ( $( window ).scrollTop() >= headerOffset ) {
76					$navigation.addClass( navigationFixedClass );
77				} else {
78					$navigation.removeClass( navigationFixedClass );
79				}
80
81			} else {
82
83				// Remove 'fixed' class if nav is taller than two rows.
84				$navigation.removeClass( navigationFixedClass );
85			}
86		}
87	}
88
89	// Set margins of branding in header.
90	function adjustHeaderHeight() {
91		if ( 'none' === $menuToggle.css( 'display' ) ) {
92
93			// The margin should be applied to different elements on front-page or home vs interior pages.
94			if ( isFrontPage ) {
95				$branding.css( 'margin-bottom', navigationOuterHeight );
96			} else {
97				$customHeader.css( 'margin-bottom', navigationOuterHeight );
98			}
99
100		} else {
101			$customHeader.css( 'margin-bottom', '0' );
102			$branding.css( 'margin-bottom', '0' );
103		}
104	}
105
106	// Set icon for quotes.
107	function setQuotesIcon() {
108		$( twentyseventeenScreenReaderText.quote ).prependTo( $formatQuote );
109	}
110
111	// Add 'below-entry-meta' class to elements.
112	function belowEntryMetaClass( param ) {
113		var sidebarPos, sidebarPosBottom;
114
115		if ( ! $body.hasClass( 'has-sidebar' ) || (
116			$body.hasClass( 'search' ) ||
117			$body.hasClass( 'single-attachment' ) ||
118			$body.hasClass( 'error404' ) ||
119			$body.hasClass( 'twentyseventeen-front-page' )
120		) ) {
121			return;
122		}
123
124		sidebarPos       = $sidebar.offset();
125		sidebarPosBottom = sidebarPos.top + ( $sidebar.height() + 28 );
126
127		$entryContent.find( param ).each( function() {
128			var $element = $( this ),
129				elementPos = $element.offset(),
130				elementPosTop = elementPos.top;
131
132			// Add 'below-entry-meta' to elements below the entry meta.
133			if ( elementPosTop > sidebarPosBottom ) {
134				$element.addClass( 'below-entry-meta' );
135			} else {
136				$element.removeClass( 'below-entry-meta' );
137			}
138		});
139	}
140
141	/*
142	 * Test if inline SVGs are supported.
143	 * @link https://github.com/Modernizr/Modernizr/
144	 */
145	function supportsInlineSVG() {
146		var div = document.createElement( 'div' );
147		div.innerHTML = '<svg/>';
148		return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
149	}
150
151	/**
152	 * Test if an iOS device.
153	*/
154	function checkiOS() {
155		return /iPad|iPhone|iPod/.test(navigator.userAgent) && ! window.MSStream;
156	}
157
158	/*
159	 * Test if background-attachment: fixed is supported.
160	 * @link http://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed
161	 */

162	function supportsFixedBackground() {
163		var el = document.createElement('div'),
164			isSupported;
165
166		try {
167			if ( ! ( 'backgroundAttachment' in el.style ) || checkiOS() ) {
168				return false;
169			}
170			el.style.backgroundAttachment = 'fixed';
171			isSupported = ( 'fixed' === el.style.backgroundAttachment );
172			return isSupported;
173		}
174		catch (e) {
175			return false;
176		}
177	}
178
179	// Fire on document ready.
180	$( document ).ready( function() {
181
182		// If navigation menu is present on page, setNavProps and adjustScrollClass.
183		if ( $navigation.length ) {
184			setNavProps();
185			adjustScrollClass();
186		}
187
188		// If 'Scroll Down' arrow in present on page, calculate scroll offset and bind an event handler to the click event.
189		if ( $menuScrollDown.length ) {
190
191			if ( $( 'body' ).hasClass( 'admin-bar' ) ) {
192				menuTop -= 32;
193			}
194			if ( $( 'body' ).hasClass( 'blog' ) ) {
195				menuTop -= 30; // The div for latest posts has no space above content, add some to account for this.
196			}
197			if ( ! $navigation.length ) {
198				navigationOuterHeight = 0;
199			}
200
201			$menuScrollDown.click( function( e ) {
202				e.preventDefault();
203				$( window ).scrollTo( '#primary', {
204					duration: 600,
205					offset: { top: menuTop - navigationOuterHeight }
206				});
207			});
208		}
209
210		adjustHeaderHeight();
211		setQuotesIcon();
212		if ( true === supportsInlineSVG() ) {
213			document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
214		}
215
216		if ( true === supportsFixedBackground() ) {
217			document.documentElement.className += ' background-fixed';
218		}
219	});
220
221	// If navigation menu is present on page, adjust it on scroll and screen resize.
222	if ( $navigation.length ) {
223
224		// On scroll, we want to stick/unstick the navigation.
225		$( window ).on( 'scroll', function() {
226			adjustScrollClass();
227			adjustHeaderHeight();
228		});
229
230		// Also want to make sure the navigation is where it should be on resize.
231		$( window ).resize( function() {
232			setNavProps();
233			setTimeout( adjustScrollClass, 500 );
234		});
235	}
236
237	$( window ).resize( function() {
238		clearTimeout( resizeTimer );
239		resizeTimer = setTimeout( function() {
240			belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
241		}, 300 );
242		setTimeout( adjustHeaderHeight, 1000 );
243	});
244
245	// Add header video class after the video is loaded.
246	$( document ).on( 'wp-custom-header-video-loaded', function() {
247		$body.addClass( 'has-header-video' );
248	});
249
250})( jQuery );