https://growthbadger.com/wp-content/themes/jg-media/js/jg-nav.js?ver=1.0.29

1/**
2 *
3 * Notes:
4 *
5 * The close function jgVariables.popperClose lives in jg-script.js
6 *
7 */
8
9(function($) {
10
11    jgVariables.mobileNavBreakpoint = jgVariables.breakpoints.lg;
12
13    //mobile nav trigger
14    jgVariables.mobileNavTrigger = function() {
15
16        var navTrigger = jQuery('#mobile-nav-trigger');
17        html = jQuery('html');
18        mobileNav = jQuery('#mobile-nav-wrapper');
19
20        if (navTrigger) {
21
22            navTrigger.click(function() {
23
24                html.toggleClass('mobile-nav-open');
25
26                if (html.hasClass('mobile-nav-open')) {
27
28                    mobileNav.focus();
29                    mobileNav.click();
30
31                } else {
32
33                    //close the open accordions
34                    // jQuery('.jg-mega-nav-subcategory-menu, .sub-menu').hide();
35                    // jQuery('.fa-minus').addClass('fa-plus').removeClass('fa-minus');
36
37                }
38
39            });
40
41        }
42
43    }
44
45    //mobile & desktop nav
46    jgVariables.navSwitch = function() {
47
48        if (document.documentElement.clientWidth < jgVariables.breakpoints.lg) {
49
50            //put the desktop nav into mobile
51            jQuery('#mobile-nav').append(jQuery('#desktop-nav').contents());
52            jQuery('#mobile-mega-nav').append(jQuery('#jg-mega-nav-outer'));
53
54        } else {
55
56            //put the mobile nav into desktop
57            jQuery('#desktop-nav').append(jQuery('#mobile-nav').contents());
58            jQuery('#mega-nav-section').append(jQuery('#mobile-mega-nav').contents());
59            jQuery('html').removeClass('mobile-nav-open');
60
61        }
62
63    }
64
65    //login drop down
66    jgVariables.loginDropDown = function() {
67
68        var target = jQuery('#menu-item-login'),
69            popSelector = 'login-pop',
70            pop = jQuery('#' + popSelector);
71
72        if (target) {
73
74            if (typeof(Popper) !== 'undefined' && target.length > 0) {
75
76                var settings = {
77
78                    placement: 'auto',
79                    eventsEnabled: false,
80
81                    onCreate: function() {
82
83                        console.log('JG: login pop created');
84
85                    }
86
87                }
88
89                if (jgVariables.viewPortWidth < jgVariables.mobileNavBreakpoint) {
90
91                    settings.placement = 'right';
92
93                }
94
95                jgVariables.loginPop = new Popper(target, pop, settings);
96
97                target.on('click', function(){
98
99                    //hide other pops
100                    jQuery('.pop').not(this).hide();
101                    pop.toggle();
102                    jgVariables.loginPop.update();
103
104                });
105
106                // target.on('blur', function(e){
107
108
109                //     pop.toggle();
110
111                // });
112
113            } else {
114
115                console.log('JG: popper not available when jgVariables.loginDropDown function called or target not found');
116            }
117
118        }
119
120    }
121
122    //currency switcher
123    jgVariables.currencySwitcher = function() {
124
125        var currencySwitches = jQuery('.jg-change-currency');
126
127        if (currencySwitches) {
128
129            currencySwitches.each(function(index) {
130
131                var target = jQuery(this),
132                    popSelector = 'jg-currency-switch-wrapper', //must be an id
133                    pop = jQuery('#' + popSelector);
134
135                if (typeof(Popper) !== 'undefined' && target.length > 0) {
136
137                    jgVariables.currencyPop = jgVariables.currencyPop || {};
138
139                    var settings = {
140
141                        placement: 'auto',
142                        eventsEnabled: false,
143
144                        onCreate: function() {
145
146                            console.log('JG: currency pop created');
147
148                        }
149
150                    }
151
152                    if (jgVariables.viewPortWidth < jgVariables.mobileNavBreakpoint) {
153
154                        settings.placement = 'right';
155
156                    }
157
158                    jgVariables.currencyPop[index] = new Popper(target, pop, settings);
159
160                    target.on('click', function(){
161
162                        jQuery('.pop').not(this).hide();
163                        pop.toggle();
164                        jgVariables.currencyPop[index].update();
165                        console.log('JG: currencyPop ' + index + ' updated');
166
167                    });
168
169                    // target.on('blur', function(e){
170
171                    //     debugger;
172                    //     pop.toggle();
173
174
175                    // });
176
177                } else {
178
179                    console.log('JG: popper not available when currencySwitcher function called or target not found');
180                }
181
182            })
183
184        }
185
186    }
187
188    jgVariables.megaNav = function() {
189
190        if (document.getElementById('jg-mega-nav-outer')) {
191
192            //MOBILE
193
194            //detect if the nav trigger is visible
195            if (jQuery('#mobile-nav-trigger').is(':visible')) {
196
197                if(jgVariables.megaNavState == 'mobile') {
198
199                    return;
200
201                }
202
203                console.log('JG: MOBILE mega nav triggered');
204
205                //add expanding markup to editorial menus
206                var expandMarkup = '<div class="mega-nav-mobile-expand"><i class="fas fa-plus"></i></div>';
207                jQuery('#jg-mega-nav').find('.menu-item-has-children > a').first().after(expandMarkup);
208
209                //expanding nav
210                jQuery('.mega-nav-mobile-expand').click(function() {
211
212                    //reveal the top level menu items
213                    // console.log(jQuery(this).siblings('.jg-mega-nav-subcategory-menu, .sub-menu').first());
214
215                    jQuery(this).siblings('.jg-mega-nav-subcategory-menu, .sub-menu').first().slideToggle();
216                    jQuery(this).find('i').toggleClass('fa-plus fa-minus');
217
218                });
219
220                //remove the desktop event listeners
221                if(jgVariables.megaNavPopper){
222                    jgVariables.megaNavPopper.destroy();
223                }
224
225                var menuItems = jQuery('#jg-mega-nav>ul>li'),
226                navWrapper = jQuery('#jg-mega-nav-wrapper');
227
228                //remove desktop event listeners
229                menuItems.unbind('mouseenter');
230                navWrapper.unbind('mouseleave');
231
232                jgVariables.megaNavState = 'mobile';
233
234            }
235
236            //DESKTOP
237            else {
238
239                if(jgVariables.megaNavState == 'desktop') {
240
241                    return;
242
243                }
244
245                console.log('JG: DESKTOP mega nav triggered');
246
247                var menuContent,
248                    menuContentClone,
249                    popper,
250                    navWrapper = jQuery('#jg-mega-nav-wrapper'),
251                    navWindow = document.getElementById('jg-mega-nav-window'),
252                    navWindowContent = jQuery('#jg-mega-nav-window-content'),
253                    menuItems = jQuery('#jg-mega-nav>ul>li'), //the first list item is the visible menu
254                    arrow = document.getElementById('jg-mega-nav-arrow'),
255                    popperOptions = {
256
257                        eventsEnabled: false,
258                        position: 'bottom',
259
260                    };
261
262                    //add the ability to tab to the menu items
263                    // menuItems.each(function(){jQuery(this).attr('tabindex', 0)})
264
265                    menuItems.on('mouseenter', function(){
266
267                    console.log('JG: mega nav hover');
268
269                    //if an editorial menu
270                    if(jQuery(this).parent().hasClass('editorial-menu')){
271
272
273                        //grab the top level list only (sub menus are nested)
274                        menuContent = jQuery(this).find('ul').first();
275
276                    }
277                    //else a category menu
278                    else {
279
280                        //grab all the list items (taxonomy menus are at the top level)
281                        menuContent = jQuery(this).find('ul');
282
283                    }
284
285                    if (menuContent.length > 0) {
286
287                        menuContentClone = menuContent.clone();
288                        navWindowContent.html(menuContentClone);
289                        navWindow.classList.add('open');
290
291                        jgVariables.megaNavPopper = new Popper(this, navWindow, popperOptions);
292
293                    } else {
294
295                        navWindow.classList.remove('open');
296
297                        if (popper) {
298
299                            jgVariables.megaNavPopper.destroy();
300
301                        }
302                    }
303
304                    });
305
306                    navWrapper.on('mouseleave', function(){
307
308                        navWindow.classList.remove('open');
309
310                        if (popper) {
311
312                            jgVariables.megaNavPopper.destroy();
313
314                        }
315
316                    });
317
318
319                //remove the mobile event listeners and DOM elements
320                jQuery('.mega-nav-mobile-expand').unbind('click');
321                jQuery('.mega-nav-mobile-expand').remove();
322
323                jgVariables.megaNavState = 'desktop';
324
325
326            }
327
328            jQuery('#jg-mega-nav-outer').show();
329
330        }
331
332    }
333
334    jQuery(document).ready(function() {
335
336        //fire up the mobile nav
337        jgVariables.mobileNavTrigger();
338
339        //put the nav content in the right place
340        jgVariables.navSwitch();
341
342        //add the tooltip to the login menu item
343        jgVariables.loginDropDown();
344
345        //currency switcher
346        jgVariables.currencySwitcher();
347
348        //fire up the mega nav
349        jgVariables.megaNav();
350
351        jQuery('#mobile-nav-wrapper').show();
352
353
354    });
355
356})(jQuery);