https://www.odellbrewing.com/wp-content/themes/enfold-child/js/modules/SubNav.js

1var pageShouldAllowScroll = true
2
3class SubNav {
4    constructor() {
5        this.navbar = jQuery('.subnav.desktop');
6        this.mobileNav = jQuery('.subnav.mobile');
7        this.navbarGear = jQuery('.av-submenu-container');
8        this.sticky = jQuery(".sticky-menu");
9        this.anchors = jQuery('a[href^="#"]');
10        this.customOffsetSm = 300;
11        this.customOffsetLg = 120;
12        this.customOffsetBreakX = 768;
13        this.activateMenuItemGear();
14        this.events();
15        this.addClassScrollMenu();
16    }
17
18    events() {
19        this.navbar.find('.menu-item a').on('click', this.activateMenuItem.bind(this));
20        this.mobileNav.find('.menu-item a').on('click', this.activateMenuItemMobile.bind(this));
21        this.anchors.on('click', this.smoothScroll.bind(this));
22        if(jQuery('.location-detail').length > 0) {
23            this.activeFirstElementNavDetail();
24        }
25
26    }
27
28
29    addClassScrollMenu() {
30        var lastId;
31        var topMenu = jQuery("#menu-desktop");
32        var subNavSticky = jQuery(".sticky-menu");
33        var extraSpace = subNavSticky.length > 0 ? (subNavSticky.outerHeight() + 15) : 15
34        var topMenuHeight = topMenu.outerHeight() + extraSpace;
35        // All list items
36        var menuItems = topMenu.find("a");
37        // Anchors corresponding to menu items
38        var scrollItems = menuItems.map(function(){
39            var anchor = jQuery(this).attr("href");
40            if(/^#/.test(anchor)) {
41                var item = jQuery(anchor);
42                if (item.length) { return item; }
43            }
44        });
45
46        // Setting active class to menu items of topMenu case: calendar page
47        topMenu.find('.menu-item a').on('click', function (e){
48            pageShouldAllowScroll = false
49            var link = jQuery(e.target)
50            if(link.length > 0) {
51                topMenu.find('.menu-item a').removeClass('active-menu-item');
52                link.addClass('active-menu-item');
53            }
54            setTimeout(() => {
55                pageShouldAllowScroll = true
56            }, 4000)
57        });
58
59        // Bind to scroll
60        jQuery(window).scroll(function(){
61            // Get container scroll position
62            var fromTop = jQuery(this).scrollTop() + topMenuHeight;
63            
64            // Get id of current scroll item
65            var cur = scrollItems.map(function(){
66            if (jQuery(this).offset().top < fromTop)
67                return this;
68            });
69            // Get the id of the current element
70            cur = cur[cur.length-1];
71            var id = cur && cur.length ? cur[0].id : "";
72            if (pageShouldAllowScroll) {
73                if (lastId !== id) {
74                    lastId = id;
75                    // Set/remove active class
76                    menuItems.removeClass('active-menu-item')
77                    menuItems.filter("[href='#"+id+"']").addClass("active-menu-item");
78                }             
79            }
80        });
81    }
82
83    smoothScroll(event) {
84        event.preventDefault();
85        var link = jQuery(event.target);
86        var hash = link.attr('href');
87        var target_offset = jQuery(hash).offset() ? jQuery(hash).offset().top : 0;
88        var adminBarOffset = jQuery("#wpadminbar").length > 0 ? jQuery("#wpadminbar").height() : 0;
89        //change this number to create the additional off set        
90        var customOffset = (window.innerWidth < this.customOffsetBreakX) ? this.customOffsetSm : this.customOffsetLg;
91        if(target_offset !== 0){
92            jQuery('html, body').animate({scrollTop: (target_offset - adminBarOffset - customOffset)}, 1000);
93        }
94    }
95
96    activateMenuItemGear(){
97        if (this.navbarGear.length > 0) {
98            const href = window.location.href;
99            const anchor = document.querySelector(`.av-submenu-container .menu-item a[href="`+ href +`"]`);
100            if(anchor) {
101                anchor.classList.add('active-menu-item');
102            }
103        }
104    }
105
106    activeFirstElementNavDetail(){
107        this.navbar.find('.menu-item a').first().addClass('active-menu-item');
108        this.mobileNav.find('.menu-item a').first().addClass('active-menu-item');
109        this.mobileNav.find('.selected-item').text(this.navbar.find('.menu-item a').first().text());
110    }
111
112    activateMenuItem(e) {
113        pageShouldAllowScroll = false
114
115        if (!pageShouldAllowScroll) {
116            this.navbar.find('.menu-item a').removeClass('active-menu-item');
117            var link = jQuery(e.target).closest('a');
118            var textLink = link.text();
119    
120            // showing selected item on mobile
121            this.mobileNav.find('.selected-item').text(textLink);
122            // Assigning active item on secondary location nav.
123    
124            var idLink = link.attr('data-id');
125            link.addClass('active-menu-item');
126            this.navbar.find('a[data-id="'+idLink+'"]').addClass('active-menu-item');
127        }
128        
129        setTimeout(() => {
130            pageShouldAllowScroll = true
131        }, 2000)
132    }
133
134
135    activateMenuItemMobile(e) {
136        this.mobileNav.find('.menu-item a').removeClass('active-menu-item');
137        this.navbar.find('.menu-item a').removeClass('active-menu-item');
138        var link = jQuery(e.target).closest('a');
139        var textLink = link.text();
140
141        // showing selected item on mobile
142        this.mobileNav.find('.selected-item').text(textLink);
143
144        // Assigning active item on secondary location nav.
145        var idLink = link.attr('data-id');
146        link.addClass('active-menu-item');
147        this.navbar.find('a[data-id="'+idLink+'"]').addClass('active-menu-item');
148    }
149}
150
151export default SubNav;