import { Injectable , Injector , ComponentRef } from '@angular/core' ; import { Overlay , OverlayConfig , OverlayRef } from '@angular/cdk/overlay' ; import { ComponentPortal } from '@angular/cdk/portal' ; import { ContextMenuOverlayRef } from './context-menu-overlay' ; import { ContextMenuComponent } from './context-menu.component' ; import { ContextmenuOverlayConfig } from './interfaces' ; import { UserPreferencesService } from '@alfresco/adf-core' ; import { Directionality } from '@angular/cdk/bidi' ; import { CONTEXT_MENU_DIRECTION } from './direction.token' ; @ Injectable ( { providedIn : 'root' } ) export class ContextMenuService { private direction : Directionality ; constructor ( private injector , private overlay , private userPreferenceService ) { this . userPreferenceService . select ( 'textOrientation' ) . subscribe ( ( textOrientation ) => { this . direction = textOrientation ; } ) ; } open ( config ) { const overlay = this . createOverlay ( config ) ; const overlayRef = new ContextMenuOverlayRef ( overlay ) ; this . attachDialogContainer ( overlay , overlayRef ) ; return overlayRef ; } private createOverlay ( config ) { const overlayConfig = this . getOverlayConfig ( config ) ; return this . overlay . create ( overlayConfig ) ; } private attachDialogContainer ( overlay , contextmenuOverlayRef ) { const injector = this . createInjector ( contextmenuOverlayRef ) ; const containerPortal = new ComponentPortal ( ContextMenuComponent , null , injector ) ; const containerRef = overlay . attach ( containerPortal ) ; return containerRef . instance ; } private createInjector ( contextmenuOverlayRef ) { const injectionTokens = new WeakMap ( ) ; injectionTokens . set ( ContextMenuOverlayRef , contextmenuOverlayRef ) ; injectionTokens . set ( CONTEXT_MENU_DIRECTION , this . direction ) ; return Injector . create ( { parent : this . injector , providers : [ { provide : ContextMenuOverlayRef , useValue : contextmenuOverlayRef } , { provide : CONTEXT_MENU_DIRECTION , useValue : this . direction } ] } ) ; } private getOverlayConfig ( config ) { const { x , y } = config . source ; const positionStrategy = this . overlay . position ( ) . flexibleConnectedTo ( { x , y } ) . withPositions ( [ { originX : 'end' , originY : 'bottom' , overlayX : 'end' , overlayY : 'top' } ] ) ; const overlayConfig = new OverlayConfig ( { hasBackdrop : config . hasBackdrop , backdropClass : config . backdropClass , panelClass : config . panelClass , scrollStrategy : this . overlay . scrollStrategies . close ( ) , positionStrategy , direction : this . direction } ) ; return overlayConfig ; } }