openaire-library/utils/modal/click-outside-or-esc.directive.ts

import {Directive, OnInit, OnDestroy, Output, EventEmitter, ElementRef, Input} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';
import {Subscriber} from "rxjs";

@Directive({
  selector: '[click-outside-or-esc]'
})

export class ClickOutsideOrEsc implements OnInit, OnDestroy {
  private listening: boolean;
  private subscriptions: any[] = [];
  @Input()
  public targetId = null;
  @Input()
  public escClose = true;

  @Output('clickOutside') clickOutside: EventEmitter<Object>;

  constructor(private _elRef: ElementRef) {
    this.listening = false;
    this.clickOutside = new EventEmitter();
  }

  ngOnInit() {
    if(typeof document !== 'undefined') {
      this.subscriptions.push(Observable
        .fromEvent(document, 'click')
        .delay(1)
        .do(() => {
          this.listening = true;
        }).subscribe((event: MouseEvent) => {
          this.onGlobalClick(event);
        }));
      this.subscriptions.push(Observable
        .fromEvent(document, 'keydown')
        .delay(1)
        .do(() => {
          this.listening = true;
        }).subscribe((event: KeyboardEvent) => {
          if (event.keyCode === 27 && this.escClose) {
            this.clickOutside.emit({
              target: (event.target || null),
              value: true
            });
          }
        }));
    }
  }

  ngOnDestroy() {
    if (this.subscriptions) {
      this.subscriptions.forEach((subscription: Subscriber<any>) => {
        subscription.unsubscribe();
      });
    }
    this.subscriptions = [];
  }

  onGlobalClick(event: MouseEvent) {
    if (event instanceof MouseEvent && this.listening === true) {
      if (event.target['id'] != this.targetId) {
        this.clickOutside.emit({
          target: (event.target || null),
          value: false
        });
      } else {
        this.clickOutside.emit({
          target: (event.target || null),
          value: true
        });
      }
    }
  }
}