import { Component } from '@angular/core' ; import { toRouterLink , Link } from '../../../utils/urls' ; import { content , title } from '../../../../../config/code-gov-config.json' ; interface MenuOption { links : Link [ ] ; expanded ? : boolean ; } @ Component ( { selector : 'home-header-navigation' , styles : [ require ( './home-header-navigation.style.scss' ) , require ( '../../header-navigation/header-navigation.style.scss' ) , ] , template : require ( '../../header-navigation/header-navigation.template.html' ) , host : { '(window:scroll)' : 'onScrollHandler($event)' , } , } ) export class HomeHeaderNavigationComponent { private isAtTop : boolean = true ; private color : string = 'dark transparent' ; private dropdownSearchBox : boolean = false ; private title : string = title ; private headerContent : any = content . header ; private menu : MenuOption [ ] ; private expanded : boolean = false ; private height : string = '' ; private forkMeUrl : boolean = content . header . fork_me_url ; constructor ( ) { this . menu = content . header . menu . map ( option => { if ( option . links ) { option . links . forEach ( link => { link . routerLink = toRouterLink ( link . url ) ; } ) ; option . expanded = false ; } else if ( option . url ) { option . routerLink = toRouterLink ( option . url ) ; } return option ; } ) ; } param $event onScrollHandler ( $event ) { const top = ( document . documentElement && document . documentElement . scrollTop ) || document . body . scrollTop ; this . isAtTop = top === 0 ; } onClickMenuOption ( selected , event ) { this . menu . forEach ( menuOption => { if ( menuOption !== selected ) { menuOption . expanded = false ; } } ) ; selected . expanded = ! selected . expanded ; this . expanded = this . menu . filter ( option => option . expanded ) . length > 0 ; this . updateMenuSize ( event ) ; } updateMenuSize ( event ) { if ( this . expanded ) { let nav = document . querySelector ( 'header.main nav.main' ) ; let computedStyle = window . getComputedStyle ( nav ) ; let paddingTop = Number ( computedStyle [ 'padding-top' ] . replace ( 'px' , '' ) ) ; let paddingBottom = Number ( computedStyle [ 'padding-bottom' ] . replace ( 'px' , '' ) ) ; let padding = paddingTop + paddingBottom ; let navHeight = nav . querySelector ( 'ul' ) . clientHeight ; let selectedSubMenu = event . target . nextElementSibling ; let li = event . target . parentElement ; li . className = 'expanded' ; let dropdownHeight = selectedSubMenu . clientHeight ; this . height = padding + navHeight + dropdownHeight ; } else { this . height = null ; } } closeAllMenus ( ) { } }