From 93807edfe93f23ad283d7906256055526e2cf3a6 Mon Sep 17 00:00:00 2001
From: Ian O'Neill <ianjoneill@users.noreply.github.com>
Date: Thu, 1 Dec 2016 01:07:23 +0000
Subject: [PATCH] feat(sidenav): emit event when backdrop is clicked (#1638)

* feat(sidenav): emit event when backdrop is clicked

This allows clients to distinguish between close events caused by
calling close() and those caused by the backdrop being clicked.

Closes #1427

* Address review comments
---
 src/lib/sidenav/sidenav.html    |  2 +-
 src/lib/sidenav/sidenav.spec.ts | 50 ++++++++++++++++++++++++++++++++-
 src/lib/sidenav/sidenav.ts      |  8 ++++++
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/lib/sidenav/sidenav.html b/src/lib/sidenav/sidenav.html
index fe7f020b5642..2e278d672083 100644
--- a/src/lib/sidenav/sidenav.html
+++ b/src/lib/sidenav/sidenav.html
@@ -1,4 +1,4 @@
-<div class="md-sidenav-backdrop" (click)="_closeModalSidenav()"
+<div class="md-sidenav-backdrop" (click)="_onBackdropClicked()"
      [class.md-sidenav-shown]="_isShowingBackdrop()"></div>
 
 <ng-content select="md-sidenav"></ng-content>
diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts
index bc69e4d9f7fd..206519434115 100644
--- a/src/lib/sidenav/sidenav.spec.ts
+++ b/src/lib/sidenav/sidenav.spec.ts
@@ -190,6 +190,49 @@ describe('MdSidenav', () => {
         tick();
       }).not.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', () => {
@@ -267,7 +310,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()"
@@ -284,6 +327,7 @@ class BasicTestApp {
   openCount: number = 0;
   closeStartCount: number = 0;
   closeCount: number = 0;
+  backdropClickedCount: number = 0;
 
   openStart() {
     this.openStartCount++;
@@ -300,6 +344,10 @@ class BasicTestApp {
   close() {
     this.closeCount++;
   }
+
+  backdropClicked() {
+    this.backdropClickedCount++;
+  }
 }
 
 @Component({
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index dc13db90b629..87cd4bc4c429 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -276,6 +276,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;
@@ -380,6 +383,11 @@ export class MdSidenavLayout implements AfterContentInit {
     this._setDrawersValid(true);
   }
 
+  _onBackdropClicked() {
+    this.onBackdropClicked.emit();
+    this._closeModalSidenav();
+  }
+
   _closeModalSidenav() {
     if (this._start != null && this._start.mode != 'side') {
       this._start.close();