Skip to content

Commit

Permalink
docs(loading): remove the enableBackdropDismiss and update demo
Browse files Browse the repository at this point in the history 
references #5426
  • Loading branch information
@brandyscarney
brandyscarney committed Apr 1, 2016
1 parent 3bce7ba commit d21a682
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 65 deletions.
40 changes: 16 additions & 24 deletions demos/loading/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -54,19 +50,17 @@ 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);
}

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);
Expand All @@ -79,9 +73,8 @@ class E2EPage {
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>
<div>This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.</div>`,
enableBackdropDismiss: true,
duration: 5000
<div>This is a custom spinner. It will dismiss after 3 seconds.</div>`,
duration: 3000
});

this.nav.present(loading);
Expand All @@ -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);
Expand Down
43 changes: 10 additions & 33 deletions ionic/components/loading/loading.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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. |
*
Expand All @@ -152,7 +146,7 @@ export class Loading extends ViewController {
@Component({
selector: 'ion-loading',
template:
'<div (click)="bdClick()" tappable disable-activated class="backdrop" [class.hide-backdrop]="!d.showBackdrop" role="presentation"></div>' +
'<div disable-activated class="backdrop" [class.hide-backdrop]="!d.showBackdrop" role="presentation"></div>' +
'<div class="loading-wrapper">' +
'<div *ngIf="showSpinner" class="loading-spinner">' +
'<ion-spinner [name]="d.spinner"></ion-spinner>' +
Expand Down Expand Up @@ -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<any> {
return this._viewCtrl.dismiss(null, role);
}
Expand All @@ -239,7 +217,6 @@ export interface LoadingOptions {
content?: string;
showBackdrop?: boolean;
dismissOnPageChange?: boolean;
enableBackdropDismiss?: boolean;
delay?: number;
duration?: number;
}
Expand Down
14 changes: 6 additions & 8 deletions ionic/components/loading/test/basic/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ class E2EPage {
presentLoadingIos() {
let loading = Loading.create({
spinner: 'ios',
enableBackdropDismiss: true
duration: 2000
});

this.nav.present(loading);
Expand All @@ -20,7 +20,7 @@ class E2EPage {
let loading = Loading.create({
spinner: 'dots',
content: 'Loading...',
enableBackdropDismiss: true
duration: 2000
});

this.nav.present(loading);
Expand All @@ -30,7 +30,7 @@ class E2EPage {
let loading = Loading.create({
spinner: 'bubbles',
content: 'Loading...',
enableBackdropDismiss: true
duration: 2000
});

this.nav.present(loading);
Expand All @@ -40,7 +40,7 @@ class E2EPage {
let loading = Loading.create({
spinner: 'circles',
content: 'Loading...',
enableBackdropDismiss: true
duration: 2000
});

this.nav.present(loading);
Expand All @@ -50,7 +50,6 @@ class E2EPage {
let loading = Loading.create({
spinner: 'crescent',
content: 'Please wait...',
enableBackdropDismiss: true,
duration: 1500
});

Expand All @@ -60,7 +59,6 @@ class E2EPage {
presentLoadingDefault() {
let loading = Loading.create({
content: 'Please wait...',
enableBackdropDismiss: true,
});

this.nav.present(loading);
Expand All @@ -77,7 +75,7 @@ class E2EPage {
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>`,
enableBackdropDismiss: true
duration: 2000
});

this.nav.present(loading);
Expand All @@ -97,7 +95,7 @@ class E2EPage {

setTimeout(() => {
loading.dismiss();
}, 5000);
}, 2000);
}

goToPage2() {
Expand Down

0 comments on commit d21a682

Please sign in to comment.