refactor(loading): restructure loading component to separate modules

restructure loading component to separate modules
This commit is contained in:
Dan Bucholtz
2017-03-02 14:52:28 -06:00
parent b0986f5d6d
commit 5b299a000f
3 changed files with 143 additions and 130 deletions

View File

@ -30,7 +30,7 @@ export class LoadingCmp {
d: LoadingOptions; d: LoadingOptions;
id: number; id: number;
showSpinner: boolean; showSpinner: boolean;
durationTimeout: number; durationTimeout: any;
gestureBlocker: BlockerDelegate; gestureBlocker: BlockerDelegate;
constructor( constructor(

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

View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
import { App } from '../app/app'; import { App } from '../app/app';
import { AppPortal } from '../app/app-root'; import { Config } from '../../config/config';
import { isPresent } from '../../util/util'; import { isPresent } from '../../util/util';
import { PORTAL_LOADING } from '../app/app-constants';
import { LoadingCmp } from './loading-component'; import { LoadingCmp } from './loading-component';
import { LoadingOptions } from './loading-options'; import { LoadingOptions } from './loading-options';
import { LoadingPopIn, LoadingPopOut, LoadingMdPopIn, LoadingMdPopOut, LoadingWpPopIn, LoadingWpPopOut } from './loading-transitions';
import { NavOptions } from '../../navigation/nav-util'; import { NavOptions } from '../../navigation/nav-util';
import { ViewController } from '../../navigation/view-controller'; import { ViewController } from '../../navigation/view-controller';
@ -14,13 +14,20 @@ import { ViewController } from '../../navigation/view-controller';
export class Loading extends ViewController { export class Loading extends ViewController {
private _app: App; private _app: App;
constructor(app: App, opts: LoadingOptions = {}) { constructor(app: App, opts: LoadingOptions = {}, config: Config) {
opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true; opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true;
opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false; opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
super(LoadingCmp, opts, null); super(LoadingCmp, opts, null);
this._app = app; this._app = app;
this.isOverlay = true; 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. * @returns {Promise} Returns a promise which is resolved when the transition has completed.
*/ */
present(navOptions: NavOptions = {}) { 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);
}
}