import { Injectable , NgZone } from '@angular/core' ; import { RouterExtensions } from '@nativescript/angular' ; import { android as androidApplication } from '@nativescript/core/application' ; import { Color } from '@nativescript/core/color' ; import { TnsSideDrawerClass } from 'nativescript-foss-sidedrawer' ; import { APP_NAME } from './constants' ; import { getAppVersion } from './misc' ; const LOCK_MODE_LOCKED_CLOSED = 1 ; const LOCK_MODE_UNDEFINED = 3 ; declare let com ; class CustomSideDrawerClass extends TnsSideDrawerClass { drawer : any ; build ( opts ) { const activity = androidApplication . foregroundActivity ; const profile = new com . mikepenz . materialdrawer . model . ProfileDrawerItem ( ) ; profile . withName ( opts . title ) ; profile . withEmail ( opts . subtitle ) ; const bg = android . graphics . Bitmap . createBitmap ( 8 , 8 , android . graphics . Bitmap . Config . ARGB_8888 ) ; bg . eraseColor ( opts . headerBackgroundColor . android ) ; const header = new com . mikepenz . materialdrawer . AccountHeaderBuilder ( ) ; header . withActivity ( activity ) ; header . withHeaderBackground ( new com . mikepenz . materialdrawer . holder . ImageHolder ( bg ) ) ; header . addProfiles ( [ profile ] ) ; header . withProfileImagesVisible ( false ) ; header . withSelectionListEnabledForSingleProfile ( false ) ; header . withProfileImagesClickable ( false ) ; header . withTextColor ( opts . headerTextColor . android ) ; const items = opts . templates . map ( ( template , index ) => { const item = new com . mikepenz . materialdrawer . model . PrimaryDrawerItem ( ) ; item . withIdentifier ( index ) ; item . withName ( template . title ) ; item . withTextColor ( opts . textColor . android ) ; item . withSelectedColor ( opts . selectedColor . android ) ; item . withSelectedTextColor ( opts . selectedTextColor . android ) ; return item ; } ) ; const drawer = new com . mikepenz . materialdrawer . DrawerBuilder ( ) ; drawer . withActivity ( activity ) ; drawer . withAccountHeader ( header . build ( ) ) ; drawer . withSliderBackgroundColor ( opts . backgroundColor . android ) ; drawer . addDrawerItems ( items ) ; drawer . withSelectedItem ( - 1 ) ; drawer . withOnDrawerItemClickListener ( new com . mikepenz . materialdrawer . Drawer . OnDrawerItemClickListener ( { onItemClick : ( view , index ) : boolean => { opts . listener ( index - 1 ) ; return false ; } , } ) ) ; this . drawer = drawer . build ( ) ; } } @ Injectable ( { providedIn : 'root' , } ) export class SideDrawerService { private navigationMenu = [ { title : 'File content' , url : '/plaintext' , } , { title : 'Settings' , url : '/settings' , } , { title : 'About' , url : '/about' , } , ] ; private drawer : CustomSideDrawerClass ; loaded : Promise < any > ; constructor ( private ngZone , private routerExtensions ) { this . drawer = new CustomSideDrawerClass ( ) ; const config = { templates : this . navigationMenu , title : APP_NAME , subtitle : `v${ getAppVersion ( ) }` , headerBackgroundColor : new Color ( '#255C8C' ) , backgroundColor : new Color ( '#255C8C' ) , headerTextColor : new Color ( '#E2E9F0' ) , textColor : new Color ( '#E2E9F0' ) , selectedColor : new Color ( '#255C8C' ) , selectedTextColor : new Color ( '#F49D96' ) , listener : ( index ) => { const url = this . navigationMenu [ index ] . url ; this . ngZone . run ( ( ) => { this . routerExtensions . navigateByUrl ( url ) ; } ) ; } , } ; this . loaded = new Promise ( ( resolve ) => { setTimeout ( ( ) => { this . drawer . build ( config ) ; resolve ( ) ; } , 0 ) ; } ) ; } private get nativeDrawer ( ) : any { return ( this . drawer as any ) . drawer ; } open ( ) { this . drawer . open ( ) ; } async lock ( ) { await this . loaded ; const layout = this . nativeDrawer . getDrawerLayout ( ) ; layout . setDrawerLockMode ( LOCK_MODE_LOCKED_CLOSED ) ; } async unlock ( ) { await this . loaded ; const layout = this . nativeDrawer . getDrawerLayout ( ) ; layout . setDrawerLockMode ( LOCK_MODE_UNDEFINED ) ; } }