import { KeyboardEventArgs } from '@syncfusion/ej2-base' ; import { extend } from '@syncfusion/ej2-base' ; import { remove , isNullOrUndefined } from '@syncfusion/ej2-base' ; import { Pager } from '../../pager/pager' ; import { PagerDropDown } from '../../pager/pager-dropdown' ; import { ExternalMessage } from '../../pager/external-message' ; import { PageSettingsModel } from '../models/page-settings-model' ; import { IGrid , IAction , NotifyArgs } from '../base/interface' ; import { extend as gridExtend , getActualProperties , isActionPrevent } from '../base/util' ; import * as events from '../base/constant' ; import { PagerModel } from '../../pager' ; Pager . Inject ( ExternalMessage , PagerDropDown ) ; /**
 * The `Page` module is used to render pager and handle paging action.
 */ export class Page implements IAction { private element : HTMLElement ; private pageSettings : PageSettingsModel ; private isForceCancel : boolean ; private parent : IGrid ; private pagerObj : Pager ; private handlers : { load : Function ; end : Function ; inboundChange ? : Function ; ready : Function ; updateLayout : Function ; complete : Function ; keyPress : Function ; } ; hidden constructor ( parent ? , pageSettings ? ) { this . parent = parent ; this . pageSettings = pageSettings ; this . addEventListener ( ) ; } private protected getModuleName ( ) { return 'pager' ; } return { void } hidden public render ( ) { let gObj = this . parent ; let pagerObj ; this . pagerDestroy ( ) ; if ( ! isNullOrUndefined ( this . parent . pagerTemplate ) ) { this . pageSettings . template = this . parent . pagerTemplate ; } this . element = this . parent . createElement ( 'div' , { className : 'e-gridpager' } ) ; pagerObj = < PagerModel > gridExtend ( { } , extend ( { } , getActualProperties ( this . pageSettings ) ) , { click : this . clickHandler . bind ( this ) , dropDownChanged : this . onSelect . bind ( this ) , enableRtl : gObj . enableRtl , locale : gObj . locale , created : this . addAriaAttr . bind ( this ) } , [ 'parentObj' , 'propName' ] ) ; this . pagerObj = new Pager ( pagerObj ) ; } private onSelect ( e ) { this . pageSettings . pageSize = e . pageSize ; this . pageSettings . currentPage = 1 ; } private addAriaAttr ( ) { if ( ! ( this . pageSettings . template ) ) { let numericContainerNew = this . parent . createElement ( 'div' , { className : 'e-numericcontainer' } ) ; let pagerContainer = this . element . querySelector ( '.e-pagercontainer' ) ; let frag = document . createDocumentFragment ( ) ; let numericContainer = this . element . querySelector ( '.e-numericcontainer' ) ; let links = numericContainer . querySelectorAll ( 'a' ) ; for ( let i = 0 ; i < links . length ; i ++ ) { if ( this . parent . getContentTable ( ) ) { ( < Element > links [ i ] ) . setAttribute ( 'aria-owns' , this . parent . getContentTable ( ) . id ) ; } else { ( < Element > links [ i ] ) . setAttribute ( 'aria-owns' , this . parent . element . getAttribute ( 'id' ) + '_content_table' ) ; } let numericContainerDiv = this . parent . createElement ( 'div' ) ; numericContainerDiv . appendChild ( links [ i ] ) ; frag . appendChild ( numericContainerDiv ) ; } numericContainerNew . appendChild ( frag ) ; pagerContainer . replaceChild ( numericContainerNew , numericContainer ) ; let classList = [ '.e-mfirst' , '.e-mprev' , '.e-first' , '.e-prev' , '.e-next' , '.e-last' , '.e-mnext' , '.e-mlast' ] ; classList . forEach ( ( value ) => { let element = this . element . querySelector ( value ) ; if ( this . parent . getContentTable ( ) ) { element . setAttribute ( 'aria-owns' , this . parent . getContentTable ( ) . id ) ; } } ) ; } } private dataReady ( e ? ) { this . updateModel ( e ) ; } return { void } public refresh ( ) { this . pagerObj . refresh ( ) ; } param { number } pageNo return { void } public goToPage ( pageNo ) { this . pagerObj . goToPage ( pageNo ) ; } return { void } hidden public updateModel ( e ? ) { this . parent . pageSettings . totalRecordsCount = e . count ; this . parent . dataBind ( ) ; } return { void } hidden public onActionComplete ( e ) { this . parent . trigger ( events . actionComplete , extend ( e , { currentPage : this . parent . pageSettings . currentPage , requestType : 'paging' , type : events . actionComplete } ) ) ; } hidden public onPropertyChanged ( e ) { if ( e . module !== this . getModuleName ( ) ) { return ; } let newProp = e . properties ; for ( let prop of Object . keys ( newProp ) ) { this . pagerObj [ prop ] = newProp [ prop ] ; } this . pagerObj . dataBind ( ) ; } private clickHandler ( e ) { let gObj = this . parent ; if ( this . isForceCancel || isActionPrevent ( gObj ) && ! gObj . prevPageMoving ) { if ( ! this . isForceCancel ) { gObj . notify ( events . preventBatch , { instance : this , handler : this . goToPage , arg1 : e . currentPage } ) ; this . isForceCancel = true ; this . pagerObj . currentPage = gObj . pageSettings . currentPage ; this . pagerObj . dataBind ( ) ; } else { this . isForceCancel = false ; } e . cancel = true ; return ; } gObj . prevPageMoving = false ; let prevPage = this . pageSettings . currentPage ; this . pageSettings . currentPage = e . currentPage ; this . parent . notify ( events . modelChanged , { requestType : 'paging' , previousPage : prevPage , currentPage : e . currentPage , type : events . actionBegin } ) ; } private keyPressHandler ( e ) { if ( e . action in keyActions ) { e . preventDefault ( ) ; ( this . element . querySelector ( keyActions [ e . action ] ) as HTMLElement ) . click ( ) ; } } param { string } message return { void } public updateExternalMessage ( message ) { if ( ! this . pagerObj . enableExternalMessage ) { this . pagerObj . enableExternalMessage = true ; this . pagerObj . dataBind ( ) ; } this . pagerObj . externalMessage = message ; this . pagerObj . dataBind ( ) ; } private appendToElement ( e ? ) { this . parent . element . appendChild ( this . element ) ; this . parent . setGridPager ( this . element ) ; this . pagerObj . appendTo ( this . element ) ; } private enableAfterRender ( e ? ) { if ( e . module === this . getModuleName ( ) && e . enable ) { this . render ( ) ; this . appendToElement ( ) ; } } hidden public addEventListener ( ) { this . handlers = { load : this . render , end : this . appendToElement , ready : this . dataReady , complete : this . onActionComplete , updateLayout : this . enableAfterRender , inboundChange : this . onPropertyChanged , keyPress : this . keyPressHandler } ; if ( this . parent . isDestroyed ) { return ; } this . parent . on ( events . initialLoad , this . handlers . load , this ) ; this . parent . on ( events . initialEnd , this . handlers . end , this ) ; this . parent . on ( events . dataReady , this . handlers . ready , this ) ; this . parent . on ( events . pageComplete , this . handlers . complete , this ) ; this . parent . on ( events . uiUpdate , this . handlers . updateLayout , this ) ; this . parent . on ( events . inBoundModelChanged , this . handlers . inboundChange , this ) ; this . parent . on ( events . keyPressed , this . handlers . keyPress , this ) ; } hidden public removeEventListener ( ) { if ( this . parent . isDestroyed ) { return ; } this . parent . off ( events . initialLoad , this . handlers . load ) ; this . parent . off ( events . initialEnd , this . handlers . end ) ; this . parent . off ( events . dataReady , this . handlers . ready ) ; this . parent . off ( events . pageComplete , this . handlers . complete ) ; this . parent . off ( events . uiUpdate , this . handlers . updateLayout ) ; this . parent . off ( events . inBoundModelChanged , this . handlers . inboundChange ) ; this . parent . off ( events . keyPressed , this . handlers . keyPress ) ; } return { void } hidden public destroy ( ) { this . removeEventListener ( ) ; this . pagerDestroy ( ) ; } private pagerDestroy ( ) { if ( this . pagerObj && ! this . pagerObj . isDestroyed ) { this . pagerObj . destroy ( ) ; remove ( this . element ) ; } } } hidden const keyActions = { pageUp : '.e-prev' , pageDown : '.e-next' , ctrlAltPageDown : '.e-last' , ctrlAltPageUp : '.e-first' , altPageUp : '.e-pp' , altPageDown : '.e-np' } ;