{"version":3,"file":"navigation.js","mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,CAAC;AACD;AACA;AACA,WAAW,kBAAkB;AAC7B,WAAW,kBAAkB;AAC7B,WAAW,kBAAkB;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B;AAC3B,+BAA+B;AAC/B;AACA;AACA,+DAA+D;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA,iGAAiG;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgD;AAChD,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC;AACrC;AACA;AACA,oDAAoD;AACpD;AACA,kCAAkC;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB,iBAAiB;AACjB;AACA;AACA;AACA;AACA,aAAa,EAAE;AACf,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA,WAAW;AACX;AACA","sources":["webpack://nv-base-template/./src/js/features/navigation.js"],"sourcesContent":["/**\r\n * Main Navigation\r\n */\r\n(function () {\r\n    const mainNavigation = new nav({\r\n        toggle: '.js-menu_toggle',\r\n        searchToggle: '.js-menu_tool-search',\r\n        el: '.js-main_menu',\r\n        breakpoint: 1024\r\n    });\r\n})();\r\n/**\r\n * Main Navigation Constructor\r\n * @param {string, selector} el Selector for the parent navigation element\r\n * @param {string, selector} toggle Selector for the nav toggle element\r\n * @param {int}              breakpoint The viewport pixel width where we transision from mobile nav to desktop.\r\n *                           Equal to the last pixel where the mbile view is used\r\n */\r\nfunction nav(config) {\r\n    const self = this;\r\n    self.el = document.querySelector(config.el);\r\n    self.toggle = document.querySelector(config.toggle);\r\n    self.searchToggle = document.querySelector(config.searchToggle);\r\n    //self.searchEl = document.querySelector('.js-header_search');\r\n    self.breakpoint = config.breakpoint;\r\n    self.header = document.querySelector('.js-header');\r\n    self.isMobile = false;\r\n    self.isActive = false; // Is nav open or closed?\r\n    self.isSearchOpen = false; // Is the search menu open or closed?\r\n    self.mainLinks = self.el.getElementsByClassName('js-menu__section__link');\r\n    self.subnavs = Array.from(self.el.querySelectorAll('.js-menu__sublevel'));\r\n    self.navClose = document.querySelector('.js-menu__close'); // The X used for closing the non-mobile nav\r\n\r\n    //var animSubNavIn = new TimelineLite();\r\n    const indicator = document.querySelector('.c-menu__indicator');\r\n    // Initial setup\r\n    self.init = () => {\r\n        // Set the flag for mobile nav\r\n        self.isMobile = checkMobile();\r\n\r\n        //console.log(self.isMobile);\r\n        // Handle closing nav on mouseout\r\n        if (!self.isMobile) {\r\n            self.el.closest(\".js-header\").addEventListener(\"mouseout\", (e) => {\r\n                if (e.target === document.querySelector(\".js-menu__sublevel.is-active\")) {\r\n                    self.close();\r\n                    self.isActive = false;\r\n                  \r\n                    const activeNavs = self.el.querySelectorAll('.c-menu__link_is-active');\r\n\r\n                    if (activeNavs.length > 0) {\r\n                        //console.log(\"toggle\");\r\n                     \r\n                        activeNavs.forEach(x => x.classList.toggle(\"c-menu__link_is-active\"))\r\n                    }\r\n                }\r\n            });\r\n       \r\n        }\r\n\r\n        // Handle nav links with subnav\r\n        const linksSubnav = Array.from(document.querySelectorAll('.js-menu__link--has_subnav')); // Links with subnav\r\n\r\n\r\n        linksSubnav.map((link) => {\r\n            // attach event listeners\r\n            //console.log(link.parentNode)\r\n            const eventArr = self.isMobile ? ['click'] : ['mouseover', 'click'];\r\n            if (!self.isMobile) {\r\n                eventArr.forEach((x) => {\r\n                    link.addEventListener(x, (e) => {\r\n                        if (!self.isActive || !link.classList.contains(\"c-menu__link_is-active\")) {\r\n                            e.preventDefault();\r\n                            const subnav = link.parentNode.querySelector('.js-menu__sublevel');\r\n                            //console.log(subnav)\r\n\r\n                            // On mobile, clicking the link shows subnav\r\n                            if (self.isMobile) {\r\n                                openSubnav(subnav);\r\n                                self.setOpen(); // make sure we set open states\r\n                            } else {\r\n                                const activeNavs = self.el.querySelectorAll('.c-menu__link_is-active');\r\n                              \r\n                                if (activeNavs.length > 0) {\r\n                                    activeNavs.forEach(x => x.classList.toggle(\"c-menu__link_is-active\"))\r\n                                }\r\n                                //console.log('active nav', link);\r\n                                var currentIndex = link.getAttribute('data-index');\r\n                                if (currentIndex == 1) {\r\n                                    indicator.style.marginLeft = '0%';\r\n                                    indicator.style.opacity = 1;\r\n                                }\r\n                                if (currentIndex == 2) {\r\n                                    indicator.style.marginLeft = '20%';\r\n                                    indicator.style.opacity = 1;\r\n                                }\r\n                                if (currentIndex == 3) {\r\n                                    indicator.style.marginLeft = '40%';\r\n                                    indicator.style.opacity = 1;\r\n                                }\r\n                                if (currentIndex == 4) {\r\n                                    indicator.style.marginLeft = '60%';\r\n                                    indicator.style.opacity = 1;\r\n                                }\r\n                                if (currentIndex == 5) {\r\n                                    indicator.style.marginLeft = '80%';\r\n                                    indicator.style.opacity = 1;\r\n                                }\r\n\r\n\r\n                                link.classList.toggle(\"c-menu__link_is-active\")\r\n                                //console.log(subnav.getAttribute('aria-expanded'), \"**\");\r\n                                // On desktop, clicking the link shows subnav or hides it if it's already visible\r\n                                if (subnav.getAttribute('aria-expanded') != 'true') {\r\n              \r\n                                    // close all open subnavs, in case we're switching setcions\r\n                                    self.subnavs.map((subnav) => {\r\n                                        closeSubnav(subnav);\r\n                                    });\r\n\r\n                                    openSubnav(subnav);\r\n                                    self.setOpen(); // make sure we set open states\r\n                                    self.isActive = true;\r\n                                } else {\r\n                                    self.isActive = false;\r\n                                    closeSubnav(subnav);\r\n                                    self.close();\r\n                                    indicator.style.opacity = 0;\r\n                                }\r\n                                if (self.isSearchOpen) {\r\n                                    self.isActive = false;\r\n                                    closeSearch();\r\n                                }\r\n                            }\r\n                        }\r\n                    })\r\n                });\r\n            }\r\n\r\n            /*link.addEventListener(\"mouseover\", (e) => {\r\n                console.log(e.target);\r\n            });*/\r\n        });\r\n    };\r\n\r\n    /**\r\n     * Handle click outside nav to close\r\n     */\r\n    document.addEventListener('mouseover', (e) => {\r\n        if (!e.target.closest('.js-header') && self.isActive) {\r\n            //console.log(e);\r\n            // Hide any open navs\r\n            e.preventDefault;\r\n            self.close();\r\n            //console.log(\"moused over\");\r\n            const activeNavs = self.el.querySelectorAll('.c-menu__link_is-active');\r\n            if (activeNavs.length > 0) {\r\n                activeNavs.forEach(x => x.classList.toggle(\"c-menu__link_is-active\"))\r\n            }\r\n\r\n            // If search is open, close it\r\n            //closeSearch();\r\n        }\r\n    });\r\n\r\n    /**\r\n     * Open the nav (doesn't include search)\r\n     */\r\n    self.setOpen = () => {\r\n        // Add the nav-active class to the head\r\n        self.header.classList.add('nav-active');\r\n        indicator.style.opacity = 1;\r\n\r\n        // Add the active class to the toggle\r\n        //self.toggle.classList.add('is-active');\r\n        \r\n        // Show the nav\r\n        self.el.classList.add('is-active');\r\n\r\n        // Show the nav close icon\r\n        //self.navClose.classList.add('is-visible');\r\n\r\n        self.isActive = true;\r\n    };\r\n\r\n    /**\r\n     * Close the nav (doesn't include search)\r\n     */\r\n    self.close = function () {\r\n        // Remove the nav-active class from the header\r\n        self.header.classList.remove('nav-active');\r\n        // Add the active class to the toggle\r\n        //self.toggle.classList.remove('is-active');\r\n        // Hide the nav\r\n        self.el.classList.remove('is-active');\r\n\r\n        // Hide the nav close icon\r\n        // self.navClose.classList.remove('is-visible');\r\n\r\n        // Reset any explicit styles (nav height etc)\r\n        self.el.removeAttribute('style');\r\n\r\n        indicator.style.opacity = 0;\r\n\r\n        // Remove any active classes on children and set any expanded roles to false\r\n        Array.from(self.el.getElementsByTagName('*')).map((el) => {\r\n            el.classList.remove('is-active');\r\n\r\n            if (el.getAttribute('aria-expanded')) {\r\n                el.setAttribute('aria-expanded', 'false');\r\n            }\r\n        });\r\n\r\n        self.isActive = false;\r\n    };\r\n\r\n    // Execute init on instantiation\r\n    self.init();\r\n\r\n    function checkMobile() {\r\n        if (window.innerWidth < config.breakpoint) {\r\n            return true;\r\n        } else {\r\n            return false;\r\n        }\r\n    }\r\n\r\n    function openSearch() {\r\n        // Reset an open navigation\r\n        Array.from(self.el.getElementsByTagName('*')).map((el) => {\r\n            el.classList.remove('is-active');\r\n        });\r\n\r\n        // If there's subnav open, close it\r\n\r\n\r\n        // Open the search\r\n        self.searchEl.classList.add('is-active');\r\n        // Add the nav-active class to the head\r\n        self.header.classList.add('nav-active');\r\n        self.isSearchOpen = true;\r\n\r\n        setTimeout(() => {\r\n            document.querySelector('.js-header_search__input').focus();\r\n        }, 500);\r\n    }\r\n\r\n    function closeSearch() {\r\n        self.searchToggle.classList.remove('is-open');\r\n        self.searchEl.classList.remove('is-active');\r\n        self.isSearchOpen = false;\r\n    }\r\n\r\n    function closeSubnav(subnav) {\r\n        subnav.classList.remove('is-active');\r\n        subnav.setAttribute('aria-expanded', 'false');\r\n        indicator.style.opacity = 0;\r\n        //animSubNavIn.clear();\r\n    }\r\n\r\n    function openSubnav(subnav) {\r\n        subnav.classList.add('is-active');\r\n        subnav.setAttribute('aria-expanded', 'true');\r\n\r\n        // get links for this subnav\r\n        const items = subnav.querySelectorAll('.js-menu__sublevel_item');\r\n        // animate in the links\r\n        //animSubNavIn.staggerFromTo(items, 0.125, {\r\n            //x: 80,\r\n            //opacity: 0\r\n        //}, {\r\n            //x: 0,\r\n            //opacity: 1\r\n        //}, 0.05).play();\r\n    }\r\n}\r\n"],"names":[],"sourceRoot":""}