feat(loading): add enableBackdropDismiss to Loading (#11937)

closes #7975

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);

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. |
  *

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;
 }

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);

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>
 

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();
+  }
 }