import { ConnectedPosition , Overlay , OverlayPositionBuilder , OverlayRef , PositionStrategy } from '@angular/cdk/overlay' ; import { ComponentPortal } from '@angular/cdk/portal' ; import { AfterViewInit , ChangeDetectorRef , ComponentRef , Directive , ElementRef , HostListener , Input , OnDestroy , ViewRef , } from '@angular/core' ; import { CardTooltipComponent } from '../components/tooltip/card-tooltip.component' ; import { DeckCard } from '../models/decktracker/deck-card' ; import { CardTooltipPositionType } from './card-tooltip-position.type' ; @ Directive ( { selector : '[cardTooltip]' , } ) export class CardTooltipDirective implements AfterViewInit , OnDestroy { @ Input ( 'cardTooltip' ) cardId = undefined ; @ Input ( ) cardTooltipType : 'GOLDEN' | 'NORMAL' = 'NORMAL' ; @ Input ( ) cardTooltipCard : DeckCard = undefined ; @ Input ( ) cardTooltipText = undefined ; @ Input ( ) cardTooltipClass = undefined ; @ Input ( ) cardTooltipDisplayBuffs : boolean ; @ Input ( ) cardTooltipBgs : boolean ; @ Input ( ) cardTooltipLocalized = true ; @ Input ( 'cardTooltipPosition' ) set position ( value ) { if ( value !== this . _position ) { this . _position = value ; this . updatePositionStrategy ( ) ; } } private _position : CardTooltipPositionType ; private tooltipPortal ; private overlayRef : OverlayRef ; private positionStrategy : PositionStrategy ; constructor ( private overlayPositionBuilder , private elementRef , private overlay , private cdr ) { } ngAfterViewInit ( ) { this . cdr . detach ( ) ; this . updatePositionStrategy ( ) ; } private updatePositionStrategy ( ) { if ( this . positionStrategy ) { this . positionStrategy . detach ( ) ; this . positionStrategy . dispose ( ) ; this . positionStrategy = null ; } if ( this . overlayRef ) { this . overlayRef . detach ( ) ; this . overlayRef . dispose ( ) ; } if ( this . _position === 'none' ) { return ; } let positions = [ { originX : 'end' , originY : 'center' , overlayX : 'start' , overlayY : 'center' , } , { originX : 'start' , originY : 'center' , overlayX : 'end' , overlayY : 'center' , } , { originX : 'start' , originY : 'top' , overlayX : 'end' , overlayY : 'top' , } , { originX : 'end' , originY : 'top' , overlayX : 'start' , overlayY : 'top' , } , ] ; if ( this . _position === 'left' ) { positions = [ { originX : 'start' , originY : 'center' , overlayX : 'end' , overlayY : 'center' , } , ] ; } else if ( this . _position === 'right' ) { positions = [ { originX : 'end' , originY : 'center' , overlayX : 'start' , overlayY : 'center' , } , ] ; } else if ( this . _position === 'bottom' ) { positions = [ { originX : 'center' , originY : 'bottom' , overlayX : 'center' , overlayY : 'top' , } , ] ; } else if ( this . _position === 'bottom-right' ) { positions = [ { originX : 'end' , originY : 'bottom' , overlayX : 'start' , overlayY : 'top' , } , ] ; } else if ( this . _position === 'top-right' ) { positions = [ { originX : 'end' , originY : 'top' , overlayX : 'start' , overlayY : 'bottom' , } , ] ; } else if ( this . _position === 'top-left' ) { positions = [ { originX : 'start' , originY : 'top' , overlayX : 'end' , overlayY : 'bottom' , } , ] ; } else if ( this . _position === 'auto' ) { positions = [ { originX : 'start' , originY : 'center' , overlayX : 'end' , overlayY : 'center' , } , { originX : 'end' , originY : 'center' , overlayX : 'start' , overlayY : 'center' , } , ] ; } this . positionStrategy = this . overlayPositionBuilder . flexibleConnectedTo ( this . elementRef ) . withPositions ( positions ) ; this . overlayRef = this . overlay . create ( { positionStrategy : this . positionStrategy } ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } @ HostListener ( 'window:beforeunload' ) ngOnDestroy ( ) { if ( this . overlayRef ) { this . overlayRef . detach ( ) ; } } @ HostListener ( 'mouseenter' ) onMouseEnter ( ) { if ( this . _position === 'none' ) { return ; } if ( ! this . cardId && ! this . cardTooltipCard ) { return ; } this . tooltipPortal = new ComponentPortal ( CardTooltipComponent ) ; const tooltipRef = this . overlayRef . attach ( this . tooltipPortal ) ; tooltipRef . instance . additionalClass = this . cardTooltipClass ; if ( this . cardTooltipCard ) { tooltipRef . instance . displayBuffs = this . cardTooltipDisplayBuffs ; tooltipRef . instance . cardTooltipCard = this . cardTooltipCard ; } else { tooltipRef . instance . cardTooltipCard = undefined ; tooltipRef . instance . displayBuffs = undefined ; tooltipRef . instance . cardType = this . cardTooltipType ; tooltipRef . instance . cardTooltipBgs = this . cardTooltipBgs ; tooltipRef . instance . localized = this . cardTooltipLocalized ; tooltipRef . instance . text = this . cardTooltipText ; tooltipRef . instance . cardId = this . cardId ; } this . positionStrategy . apply ( ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } @ HostListener ( 'mouseleave' ) onMouseLeave ( ) { if ( this . overlayRef ) { this . overlayRef . detach ( ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } } }