import { NavbarService } from './navbar.service' ; import { Component , ElementRef , ViewChild , Input , Renderer2 , AfterViewInit , HostListener , OnInit } from '@angular/core' ; import { Subscription } from 'rxjs/Subscription' ; @ Component ( { selector : 'mdb-navbar' , templateUrl : 'navbar.component.html' , } ) export class NavbarComponent implements AfterViewInit , OnInit { @ Input ( ) SideClass : string ; @ Input ( ) containerInside = true ; subscription : Subscription ; navbarLinkClicks : any ; shown = false ; public doubleNav : boolean ; public height : number ; public duration = 350 ; public collapse = false ; public showClass = false ; public collapsing = false ; @ ViewChild ( 'navbar' ) el : ElementRef ; @ ViewChild ( 'mobile' ) mobile : ElementRef ; @ ViewChild ( 'nav' ) navbar : ElementRef ; @ ViewChild ( 'container' ) container : ElementRef ; constructor ( public renderer , private _navbarService ) { this . subscription = this . _navbarService . getNavbarLinkClicks ( ) . subscribe ( navbarLinkClicks => { this . closeNavbarOnClick ( navbarLinkClicks ) ; } ) ; } closeNavbarOnClick ( navbarLinkClicks ) { this . navbarLinkClicks = navbarLinkClicks ; if ( this . showClass ) { this . hide ( ) ; } } ngOnInit ( ) { const isDoubleNav = this . SideClass . split ( ' ' ) ; if ( isDoubleNav . indexOf ( 'double-nav' ) !== - 1 ) { this . doubleNav = true ; } else { this . doubleNav = false ; } } ngAfterViewInit ( ) { setTimeout ( ( ) => { this . height = this . el . nativeElement . scrollHeight ; this . collapse = true ; if ( ! this . containerInside ) { const childrens = Array . from ( this . container . nativeElement . children ) ; childrens . forEach ( child => { this . renderer . appendChild ( this . navbar . nativeElement , child ) ; this . container . nativeElement . remove ( ) ; } ) ; } if ( this . el . nativeElement . children . length === 0 ) { this . el . nativeElement . remove ( ) ; } } ) ; } toggle ( event ) { event . preventDefault ( ) ; if ( ! this . collapsing ) { if ( this . shown ) { this . hide ( ) ; } else { this . show ( ) ; } } } show ( ) { this . shown = true ; this . collapse = false ; this . collapsing = true ; setTimeout ( ( ) => { this . renderer . setStyle ( this . el . nativeElement , 'height' , this . height + 'px' ) ; } , 10 ) ; setTimeout ( ( ) => { this . collapsing = false ; this . collapse = true ; this . showClass = true ; } , this . duration ) ; } hide ( ) { this . shown = false ; this . collapse = false ; this . showClass = false ; this . collapsing = true ; setTimeout ( ( ) => { this . renderer . setStyle ( this . el . nativeElement , 'height' , '0px' ) ; } , 10 ) ; setTimeout ( ( ) => { this . collapsing = false ; this . collapse = true ; } , this . duration ) ; } get displayStyle ( ) { return '' ; } @ HostListener ( 'window:resize' , [ '$event' ] ) onResize ( event ) { let breakpoit = 0 ; if ( this . SideClass . includes ( 'navbar-expand-xl' ) ) { breakpoit = 1200 ; } else if ( this . SideClass . includes ( 'navbar-expand-lg' ) ) { breakpoit = 992 ; } else if ( this . SideClass . includes ( 'navbar-expand-md' ) ) { breakpoit = 768 ; } else if ( this . SideClass . includes ( 'navbar-expand-sm' ) ) { breakpoit = 576 ; } else { breakpoit = event . target . innerWidth + 1 ; } if ( event . target . innerWidth < breakpoit ) { if ( ! this . shown ) { this . collapse = false ; this . renderer . setStyle ( this . el . nativeElement , 'height' , '0px' ) ; this . renderer . setStyle ( this . el . nativeElement , 'opacity' , '0' ) ; setTimeout ( ( ) => { this . height = this . el . nativeElement . scrollHeight ; this . collapse = true ; this . renderer . setStyle ( this . el . nativeElement , 'opacity' , '' ) ; } , 4 ) ; } } else { this . collapsing = false ; this . shown = false ; this . showClass = false ; this . collapse = true ; this . renderer . setStyle ( this . el . nativeElement , 'height' , '' ) ; } } @ HostListener ( 'document:scroll' , [ '$event' ] ) onScroll ( ) { if ( this . navbar . nativeElement . classList . contains ( 'scrolling-navbar' ) ) { if ( window . pageYOffset > 120 ) { this . renderer . addClass ( this . navbar . nativeElement , 'top-nav-collapse' ) ; } else { this . renderer . removeClass ( this . navbar . nativeElement , 'top-nav-collapse' ) ; } } } }