feat(popover): added outsideClick (#2441)

* feat(popover): added outsideClick

fixes #1477
* fix(test): fix tests, change listenOpts.target type

Author: valorkin

demo/src/app/components/+popover/demos/basic/basic.html

@@ -1,5 +1,6 @@
 <button type="button" class="btn btn-primary"
-        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        [outsideClick]="true">
   Live demo
 </button>
 

src/component-loader/component-loader.class.ts

@@ -18,16 +18,9 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { PositioningOptions, PositioningService } from '../positioning';
-import { listenToTriggers } from '../utils/triggers';
+import { listenToTriggersV2, registerOutsideClick } from '../utils/triggers';
 import { ContentRef } from './content-ref.class';
-
-export interface ListenOptions {
-  target?: ElementRef;
-  triggers?: string;
-  show?: Function;
-  hide?: Function;
-  toggle?: Function;
-}
+import { ListenOptions } from './listen-options.model';
 
 export class ComponentLoader<T> {
   public onBeforeShow: EventEmitter<any> = new EventEmitter();
@@ -209,19 +202,45 @@ export class ComponentLoader<T> {
     this.triggers = listenOpts.triggers || this.triggers;
 
     listenOpts.target = listenOpts.target || this._elementRef;
-    listenOpts.show = listenOpts.show || (() => this.show());
-    listenOpts.hide = listenOpts.hide || (() => this.hide());
-    listenOpts.toggle = listenOpts.toggle || (() => this.isShown
-      ? listenOpts.hide()
-      : listenOpts.show());
-
-    this._unregisterListenersFn = listenToTriggers(
-      this._renderer,
-      listenOpts.target.nativeElement,
-      this.triggers,
-      listenOpts.show,
-      listenOpts.hide,
-      listenOpts.toggle);
+    let _removeGlobalListener = Function.prototype;
+
+    const hide = () => {
+      if (listenOpts.hide) {
+        listenOpts.hide();
+      } else {
+        this.hide();
+      }
+
+      _removeGlobalListener();
+    };
+
+    const show = (registerHide: Function) => {
+      listenOpts.show ? listenOpts.show() : this.show();
+      // register hide listeners
+      // register outsideClick
+      registerHide();
+      if (this._componentRef && this._componentRef.location) {
+        // why: should run after first event bubble
+        const target = this._componentRef.location;
+        setTimeout(() => {
+          _removeGlobalListener = registerOutsideClick(this._renderer, {
+            target,
+            outsideClick: listenOpts.outsideClick,
+            hide
+          });
+        });
+      }
+    };
+
+    const toggle = (registerHide: Function) => {
+      this.isShown ? hide() : show(registerHide);
+    };
+
+    this._unregisterListenersFn = listenToTriggersV2(this._renderer, {
+      target: listenOpts.target,
+      triggers: listenOpts.triggers,
+      show, hide, toggle
+    });
 
     return this;
   }

src/component-loader/listen-options.model.ts

@@ -0,0 +1,10 @@
+import { ElementRef } from '@angular/core';
+
+export interface ListenOptions {
+  target?: ElementRef | HTMLElement;
+  triggers?: string;
+  outsideClick?: boolean;
+  show?: Function;
+  hide?: Function;
+  toggle?: Function;
+}

src/popover/popover.config.ts

@@ -17,6 +17,8 @@ export class PopoverConfig {
    * event names.
    */
   public triggers: string = 'click';
+
+  outsideClick = false;
   /**
    * A selector specifying the element the popover should be appended to.
    * Currently only supports "body".

src/popover/popover.directive.ts

@@ -23,6 +23,8 @@ export class PopoverDirective implements OnInit, OnDestroy {
    * Placement of a popover. Accepts: "top", "bottom", "left", "right"
    */
   @Input() public placement: 'top' | 'bottom' | 'left' | 'right';
+
+  @Input() outsideClick = false;
   /**
    * Specifies events that should trigger. Supports a space separated list of
    * event names.
@@ -138,6 +140,7 @@ export class PopoverDirective implements OnInit, OnDestroy {
 
     this._popover.listen({
       triggers: this.triggers,
+      outsideClick: this.outsideClick,
       show: () => this.show()
     });
   }

src/utils/triggers.ts

@@ -2,8 +2,9 @@
  * @copyright Valor Software
  * @copyright Angular ng-bootstrap team
  */
-import { Renderer } from '@angular/core';
+import { ElementRef, Renderer } from '@angular/core';
 import { Trigger } from './trigger.class';
+import { ListenOptions } from '../component-loader/listen-options.model';
 
 const DEFAULT_ALIASES = {
   hover: ['mouseover', 'mouseout'],
@@ -60,3 +61,54 @@ export function listenToTriggers(renderer: Renderer, target: any, triggers: stri
 
   return () => { listeners.forEach((unsubscribeFn: Function) => unsubscribeFn()); };
 }
+
+export function listenToTriggersV2(renderer: Renderer, options: ListenOptions): Function {
+  const parsedTriggers = parseTriggers(options.triggers);
+  const target = options.target.hasOwnProperty('nativeElement') ? (options.target as ElementRef).nativeElement : options.target;
+  // do nothing
+  if (parsedTriggers.length === 1 && parsedTriggers[0].isManual()) {
+    return Function.prototype;
+  }
+
+  // all listeners
+  const listeners: any[] = [];
+
+  // lazy listeners registration
+  const _registerHide: Function[] = [];
+  const registerHide = () => {
+    // add hide listeners to unregister array
+    _registerHide.forEach((fn) => listeners.push(fn()));
+    // register hide events only once
+    _registerHide.length = 0;
+  };
+
+  // register open\close\toggle listeners
+  parsedTriggers.forEach((trigger: Trigger) => {
+    const useToggle = trigger.open === trigger.close;
+    const showFn = useToggle ? options.toggle : options.show;
+
+    if (!useToggle) {
+      _registerHide.push(() => renderer.listen(target, trigger.close, options.hide));
+    }
+
+    listeners.push(renderer.listen(target, trigger.open, () => showFn(registerHide)));
+  });
+
+  // register outside click
+  // _registerHide.push(() => registerOutsideClick(renderer, options));
+  return () => {
+    listeners.forEach((unsubscribeFn: Function) => unsubscribeFn());
+  };
+}
+
+export function registerOutsideClick(renderer: Renderer, options: ListenOptions) {
+  if (!options.outsideClick) {
+    return Function.prototype;
+  }
+  const target = options.target.hasOwnProperty('nativeElement') ? (options.target as ElementRef).nativeElement : options.target;
+  return renderer.listenGlobal('document', 'click', (event: any) => {
+    if (!target.contains(event.target)) {
+      options.hide();
+    }
+  });
+}