https://www.hopevillagems.org/wp-content/themes/jupiter/header-bui…/mkhb-navigation-responsive.js?ver=6.12.1

1/*
2 * This library is written by menu-sidebar.js as referrence with some modification for the selector name.
3 * And also some lines are removed because the functionallities are not needed yet.
4 *
5 * Source: components/layout/header/menu-sidebar.js
6 */
7(function($) {
8    'use strict';
9
10    window.MK = window.MK || {};
11    MK.HB = MK.HB || {};
12
13    $('.mkhb-navigation-resp__arrow').stop(true).on('click', function(e) {
14        e.preventDefault();
15        var $this = $(this);
16        if ($this.hasClass('mkhb-navigation-resp__sub-closed')) {
17            $this.siblings('ul').slideDown(450).end().removeClass('mkhb-navigation-resp__sub-closed').addClass('mkhb-navigation-resp__sub-opened');
18        } else {
19            $this.siblings('ul').slideUp(450).end().removeClass('mkhb-navigation-resp__sub-opened').addClass('mkhb-navigation-resp__sub-closed');
20        }
21    });
22
23    var $window = $(window);
24    var $body = $('body');
25    var $resMenuWrap = $('.mkhb-navigation-resp__wrap');
26    var $resMenuLink = $('.mkhb-navigation-resp__container');
27    var $resSubMenuLink = $('.mkhb-navigation-resp__arrow');
28    var $bottomCorner = $( '.bottom-corner-btns.js-bottom-corner-btns' );
29
30    // Flags.
31    var hasResMenu = ($resMenuWrap.length > 0);
32
33    // Initial window and screen height.
34    var windowHeight = $window.height();
35    var screenHeight = screen.height;
36
37    // This library run on Tablet or Mobile whatever the nav style selected here. (4 cases).
38    if (!hasResMenu) return;
39
40    function toggleResMenu(e) {
41        e.preventDefault();
42        var container = $(this);
43        var $this = container.parent();
44        var device = $this.data( 'device' );
45        // This function only for tablet or mobile.
46        if ( device === 'desktop' ) {
47            return;
48        }
49        var $parentID = $this.parent().attr('id');
50        var $headerInner = $this.parents('header');
51        var $resMenu = $headerInner.find('#' + $parentID + '-wrap.mkhb-navigation-resp__wrap');
52        var searchBox = $('.mkhb-navigation-resp__searchform .text-input');
53        var adminBarHeight = $('#wpadminbar').height(); /* Fix AM-1918 */
54        var fixedStickyActive = false;
55
56        // Get current scroll position. Used to fix missing header issue after
57        // opening burger menu. Only in Sticky with disabled overlapping setting.
58        var $stickyHeader = $this.parents('.mkhb-sticky');
59        var currentScroll = 0;
60        if ( $stickyHeader.length > 0 ) {
61            var currentScroll = $window.scrollTop();
62            fixedStickyActive = true;
63        }
64
65        var $fixedHeader = $this.parents('.mkhb-fixed');
66        if ( $fixedHeader.length > 0 ) {
67            fixedStickyActive = true;
68        }
69
70        // Close other burger navigations when current burger menu is active.
71        var checkContainer = $( '.mkhb-' + device );
72        var checkRespMenu = checkContainer.find( '.mkhb-navigation-resp' );
73        if ( checkRespMenu.length > 0 ) {
74            // Close only other opened burger navigations one by one.
75            checkRespMenu.each(function(){
76                var $menu = $(this);
77                var $parentMenu = $menu.parent().attr('id');
78                if ( $parentID == $parentMenu ) {
79                    return;
80                }
81                var $menuWrap = $headerInner.find( '#' + $parentMenu + '-wrap.mkhb-navigation-resp__wrap' );
82                if ( $body.hasClass( 'mkhb-navigation-resp--opened-' + $parentMenu ) ) {
83                    $menu.removeClass('is-active').find('.mkhb-navigation-resp__container').removeClass('fullscreen-active');
84                    $body.removeClass('mkhb-navigation-resp--opened-' + $parentMenu).addClass('mkhb-navigation-resp--closed-' + $parentMenu).trigger('mkhb-navigation-resp--closed-' + $parentMenu);
85                    $menuWrap.hide();
86                }
87            });
88
89            // Scroll to previous position after closing the nav.
90            if ( currentScroll > 0 ) {
91                window.scrollTo(0, currentScroll);
92            }
93        }
94
95        if ($body.hasClass('mkhb-navigation-resp--opened-' + $parentID)) {
96            $this.removeClass('is-active').find('.mkhb-navigation-resp__container').removeClass('fullscreen-active');
97            $body.removeClass('mkhb-navigation-resp--opened-' + $parentID).addClass('mkhb-navigation-resp--closed-' + $parentID).trigger('mkhb-navigation-resp--closed-' + $parentID);
98            $resMenu.hide();
99            if ( fixedStickyActive ) {
100                $bottomCorner.show();
101            }
102        } else {
103            $this.addClass('is-active').find('.mkhb-navigation-resp__container').addClass('fullscreen-active');
104            $body.removeClass('mkhb-navigation-resp--closed-' + $parentID).addClass('mkhb-navigation-resp--opened-' + $parentID).trigger('mkhb-navigation-resp--opened-' + $parentID);
105            $resMenu.show();
106            if ( fixedStickyActive ) {
107                $bottomCorner.hide();
108            }
109        }
110
111        // Handle scroll issue if burger menu is higher dan viewport.
112        stickyFixedScrollable( $this, $resMenu );
113
114        // For iPhone 5 focus bug , remove search box focused class.
115        if(searchBox.hasClass('input-focused')){
116            searchBox.removeClass('input-focused');
117        }
118
119    }
120
121    $resMenuLink.each(function() {
122        $(this).on('click', toggleResMenu);
123    });
124

125    // Handle responsive submenu click action.
126    function toggleResSubMenu(e) {
127        var $this = $(this);
128
129        // Responsive menu container.
130        var respMenu = $this.parents( '.mkhb-navigation-resp__wrap' );
131        var respIDRaw = respMenu.attr( 'id' );
132        var respID = respIDRaw.replace( '-wrap', '' );
133
134        // Responsive menu button.
135        var respButton = $( '#' + respID );
136
137        // Handle scroll issue if burger menu is higher dan viewport.
138        // Use setTimeout to wait the resp menu height being updated.
139        setTimeout( function() {
140            stickyFixedScrollable( respButton, respMenu );
141        }, 300);
142    }
143
144    // Submenu actions handler.
145    $resSubMenuLink.each(function() {
146        $(this).on('click', toggleResSubMenu);
147    });
148
149    /**
150     * Set resp menu scroll if burger menu is higher dan viewport.
151     *
152     * @since 6.0.3
153     *
154     * @param  {object} respButton Responsive button selector object.
155     * @param  {object} respMenu   Responsive container selector object.
156     */
157    function stickyFixedScrollable( respButton, respMenu ) {
158        // Find the sticky and fixed header.
159        var stickyHeader = respButton.parents('.mkhb-sticky');
160        var fixedHeader = respButton.parents('.mkhb-fixed');
161
162        // Get header container height.
163        var headerContHeight = 0;
164        if ( stickyHeader.length > 0 ) {
165            headerContHeight = stickyHeader.height();
166        } else if ( fixedHeader.length > 0 ) {
167            headerContHeight = fixedHeader.height();
168        }
169
170        // Run only if Sticky or Fixed header height is more than 0.
171        if ( headerContHeight < 1 ) {
172            return;
173        }
174
175        // Reset resp menu height.
176        respMenu.css({ 'height': 'auto' });
177
178        // Set all needed height.
179        var adminBarHeight = $('#wpadminbar').height();
180        var respMenuHeight = respMenu.height();
181        var headerHeight = adminBarHeight + headerContHeight + respMenuHeight;
182        var winHeight = window.innerHeight ? window.innerHeight : windowHeight;
183        if ( headerHeight > winHeight ) {
184            var newRespHeight = winHeight - adminBarHeight - headerContHeight;
185            respMenu.css({
186                'height': newRespHeight + 'px',
187            }).children().css({
188                'height': '100%',
189                'overflow': 'scroll',
190            });
191        } else {
192            respMenu.css({
193                'height': 'auto',
194            }).children().removeAttr('style');
195        }
196    }
197
198    var setResMenuHeight = function() {
199        var height = $window.height() - MK.HB.val.offsetHeaderHeight(0);
200        $resMenuWrap.css('max-height', height);
201    };
202
203    // Check if device virtual keyboard is active.
204    var isVirtualKeyboard = function() {
205        var currentWindowHeight = $window.height();
206        var currentScreenHeight = screen.height;
207        var searchBox = $('.mkhb-navigation-resp__searchform .text-input');
208        var searchBoxIsFocused = false;
209
210        // For iPhone 5 focus bug , add class for detect focus state.
211        searchBox.on('touchstart touchend', function(e) {
212            searchBox.addClass('input-focused');
213        });
214
215        searchBoxIsFocused = (searchBox.is(':focus') || searchBox.hasClass("input-focused"));
216
217        if ($body.hasClass('[class^="mkhb-navigation-resp--opened"]') && searchBoxIsFocused && currentScreenHeight == screenHeight && currentWindowHeight != windowHeight) {
218            return true;
219        } else {
220            return false;
221        }
222    };
223
224    var hideResMenu = function hideResMenu() {
225        if (MK.HB.utils.isResponsiveMenuState()) {
226
227            /*
228             * When search box in responsive menu is focused , window resize fired but at this time
229             * responsive menu should be open.
230             */
231            if (!isVirtualKeyboard()) {
232                // Hide toggled menu and its states.
233                if ($body.hasClass('[class^="mkhb-navigation-resp--opened"]')) {
234                    $resMenuLink.filter('.is-active').trigger('click');
235                }
236                // Hide menu wrapper.
237                $resMenuWrap.hide();
238
239            }
240        }
241    };
242
243    $resMenuWrap.on('click', 'a', hideResMenu);
244
245    /**
246     * Handle responsive navigation reposition on overlapping and sticky header.
247     * - Overlapping: Set nav container position into absolute.
248     * - Sticky: Set nav container position into fixed.
249     *
250     * @since 6.0.0
251     */
252    var headerOverlap = $( '.mkhb-overlap' );
253    var headerFixed = $( '.mkhb-fixed' );

254    var headerSticky = $( '.mkhb-sticky' );
255    var hasOverlap = ( headerOverlap.length > 0 );
256    var hasFixed = ( headerFixed.length > 0 );
257    var hasSticky = ( headerSticky.length > 0 );
258    var renderedStyle = []; // Used to save repositioned nav responsive container.
259
260    // Only run this code if the header is overlapping the content or sticky header is active.
261    if ( ! hasOverlap && ! hasSticky && ! hasFixed ) {
262        return;
263    }
264
265    /**
266     * Reposition responsive navigation process.
267     * Device, workspace, and top position is important to set container position.
268     */
269    var repositionRespNav = function repositionRespNav() {
270        var parent = $( '.hb-devices' );
271        var container = $( this );
272        var device = container.data( 'device' );
273        var workspace = container.data( 'workspace' );
274        var fixed = container.hasClass( 'mkhb-fixed--filled' );
275        var combine = workspace + '-' + device;
276        var top = $( '#wpadminbar' ).height();
277        top = ( top == null ) ? 0 : top;
278
279        // Only run the code on tablet or mobile.
280        if ( device === 'desktop' || renderedStyle.indexOf( combine ) > -1 ) {
281            return;
282        }
283
284        // Don't run the code if the height is less than 0.
285        var height = container.find( '.mkhb-device-container' ).height();
286        if ( height <= 0 ) {
287            return;
288        }
289
290        // Set up custom style.
291        var style = {};
292        var target = '';
293        if ( workspace === 'normal' && ! fixed ) {
294            style['position'] = 'absolute';
295            style['height'] = 'auto';
296            style['top'] = height + 'px';
297            target = '.mkhb-navigation-resp__' + workspace + '.mkhb-navigation-resp__' + device;
298        } else {
299            style['position'] = 'fixed';
300            style['height'] = 'auto';
301            style['top'] = (top + height) + 'px';
302            target = '.mkhb-navigation-resp__' + workspace + '.mkhb-navigation-resp__' + device;
303        }
304
305        // Apply custom style.
306        if ( ! style || ! target ) {
307            return;
308        }
309
310        parent.find( target ).css( style );
311        renderedStyle.push( combine );
312    }
313
314    /**
315     * Decide should we reposition the responsive nav container or not.
316     */
317    var setPositionRespNav = function setPositionRespNav() {
318        if ( renderedStyle.length < 4 ) {
319            var headerContainer = '';
320
321            if ( hasOverlap ) {
322                $( '.mkhb-overlap' ).each( repositionRespNav );
323            }
324
325            if ( hasFixed ) {
326                $( '.mkhb-fixed' ).each( repositionRespNav );
327            }
328
329            if ( hasSticky ) {
330                $( '.mkhb-sticky' ).each( repositionRespNav );
331            }
332        }
333    }
334
335    $window.on( 'load', setPositionRespNav );
336    $window.on( 'resize', setPositionRespNav );
337    if ( hasSticky ) {
338        $window.on( 'scroll', setPositionRespNav );
339    }
340}( jQuery ));