import { L10n , EventHandler , extend , isNullOrUndefined } from '@syncfusion/ej2-base' ; import { remove } from '@syncfusion/ej2-base' ; import { Toolbar as tool , ItemModel , ClickEventArgs } from '@syncfusion/ej2-navigations' ; import { IGrid , NotifyArgs } from '../base/interface' ; import * as events from '../base/constant' ; import { ServiceLocator } from '../services/service-locator' ; import { EditSettingsModel } from '../base/grid-model' ; import { templateCompiler , appendChildren } from '../base/util' ; import { ToolbarItems , ToolbarItem } from '../base/enum' ; import { SearchBox } from '../services/focus-strategy' ; hidden export class Toolbar { private element : HTMLElement ; private predefinedItems : { [ key ] : ItemModel ; } = { } ; public toolbar : tool ; private searchElement : HTMLInputElement ; private gridID : string ; private parent : IGrid ; private serviceLocator : ServiceLocator ; private l10n : L10n ; private items : string [ ] = [ 'Add' , 'Edit' , 'Update' , 'Delete' , 'Cancel' , 'Print' , 'Search' , 'ColumnChooser' , 'PdfExport' , 'ExcelExport' , 'CsvExport' , 'WordExport' ] ; private searchBoxObj : SearchBox ; constructor ( parent ? , serviceLocator ? ) { this . parent = parent ; this . gridID = parent . element . id ; this . serviceLocator = serviceLocator ; this . addEventListener ( ) ; } private render ( ) { this . l10n = this . serviceLocator . getService < L10n > ( 'localization' ) ; let preItems = [ 'Add' , 'Edit' , 'Update' , 'Delete' , 'Cancel' , 'Print' , 'PdfExport' , 'ExcelExport' , 'WordExport' , 'CsvExport' ] ; for ( let item of preItems ) { let itemStr = item . toLowerCase ( ) ; let localeName = itemStr [ 0 ] . toUpperCase ( ) + itemStr . slice ( 1 ) ; this . predefinedItems [ item ] = { id : this . gridID + '_' + itemStr , prefixIcon : 'e-' + itemStr , text : this . l10n . getConstant ( localeName ) , tooltipText : this . l10n . getConstant ( localeName ) } ; } ( this . predefinedItems as { Search : ItemModel ; } ) . Search = { id : this . gridID + '_search' , template : '<div class="e-input-group e-search" role="search">\
            <input id="' + this . gridID + '_searchbar" class="e-input" name="input" type="search" \
            placeholder= \"' + this . l10n . getConstant ( 'Search' ) + '\"/>\
            <span id="' + this . gridID + '_searchbutton" class="e-input-group-icon e-search-icon e-icons" \
            tabindex="-1" title="' + this . l10n . getConstant ( 'Search' ) + '" aria-label= "search"></span> \
            </div>' , tooltipText : this . l10n . getConstant ( 'Search' ) , align : 'Right' , cssClass : 'e-search-wrapper' } ; ( this . predefinedItems as { ColumnChooser : ItemModel ; } ) . ColumnChooser = { id : this . gridID + '_' + 'columnchooser' , cssClass : 'e-cc e-ccdiv e-cc-toolbar' , suffixIcon : 'e-' + 'columnchooser-btn' , text : this . l10n . getConstant ( 'Columnchooser' ) , tooltipText : this . l10n . getConstant ( 'Columnchooser' ) , align : 'Right' , } ; this . createToolbar ( ) ; } return { Element } hidden public getToolbar ( ) { return this . toolbar . element ; } method return { void } public destroy ( ) { if ( this . toolbar && ! this . toolbar . isDestroyed ) { if ( ! this . toolbar . element ) { this . parent . destroyTemplate ( [ 'toolbarTemplate' ] ) ; } else { this . toolbar . destroy ( ) ; } this . unWireEvent ( ) ; this . removeEventListener ( ) ; remove ( this . element ) ; } } private createToolbar ( ) { let items = this . getItems ( ) ; this . toolbar = new tool ( { items : items , clicked : this . toolbarClickHandler . bind ( this ) , enablePersistence : this . parent . enablePersistence , enableRtl : this . parent . enableRtl } ) ; let viewStr = 'viewContainerRef' ; let registerTemp = 'registeredTemplate' ; if ( this . parent [ viewStr ] ) { this . toolbar [ registerTemp ] = { } ; this . toolbar [ viewStr ] = this . parent [ viewStr ] ; } this . element = this . parent . createElement ( 'div' , { id : this . gridID + '_toolbarItems' } ) ; if ( this . parent . toolbarTemplate ) { if ( typeof ( this . parent . toolbarTemplate ) === 'string' ) { this . toolbar . appendTo ( this . parent . toolbarTemplate ) ; this . element = this . toolbar . element ; } else { appendChildren ( this . element , templateCompiler ( this . parent . toolbarTemplate ) ( { } , this . parent , 'toolbarTemplate' ) ) ; } } else { this . toolbar . appendTo ( this . element ) ; } this . parent . element . insertBefore ( this . element , this . parent . getHeaderContent ( ) ) ; this . searchElement = ( < HTMLInputElement > this . element . querySelector ( '#' + this . gridID + '_searchbar' ) ) ; this . wireEvent ( ) ; this . refreshToolbarItems ( ) ; if ( this . parent . searchSettings ) { this . updateSearchBox ( ) ; } } private refreshToolbarItems ( args ? ) { let gObj = this . parent ; let enableItems = [ ] ; let disableItems = [ ] ; let edit = gObj . editSettings ; let hasData = gObj . currentViewData && gObj . currentViewData . length ; edit . allowAdding ? enableItems . push ( this . gridID + '_add' ) : disableItems . push ( this . gridID + '_add' ) ; edit . allowEditing && hasData ? enableItems . push ( this . gridID + '_edit' ) : disableItems . push ( this . gridID + '_edit' ) ; edit . allowDeleting && hasData ? enableItems . push ( this . gridID + '_delete' ) : disableItems . push ( this . gridID + '_delete' ) ; if ( gObj . editSettings . mode === 'Batch' ) { if ( gObj . element . querySelectorAll ( '.e-updatedtd' ) . length && ( edit . allowAdding || edit . allowEditing ) ) { enableItems . push ( this . gridID + '_update' ) ; enableItems . push ( this . gridID + '_cancel' ) ; } else { disableItems . push ( this . gridID + '_update' ) ; disableItems . push ( this . gridID + '_cancel' ) ; } } else { if ( gObj . isEdit && ( edit . allowAdding || edit . allowEditing ) ) { enableItems = [ this . gridID + '_update' , this . gridID + '_cancel' ] ; disableItems = [ this . gridID + '_add' , this . gridID + '_edit' , this . gridID + '_delete' ] ; } else { disableItems . push ( this . gridID + '_update' ) ; disableItems . push ( this . gridID + '_cancel' ) ; } } this . enableItems ( enableItems , true ) ; this . enableItems ( disableItems , false ) ; } private getItems ( ) { let items = [ ] ; let toolbarItems = this . parent . toolbar || [ ] ; if ( typeof ( this . parent . toolbar ) === 'string' ) { return [ ] ; } for ( let item of toolbarItems ) { switch ( typeof item ) { case 'number' : items . push ( this . getItemObject ( this . items [ item as number ] ) ) ; break ; case 'string' : items . push ( this . getItemObject ( item as string ) ) ; break ; default : items . push ( this . getItem ( item as ItemModel ) ) ; } } return items ; } private getItem ( itemObject ) { let item = this . predefinedItems [ itemObject . text ] ; return item ? extend ( item , item , itemObject ) : itemObject ; } private getItemObject ( itemName ) { return this . predefinedItems [ itemName ] || { text : itemName , id : this . gridID + '_' + itemName } ; } param { string [ ] } items param { boolean } isEnable return { void } hidden public enableItems ( items , isEnable ) { for ( let item of items ) { let element = < HTMLElement > this . element . querySelector ( '#' + item ) ; if ( element ) { this . toolbar . enableItems ( element . parentElement , isEnable ) ; } } } private toolbarClickHandler ( args ) { let gObj = this . parent ; let gID = this . gridID ; extend ( args , { cancel : false } ) ; gObj . trigger ( events . toolbarClick , args ) ; if ( args . cancel ) { return ; } switch ( ! isNullOrUndefined ( args . item ) && args . item . id ) { case gID + '_print' : gObj . print ( ) ; break ; case gID + '_edit' : gObj . startEdit ( ) ; break ; case gID + '_update' : gObj . endEdit ( ) ; break ; case gID + '_cancel' : gObj . closeEdit ( ) ; break ; case gID + '_add' : gObj . addRecord ( ) ; break ; case gID + '_delete' : gObj . deleteRecord ( ) ; break ; case gID + '_search' : if ( ( < HTMLElement > args . originalEvent . target ) . id === gID + '_searchbutton' ) { this . search ( ) ; } break ; case gID + '_columnchooser' : let tarElement = this . parent . element . querySelector ( '.e-ccdiv' ) ; let y = tarElement . getBoundingClientRect ( ) . top ; let x = tarElement . getBoundingClientRect ( ) . left ; let targetEle = ( < HTMLElement > args . originalEvent . target ) ; y = tarElement . getBoundingClientRect ( ) . top + ( < HTMLElement > tarElement ) . offsetTop ; gObj . createColumnchooser ( x , y , targetEle ) ; break ; } } private modelChanged ( e ) { if ( e . module === 'edit' ) { this . refreshToolbarItems ( ) ; } } protected onPropertyChanged ( e ) { if ( e . module !== this . getModuleName ( ) || ! this . parent . toolbar ) { return ; } if ( this . element ) { remove ( this . element ) ; } this . render ( ) ; } private keyUpHandler ( e ) { if ( e . keyCode === 13 ) { this . search ( ) ; } } private search ( ) { this . parent . search ( this . searchElement . value ) ; } private updateSearchBox ( ) { if ( this . searchElement ) { this . searchElement . value = this . parent . searchSettings . key ; } } private wireEvent ( ) { if ( this . searchElement ) { this . searchBoxObj = new SearchBox ( this . searchElement ) ; EventHandler . add ( this . searchElement , 'keyup' , this . keyUpHandler , this ) ; this . searchBoxObj . wireEvent ( ) ; } } private unWireEvent ( ) { if ( this . searchElement ) { EventHandler . remove ( this . searchElement , 'keyup' , this . keyUpHandler ) ; this . searchBoxObj . unWireEvent ( ) ; } } protected addEventListener ( ) { if ( this . parent . isDestroyed ) { return ; } this . parent . on ( events . initialEnd , this . render , this ) ; this . parent . on ( events . uiUpdate , this . onPropertyChanged , this ) ; this . parent . on ( events . inBoundModelChanged , this . updateSearchBox . bind ( this ) ) ; this . parent . on ( events . modelChanged , this . refreshToolbarItems , this ) ; this . parent . on ( events . toolbarRefresh , this . refreshToolbarItems , this ) ; this . parent . on ( events . inBoundModelChanged , this . modelChanged , this ) ; this . parent . on ( events . dataBound , this . refreshToolbarItems , this ) ; } protected removeEventListener ( ) { if ( this . parent . isDestroyed ) { return ; } this . parent . off ( events . initialEnd , this . render ) ; this . parent . off ( events . uiUpdate , this . onPropertyChanged ) ; this . parent . off ( events . inBoundModelChanged , this . updateSearchBox ) ; this . parent . off ( events . modelChanged , this . refreshToolbarItems ) ; this . parent . off ( events . toolbarRefresh , this . refreshToolbarItems ) ; this . parent . off ( events . inBoundModelChanged , this . modelChanged ) ; this . parent . off ( events . dataBound , this . refreshToolbarItems ) ; } /**
     * For internal use only - Get the module name.
     */ private getModuleName ( ) { return 'toolbar' ; } }