add hide on scroll attribute

MrFrankel · Jan 11, 2018 · e5fe199 · e5fe199
1 parent 1a08d49
commit e5fe199
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -155,7 +155,8 @@ SystemJS
     | popperShowOnStart        | number            | 0        |                         
     | popperTrigger            | Trigger(string)   | hover    |
     | popperPositionFixed      | boolean           | false    |
-    | popperCloseOnClickOutside| boolean           | true     |
+    | popperHideOnClickOutside | boolean           | true     |
+    | popperHideOnScroll       | boolean           | false    |
     | popperForceDetection     | boolean           | false    |
     | popperTrigger            | Trigger(string)   | hover    |
     | popperModifiers          | popperModifier    | undefined|

diff --git a/example/app/app.component.html b/example/app/app.component.html
@@ -1,4 +1,4 @@
-<section id="two" class="wrapper alt style2">
+<section id="two" class="wrapper alt style2" style="height: 100vh; overflow: auto">
   <section class="spotlight">
     <div class="example">
       <div #popper1

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-popper",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "description": "ngx-popper is an angular wrapper for popper.js",
   "directories": {
     "test": "test"

diff --git a/src/popper-directive.ts b/src/popper-directive.ts
@@ -25,6 +25,7 @@ export class PopperController implements OnInit, OnChanges {
   private scheduledHideTimeout: any;
   private subscriptions: any[] = [];
   private globalClick: any;
+  private globalScroll: any;
 
   constructor(private viewContainerRef: ViewContainerRef,
               private changeDetectorRef: ChangeDetectorRef,
@@ -67,6 +68,12 @@ export class PopperController implements OnInit, OnChanges {
   @Input('popperCloseOnClickOutside')
   closeOnClickOutside: boolean = true;
 
+  @Input('popperHideOnClickOutside')
+  hideOnClickOutside: boolean;
+
+  @Input('popperHideOnScroll')
+  hideOnScroll: boolean = false;
+
   @Input('popperPositionFixed')
   positionFixed: boolean;
 
@@ -114,8 +121,15 @@ export class PopperController implements OnInit, OnChanges {
     this.scheduledShow();
   }
 
-  hideOnClickOutside($event: MouseEvent): void {
-    if (this.disabled || !this.closeOnClickOutside) {
+  hideOnClickOutsideHandler($event: MouseEvent): void {
+    if (this.disabled || !this.hideOnClickOutside) {
+      return;
+    }
+    this.scheduledHide($event, this.hideTimeout);
+  }
+
+  hideOnScrollHandler($event: MouseEvent): void {
+    if (this.disabled || !this.hideOnScroll) {
       return;
     }
     this.scheduledHide($event, this.hideTimeout);
@@ -144,6 +158,10 @@ export class PopperController implements OnInit, OnChanges {
   }
 
   ngOnInit() {
+    //Support legacy prop
+    this.hideOnClickOutside = typeof this.hideOnClickOutside === 'undefined' ?
+      this.closeOnClickOutside : this.hideOnClickOutside;
+
     if (typeof this.content === 'string') {
       const text = this.content;
       this.content = this.constructContent();
@@ -170,7 +188,7 @@ export class PopperController implements OnInit, OnChanges {
   ngOnDestroy() {
     this.subscriptions.forEach(sub => sub.unsubscribe && sub.unsubscribe());
     this.subscriptions.length = 0;
-    this.clearGlobalClick();
+    this.clearEventListeners();
   }
 
   toggle() {
@@ -194,7 +212,8 @@ export class PopperController implements OnInit, OnChanges {
     if (this.timeoutAfterShow > 0) {
       this.scheduledHide(null, this.timeoutAfterShow);
     }
-    this.globalClick = this.renderer.listen('document', 'click', this.hideOnClickOutside.bind(this))
+    this.globalClick = this.renderer.listen('document', 'click', this.hideOnClickOutsideHandler.bind(this));
+    this.globalScroll = this.renderer.listen(this.getScrollParent(this.getRefElement()), 'scroll', this.hideOnScrollHandler.bind(this));
   }
 
   hide() {
@@ -211,7 +230,7 @@ export class PopperController implements OnInit, OnChanges {
       (this.content as PopperContent).hide();
     }
     this.popperOnHidden.emit(this);
-    this.clearGlobalClick();
+    this.clearEventListeners();
   }
 
   scheduledShow(delay: number = this.showDelay) {
@@ -251,8 +270,9 @@ export class PopperController implements OnInit, OnChanges {
     this.showTrigger = this.showTrigger || PopperController.baseOptions.trigger;
   }
 
-  private clearGlobalClick() {
+  private clearEventListeners() {
     this.globalClick && typeof this.globalClick === 'function' && this.globalClick();
+    this.globalScroll && typeof this.globalScroll === 'function' && this.globalScroll();
   }
 
   private overrideShowTimeout() {
@@ -288,4 +308,19 @@ export class PopperController implements OnInit, OnChanges {
     this.subscriptions.push(popperRef.onHidden.subscribe(this.hide.bind(this)));
   }
 
+  private getScrollParent(node) {
+    const isElement = node instanceof HTMLElement;
+    const overflowY = isElement && window.getComputedStyle(node).overflowY;
+    const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
+
+    if (!node) {
+      return null;
+    } else if (isScrollable && node.scrollHeight >= node.clientHeight) {
+      return node;
+    }
+
+    return this.getScrollParent(node.parentNode) || document;
+  }
+
+
 }