From e087cb43a3a71b2e06b584358901c39770341e40 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Mon, 6 Mar 2017 17:11:35 +0100
Subject: [PATCH 1/3] expose dialog close attempts

---
 src/demo-app/dialog/dialog-demo.html | 10 +++++-
 src/demo-app/dialog/dialog-demo.ts   | 17 ++++++++--
 src/lib/dialog/dialog-container.ts   |  6 ++++
 src/lib/dialog/dialog-ref.ts         | 14 +++++++--
 src/lib/dialog/dialog.spec.ts        | 46 ++++++++++++++++++++++++++++
 src/lib/dialog/dialog.ts             | 19 ++++++++++--
 6 files changed, 104 insertions(+), 8 deletions(-)

diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index ec05d8f1ae04..462350996596 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/src/demo-app/dialog/dialog-demo.html
@@ -10,6 +10,10 @@ <h1>Dialog demo</h1>
   Open dialog with template content
 </button>
 
+<button md-raised-button color="accent" (click)="openWithDisabledClose()">
+  Open dialog with disabled close and close attempts exposure
+</button>
+
 <md-card class="demo-dialog-card">
   <md-card-content>
     <h2>Dialog dimensions</h2>
@@ -67,6 +71,10 @@ <h2>Other options</h2>
 
 <p>Last close result: {{lastCloseResult}}</p>
 
-<template>
+<template #templateRef>
   I'm a template dialog. I've been opened {{numTemplateOpens}} times!
 </template>
+
+<template #disabledCloseRef>
+  {{ closeAttemptType ? 'Tried to close with: ' + closeAttemptType : 'Have not tried to close yet.' }}
+</template>
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index f82ecbfbce4c..f0d0e41e8945 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -12,6 +12,7 @@ import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/ma
 export class DialogDemo {
   dialogRef: MdDialogRef<JazzDialog>;
   lastCloseResult: string;
+  closeAttemptType: string;
   actionsAlignment: string;
   config: MdDialogConfig = {
     disableClose: false,
@@ -29,7 +30,8 @@ export class DialogDemo {
   };
   numTemplateOpens = 0;
 
-  @ViewChild(TemplateRef) template: TemplateRef<any>;
+  @ViewChild('templateRef') template: TemplateRef<any>;
+  @ViewChild('disabledCloseRef') templateForDisabledClose: TemplateRef<any>;
 
   constructor(public dialog: MdDialog, @Inject(DOCUMENT) doc: any) {
     // Possible useful example for the open and closeAll events.
@@ -63,8 +65,19 @@ export class DialogDemo {
     this.numTemplateOpens++;
     this.dialog.open(this.template, this.config);
   }
-}
 
+  openWithDisabledClose() {
+    let disableCloseConfig = new MdDialogConfig();
+    disableCloseConfig.disableClose = true;
+
+    let dialogRef = this.dialog.open(this.templateForDisabledClose, disableCloseConfig);
+
+    dialogRef.closeAttempt().subscribe((type) => {
+      this.closeAttemptType = type;
+    });
+
+  }
+}
 
 @Component({
   selector: 'demo-jazz-dialog',
diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
index 8816385f4272..b82958d6fd89 100644
--- a/src/lib/dialog/dialog-container.ts
+++ b/src/lib/dialog/dialog-container.ts
@@ -19,12 +19,15 @@ import {BasePortalHost, ComponentPortal, PortalHostDirective, TemplatePortal} fr
 import {MdDialogConfig} from './dialog-config';
 import {MdDialogContentAlreadyAttachedError} from './dialog-errors';
 import {FocusTrapFactory, FocusTrap} from '../core/a11y/focus-trap';
+import {Subject} from 'rxjs/Subject';
 import 'rxjs/add/operator/first';
 
 
 /** Possible states for the dialog container animation. */
 export type MdDialogContainerAnimationState = 'void' | 'enter' | 'exit' | 'exit-start';
 
+/** Possible types of close events */
+export type MdDialogCloseAttemptsTypes = 'escape' | 'backdrop';
 
 /**
  * Internal component that wraps user-provided dialog content.
@@ -65,6 +68,9 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
   /** The dialog configuration. */
   dialogConfig: MdDialogConfig;
 
+  /** subject to expose any close attempt */
+  _closeAttempt = new Subject<MdDialogCloseAttemptsTypes>();
+
   /** State of the dialog animation. */
   _state: MdDialogContainerAnimationState = 'enter';
 
diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
index fa70a0b78741..71ba6230c5af 100644
--- a/src/lib/dialog/dialog-ref.ts
+++ b/src/lib/dialog/dialog-ref.ts
@@ -1,8 +1,11 @@
 import {OverlayRef} from '../core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
-import {MdDialogContainer, MdDialogContainerAnimationState} from './dialog-container';
-
+import {
+  MdDialogContainer,
+  MdDialogContainerAnimationState,
+  MdDialogCloseAttemptsTypes
+} from './dialog-container';
 
 // TODO(jelbourn): resizing
 // TODO(jelbourn): afterOpen and beforeClose
@@ -50,4 +53,11 @@ export class MdDialogRef<T> {
   afterClosed(): Observable<any> {
     return this._afterClosed.asObservable();
   }
+
+  /**
+   * Gets an observable that is notified when a close attempt is made
+   */
+  closeAttempt(): Observable<MdDialogCloseAttemptsTypes> {
+    return this._containerInstance._closeAttempt.asObservable();
+  }
 }
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 53e67ca2066a..3a0d9a05caa2 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -156,6 +156,52 @@ describe('MdDialog', () => {
     });
   }));
 
+  it('should let the user know that there was a close attempt via the backdrop click', async(() => {
+    const dialogRef = dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef,
+      disableClose: true
+    });
+
+    let attemptType: any;
+
+    dialogRef.closeAttempt().subscribe((type) => {
+      attemptType = type;
+    });
+
+    viewContainerFixture.detectChanges();
+
+    let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+
+    backdrop.click();
+    viewContainerFixture.detectChanges();
+
+    viewContainerFixture.whenStable().then(() => {
+      expect(attemptType).toEqual('backdrop');
+      expect(overlayContainerElement.querySelector('md-dialog-container')).toBeTruthy();
+    });
+  }));
+
+  it('should let the user know that there was a close attempt via the escape key', async(() => {
+    const dialogRef = dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef,
+      disableClose: true
+    });
+
+    let attemptType: any;
+
+    dialogRef.closeAttempt().subscribe((type) => {
+      attemptType = type;
+    });
+
+    dispatchKeyboardEvent(document, 'keydown', ESCAPE);
+    viewContainerFixture.detectChanges();
+
+    viewContainerFixture.whenStable().then(() => {
+      expect(attemptType).toEqual('escape');
+      expect(overlayContainerElement.querySelector('md-dialog-container')).toBeTruthy();
+    });
+  }));
+
   it('should notify the observers if a dialog has been opened', () => {
     let ref: MdDialogRef<PizzaMsg>;
     dialog.afterOpen.subscribe(r => {
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index 3cc1c57ebe67..8eef625f8526 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -9,6 +9,7 @@ import {MdDialogConfig} from './dialog-config';
 import {MdDialogRef} from './dialog-ref';
 import {MdDialogContainer} from './dialog-container';
 import {TemplatePortal} from '../core/portal/portal';
+import {Subscription} from 'rxjs/Subscription';
 import 'rxjs/add/operator/first';
 
 
@@ -21,6 +22,7 @@ export class MdDialog {
   private _afterAllClosedAtThisLevel = new Subject<void>();
   private _afterOpenAtThisLevel = new Subject<MdDialogRef<any>>();
   private _boundKeydown = this._handleKeydown.bind(this);
+  private _backdropClickSubscription: Subscription;
 
   /** Keeps track of the currently-open dialogs. */
   get _openDialogs(): MdDialogRef<any>[] {
@@ -137,6 +139,10 @@ export class MdDialog {
     if (!config.disableClose) {
       // When the dialog backdrop is clicked, we want to close it.
       overlayRef.backdropClick().first().subscribe(() => dialogRef.close());
+    } else {
+      this._backdropClickSubscription = overlayRef.backdropClick().subscribe(() => {
+        dialogContainer._closeAttempt.next('backdrop');
+      });
     }
 
     // We create an injector specifically for the component we're instantiating so that it can
@@ -198,6 +204,10 @@ export class MdDialog {
 
       // no open dialogs are left, call next on afterAllClosed Subject
       if (!this._openDialogs.length) {
+        if (this._backdropClickSubscription) {
+          this._backdropClickSubscription.unsubscribe();
+        }
+
         this._afterAllClosed.next();
         document.removeEventListener('keydown', this._boundKeydown);
       }
@@ -211,10 +221,13 @@ export class MdDialog {
   private _handleKeydown(event: KeyboardEvent): void {
     let topDialog = this._openDialogs[this._openDialogs.length - 1];
 
-    if (event.keyCode === ESCAPE && topDialog &&
-      !topDialog._containerInstance.dialogConfig.disableClose) {
+    if (event.keyCode === ESCAPE && topDialog) {
 
-      topDialog.close();
+      topDialog._containerInstance._closeAttempt.next('escape');
+
+      if (!topDialog._containerInstance.dialogConfig.disableClose) {
+        topDialog.close();
+      }
     }
   }
 }

From 2fb9d049789c65d2572bffa8c50590a611fb7d66 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Tue, 7 Mar 2017 10:48:17 +0100
Subject: [PATCH 2/3] address comments

---
 src/lib/dialog/dialog-container.ts | 4 ++--
 src/lib/dialog/dialog-ref.ts       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
index b82958d6fd89..66cb46432443 100644
--- a/src/lib/dialog/dialog-container.ts
+++ b/src/lib/dialog/dialog-container.ts
@@ -27,7 +27,7 @@ import 'rxjs/add/operator/first';
 export type MdDialogContainerAnimationState = 'void' | 'enter' | 'exit' | 'exit-start';
 
 /** Possible types of close events */
-export type MdDialogCloseAttemptsTypes = 'escape' | 'backdrop';
+export type MdDialogCloseAttempt = 'escape' | 'backdrop';
 
 /**
  * Internal component that wraps user-provided dialog content.
@@ -69,7 +69,7 @@ export class MdDialogContainer extends BasePortalHost implements OnDestroy {
   dialogConfig: MdDialogConfig;
 
   /** subject to expose any close attempt */
-  _closeAttempt = new Subject<MdDialogCloseAttemptsTypes>();
+  _closeAttempt = new Subject<MdDialogCloseAttempt>();
 
   /** State of the dialog animation. */
   _state: MdDialogContainerAnimationState = 'enter';
diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
index 71ba6230c5af..73010252f5fc 100644
--- a/src/lib/dialog/dialog-ref.ts
+++ b/src/lib/dialog/dialog-ref.ts
@@ -4,7 +4,7 @@ import {Subject} from 'rxjs/Subject';
 import {
   MdDialogContainer,
   MdDialogContainerAnimationState,
-  MdDialogCloseAttemptsTypes
+  MdDialogCloseAttempt,
 } from './dialog-container';
 
 // TODO(jelbourn): resizing
@@ -57,7 +57,7 @@ export class MdDialogRef<T> {
   /**
    * Gets an observable that is notified when a close attempt is made
    */
-  closeAttempt(): Observable<MdDialogCloseAttemptsTypes> {
+  closeAttempt(): Observable<MdDialogCloseAttempt> {
     return this._containerInstance._closeAttempt.asObservable();
   }
 }

From 68ec710b988198ccbfbb5431854b8c1a6abddf6a Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Thu, 13 Apr 2017 17:23:54 +0200
Subject: [PATCH 3/3] retrigger tests?

---
 src/lib/dialog/dialog.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index a0edbbb10f4b..1f21cbd063e8 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -213,7 +213,6 @@ export class MdDialog {
 
     if (event.keyCode === ESCAPE && topDialog) {
       topDialog._containerInstance._closeAttempt.next('escape');
-
       if (canClose) {
         topDialog.close();
       }