feat: add close scroll strategy

- Fixes #53
ncstate-sat · Nov 6, 2017 · 84051b6 · 84051b6
1 parent 33e7cd6
commit 84051b6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/src/demo/app/scroll-strategies/scroll-strategies.component.ts b/src/demo/app/scroll-strategies/scroll-strategies.component.ts
@@ -36,10 +36,10 @@ export class ScrollStrategiesDemo {
   strategy = 'reposition';
 
   scrollOptions = [
-    // TODO: support close on resolution of https://github.com/angular/material2/issues/7922
     { value: 'noop', name: 'Do nothing' },
     { value: 'block', name: 'Block scrolling' },
     { value: 'reposition', name: 'Reposition on scroll' },
+    { value: 'close', name: 'Close on scroll' },
     { value: 'rugrats', name: 'Invalid option' },
   ];
 }
diff --git a/src/lib/popover/popover-anchor.directive.ts b/src/lib/popover/popover-anchor.directive.ts
@@ -109,15 +109,16 @@ export class SatPopoverAnchor implements OnInit, OnDestroy {
       this._createOverlay();
       this._overlayRef.attach(this._portal);
       this._subscribeToBackdrop();
+      this._subscribeToDetachments();
       this._saveOpenedState();
     }
   }
 
   /** Closes the popover. */
   closePopover(value?: any): void {
     if (this._overlayRef) {
-      this._overlayRef.detach();
       this._saveClosedState(value);
+      this._overlayRef.detach();
     }
   }
 
@@ -194,20 +195,32 @@ export class SatPopoverAnchor implements OnInit, OnDestroy {
       .subscribe(() => this.closePopover());
   }
 
+  /** Set state back to closed when detached. */
+  private _subscribeToDetachments(): void {
+    this._overlayRef
+      .detachments()
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(() => this._saveClosedState());
+  }
+
   /** Save the opened state of the popover and emit. */
   private _saveOpenedState(): void {
-    this.attachedPopover._open = this._popoverOpen = true;
+    if (!this._popoverOpen) {
+      this.attachedPopover._open = this._popoverOpen = true;
 
-    this.popoverOpened.emit();
-    this.attachedPopover.opened.emit();
+      this.popoverOpened.emit();
+      this.attachedPopover.opened.emit();
+    }
   }
 
   /** Save the closed state of the popover and emit. */
   private _saveClosedState(value?: any): void {
-    this.attachedPopover._open = this._popoverOpen = false;
+    if (this._popoverOpen) {
+      this.attachedPopover._open = this._popoverOpen = false;
 
-    this.popoverClosed.emit(value);
-    this.attachedPopover.closed.emit(value);
+      this.popoverClosed.emit(value);
+      this.attachedPopover.closed.emit(value);
+    }
   }
 
   /** Create an overlay to be attached to the portal. */
@@ -256,6 +269,8 @@ export class SatPopoverAnchor implements OnInit, OnDestroy {
         return this._overlay.scrollStrategies.block();
       case 'reposition':
         return this._overlay.scrollStrategies.reposition();
+      case 'close':
+        return this._overlay.scrollStrategies.close();
       case 'noop':
       default:
         return this._overlay.scrollStrategies.noop();

diff --git a/src/lib/popover/popover.component.ts b/src/lib/popover/popover.component.ts
@@ -30,12 +30,11 @@ import {
   getInvalidScrollStrategyError,
 } from './popover.errors';
 
-// TODO: support close on resolution of https://github.com/angular/material2/issues/7922
-export type SatPopoverScrollStrategy = 'noop' | 'block' | 'reposition';
+export type SatPopoverScrollStrategy = 'noop' | 'block' | 'reposition' | 'close';
 export type SatPopoverHorizontalAlign = 'before' | 'start' | 'center' | 'end' | 'after';
 export type SatPopoverVerticalAlign = 'above'  | 'start' | 'center' | 'end' | 'below';
 
-export const VALID_SCROLL: SatPopoverScrollStrategy[] = ['noop', 'block', 'reposition'];
+export const VALID_SCROLL: SatPopoverScrollStrategy[] = ['noop', 'block', 'reposition', 'close'];
 export const VALID_HORIZ_ALIGN: SatPopoverHorizontalAlign[] =
     ['before', 'start', 'center', 'end', 'after'];
 export const VALID_VERT_ALIGN: SatPopoverVerticalAlign[] =