import { DOCUMENT , isPlatformBrowser } from '@angular/common' ; import { Inject , Injectable , PLATFORM_ID } from '@angular/core' ; import { ResponsiveState } from '../+state/responsive.reducer' ; import { ResponsiveService } from '../interfaces/responsive-service.interface' ; import { ResponsiveStorage } from '../interfaces/responsive-storage.interface' ; import { ResponsiveMode , ResponsiveProperties } from '../interfaces/responsive.interface' ; import { RESPONSIVE_MODE } from '../responsive.tokens' ; @ Injectable ( ) export class BaseResponsiveService implements ResponsiveService { private timer ; constructor ( protected responsiveStorage , @ Inject ( RESPONSIVE_MODE ) protected responsiveMode , @ Inject ( DOCUMENT ) private document , @ Inject ( PLATFORM_ID ) private platformId ) { } checkBetween ( type , expressions ) { let result = false ; expressions . forEach ( expression => { const args = expression . split ( ',' ) ; if ( args . length === 2 && this . responsiveMode . sizes [ type ] >= this . responsiveMode . sizes [ args [ 0 ] ] && this . responsiveMode . sizes [ type ] < this . responsiveMode . sizes [ args [ 1 ] ] ) { result = true ; } } ) ; return result ; } checkEqual ( type , expressions ) { let result = false ; expressions . forEach ( expression => { const args = expression . split ( ',' ) ; if ( args . length === 1 && args [ 0 ] === type ) { result = true ; } } ) ; return result ; } checkMax ( type , expressions ) { let result = false ; expressions . forEach ( expression => { const args = expression . split ( ',' ) ; if ( args . length === 1 && this . responsiveMode . sizes [ type ] < this . responsiveMode . sizes [ args [ 0 ] ] ) { result = true ; } } ) ; return result ; } checkMin ( type , expressions ) { let result = false ; expressions . forEach ( expression => { const args = expression . split ( ',' ) ; if ( args . length === 1 && this . responsiveMode . sizes [ type ] >= this . responsiveMode . sizes [ args [ 0 ] ] ) { result = true ; } } ) ; return result ; } getChangesByProperties ( props ) { const changes = { } ; if ( 'height' in props ) { changes . height = props . height ; } if ( 'width' in props ) { changes . width = props . width ; changes . mobile = this . isMobile ( props . width ) ; changes . responsiveType = this . getResponsiveTypeByWidth ( props . width ) ; } this . responsiveStorage . setProperties ( changes ) ; return changes ; } getResponsiveProperties ( ) { let props ; if ( isPlatformBrowser ( this . platformId ) ) { props = this . getChangesByProperties ( this . getChangesByProperties ( { height : window . innerHeight , width : window . innerWidth } ) ) as ResponsiveProperties ; this . responsiveStorage . setProperties ( props ) ; } else { props = this . responsiveStorage . getProperties ( ) ; } return props ; } getResponsiveTypeByWidth ( width ) { let responseType = null ; const sizes = Object . entries ( this . responsiveMode . sizes ) . sort ( ( a , b ) => b [ 1 ] - a [ 1 ] ) ; for ( const [ type , size ] of sizes ) { if ( width >= size ) { responseType = type ; break ; } } if ( ! responseType ) { responseType = sizes [ sizes . length - 1 ] [ 0 ] ; } return responseType ; } isMobile ( width ) { return width < this . responsiveMode . sizes [ this . responsiveMode . mobile ] ; } updateBodyClasses ( ) { if ( isPlatformBrowser ( this . platformId ) ) { if ( this . timer ) { clearTimeout ( this . timer ) ; } setTimeout ( ( ) => { this . timer = null ; if ( this . document . body . scrollHeight <= window . innerHeight ) { this . document . body . classList . add ( 'window-small' ) ; } else { this . document . body . classList . remove ( 'window-small' ) ; } } , 0 ) ; } } }