import { Directive , HostListener , Input , OnInit , OnDestroy } from '@angular/core' ; import { debounceTime , takeUntil } from 'rxjs/operators' ; import { Subject } from 'rxjs' ; import { Store } from '@ngrx/store' ; import { AppStore , ContextMenu } from '@alfresco/aca-shared/store' ; @ Directive ( { selector : '[acaContextActions]' , exportAs : 'acaContextActions' } ) export class ContextActionsDirective implements OnInit , OnDestroy { private execute$ : Subject < any > = new Subject ( ) ; onDestroy$ : Subject < boolean > = new Subject < boolean > ( ) ; @ Input ( 'acaContextEnable' ) enabled = true ; @ HostListener ( 'contextmenu' , [ '$event' ] ) onContextMenuEvent ( event ) { if ( event ) { event . preventDefault ( ) ; if ( this . enabled ) { const target = this . getTarget ( event ) ; if ( target ) { this . execute ( event , target ) ; } } } } constructor ( private store ) { } ngOnInit ( ) { this . execute$ . pipe ( debounceTime ( 300 ) , takeUntil ( this . onDestroy$ ) ) . subscribe ( ( event ) => { this . store . dispatch ( new ContextMenu ( event ) ) ; } ) ; } ngOnDestroy ( ) { this . onDestroy$ . next ( true ) ; this . onDestroy$ . complete ( ) ; } execute ( event , target ) { if ( ! this . isSelected ( target ) ) { target . dispatchEvent ( new MouseEvent ( 'click' ) ) ; } this . execute$ . next ( event ) ; } private getTarget ( event ) { const target = event . target as Element ; return this . findAncestor ( target , 'adf-datatable-cell' ) ; } private isSelected ( target ) { if ( ! target ) { return false ; } return this . findAncestor ( target , 'adf-datatable-row' ) . classList . contains ( 'adf-is-selected' ) ; } private findAncestor ( el , className ) { if ( el . classList . contains ( className ) ) { return el ; } while ( ( el = el . parentElement ) && ! el . classList . contains ( className ) ) ; return el ; } }