https://creativetribes.co/wp-content/themes/jupiter/header-builder/includes/assets/js/mkhb-render.js

1/*
2 * Common script for HB. For example: Fixed and Sticky Header animation.
3 */
4( function( $ ) {
5	// Set common variables.
6	var windowSel = $( window );
7	var bodySel = $( 'body' );
8	var fixedSel = $( '.mkhb-fixed' );
9	var stickySel = $( '.mkhb-sticky' );
10
11	// Used to check if responsive burger menu is active on normal header or not.
12	var normalRespNav = $( '.mkhb-navigation-resp__normal' );
13	// Used to check if responsive burger menu is active on sticky header or not.
14	var stickyRespNav = $( '.mkhb-navigation-resp__sticky' );
15
16	var windowHeight = windowSel.height();
17	// adminBarHeight value will be updated after window load, check initialAction().
18	var adminBarHeight = 0;
19
20	/**
21	 * HELPERS LIST
22	 */
23
24	// FH - Get Header offset.
25	function mkhbGetOffset( offset, device ) {
26		var deviceEl = $( '.mkhb-' + device );
27		var $deviceHeight = deviceEl.height();
28		var $offset = 0;
29		if ( typeof offset === 'string' && offset !== 'header' ) {
30			$offset = Math.round( ( parseInt( offset ) / 100 ) * windowHeight );
31		} else if ( typeof offset === 'number' ) {
32			$offset = parseInt( offset );
33		}
34
35		// Check if it's NaN or undefined.
36		if ( 0 == $offset || isNaN( $offset ) ) {
37			$offset = $deviceHeight;
38			if ( deviceEl.hasClass( 'mkhb-overlap' ) ) {
39				$offset = deviceEl.children( '.mkhb-device-container' ).height();
40			}
41		}
42
43		// If current main header height is bigger than offset, use it.
44		if ( $deviceHeight > $offset ) {
45			$offset = $deviceHeight;
46		}
47
48		return $offset;
49	}
50
51	// SH - Update admin bar height for Sticky header top position.
52	function mkhbUpdateTop() {
53		adminBarHeight = $( '#wpadminbar' ).height();
54		adminBarHeight = ( adminBarHeight == null ) ? 0 : adminBarHeight;
55	}
56
57	/**
58	 * FUNCTIONS LIST
59	 */
60
61	// FH - Set height of HB container.
62	function mkhbSetFixedHeight( selector ) {
63		selector.each( function( e ) {
64			var thisSel = $( this );
65			if ( ! thisSel.hasClass( 'mkhb-overlap' ) ) {
66				var childHeight = thisSel.children( '.mkhb-device-container' ).height();
67				thisSel.height( childHeight );
68			}
69		});
70	}
71
72	// SH - 1. Slide Down.
73	function mkhbSlideDown( current, offset, device, curHeight ) {
74		var onScroll = function onScroll() {
75			var addOffset = mkhbAddRespNormal( offset, device );
76			if ( windowSel.scrollTop() > addOffset ) {
77			    current.css({ 'top': adminBarHeight });
78			    current.addClass( 'mkhb-sticky--active' );
79			} else {
80				current.css({ 'top': -curHeight });
81				current.removeClass( 'mkhb-sticky--active' );
82				current.find( '.mkhb-search-el__overlay' )
83					.removeClass( 'mkhb-search-el__overlay--show' );
84			    mkhbHideRespBurger();
85			}
86		};
87
88		onScroll();
89		windowSel.on( 'scroll', onScroll );
90	}
91
92	// SH - 2. Lazy.
93	function mkhbLazy( current, offset, device, curHeight ) {
94		var lastScrollPos = 0;
95		var onScroll = function onScroll() {
96			var addOffset = mkhbAddRespNormal( offset, device );
97			var scrollPos = windowSel.scrollTop();
98			if ( scrollPos > addOffset && scrollPos < lastScrollPos ) {
99			    current.css({ 'top': adminBarHeight });
100			    current.addClass( 'mkhb-sticky--active' );
101			} else {
102				current.css({ 'top': -curHeight });
103				current.removeClass( 'mkhb-sticky--active' );
104				current.find( '.mkhb-search-el__overlay' )
105					.removeClass( 'mkhb-search-el__overlay--show' );
106			    mkhbHideRespBurger();
107			}
108			lastScrollPos = scrollPos;
109		};
110
111		onScroll();
112		windowSel.on( 'scroll', onScroll );
113	}
114
115	// SH - Hide/show responsive burger menu.
116	function mkhbHideRespBurger() {
117		// Skip if there is no responsive burger nav exist.
118		if ( stickyRespNav.length <= 0 ) {
119			return;
120		}
121
122		// Skip if there is no responsive burger nav active.
123		if ( $( 'body[class*="mkhb-navigation-resp--opened"]' ) <= 0 ) {
124			return;
125		}
126
127		stickyRespNav.each( function(){
128			// Find the navigation wrapper and navigation burger button.
129			var wrap = $( this );
130			var id = wrap.attr( 'id' ).replace( '-wrap', '' );
131			var current = $( '#' + id ).find( '.mkhb-navigation-resp' );
132
133			// Check if current responsive burger menu is opened. Then close it.
134			if ( bodySel.hasClass( 'mkhb-navigation-resp--opened-' + id ) ) {
135				current.removeClass('is-active').find('.mkhb-navigation-resp__container').removeClass('fullscreen-active');
136				bodySel.removeClass('mkhb-navigation-resp--opened-' + id).addClass('mkhb-navigation-resp--closed-' + id).trigger('mkhb-navigation-resp--closed-' + id);
137				wrap.hide();
138			}
139		} );
140	}
141
142	// NH - Get additional height of responsive burger nav container on normal header.
143	function mkhbAddRespNormal( offset, device ) {
144		// Skip if there is responsive burger nav exist.
145		if ( normalRespNav.length <= 0 ) {
146			return offset;
147		}
148
149		// Skip if there is responsive burger nav is not active.
150		if ( $( 'body[class*="mkhb-navigation-resp--opened"]' ) <= 0 ) {
151			return offset;
152		}
153
154		// Get device real height.
155		var deviceEl = $( '.mkhb-' + device );
156		var deviceHeight = deviceEl.height();
157
158		normalRespNav.each( function(){
159			var current = $( this );
160			var height = current.height();
161			var id = current.attr( 'id' ).replace( '-wrap', '' );
162
163			// Check if current responsive burger menu is opened.
164			if ( bodySel.hasClass( 'mkhb-navigation-resp--opened-' + id ) ) {
165				var newOffset = deviceHeight + parseInt( height );
166				if ( newOffset > offset ) {
167					offset = newOffset;
168				}
169				return offset;
170			}
171		} );
172
173		return offset;
174	}
175
176	/**
177	 * ACTIONS LIST
178	 */
179
180	// Action - FH - Handle all resize action.
181	var resizeHeader = function resizeHeader() {
182		var fixedRsz = $( '.mkhb-fixed' );
183		if ( fixedRsz.length > 0 ) {
184			mkhbSetFixedHeight( fixedRsz );
185		}
186	}
187
188	// Action - FH - Set the height of each devices.
189	if ( fixedSel.length > 0 ) {

190		mkhbSetFixedHeight( fixedSel );
191		windowSel.on( 'resize', resizeHeader );
192	}
193
194	// Actiion - SH - Play the effect for Sticky Header.
195	var initialAction = function initialAction() {
196		if ( stickySel.length > 0 ) {
197			stickySel.each( function( e ) {
198				var current = $( this );
199
200				// Set the offset when the sticky will be displayed.
201				var offset = current.data( 'offset' );
202				var device = current.data( 'device' );
203				offset = mkhbGetOffset( offset, device );
204
205				// Update adminBarHeight value.
206				mkhbUpdateTop();
207
208				// Set the initial position of the sticky menu.
209				var curHeight = current.height();
210				current.css({ 'top': -curHeight });
211
212				var effect = current.data( 'effect' );
213				if ( effect == 'slide-down' ) {
214					mkhbSlideDown( current, offset, device, curHeight );
215				} else if ( effect == 'lazy' ) {
216					mkhbLazy( current, offset, device, curHeight );
217				}
218			});
219		}
220	}
221
222	windowSel.on( 'load', initialAction );
223
224	windowSel.on( 'resize', mkhbUpdateTop );
225
226})( jQuery );