From d21a682bad37ad192f60c097aa4d2ed44ca7d6db Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 1 Apr 2016 13:37:47 -0400 Subject: [PATCH] docs(loading): remove the enableBackdropDismiss and update demo references #5426 --- demos/loading/index.ts | 40 ++++++++---------- ionic/components/loading/loading.ts | 43 +++++--------------- ionic/components/loading/test/basic/index.ts | 14 +++---- 3 files changed, 32 insertions(+), 65 deletions(-) diff --git a/demos/loading/index.ts b/demos/loading/index.ts index c6cb025a93..2cd8d824e2 100644 --- a/demos/loading/index.ts +++ b/demos/loading/index.ts @@ -10,9 +10,8 @@ class E2EPage { presentLoadingIos() { let loading = Loading.create({ spinner: 'ios', - content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.', - enableBackdropDismiss: true, - duration: 5000 + content: 'This is the "ios" spinner. It will dismiss after 3 seconds.', + duration: 3000 }); this.nav.present(loading); @@ -21,9 +20,8 @@ class E2EPage { presentLoadingDots() { let loading = Loading.create({ spinner: 'dots', - content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.', - enableBackdropDismiss: true, - duration: 5000 + content: 'This is the "dots" spinner. It will dismiss after 3 seconds.', + duration: 3000 }); this.nav.present(loading); @@ -32,9 +30,8 @@ class E2EPage { presentLoadingBubbles() { let loading = Loading.create({ spinner: 'bubbles', - content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.', - enableBackdropDismiss: true, - duration: 5000 + content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.', + duration: 3000 }); this.nav.present(loading); @@ -43,9 +40,8 @@ class E2EPage { presentLoadingCircles() { let loading = Loading.create({ spinner: 'circles', - content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.', - enableBackdropDismiss: true, - duration: 5000 + content: 'This is the "circles" spinner. It will dismiss after 3 seconds.', + duration: 3000 }); this.nav.present(loading); @@ -54,9 +50,8 @@ class E2EPage { presentLoadingCrescent() { let loading = Loading.create({ spinner: 'crescent', - content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.', - enableBackdropDismiss: true, - duration: 5000 + content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.', + duration: 3000 }); this.nav.present(loading); @@ -64,9 +59,8 @@ class E2EPage { presentLoadingDefault() { let loading = Loading.create({ - content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.', - enableBackdropDismiss: true, - duration: 5000 + content: 'This is the mode specific spinner. It will dismiss after 3 seconds.', + duration: 3000 }); this.nav.present(loading); @@ -79,9 +73,8 @@ class E2EPage {
-
This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.
`, - enableBackdropDismiss: true, - duration: 5000 +
This is a custom spinner. It will dismiss after 3 seconds.
`, + duration: 3000 }); this.nav.present(loading); @@ -90,9 +83,8 @@ class E2EPage { presentLoadingText() { let loading = Loading.create({ spinner: 'hide', - content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.', - enableBackdropDismiss: true, - duration: 5000 + content: 'This has no spinner, only text. It will dismiss after 3 seconds.', + duration: 3000 }); this.nav.present(loading); diff --git a/ionic/components/loading/loading.ts b/ionic/components/loading/loading.ts index 68f74cc7be..2024d35654 100644 --- a/ionic/components/loading/loading.ts +++ b/ionic/components/loading/loading.ts @@ -15,10 +15,9 @@ import {ViewController} from '../nav/view-controller'; * @description * An overlay that can be used to indicate activity while blocking user * interaction. The loading indicator appears on top of the app's content, - * and can be automatically dismissed by the app or manually dismissed by - * the user to resume interaction with the app. It includes an optional - * backdrop, which can optionally be clicked to dismiss the loading - * indicator. + * and can be dismissed by the app to resume user interaction with + * the app. It includes an optional backdrop, which can be disabled + * by setting `showBackdrop: false` upon creation. * * ### Creating * You can pass all of the loading options in the first argument of @@ -27,20 +26,17 @@ import {ViewController} from '../nav/view-controller'; * in the `content` property. If you do not pass a value to `spinner` * the loading indicator will use the spinner specified by the mode. To * set the spinner name across the app, set the value of `loadingSpinner` - * in your app's config. To hide the spinner, you can set - * `loadingSpinner: 'hide'` or pass `spinner: 'hide'` in the loading + * in your app's config. To hide the spinner, set `loadingSpinner: 'hide'` + * in the apps' config or pass `spinner: 'hide'` in the loading * options. See the create method below for all available options. * * ### Dismissing * The loading indicator can be dismissed automatically after a specific * amount of time by passing the number of milliseconds to display it in - * the `duration` of the loading options. It can also be dismissed by - * clicking on the backdrop or pressing the escape key if - * `enableBackdropDismiss` is set to `true` in the loading options. By - * default the loading indicator will show even during page changes, - * but this can be disabled by setting `dismissOnPageChange` to `true`. - * To dismiss the loading indicator after creation, call the `dismiss()` - * method on the Loading instance. + * the `duration` of the loading options. By default the loading indicator + * will show even during page changes, but this can be disabled by setting + * `dismissOnPageChange` to `true`. To dismiss the loading indicator after + * creation, call the `dismiss()` method on the Loading instance. * * ### Limitations * The element is styled to appear on top of other content by setting its @@ -102,7 +98,6 @@ import {ViewController} from '../nav/view-controller'; export class Loading extends ViewController { constructor(opts: LoadingOptions = {}) { - opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : false; opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true; super(LoadingCmp, opts); @@ -133,7 +128,6 @@ export class Loading extends ViewController { * | cssClass |`string` | An additional class for custom styles. | * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. | * | dismissOnPageChange |`boolean` | Whether to dismiss the indicator when navigating to a new page. Default false. | - * | enableBackdropDismiss |`boolean` | If the loading should close when the user taps the backdrop. Default false. | * | delay |`number` | How many milliseconds to delay showing the indicator. Default 0. | * | duration |`number` | How many milliseconds to wait before hiding the indicator. By default, it will show until `hide()` is called. | * @@ -152,7 +146,7 @@ export class Loading extends ViewController { @Component({ selector: 'ion-loading', template: - '' + + '' + '
' + '
' + '' + @@ -208,22 +202,6 @@ class LoadingCmp { this.d.duration ? setTimeout(() => this.dismiss('backdrop'), this.d.duration) : null; } - @HostListener('body:keyup', ['$event']) - private _keyUp(ev: KeyboardEvent) { - if (this.isEnabled() && this._viewCtrl.isLast()) { - if (ev.keyCode === 27) { - console.debug('loading, escape button'); - this.bdClick(); - } - } - } - - bdClick() { - if (this.isEnabled() && this.d.enableBackdropDismiss) { - this.dismiss('backdrop'); - } - } - dismiss(role): Promise { return this._viewCtrl.dismiss(null, role); } @@ -239,7 +217,6 @@ export interface LoadingOptions { content?: string; showBackdrop?: boolean; dismissOnPageChange?: boolean; - enableBackdropDismiss?: boolean; delay?: number; duration?: number; } diff --git a/ionic/components/loading/test/basic/index.ts b/ionic/components/loading/test/basic/index.ts index c159a1c3d9..0624cefac7 100644 --- a/ionic/components/loading/test/basic/index.ts +++ b/ionic/components/loading/test/basic/index.ts @@ -10,7 +10,7 @@ class E2EPage { presentLoadingIos() { let loading = Loading.create({ spinner: 'ios', - enableBackdropDismiss: true + duration: 2000 }); this.nav.present(loading); @@ -20,7 +20,7 @@ class E2EPage { let loading = Loading.create({ spinner: 'dots', content: 'Loading...', - enableBackdropDismiss: true + duration: 2000 }); this.nav.present(loading); @@ -30,7 +30,7 @@ class E2EPage { let loading = Loading.create({ spinner: 'bubbles', content: 'Loading...', - enableBackdropDismiss: true + duration: 2000 }); this.nav.present(loading); @@ -40,7 +40,7 @@ class E2EPage { let loading = Loading.create({ spinner: 'circles', content: 'Loading...', - enableBackdropDismiss: true + duration: 2000 }); this.nav.present(loading); @@ -50,7 +50,6 @@ class E2EPage { let loading = Loading.create({ spinner: 'crescent', content: 'Please wait...', - enableBackdropDismiss: true, duration: 1500 }); @@ -60,7 +59,6 @@ class E2EPage { presentLoadingDefault() { let loading = Loading.create({ content: 'Please wait...', - enableBackdropDismiss: true, }); this.nav.present(loading); @@ -77,7 +75,7 @@ class E2EPage {
`, - enableBackdropDismiss: true + duration: 2000 }); this.nav.present(loading); @@ -97,7 +95,7 @@ class E2EPage { setTimeout(() => { loading.dismiss(); - }, 5000); + }, 2000); } goToPage2() {