import { AfterContentInit , AfterViewInit , ChangeDetectorRef , Directive , ElementRef , HostListener , Input , OnDestroy , Renderer2 , } from '@angular/core' ; import { Subscription } from 'rxjs' ; import { distinctUntilChanged , filter , map , takeUntil } from 'rxjs/operators' ; import { Preferences } from '../../../../models/preferences' ; import { CardsFacadeService } from '../../../../services/cards-facade.service' ; import { HighlightSelector , MercenariesSynergiesHighlightService , } from '../../../../services/mercenaries/highlights/mercenaries-synergies-highlight.service' ; import { OverwolfService } from '../../../../services/overwolf.service' ; import { AppUiStoreFacadeService } from '../../../../services/ui-store/app-ui-store-facade.service' ; import { AbstractSubscriptionComponent } from '../../../abstract-subscription.component' ; @ Directive ( { selector : '[mercenariesHighlight]' , } ) export class MercenariesHighlightDirective extends AbstractSubscriptionComponent implements AfterContentInit , AfterViewInit , OnDestroy { @ Input ( 'mercenariesHighlight' ) cardId = undefined ; private highlightElement ; private highlightService : MercenariesSynergiesHighlightService ; private subscription$$ : Subscription ; constructor ( private readonly ow , private readonly allCards , private readonly el , private readonly renderer , protected readonly store , protected readonly cdr ) { super ( store , cdr ) ; this . highlightService = this . ow . getMainWindow ( ) . mercenariesSynergiesHighlightService ; } ngAfterContentInit ( ) { this . subscription$$ = this . store . listenMercenariesHighlights$ ( ( [ selector , prefs ] ) => [ selector , prefs ] as [ HighlightSelector , { name : string ; preferences : Preferences ; } ] ) . pipe ( filter ( ( [ [ selector , prefs ] ] ) => ! ! selector && ! ! prefs ) , map ( ( [ [ selector , prefs ] ] ) => prefs . preferences . mercenariesHighlightSynergies && selector ( this . allCards . getCard ( this . cardId ) ) ) , distinctUntilChanged ( ) , takeUntil ( this . destroyed$ ) ) . subscribe ( ( highlighted ) => this . highlight ( highlighted ) ) ; } ngAfterViewInit ( ) { this . highlightElement = this . renderer . createElement ( 'div' ) ; this . renderer . appendChild ( this . el . nativeElement , this . highlightElement ) ; this . renderer . addClass ( this . highlightElement , 'highlight-overlay' ) ; } @ HostListener ( 'window:beforeunload' ) ngOnDestroy ( ) { super . ngOnDestroy ( ) ; this . subscription$$ ?. unsubscribe ( ) ; } @ HostListener ( 'mouseenter' ) mouseEnterAbility ( ) { this . highlightService ?. selectCardId ( this . cardId ) ; } @ HostListener ( 'mouseleave' ) mouseLeaveAbility ( ) { this . highlightService ?. unselectCardId ( ) ; } private highlight ( shouldHighlight ) { if ( this . highlightElement ) { this . renderer . removeClass ( this . highlightElement , 'active' ) ; if ( shouldHighlight ) { this . renderer . addClass ( this . highlightElement , 'active' ) ; } } } }