import { Injectable , OnDestroy , OnInit } from '@angular/core' ; import { Subject } from 'rxjs/Subject' ; import { Subscription } from 'rxjs/Subscription' ; import { MediaChange , ObservableMedia } from '@angular/flex-layout' ; const SCREEN_MOBILE = 'screen and (max-width: 600px)' ; @ Injectable ( ) export class LayoutService implements OnDestroy { activeMediaQuery : string ; watcher : Subscription ; private _sectionId = 'home' ; private _toolbarShowState : boolean ; private _navShowState : boolean ; private _detailsShowState : boolean ; private _mobileWidthState : boolean ; private sectionIdAnnouncedSource = new Subject < string > ( ) ; private showNavAnnouncedSource = new Subject < boolean > ( ) ; private showToolbarAnnouncedSource = new Subject < boolean > ( ) ; private showDetailsAnnouncedSource = new Subject < boolean > ( ) ; private widthMobileAnnouncedSource = new Subject < boolean > ( ) ; sectionIdAnnounced$ = this . sectionIdAnnouncedSource . asObservable ( ) ; showToolbarAnnounced$ = this . showToolbarAnnouncedSource . asObservable ( ) ; showNavAnnounced$ = this . showNavAnnouncedSource . asObservable ( ) ; showDetailsAnnounced$ = this . showDetailsAnnouncedSource . asObservable ( ) ; widthMobileAnnounced$ = this . widthMobileAnnouncedSource . asObservable ( ) ; constructor ( public media ) { this . activeMediaQuery = '' ; this . handleShowToolbar ( false ) ; this . handleWidthMobile ( false ) ; this . handleShowNav ( false ) ; this . handleShowDetails ( false ) ; this . watcher = media . subscribe ( ( change ) => { this . activeMediaQuery = change ? `'${ change . mqAlias }' = (${ change . mediaQuery })` : '' ; if ( change . mqAlias === 'xs' || change . mqAlias === 'sm' ) { this . setMobile ( ) ; } else { this . setDesktop ( ) ; } } ) ; } ngOnDestroy ( ) { this . watcher . unsubscribe ( ) ; } setDesktop ( ) { this . handleShowToolbar ( this . sectionId !== 'home' && this . sectionId !== 'landing' ) ; this . handleShowNav ( this . sectionId !== 'home' && this . sectionId !== 'landing' ) ; this . handleWidthMobile ( false ) ; } setMobile ( ) { this . handleShowToolbar ( this . sectionId !== 'home' && this . sectionId !== 'landing' ) ; this . handleShowNav ( false ) ; this . handleWidthMobile ( true ) ; } handleSectionId ( sectionId ) { this . sectionId = sectionId ; this . sectionIdAnnouncedSource . next ( sectionId ) ; this . handleShowToolbar ( this . sectionId !== 'home' && this . sectionId !== 'landing' ) ; this . handleShowNav ( this . sectionId !== 'home' && this . sectionId !== 'landing' ) ; this . handleShowDetails ( this . sectionId !== 'home' && this . sectionId !== 'landing' && this . sectionId !== 'mileage-calculator' ) ; } handleShowToolbar ( show ) { this . toolbarShowState = show ; this . showToolbarAnnouncedSource . next ( show ) ; } handleShowNav ( show ) { this . navShowState = show ; this . showNavAnnouncedSource . next ( show ) ; } handleShowDetails ( show ) { this . detailsShowState = show ; this . showDetailsAnnouncedSource . next ( show ) ; } handleWidthMobile ( isMobile ) { this . mobileWidthState = isMobile ; this . widthMobileAnnouncedSource . next ( isMobile ) ; } get sectionId ( ) : string { return this . _sectionId ; } set sectionId ( value ) { this . _sectionId = value ; } get toolbarShowState ( ) : boolean { return this . _toolbarShowState ; } set toolbarShowState ( value ) { this . _toolbarShowState = value ; } get navShowState ( ) : boolean { return this . _navShowState ; } set navShowState ( value ) { this . _navShowState = value ; } get detailsShowState ( ) : boolean { return this . _detailsShowState ; } set detailsShowState ( value ) { this . _detailsShowState = value ; } get mobileWidthState ( ) : boolean { return this . _mobileWidthState ; } set mobileWidthState ( value ) { this . _mobileWidthState = value ; } }