{"version":3,"sources":["webpack:///./src/scripts/modules/ui/header/DesktopMenu.js"],"names":["upi","selector","HEADER$","SECONDARY_HEADER$","MENU_TRIGGER$","DROP_MENU$","constructor","this","_menuHoverTimeoutId","_menuLeaveTimeoutId","_frozenMenus","makeSticky","el","targetEl","pageContainer","$","window","headerSecondary","elOriginTop","offset","top","scroll","scrollTop","css","onDropMenuEnter","e","setTimeout","activateMenu","currentTarget","onDropMenuLeave","length","clearTimeout","deactivateMenu","onPrimaryMenuEnter","menuId","dataset","activeMenu","secondaryHeaders","each","i","deactivatePrimaryMenu","activatePrimaryMenu","onPrimaryMenuLeave","revealSecondary","onFocusin","menu","getClosestMenu","target","freezeMenu","toggleMenu","data","closest","concat","thawAllMenus","forEach","find","blur","removeClass","addClass","attr","parent","console","log","locale","document","documentElement","getAttribute","siteHeader","countrySelect","navWrapper","initEvents","on","toLowerCase","stopPropagation"],"mappings":"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","file":"z-desktopMenu.js","sourcesContent":["const {HEADER$, SECONDARY_HEADER$, MENU_TRIGGER$, DROP_MENU$} = upi.selector;\r\n\r\nclass DesktopMenu {\r\n\r\n    _menuHoverTimeoutId = null;\r\n    _menuLeaveTimeoutId = null;\r\n    _frozenMenus = [];\r\n\r\n    constructor () {\r\n        console.log( '@init [DesktopMenu]' );\r\n\r\n        this.locale = document.documentElement.getAttribute( 'lang' );\r\n        this.siteHeader = $( HEADER$ );\r\n        this.countrySelect = $( '#nav--country-select' );\r\n        this.navWrapper = $( '#nav-lvl-primary' );\r\n        // note -> Hiding the secondary education menu until we have more items in the future to add\r\n        this.secondaryHeaders = $( SECONDARY_HEADER$ );\r\n        this.revealSecondary = $( SECONDARY_HEADER$ + `[data-menu-static]` );\r\n        this.activatePrimaryMenu( this.revealSecondary );\r\n        // toggle collapsable header\r\n        this.initEvents();\r\n    }\r\n\r\n    initEvents () {\r\n        this.countrySelect\r\n            .on( 'mouseenter', MENU_TRIGGER$, this.onDropMenuEnter )\r\n            .on( 'mouseleave', MENU_TRIGGER$, this.onDropMenuLeave );\r\n        this.navWrapper\r\n            .on( 'mouseenter', MENU_TRIGGER$, this.onPrimaryMenuEnter )\r\n            .on( 'mouseleave', MENU_TRIGGER$, this.onPrimaryMenuLeave );\r\n        this.secondaryHeaders\r\n            .on( 'mouseenter', () => {\r\n                clearTimeout( this._menuLeaveTimeoutId );\r\n            } )\r\n            .on( 'mouseleave', ( e ) => {\r\n                this._menuLeaveTimeoutId = setTimeout( () => {\r\n                    this.deactivatePrimaryMenu( $( e.currentTarget ) );\r\n                    this.activatePrimaryMenu( this.revealSecondary );\r\n                }, 90 );\r\n            } );\r\n\r\n        // detect click events outside a menu to thaw/deactivate all menus\r\n        $( document ).on( 'click touchstart', e => {\r\n            if ( !this.getClosestMenu( e.target ).length ) {\r\n                this.thawAllMenus();\r\n            }\r\n        } );\r\n\r\n        // note - bypass this feature for the US site\r\n        if ( this.locale && this.locale.toLowerCase() !== 'en-us' ) {\r\n            this.siteHeader.find( '.nav--country-select' ).addClass( 'hidden' );\r\n\r\n            if ( this.revealSecondary.length ) {\r\n                this.makeSticky( this.revealSecondary, this.revealSecondary );\r\n            }\r\n            else {\r\n                this.makeSticky( this.siteHeader, this.siteHeader );\r\n            }\r\n        }\r\n\r\n        $( '.nav-drop-menu' ).on( 'touchstart', e => e.stopPropagation() );\r\n    }\r\n\r\n    makeSticky = ( el, targetEl ) => {\r\n        const pageContainer = $( window );\r\n        const headerSecondary = $( '.header-secondary' );\r\n        const elOriginTop = targetEl.offset().top;\r\n\r\n        pageContainer.scroll( function () {\r\n            if ( pageContainer.scrollTop() > elOriginTop ) {\r\n                $( el ).css( 'position', 'fixed' ).css( 'top', '0' ).css( 'width', '100%' ).css( 'z-index', '200' );\r\n            }\r\n            else {\r\n                $( el ).css( 'position', 'relative' );\r\n                headerSecondary.css( 'position', 'absolute' ).css( 'top', '70px' );\r\n            }\r\n        } );\r\n    };\r\n\r\n    onDropMenuEnter = e => {\r\n        this._menuHoverTimeoutId = setTimeout( () => this.activateMenu( $( e.currentTarget ) ), 90 );\r\n    };\r\n\r\n    onDropMenuLeave = e => {\r\n        if ( this._frozenMenus.length ) {\r\n            return;\r\n        }\r\n\r\n        clearTimeout( this._menuHoverTimeoutId );\r\n        this.deactivateMenu( $( e.currentTarget ) );\r\n    };\r\n\r\n    onPrimaryMenuEnter = e => {\r\n        const target = e.currentTarget;\r\n        const menuId = target.dataset.menuId;\r\n        const activeMenu = $( SECONDARY_HEADER$ + `[data-menu-id=${menuId}]` );\r\n\r\n        this._menuHoverTimeoutId = setTimeout( () => {\r\n            this.secondaryHeaders.each( ( i, el ) => {\r\n                this.deactivatePrimaryMenu( $( el ) );\r\n            } );\r\n            this.activatePrimaryMenu( activeMenu );\r\n        }, 90 );\r\n    };\r\n\r\n    onPrimaryMenuLeave = e => {\r\n        if ( this._frozenMenus.length ) {\r\n            return;\r\n        }\r\n\r\n        const target = e.currentTarget;\r\n        const menuId = target.dataset.menuId;\r\n        const activeMenu = $( SECONDARY_HEADER$ + `[data-menu-id=${menuId}]` );\r\n\r\n        this._menuLeaveTimeoutId = setTimeout( () => {\r\n            this.deactivatePrimaryMenu( activeMenu );\r\n            this.activatePrimaryMenu( this.revealSecondary );\r\n        }, 90 );\r\n\r\n        clearTimeout( this._menuHoverTimeoutId );\r\n    };\r\n\r\n    onFocusin = e => {\r\n        const menu = this.getClosestMenu( e.target );\r\n        this.freezeMenu( menu );\r\n    };\r\n\r\n    toggleMenu = e => {\r\n        const el = $( e.currentTarget );\r\n\r\n        (el.data( 'isActive' ))\r\n            ? this.deactivateMenu( el )\r\n            : this.activateMenu( el );\r\n    };\r\n\r\n    getClosestMenu = target => $( target ).closest( MENU_TRIGGER$ );\r\n\r\n    freezeMenu = ( menu ) => {\r\n        this._frozenMenus = this._frozenMenus.concat( [menu] );\r\n    };\r\n\r\n    thawAllMenus = () => {\r\n        this._frozenMenus.forEach( menu => {\r\n            menu.find( 'input' ).blur();\r\n            this.deactivateMenu( menu );\r\n        } );\r\n\r\n        this._frozenMenus = [];\r\n    };\r\n\r\n    activateMenu = ( el ) => {\r\n        if ( el.data( 'isActive' ) ) {\r\n            return;\r\n        }\r\n        this.thawAllMenus();\r\n        el.data( 'isActive', true );\r\n        el.find( DROP_MENU$ ).removeClass( 'hidden' );\r\n    };\r\n\r\n    deactivateMenu = el => {\r\n        el.data( 'isActive', false );\r\n        el.find( DROP_MENU$ ).addClass( 'hidden' );\r\n    };\r\n\r\n    activatePrimaryMenu = ( el ) => {\r\n        el.data( 'isActive', true );\r\n        el.removeClass( 'hidden' );\r\n        const menuId = el.attr( `data-menu-id` );\r\n        el.parent().find( `[data-menu-id=${menuId}]` ).addClass( 'flipChevron' );\r\n\r\n    };\r\n\r\n    deactivatePrimaryMenu = el => {\r\n        el.data( 'isActive', false );\r\n        el.addClass( 'hidden' );\r\n        const menuId = el.attr( `data-menu-id` );\r\n        el.parent().find( `[data-menu-id=${menuId}]` ).removeClass( 'flipChevron' );\r\n    };\r\n}\r\n\r\nexport default DesktopMenu;\r\n"],"sourceRoot":""}