mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
refactor(loading): restructure loading component to separate modules
restructure loading component to separate modules
This commit is contained in:
Dan Bucholtz
@ -30,7 +30,7 @@ export class LoadingCmp {
|
||||
d: LoadingOptions;
|
||||
id: number;
|
||||
showSpinner: boolean;
|
||||
durationTimeout: number;
|
||||
durationTimeout: any;
|
||||
gestureBlocker: BlockerDelegate;
|
||||
|
||||
constructor(
|
||||
|
||||
130
src/components/loading/loading-controller.ts
Normal file
130
src/components/loading/loading-controller.ts
Normal file
@ -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: `
|
||||
* <div class="custom-spinner-container">
|
||||
* <div class="custom-spinner-box"></div>
|
||||
* </div>`,
|
||||
* 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);
|
||||
}
|
||||
|
||||
}
|
||||
@ -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: `
|
||||
* <div class="custom-spinner-container">
|
||||
* <div class="custom-spinner-box"></div>
|
||||
* </div>`,
|
||||
* 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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user