import { KeyCodes } from './../shared/models/constants' ; import { TreeNodeIterator } from './tree-node-iterator' ; import { Dom } from './../shared/Utilities/dom' ; import { GlobalStateService } from './../shared/services/global-state.service' ; import { DashboardType } from 'app/tree-view/models/dashboard-type' ; import { Component , Input , ViewChild , OnChanges , SimpleChange , ElementRef , AfterContentInit } from '@angular/core' ; import { TreeNode } from './tree-node' ; @ Component ( { selector : 'tree-view' , templateUrl : './tree-view.component.html' , styleUrls : [ './tree-view.component.scss' ] , } ) export class TreeViewComponent implements OnChanges , AfterContentInit { @ Input ( ) node : TreeNode ; @ Input ( ) level : number ; paddingLeft : string ; public types = DashboardType ; public showTryView = false ; @ ViewChild ( 'item' ) item : ElementRef ; constructor ( globalStateService ) { this . showTryView = globalStateService . showTryView ; } ngOnChanges ( changes ) { const nodeChange = changes [ 'node' ] ; const levelChange = changes [ 'level' ] ; if ( nodeChange && this . node ) { this . node . treeView = this ; } if ( levelChange && Number . isInteger ( this . level ) ) { if ( this . level > 2 ) { const padding = this . level * 10 - 10 ; this . paddingLeft = padding + 'px' ; } else { this . paddingLeft = '10px' ; } } } ngAfterContentInit ( ) { if ( this . node && this . node . dashboardType === DashboardType . AppsDashboard ) { setTimeout ( ( ) => { Dom . setFocusable ( this . item . nativeElement ) ; } , 0 ) ; } } onKeyPress ( event ) { if ( event . keyCode === KeyCodes . arrowDown ) { this . _moveFocusedItemDown ( ) ; } else if ( event . keyCode === KeyCodes . arrowUp ) { this . _moveFocusedItemUp ( ) ; } else if ( event . keyCode === KeyCodes . enter ) { if ( document . activeElement === this . item . nativeElement ) { this . node . select ( ) ; } else { return ; } } else if ( event . keyCode === KeyCodes . arrowRight ) { if ( this . node . showExpandIcon && ! this . node . isExpanded ) { this . node . toggle ( event ) ; } else { this . _moveFocusedItemDown ( ) ; } } else if ( event . keyCode === KeyCodes . arrowLeft ) { if ( this . node . showExpandIcon && this . node . isExpanded ) { this . node . toggle ( event ) ; } else { this . _moveFocusedItemUp ( ) ; } } if ( event . keyCode !== KeyCodes . tab ) { event . preventDefault ( ) ; } } public showMenu ( mouseEnter ) { if ( mouseEnter ) { this . node . showMenu = true ; } else if ( this . node . sideNav . selectedNode !== this . node ) { this . node . showMenu = false ; } } private _moveFocusedItemDown ( ) { const nextNode = new TreeNodeIterator ( this . node ) . next ( ) ; if ( nextNode ) { this . _clearFocus ( this . node ) ; this . setFocus ( nextNode ) ; } } private _moveFocusedItemUp ( ) { const prevNode = new TreeNodeIterator ( this . node ) . previous ( ) ; if ( prevNode ) { this . _clearFocus ( this . node ) ; this . setFocus ( prevNode ) ; } } public setFocus ( node ) { Dom . setFocus ( node . treeView . item . nativeElement ) ; ( < HTMLElement > node . treeView . item . nativeElement ) . setAttribute ( 'aria-selected' , 'true' ) ; node . isFocused = true ; this . node . sideNav . scrollIntoView ( ) ; } private _clearFocus ( node ) { Dom . clearFocus ( node . treeView . item . nativeElement ) ; ( < HTMLElement > node . treeView . item . nativeElement ) . removeAttribute ( 'aria-selected' ) ; node . isFocused = false ; } }