import { MdcComponent , MdcFocusTrap } from '@aurelia-mdc-web/base' ; import { MDCDismissibleDrawerFoundation , cssClasses , strings , MDCModalDrawerFoundation , MDCDrawerAdapter } from '@material/drawer' ; import { SpecificEventListener } from '@material/base' ; import { inject , useView , customElement , bindable } from 'aurelia-framework' ; import { PLATFORM } from 'aurelia-pal' ; strings . CLOSE_EVENT = strings . CLOSE_EVENT . toLowerCase ( ) ; strings . OPEN_EVENT = strings . OPEN_EVENT . toLowerCase ( ) ; selector emits emits @ inject ( Element ) @ useView ( PLATFORM . moduleName ( './mdc-drawer.html' ) ) @ customElement ( cssClasses . ROOT ) export class MdcDrawer extends MdcComponent < MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation > { /** Set the drawer implementation */ @ bindable type : 'standard' | 'dismissible' | 'modal' = 'standard' ; return get open ( ) : boolean { return this . foundation ! . isOpen ( ) ; } /**
     * Toggles the drawer open and closed.
     */ set open ( isOpen ) { if ( isOpen ) { this . foundation ?. open ( ) ; } else { this . foundation ?. close ( ) ; } } private previousFocus_ ? : Element | null ; private scrim_ ? : HTMLElement | null ; mdcFocusTrap : MdcFocusTrap ; private handleScrimClick_ ? : SpecificEventListener < 'click' > ; async initialise ( ) { if ( this . root . parentElement ! . clientWidth < 900 ) { this . type = 'modal' ; } } initialSyncWithDOM ( ) { if ( this . type === 'modal' ) { this . scrim_ = document . createElement ( 'div' ) ; this . scrim_ . classList . add ( 'mdc-drawer-scrim' ) ; this . root . insertAdjacentElement ( 'afterend' , this . scrim_ ) ; if ( this . scrim_ ) { this . handleScrimClick_ = ( ) => { this . open = false ; return ( this . foundation as MDCModalDrawerFoundation ) . handleScrimClick ( ) ; } ; this . scrim_ . addEventListener ( 'click' , this . handleScrimClick_ ) ; } } } handleKeydown_ ( evt ) { this . foundation ?. handleKeydown ( evt ) ; return true ; } handleTransitionEnd_ ( evt ) { this . foundation ?. handleTransitionEnd ( evt ) ; return true ; } destroy ( ) { const { MODAL } = cssClasses ; if ( this . scrim_ && this . handleScrimClick_ && this . root . classList . contains ( MODAL ) ) { this . scrim_ . removeEventListener ( 'click' , this . handleScrimClick_ ) ; this . open = false ; } } getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => this . root . classList . add ( className ) , removeClass : ( className ) => this . root . classList . remove ( className ) , hasClass : ( className ) => this . root . classList . contains ( className ) , elementHasClass : ( element , className ) => element . classList . contains ( className ) , saveFocus : ( ) => this . previousFocus_ = document . activeElement , restoreFocus : ( ) => { const previousFocus = this . previousFocus_ as HTMLOrSVGElement | null ; if ( previousFocus ?. focus && this . root . contains ( document . activeElement ) ) { previousFocus . focus ( ) ; } } , focusActiveNavigationItem : ( ) => { const activeNavItemEl = this . root . querySelector < HTMLElement > ( '.mdc-deprecated-list-item--activated' ) ; if ( activeNavItemEl ) { activeNavItemEl . focus ( ) ; } } , notifyClose : ( ) => this . emit ( strings . CLOSE_EVENT , { } , true ) , notifyOpen : ( ) => this . emit ( strings . OPEN_EVENT , { } , true ) , trapFocus : ( ) => this . mdcFocusTrap . trapFocus ( ) , releaseFocus : ( ) => this . mdcFocusTrap . releaseFocus ( ) , } ; if ( this . type === 'modal' ) { return new MDCModalDrawerFoundation ( adapter ) ; } else { return new MDCDismissibleDrawerFoundation ( adapter ) ; } } toggle ( ) { this . open = ! this . open ; } }