diff --git a/src/components/loading/loading-component.ts b/src/components/loading/loading-component.ts index 2e733b5fdd..ec78bb1922 100644 --- a/src/components/loading/loading-component.ts +++ b/src/components/loading/loading-component.ts @@ -30,7 +30,7 @@ export class LoadingCmp { d: LoadingOptions; id: number; showSpinner: boolean; - durationTimeout: number; + durationTimeout: any; gestureBlocker: BlockerDelegate; constructor( diff --git a/src/components/loading/loading-controller.ts b/src/components/loading/loading-controller.ts new file mode 100644 index 0000000000..3e84eb08a9 --- /dev/null +++ b/src/components/loading/loading-controller.ts @@ -0,0 +1,130 @@ +import { Injectable } from '@angular/core'; + +import { App } from '../app/app'; +import { Config } from '../../config/config'; +import { Loading } from './loading'; +import { LoadingOptions } from './loading-options'; + +/** + * @name LoadingController + * @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 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 + * the create method: `create(opts)`. The spinner name should be + * passed in the `spinner` property, and any optional HTML can be passed + * 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, set `loadingSpinner: 'hide'` + * in the app's config or pass `spinner: 'hide'` in the loading + * options. See the [create](#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. 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 + * `onDidDismiss` function can be called to perform an action after the loading + * indicator is dismissed. + * + * >Note that after the component is dismissed, it will not be usable anymore + * and another one must be created. This can be avoided by wrapping the + * creation and presentation of the component in a reusable function as shown + * in the `usage` section below. + * + * ### Limitations + * The element is styled to appear on top of other content by setting its + * `z-index` property. You must ensure no element has a stacking context with + * a higher `z-index` than this element. + * + * @usage + * ```ts + * constructor(public loadingCtrl: LoadingController) { + * + * } + * + * presentLoadingDefault() { + * let loading = this.loadingCtrl.create({ + * content: 'Please wait...' + * }); + * + * loading.present(); + * + * setTimeout(() => { + * loading.dismiss(); + * }, 5000); + * } + * + * presentLoadingCustom() { + * let loading = this.loadingCtrl.create({ + * spinner: 'hide', + * content: ` + * `, + * duration: 5000 + * }); + * + * loading.onDidDismiss(() => { + * console.log('Dismissed loading'); + * }); + * + * loading.present(); + * } + * + * presentLoadingText() { + * let loading = this.loadingCtrl.create({ + * spinner: 'hide', + * content: 'Loading Please Wait...' + * }); + * + * loading.present(); + * + * setTimeout(() => { + * this.nav.push(Page2); + * }, 1000); + * + * setTimeout(() => { + * loading.dismiss(); + * }, 5000); + * } + * ``` + * @advanced + * + * Loading options + * + * | Option | Type | Description | + * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| + * | spinner |`string` | The name of the SVG spinner for the loading indicator. | + * | 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. | + * | 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. | + * + * @demo /docs/v2/demos/src/loading/ + * @see {@link /docs/v2/api/components/spinner/Spinner Spinner API Docs} + */ +@Injectable() +export class LoadingController { + + constructor(private _app: App, public config: Config) { } + + /** + * Create a loading indicator. See below for options. + * @param {LoadingOptions} opts Loading options + * @returns {Loading} Returns a Loading Instance + */ + create(opts: LoadingOptions = {}) { + return new Loading(this._app, opts, this.config); + } + +} diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts index 10de595a47..36181152d7 100644 --- a/src/components/loading/loading.ts +++ b/src/components/loading/loading.ts @@ -1,10 +1,10 @@ -import { Injectable } from '@angular/core'; - import { App } from '../app/app'; -import { AppPortal } from '../app/app-root'; +import { Config } from '../../config/config'; import { isPresent } from '../../util/util'; +import { PORTAL_LOADING } from '../app/app-constants'; import { LoadingCmp } from './loading-component'; import { LoadingOptions } from './loading-options'; +import { LoadingPopIn, LoadingPopOut, LoadingMdPopIn, LoadingMdPopOut, LoadingWpPopIn, LoadingWpPopOut } from './loading-transitions'; import { NavOptions } from '../../navigation/nav-util'; import { ViewController } from '../../navigation/view-controller'; @@ -14,13 +14,20 @@ import { ViewController } from '../../navigation/view-controller'; export class Loading extends ViewController { private _app: App; - constructor(app: App, opts: LoadingOptions = {}) { + constructor(app: App, opts: LoadingOptions = {}, config: Config) { opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true; opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false; super(LoadingCmp, opts, null); this._app = app; this.isOverlay = true; + + config.setTransition('loading-pop-in', LoadingPopIn); + config.setTransition('loading-pop-out', LoadingPopOut); + config.setTransition('loading-md-pop-in', LoadingMdPopIn); + config.setTransition('loading-md-pop-out', LoadingMdPopOut); + config.setTransition('loading-wp-pop-in', LoadingWpPopIn); + config.setTransition('loading-wp-pop-out', LoadingWpPopOut); } /** @@ -45,7 +52,7 @@ export class Loading extends ViewController { * @returns {Promise} Returns a promise which is resolved when the transition has completed. */ present(navOptions: NavOptions = {}) { - return this._app.present(this, navOptions, AppPortal.LOADING); + return this._app.present(this, navOptions, PORTAL_LOADING); } /** @@ -56,127 +63,3 @@ export class Loading extends ViewController { } } - - -/** - * @name LoadingController - * @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 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 - * the create method: `create(opts)`. The spinner name should be - * passed in the `spinner` property, and any optional HTML can be passed - * 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, set `loadingSpinner: 'hide'` - * in the app's config or pass `spinner: 'hide'` in the loading - * options. See the [create](#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. 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 - * `onDidDismiss` function can be called to perform an action after the loading - * indicator is dismissed. - * - * >Note that after the component is dismissed, it will not be usable anymore - * and another one must be created. This can be avoided by wrapping the - * creation and presentation of the component in a reusable function as shown - * in the `usage` section below. - * - * ### Limitations - * The element is styled to appear on top of other content by setting its - * `z-index` property. You must ensure no element has a stacking context with - * a higher `z-index` than this element. - * - * @usage - * ```ts - * constructor(public loadingCtrl: LoadingController) { - * - * } - * - * presentLoadingDefault() { - * let loading = this.loadingCtrl.create({ - * content: 'Please wait...' - * }); - * - * loading.present(); - * - * setTimeout(() => { - * loading.dismiss(); - * }, 5000); - * } - * - * presentLoadingCustom() { - * let loading = this.loadingCtrl.create({ - * spinner: 'hide', - * content: ` - * `, - * duration: 5000 - * }); - * - * loading.onDidDismiss(() => { - * console.log('Dismissed loading'); - * }); - * - * loading.present(); - * } - * - * presentLoadingText() { - * let loading = this.loadingCtrl.create({ - * spinner: 'hide', - * content: 'Loading Please Wait...' - * }); - * - * loading.present(); - * - * setTimeout(() => { - * this.nav.push(Page2); - * }, 1000); - * - * setTimeout(() => { - * loading.dismiss(); - * }, 5000); - * } - * ``` - * @advanced - * - * Loading options - * - * | Option | Type | Description | - * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| - * | spinner |`string` | The name of the SVG spinner for the loading indicator. | - * | 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. | - * | 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. | - * - * @demo /docs/v2/demos/src/loading/ - * @see {@link /docs/v2/api/components/spinner/Spinner Spinner API Docs} - */ -@Injectable() -export class LoadingController { - - constructor(private _app: App) {} - /** - * Create a loading indicator. See below for options. - * @param {LoadingOptions} opts Loading options - * @returns {Loading} Returns a Loading Instance - */ - create(opts: LoadingOptions = {}) { - return new Loading(this._app, opts); - } - -}