import { ConnectedPosition , Overlay , OverlayPositionBuilder , OverlayRef , PositionStrategy } from '@angular/cdk/overlay' ; import { ComponentPortal } from '@angular/cdk/portal' ; import { ChangeDetectorRef , ComponentRef , Directive , ElementRef , EventEmitter , HostListener , Input , OnDestroy , Output , ViewRef , } from '@angular/core' ; import { ConfirmationComponent } from '../components/tooltip/confirmation.component' ; import { Events } from '../services/events.service' ; import { CardTooltipPositionType } from './card-tooltip-position.type' ; @ Directive ( { selector : '[confirmationTooltip]' , } ) export class AskConfirmationDirective implements OnDestroy { @ Input ( ) askConfirmation : boolean ; @ Input ( ) confirmationTitle : string ; @ Input ( ) confirmationText : string ; @ Input ( ) validButtonText : string ; @ Input ( ) cancelButtonText : string ; @ Input ( ) showOk = true ; @ Input ( ) set confirmationPosition ( value ) { if ( value === this . _confirmationPosition || value === 'none' ) { return ; } this . _confirmationPosition = value ; } @ Output ( ) onConfirm : EventEmitter < boolean > = new EventEmitter < boolean > ( ) ; private _confirmationPosition : CardTooltipPositionType ; private tooltipPortal ; private overlayRef : OverlayRef ; private positionStrategy : PositionStrategy ; constructor ( private overlayPositionBuilder , private elementRef , private overlay , private cdr , private events ) { } ngAfterViewInit ( ) { } @ HostListener ( 'click' , [ '$event' ] ) onClick ( ) { if ( ! this . askConfirmation ) { this . confirm ( ) ; return ; } else { this . showConfirmationPopup ( ) ; } } private updatePositionStrategy ( ) { if ( this . positionStrategy ) { this . cancel ( ) ; this . positionStrategy = null ; } else if ( this . overlayRef ) { this . cancel ( ) ; } let positions = [ { originX : 'end' , originY : 'bottom' , overlayX : 'end' , overlayY : 'top' , } , ] ; if ( this . _confirmationPosition === 'bottom-right' || this . _confirmationPosition === 'right' ) { positions = [ { originX : 'end' , originY : 'bottom' , overlayX : 'start' , overlayY : 'top' , } , ] ; } this . positionStrategy = this . overlayPositionBuilder . flexibleConnectedTo ( this . elementRef ) . withPositions ( positions ) ; this . overlayRef = this . overlay . create ( { positionStrategy : this . positionStrategy , hasBackdrop : true , panelClass : [ 'modal' ] , backdropClass : 'confirmation-backdrop' , } ) ; this . overlayRef . backdropClick ( ) . subscribe ( ( ) => this . cancel ( ) ) ; } @ HostListener ( 'window:beforeunload' ) ngOnDestroy ( ) { if ( this . overlayRef ) { this . positionStrategy . detach ( ) ; } } showConfirmationPopup ( ) { this . updatePositionStrategy ( ) ; this . tooltipPortal = new ComponentPortal ( ConfirmationComponent ) ; const tooltipRef = this . overlayRef . attach ( this . tooltipPortal ) ; tooltipRef . instance . confirmationTitle = this . confirmationTitle ?? 'Are you sure?' ; tooltipRef . instance . confirmationText = this . confirmationText ?? 'This will close the tracker for the duration of the current match' ; tooltipRef . instance . validButtonText = this . validButtonText ?? 'Exit' ; tooltipRef . instance . cancelButtonText = this . cancelButtonText ?? 'Cancel' ; tooltipRef . instance . showOk = this . showOk ; tooltipRef . instance . onConfirm . subscribe ( ( event ) => this . confirm ( ) ) ; tooltipRef . instance . onCancel . subscribe ( ( event ) => this . cancel ( ) ) ; this . events . broadcast ( Events . SHOW_MODAL ) ; this . positionStrategy . apply ( ) ; setTimeout ( ( ) => { if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } ) ; } private confirm ( ) { if ( this . overlayRef ) { this . overlayRef . detach ( ) ; } this . onConfirm . next ( true ) ; this . events . broadcast ( Events . HIDE_MODAL ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } private cancel ( ) { this . overlayRef . detach ( ) ; this . events . broadcast ( Events . HIDE_MODAL ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } }