import { Component , ElementRef } from '@angular/core' ; import { ContextMenuService } from './context-menu.service' ; @ Component ( { selector : 'tb-context-menu' , templateUrl : './context-menu.component.html' } ) export class ContextMenuComponent { public isOpen = false ; constructor ( public el , private menuService ) { menuService . registerMenu ( this ) ; const parentEl = el . nativeElement . parentElement ; parentEl . oncontextmenu = ( event ) => { this . parentEventHandler ( event ) ; setTimeout ( ( ) => { this . updatePosition ( event ) ; } , 0 ) ; } ; } private updatePosition ( event ) { const edgeBuffer = 10 ; const target = this . el . nativeElement . firstElementChild ; const rect = target . getBoundingClientRect ( ) ; const offsetX = ( event . pageX + rect . width + edgeBuffer ) > window . innerWidth ; const offsetY = ( event . pageY + rect . height + edgeBuffer ) > window . innerHeight ; target . style . left = event . pageX - ( offsetX ? rect . width : 0 ) + 'px' ; target . style . top = event . pageY - ( offsetY ? rect . height : 0 ) + 'px' ; } private parentEventHandler ( event ) { event . preventDefault ( ) ; event . stopPropagation ( ) ; this . menuService . closeAllMenus ( ) ; this . isOpen = true ; } }