https://www.ticasino.com/assets/js/boilerplate-nav.js?v=252

1jQuery(function($) {
2
3    var doc = $(document),
4        win = $(window),
5        body = $(document.body);
6
7
8    // ======================================================================
9    // Mobile Nav
10    // ======================================================================
11    function mobileNav() {
12        const $nav = $('.nav-main-mobile');
13
14        $('.nav-main-mobile__item--parent > a').click(function(e){
15            e.preventDefault();
16            $navItem = $(this).closest('.nav-main-mobile__item');
17
18            $nav.toggleClass('has-active-item');
19            $navItem.toggleClass('active');
20        });
21
22        body.on('click', '.toggle-nav-main', function(e) {
23            e.preventDefault();
24            body.toggleClass('nav-main--active');
25            $nav.removeClass('has-active-item search-focus');
26            $('.nav-main-mobile__item').removeClass('active');
27        });
28
29        // mobile search
30        $('.searchform--nav-mobile .searchform__input').focus(function(){
31            $nav.addClass('search-focus');
32        });
33
34        $('.searchform--nav-mobile .searchform__close').click(function(e){
35            e.preventDefault();
36            $nav.removeClass('search-focus');
37        });
38
39
40        timeout_resize = null;
41        win.resize(function() {
42            window.clearTimeout(timeout_resize);
43            timeout_resize = window.setTimeout(function(){
44                body.removeClass('nav-main--active');
45                $nav.removeClass('has-active-item search-focus');
46                $('.nav-main-mobile__item').removeClass('active');
47            }, 200);
48        });
49    }
50    mobileNav();
51
52
53
54
55    // ======================================================================
56    // Navigation - Click based
57    // ======================================================================
58    function boilerplateNav()
59    {
60        var doc = ('undefined' === typeof(doc)) ? $(document) : doc,
61            win = ('undefined' === typeof(win)) ? $(window) : win,
62            body = ('undefined' === typeof(body)) ? $(document.body) : body,
63            nav_main = $('.nav-main').first(),
64            toplevels = nav_main.find('.nav-main__item'),
65            submenus = nav_main.find('.nav-main__item__submenu'),
66            winWidth = window.innerWidth,
67            timeout_resize = null;
68
69        function doResetNav()
70        {
71            if (winWidth != window.innerWidth) {
72                body.removeClass('nav-main--active');
73                body.removeClass('nav-main-desktop-active');
74                toplevels.removeClass('nav-main__item--active');
75                submenus.css('display', '');
76                winWidth = window.innerWidth;
77            }
78        }
79
80        doc.on('click', function(e) {
81            if (!$(e.target).closest(toplevels).length) {
82                toplevels.removeClass('nav-main__item--active');
83
84                if ( !body.hasClass('nav-main--active') ) {
85                    // mobile nav is not active or is desktop view
86                    body.removeClass('nav-main-desktop-active');
87                }
88            }
89        });
90
91        body
92            .on('click', '.nav-main__item a', function(e) {
93                var target = $(e.target);
94                activateNav(target, e);
95            });
96            // .on('mouseenter', '.nav-main__item a', function(e) {
97            //   if ($(window).width() > 728) {
98            //     var target = $(e.target);
99            //     activateNav(target, e);
100            //   }
101            // })
102            // .on('mouseleave', '.container--site-header', function(e) {
103            //   console.log('mouseout')
104            //   doc.trigger('click')
105            // });
106            
107            /*
108            Might get used at some point but I'm advocating for an "on click" nav only - they want hover, but it's iffy for accessibility
109            */
110
111            
112        function activateNav(target, event) {
113            if ( !target.closest(submenus).length ) {
114                toplevel = target.closest(toplevels);
115
116                if ( toplevel.find(submenus).length ) {
117                    event.preventDefault();
118
119                    if ( !body.hasClass('nav-main--active') ) {
120                        // mobile nav is not active or is desktop view
121                        
122                        // do overlay
123                        if ( !body.hasClass('nav-main-desktop-active') ) {
124                            body.addClass('nav-main-desktop-active');
125                        } else if ( toplevel.hasClass('nav-main__item--active') ) {
126                            body.removeClass('nav-main-desktop-active');
127                        }
128
129                        // remove active class from all top-levels
130                        toplevels.not(toplevel).removeClass('nav-main__item--active');
131                    } else {
132                        // mobile nav is active
133                        toplevel.find(submenus).slideToggle(300);
134                    }
135
136                    $(toplevel).toggleClass('nav-main__item--active');
137                }
138            }
139        }
140
141        win.resize(function() {
142            window.clearTimeout(timeout_resize);
143            timeout_resize = window.setTimeout(doResetNav, 200);
144        });
145
146    }
147    boilerplateNav();
148
149
150
151    // ======================================================================
152    // Header Search
153    // ======================================================================
154    function headerSearch() {
155        const $searchMega = $('.header-search-mega');
156
157        $('.header-search-toggle').click(function(){
158            body.toggleClass('header-search-active');
159            $searchMega.toggleClass('active');
160            $searchMega.find('input[type=text]').focus()
161        });
162
163        doc.on('click', function(e) {
164            if ( !e.target.closest('.header-search-toggle') && !e.target.closest('.header-search-mega') ) {
165                body.removeClass('header-search-active');
166                $searchMega.removeClass('active');
167            }
168        });
169
170        win.resize(function() {
171            window.clearTimeout(timeout_resize);
172            timeout_resize = window.setTimeout(function(){
173                body.removeClass('header-search-active');
174                $searchMega.removeClass('active');
175            }, 200);
176        });
177    }
178    headerSearch();
179
180
181
182
183    // ======================================================================
184    // Mega Menu things
185    // ======================================================================
186    function megaMenuItems(){
187
188        $megaMenus = $('.mega-menu');
189
190        megaInitialContent();
191
192        $('.mega-menu__nav-item a').mouseenter(function(){
193            $thisItem = $(this).closest('.mega-menu__nav-item');
194
195            if ( !$thisItem.hasClass('active') ) {
196                megaGetSetContent($thisItem);
197            }
198        });
199
200        function megaGetSetContent($navItem) {
201            // get the content
202            $thisMegaMenu = $navItem.closest('.mega-menu');
203            itemContent = $navItem.find('.item-content__content').html();

204            itemImg = $navItem.find('.item-content__img').html();
205
206            // nav item active class
207            $thisMegaMenu.find('.mega-menu__nav-item').removeClass('active');
208            $navItem.addClass('active');
209
210            // set the content
211            $thisMegaMenu.find('.nav-content__content').html(itemContent);
212            $thisMegaMenu.find('.nav-content__img-wrap').html(itemImg);
213        }
214
215        function megaInitialContent() {
216            $megaMenus.each(function() {
217                $firstItem = $(this).find('.mega-menu__nav-item').first();
218                megaGetSetContent($firstItem);
219            });
220        }
221
222    }
223    megaMenuItems();
224
225});