https://laernorsknaa.com/wp-content/themes/twentyseventeen/assets/js/global.js?ver=20190121

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

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