use Renderer2 arkon#22

isoden · Jan 5, 2018 · 222425a · 222425a
1 parent 37a8ae9
commit 222425a
Showing 1 changed file with 34 additions and 8 deletions.
diff --git a/src/click-outside.directive.ts b/src/click-outside.directive.ts
@@ -12,8 +12,13 @@ import {
   PLATFORM_ID,
   SimpleChanges,
   NgZone,
+  Renderer2,
 } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import { merge } from 'rxjs/observable/merge';
+import { takeUntil } from 'rxjs/operators/takeUntil';
 
 @Injectable()
 @Directive({ selector: '[clickOutside]' })
@@ -31,7 +36,12 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
   private _nodesExcluded: Array<HTMLElement> = [];
   private _events: Array<string> = ['click'];
 
+  private _beforeInit: Subject<void> = new Subject<void>();
+  private _onDestroy: Subject<void> = new Subject<void>();
+  private _onOutsideClick: Subject<void> = new Subject<void>();
+
   constructor(private _el: ElementRef,
+              private _renderer2: Renderer2,
               private _ngZone: NgZone,
               @Inject(PLATFORM_ID) private platformId: Object) {
     this._initOnClickBody = this._initOnClickBody.bind(this);
@@ -47,11 +57,11 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
   ngOnDestroy() {
     if (!isPlatformBrowser(this.platformId)) { return; }
 
-    if (this.attachOutsideOnClick) {
-      this._events.forEach(e => this._el.nativeElement.removeEventListener(e, this._initOnClickBody));
-    }
+    this._onDestroy.next();
+    this._onDestroy.complete();
 
-    this._events.forEach(e => document.body.removeEventListener(e, this._onClickBody));
+    this._onOutsideClick.complete();
+    this._beforeInit.complete();
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -63,6 +73,8 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
   }
 
   private _init() {
+    this._beforeInit.next();
+
     if (this.clickOutsideEvents !== '') {
       this._events = this.clickOutsideEvents.split(',').map(e => e.trim());
     }
@@ -71,7 +83,8 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
 
     if (this.attachOutsideOnClick) {
       this._ngZone.runOutsideAngular(() => {
-        this._events.forEach(e => this._el.nativeElement.addEventListener(e, this._initOnClickBody));
+        this._listenAll(this._el.nativeElement, ...this._events)
+          .subscribe(this._initOnClickBody);
       });
     } else {
       this._initOnClickBody();
@@ -88,7 +101,11 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
 
   private _initClickListeners() {
     this._ngZone.runOutsideAngular(() => {
-      this._events.forEach(e => document.body.addEventListener(e, this._onClickBody));
+      this._listenAll('body', ...this._events)
+        .pipe(
+          takeUntil(this._onOutsideClick),
+        )
+        .subscribe(this._onClickBody);
     });
   }
 
@@ -118,7 +135,7 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
       this._ngZone.run(() => this.clickOutside.emit(ev));
 
       if (this.attachOutsideOnClick) {
-        this._events.forEach(e => document.body.removeEventListener(e, this._onClickBody));
+        this._onOutsideClick.next();
       }
     }
   }
@@ -130,6 +147,15 @@ export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
       }
     }
 
-    return false;
+  private _listenAll(target:  'window' | 'document' | 'body' | any, ...eventNames: string[]): Observable<Event> {
+    const sources = eventNames.map(eventName => {
+      return new Observable<Event>(observer => this._renderer2.listen(target, eventName, ev => observer.next(ev)));
+    });
+
+    return merge(...sources)
+      .pipe(
+        takeUntil(this._beforeInit),
+        takeUntil(this._onDestroy),
+      );
   }
 }