https://verilymag.com/wp-content/plugins/mai-engine/assets/js/header.js?ver=2.40.0.7920262049

1( function() {
2
3	/**
4	 * Global variables.
5	 */
6	var root               = document.documentElement;
7	var body               = document.getElementsByTagName( 'body' )[ 0 ];
8	var skipLink           = document.getElementsByClassName( 'genesis-skip-link' )[ 0 ];
9	var beforeHeader       = document.getElementsByClassName( 'before-header' )[ 0 ];
10	var header             = document.getElementsByTagName( 'header' )[ 0 ];
11	var afterHeader        = document.getElementsByClassName( 'after-header' )[ 0 ];
12	var navAfterHeader     = document.getElementsByClassName( 'nav-after-header' )[ 0 ];
13	var pageHeader         = document.getElementsByClassName( 'page-header' )[ 0 ];
14	var breakpointSm       = window.getComputedStyle( document.documentElement ).getPropertyValue( '--breakpoint-sm' );
15	var hasDarkHeader      = header && body.classList.contains( 'has-dark-header' );
16	var hasSticky          = header && body.classList.contains( 'has-sticky-header' );
17	var hasTransparent     = header && body.classList.contains( 'has-transparent-header' );
18	var hasDarkTransparent = header && hasTransparent && body.classList.contains( 'has-dark-transparent-header' );
19	var hasPageHeader      = pageHeader && body.classList.contains( 'has-page-header' );
20	var headerStyles       = header ? getComputedStyle( header ) : false;
21	var duration           = header ? parseFloat( headerStyles.getPropertyValue( 'transition-duration' ) ) * 1000 : false;
22	var alignFullFirst     = false;
23	var alignFullEl        = false;
24	var firstElement       = false;
25
26	if ( hasPageHeader ) {
27		alignFullEl = pageHeader;
28
29	} else {
30		if ( body.classList.contains( 'is-single' ) ) {
31			firstElement = document.querySelectorAll( '#genesis-content > .entry-single:first-child > .entry-wrap-single:first-child > .entry-content:first-child > :not(:empty):first-of-type' );
32		} else if ( body.classList.contains( 'is-archive' ) ) {
33			// Not tested much since we don't have blocks on archives yet.
34			firstElement = document.querySelectorAll( '#genesis-content > :not(:empty):first-of-type' );
35		}
36
37		firstElement   = firstElement && firstElement.length && firstElement[0].classList.contains( 'alignfull' ) ? firstElement[0] : false;
38		alignFullFirst = firstElement;
39		alignFullEl    = alignFullFirst ? firstElement : alignFullEl;
40	}
41
42	/**
43	 * Sticky and transparent header.
44	 */
45	var isTop = new IntersectionObserver( function( tracker ) {
46		if ( tracker[ 0 ].isIntersecting ) {
47			body.classList.remove( 'header-stuck' );
48
49			if ( hasTransparent && ! ( hasDarkHeader || hasDarkTransparent ) ) {
50				body.classList.remove( 'has-dark-header' );
51			}
52		} else {
53			var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
54
55			if ( viewportWidth > parseInt( breakpointSm, 10 ) ) {
56				body.classList.add( 'header-stuck' );
57
58				if ( hasTransparent && hasDarkHeader ) {
59					body.classList.add( 'has-dark-header' );
60				}
61			}
62		}
63	}, {
64		// rootMargin: root.style.marginTop,
65		threshold:[ 0, 1 ],
66	});
67
68	var beforeHeaderResize = new ResizeObserver(items => {
69		items.forEach(item => {
70			root.style.setProperty( '--before-header-height', Math.ceil( item.contentRect.height ) + 'px' );
71		});
72	});
73
74	var headerWidth     = 0;
75	var headerFullSet   = 0;
76	var headerShrunkSet = 0;
77	var headerResize    = new ResizeObserver(items => {
78		items.forEach(item => {
79			if ( item.contentRect.width !== headerWidth || ! headerFullSet || ! headerShrunkSet ) {
80				if ( ! body.classList.contains( 'header-stuck' ) ) {
81					root.style.setProperty( '--header-height-full', Math.ceil( item.contentRect.height ) + 'px' );
82					setTimeout( function() {
83						root.style.setProperty( '--header-height-full', Math.ceil( item.contentRect.height ) + 'px' );
84						headerFullSet = 1;
85					}, duration );
86				} else {
87					root.style.setProperty( '--header-height-shrunk', Math.ceil( item.contentRect.height ) + 'px' );
88					setTimeout( function() {
89						root.style.setProperty( '--header-height-shrunk', Math.ceil( item.contentRect.height ) + 'px' );
90						headerShrunkSet = 1;
91					}, duration );
92				}
93				headerWidth = item.contentRect.width;
94			}
95			root.style.setProperty( '--header-height', Math.ceil( item.contentRect.height ) + 'px' );
96		});
97	});
98
99	var afterHeaderResize = new ResizeObserver(items => {

100		items.forEach(item => {
101			root.style.setProperty( '--after-header-height', Math.ceil( item.contentRect.height ) + 'px' );
102		});
103	});
104
105	var navAfterHeaderResize = new ResizeObserver(items => {
106		items.forEach(item => {
107			root.style.setProperty( '--nav-after-header-height', Math.ceil( item.contentRect.height ) + 'px' );
108		});
109	});
110
111	var onReady = function() {
112		// Must be before IntersectionObserver so headerFullResize fires before header-stuck class is added.
113		if ( beforeHeader ) {
114			beforeHeaderResize.observe( beforeHeader );
115		}
116
117		if ( header ) {
118			headerResize.observe( header );
119		}
120
121		if ( afterHeader ) {
122			afterHeaderResize.observe( afterHeader );
123		}
124
125		if ( navAfterHeader ) {
126			navAfterHeaderResize.observe( navAfterHeader );
127		}
128
129		if ( hasSticky ) {
130			isTop.observe( beforeHeader ? beforeHeader : skipLink );
131		}
132
133		if ( alignFullFirst ) {
134			/**
135			 * This is only for styling content containers when the first block is full aligned.
136			 * This is likely added via PHP, the JS is a fallback.
137			 */
138			body.classList.add( 'has-alignfull-first' );
139		}
140
141		if ( alignFullEl ) {
142			// This is added to page-header in PHP.
143			alignFullEl.classList.add( 'is-alignfull-first' );
144		}
145	};
146
147	return onReady();
148
149} )();