Skip to content

Commit

Permalink
feat(sidenav): emit event when backdrop is clicked
Browse files Browse the repository at this point in the history
This allows clients to distinguish between close events caused by
calling close() and those caused by the backdrop being clicked.

Closes #1427
  • Loading branch information
ianjoneill committed Oct 28, 2016
1 parent 04e2201 commit 22ee99f
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 1 deletion.
50 changes: 49 additions & 1 deletion src/lib/sidenav/sidenav.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,49 @@ describe('MdSidenav', () => {
tick();
}).toThrow();
}));

it('should emit the backdrop-clicked event when the backdrop is clicked', fakeAsync(() => {
let fixture = TestBed.createComponent(BasicTestApp);

let testComponent: BasicTestApp = fixture.debugElement.componentInstance;
let openButtonElement = fixture.debugElement.query(By.css('.open'));
openButtonElement.nativeElement.click();
fixture.detectChanges();
tick();

endSidenavTransition(fixture);
tick();

expect(testComponent.backdropClickedCount).toBe(0);

let sidenavBackdropElement = fixture.debugElement.query(By.css('.md-sidenav-backdrop'));
sidenavBackdropElement.nativeElement.click();
fixture.detectChanges();
tick();

expect(testComponent.backdropClickedCount).toBe(1);

endSidenavTransition(fixture);
tick();

openButtonElement.nativeElement.click();
fixture.detectChanges();
tick();

endSidenavTransition(fixture);
tick();

let closeButtonElement = fixture.debugElement.query(By.css('.close'));
closeButtonElement.nativeElement.click();
fixture.detectChanges();
tick();

endSidenavTransition(fixture);
tick();

expect(testComponent.backdropClickedCount).toBe(1);
}));

});

describe('attributes', () => {
Expand Down Expand Up @@ -257,7 +300,7 @@ class SidenavLayoutTwoSidenavTestApp { }
/** Test component that contains an MdSidenavLayout and one MdSidenav. */
@Component({
template: `
<md-sidenav-layout>
<md-sidenav-layout (backdrop-clicked)="backdropClicked()">
<md-sidenav #sidenav align="start"
(open-start)="openStart()"
(open)="open()"
Expand All @@ -274,6 +317,7 @@ class BasicTestApp {
openCount: number = 0;
closeStartCount: number = 0;
closeCount: number = 0;
backdropClickedCount: number = 0;

openStart() {
this.openStartCount++;
Expand All @@ -290,6 +334,10 @@ class BasicTestApp {
close() {
this.closeCount++;
}

backdropClicked() {
this.backdropClickedCount++;
}
}

@Component({
Expand Down
5 changes: 5 additions & 0 deletions src/lib/sidenav/sidenav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,9 @@ export class MdSidenavLayout implements AfterContentInit {
get start() { return this._start; }
get end() { return this._end; }

/** Event emitted when the sidenav backdrop is clicked. */
@Output('backdrop-clicked') onBackdropClicked = new EventEmitter<void>();

/** The sidenav at the start/end alignment, independent of direction. */
private _start: MdSidenav;
private _end: MdSidenav;
Expand Down Expand Up @@ -322,6 +325,8 @@ export class MdSidenavLayout implements AfterContentInit {
}

_closeModalSidenav() {
this.onBackdropClicked.emit(null);

if (this._start != null && this._start.mode != 'side') {
this._start.close();
}
Expand Down

0 comments on commit 22ee99f

Please sign in to comment.