Skip to content

Commit

Permalink
feat(overlay-directives): support fallback positions (#1865)
Browse files Browse the repository at this point in the history
  • Loading branch information
kara authored Nov 16, 2016
1 parent 6aa7e22 commit aa472a0
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 16 deletions.
45 changes: 31 additions & 14 deletions src/lib/core/overlay/overlay-directives.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>`,
})
Expand All @@ -174,6 +190,7 @@ class ConnectedOverlayDirectiveTest {
offsetY: number = 0;
hasBackdrop: boolean;
backdropClicked = false;
positionChangeHandler = jasmine.createSpy('positionChangeHandler');

@ViewChild(ConnectedOverlayDirective) connectedOverlayDirective: ConnectedOverlayDirective;
}
28 changes: 26 additions & 2 deletions src/lib/core/overlay/overlay-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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[];
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -214,6 +235,9 @@ export class ConnectedOverlayDirective implements OnDestroy {
if (this._backdropSubscription) {
this._backdropSubscription.unsubscribe();
}
if (this._positionSubscription) {
this._positionSubscription.unsubscribe();
}
}
}

Expand Down

0 comments on commit aa472a0

Please sign in to comment.