feat(overlay-directives): support fallback positions (#1865)

Author: kara

src/lib/core/overlay/overlay-directives.spec.ts

@@ -4,6 +4,7 @@ import {By} from '@angular/platform-browser';
 import {ConnectedOverlayDirective, OverlayModule} from './overlay-directives';
 import {OverlayContainer} from './overlay-container';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
+import {ConnectedOverlayPositionChange} from './position/connected-position';
 
 
 describe('Overlay directives', () => {
@@ -110,18 +111,6 @@ describe('Overlay directives', () => {
       expect(backdrop.classList).toContain('md-test-class');
     });
 
-    it('should emit backdropClick appropriately', () => {
-      fixture.componentInstance.hasBackdrop = true;
-      fixture.componentInstance.isOpen = true;
-      fixture.detectChanges();
-
-      const backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
-      backdrop.click();
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.backdropClicked).toBe(true);
-    });
-
     it('should set the offsetX', () => {
       const trigger = fixture.debugElement.query(By.css('button')).nativeElement;
       const startX = trigger.getBoundingClientRect().left;
@@ -154,15 +143,42 @@ describe('Overlay directives', () => {
 
   });
 
+  describe('outputs', () => {
+    it('should emit backdropClick appropriately', () => {
+      fixture.componentInstance.hasBackdrop = true;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      const backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop') as HTMLElement;
+      backdrop.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.backdropClicked).toBe(true);
+    });
+
+    it('should emit positionChange appropriately', () => {
+      expect(fixture.componentInstance.positionChangeHandler).not.toHaveBeenCalled();
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.positionChangeHandler).toHaveBeenCalled();
+      expect(fixture.componentInstance.positionChangeHandler.calls.mostRecent().args[0])
+          .toEqual(jasmine.any(ConnectedOverlayPositionChange),
+              `Expected directive to emit an instance of ConnectedOverlayPositionChange.`);
+    });
+
+  });
+
 });
 
 
 @Component({
   template: `
   <button overlay-origin #trigger="overlayOrigin">Toggle menu</button>
   <template connected-overlay [origin]="trigger" [open]="isOpen" [width]="width" [height]="height"
-            [hasBackdrop]="hasBackdrop" backdropClass="md-test-class" 
-            (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY">
+            [hasBackdrop]="hasBackdrop" backdropClass="md-test-class"
+            (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY"
+            (positionChange)="positionChangeHandler($event)">
     <p>Menu content</p>
   </template>`,
 })
@@ -174,6 +190,7 @@ class ConnectedOverlayDirectiveTest {
   offsetY: number = 0;
   hasBackdrop: boolean;
   backdropClicked = false;
+  positionChangeHandler = jasmine.createSpy('positionChangeHandler');
 
   @ViewChild(ConnectedOverlayDirective) connectedOverlayDirective: ConnectedOverlayDirective;
 }

src/lib/core/overlay/overlay-directives.ts

@@ -15,7 +15,10 @@ import {Overlay, OVERLAY_PROVIDERS} from './overlay';
 import {OverlayRef} from './overlay-ref';
 import {TemplatePortal} from '../portal/portal';
 import {OverlayState} from './overlay-state';
-import {ConnectionPositionPair} from './position/connected-position';
+import {
+    ConnectionPositionPair,
+    ConnectedOverlayPositionChange
+} from './position/connected-position';
 import {PortalModule} from '../portal/portal-directives';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
 import {Subscription} from 'rxjs/Subscription';
@@ -63,6 +66,7 @@ export class ConnectedOverlayDirective implements OnDestroy {
   private _open = false;
   private _hasBackdrop = false;
   private _backdropSubscription: Subscription;
+  private _positionSubscription: Subscription;
 
   @Input() origin: OverlayOrigin;
   @Input() positions: ConnectionPositionPair[];
@@ -105,6 +109,7 @@ export class ConnectedOverlayDirective implements OnDestroy {
 
   /** Event emitted when the backdrop is clicked. */
   @Output() backdropClick = new EventEmitter<void>();
+  @Output() positionChange = new EventEmitter<ConnectedOverlayPositionChange>();
 
   // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.
 
@@ -169,11 +174,27 @@ export class ConnectedOverlayDirective implements OnDestroy {
     const originPoint = {originX: pos.originX, originY: pos.originY};
     const overlayPoint = {overlayX: pos.overlayX, overlayY: pos.overlayY};
 
-    return this._overlay.position()
+    const strategy = this._overlay.position()
       .connectedTo(this.origin.elementRef, originPoint, overlayPoint)
       .withDirection(this.dir)
       .withOffsetX(this.offsetX)
       .withOffsetY(this.offsetY);
+
+    this._handlePositionChanges(strategy);
+
+    return strategy;
+  }
+
+  private _handlePositionChanges(strategy: ConnectedPositionStrategy): void {
+    for (let i = 1; i < this.positions.length; i++) {
+      strategy.withFallbackPosition(
+          {originX: this.positions[i].originX, originY: this.positions[i].originY},
+          {overlayX: this.positions[i].overlayX, overlayY: this.positions[i].overlayY}
+      );
+    }
+
+    this._positionSubscription =
+        strategy.onPositionChange.subscribe(pos => this.positionChange.emit(pos));
   }
 
   /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
@@ -214,6 +235,9 @@ export class ConnectedOverlayDirective implements OnDestroy {
     if (this._backdropSubscription) {
       this._backdropSubscription.unsubscribe();
     }
+    if (this._positionSubscription) {
+      this._positionSubscription.unsubscribe();
+    }
   }
 }