From d0ae810bae4387f2bc8541110c60976d2607f4ab Mon Sep 17 00:00:00 2001
From: imgx64 <imgx64@gmail.com>
Date: Thu, 8 Jun 2017 06:40:28 -0800
Subject: [PATCH] feat(loading): add enableBackdropDismiss to Loading (#11937)

closes #7975
---
 src/components/loading/loading-component.ts    | 18 ++++++++++++++++--
 src/components/loading/loading-controller.ts   |  1 +
 src/components/loading/loading-options.ts      |  1 +
 src/components/loading/loading.ts              |  1 +
 .../test/basic/pages/page-one/page-one.html    |  1 +
 .../test/basic/pages/page-one/page-one.ts      | 13 +++++++++++++
 6 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/loading/loading-component.ts b/src/components/loading/loading-component.ts
index 714839dde4..a278cf60a9 100644
--- a/src/components/loading/loading-component.ts
+++ b/src/components/loading/loading-component.ts
@@ -1,8 +1,9 @@
-import { Component, ElementRef, Renderer, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, HostListener, Renderer, ViewEncapsulation } from '@angular/core';
 
 import { Config } from '../../config/config';
 import { GestureController, BlockerDelegate, BLOCK_ALL } from '../../gestures/gesture-controller';
 import { isDefined, isUndefined, assert } from '../../util/util';
+import { KEY_ESCAPE } from '../../platform/key';
 import { LoadingOptions } from './loading-options';
 import { NavParams } from '../../navigation/nav-params';
 import { Platform } from '../../platform/platform';
@@ -14,7 +15,7 @@ import { ViewController } from '../../navigation/view-controller';
 @Component({
   selector: 'ion-loading',
   template:
-    '<ion-backdrop [hidden]="!d.showBackdrop"></ion-backdrop>' +
+    '<ion-backdrop [hidden]="!d.showBackdrop" (click)="bdClick()" [class.backdrop-no-tappable]="!d.enableBackdropDismiss"></ion-backdrop>' +
     '<div class="loading-wrapper">' +
       '<div *ngIf="showSpinner" class="loading-spinner">' +
         '<ion-spinner [name]="d.spinner"></ion-spinner>' +
@@ -87,6 +88,19 @@ export class LoadingCmp {
 
   }
 
+  @HostListener('body:keyup', ['$event'])
+  keyUp(ev: KeyboardEvent) {
+    if (this._viewCtrl.isLast() && ev.keyCode === KEY_ESCAPE) {
+      this.bdClick();
+    }
+  }
+
+  bdClick() {
+    if (this.d.enableBackdropDismiss) {
+      this.dismiss('backdrop');
+    }
+  }
+
   dismiss(role: string): Promise<any> {
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
diff --git a/src/components/loading/loading-controller.ts b/src/components/loading/loading-controller.ts
index 367756975b..c822692222 100644
--- a/src/components/loading/loading-controller.ts
+++ b/src/components/loading/loading-controller.ts
@@ -107,6 +107,7 @@ import { LoadingOptions } from './loading-options';
  * | content               |`string`    | The html content for the loading indicator.                                                                      |
  * | cssClass              |`string`    | Additional classes for custom styles, separated by spaces.                                                       |
  * | showBackdrop          |`boolean`   | Whether to show the backdrop. Default true.                                                                      |
+ * | enableBackdropDismiss | `boolean`  | Whether the loading indicator should be dismissed by tapping the backdrop. Default false.                        |
  * | dismissOnPageChange   |`boolean`   | Whether to dismiss the indicator when navigating to a new page. Default false.                                   |
  * | duration              |`number`    | How many milliseconds to wait before hiding the indicator. By default, it will show until `dismiss()` is called. |
  *
diff --git a/src/components/loading/loading-options.ts b/src/components/loading/loading-options.ts
index f3f5711568..4a7fafd959 100644
--- a/src/components/loading/loading-options.ts
+++ b/src/components/loading/loading-options.ts
@@ -4,6 +4,7 @@ export interface LoadingOptions {
   content?: string;
   cssClass?: string;
   showBackdrop?: boolean;
+  enableBackdropDismiss?: boolean;
   dismissOnPageChange?: boolean;
   duration?: number;
 }
diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts
index df84f434e8..c3c6118808 100644
--- a/src/components/loading/loading.ts
+++ b/src/components/loading/loading.ts
@@ -16,6 +16,7 @@ export class Loading extends ViewController {
 
   constructor(app: App, opts: LoadingOptions = {}, config: Config) {
     opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true;
+    opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : false;
     opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
 
     super(LoadingCmp, opts, null);
diff --git a/src/components/loading/test/basic/pages/page-one/page-one.html b/src/components/loading/test/basic/pages/page-one/page-one.html
index 1828716a8c..40ed1dd99c 100644
--- a/src/components/loading/test/basic/pages/page-one/page-one.html
+++ b/src/components/loading/test/basic/pages/page-one/page-one.html
@@ -23,6 +23,7 @@
   <button ion-button block (click)="presentLoadingMultipleNav()" color="danger">Multiple Nav Loading</button>
   <button ion-button block (click)="presentLoadingDismissNav()">Dismiss Page Change</button>
   <button ion-button block (click)="presentLoadingOpenDismiss()">Open->Dismiss (x2)</button>
+  <button ion-button block (click)="presentLoadingBackdropDismiss()">Backdrop Dismiss</button>
 
 </ion-content>
 
diff --git a/src/components/loading/test/basic/pages/page-one/page-one.ts b/src/components/loading/test/basic/pages/page-one/page-one.ts
index f32e899150..76c607eee5 100644
--- a/src/components/loading/test/basic/pages/page-one/page-one.ts
+++ b/src/components/loading/test/basic/pages/page-one/page-one.ts
@@ -268,4 +268,17 @@ export class PageOne {
     loading2.present();
     loading2.dismiss();
   }
+
+  presentLoadingBackdropDismiss() {
+    const loading = this.loadingCtrl.create({
+      content: 'Tap on backdrop to dismiss',
+      enableBackdropDismiss: true
+    });
+
+    loading.onDidDismiss(() => {
+      console.log('Dismissed loading');
+    });
+
+    loading.present();
+  }
 }