mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
376 lines
12 KiB
TypeScript
376 lines
12 KiB
TypeScript
import {Component, Renderer, ElementRef, HostListener} from 'angular2/core';
|
|
import {NgFor, NgIf} from 'angular2/common';
|
|
|
|
import {Animation} from '../../animations/animation';
|
|
import {Transition, TransitionOptions} from '../../transitions/transition';
|
|
import {Config} from '../../config/config';
|
|
import {Spinner} from '../spinner/spinner';
|
|
import {isPresent, isUndefined, isDefined} from '../../util/util';
|
|
import {NavParams} from '../nav/nav-params';
|
|
import {ViewController} from '../nav/view-controller';
|
|
|
|
|
|
/**
|
|
* @name Loading
|
|
* @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.
|
|
*
|
|
* ### Creating
|
|
* You can pass all of the loading options in the first argument of
|
|
* the create method: `Loading.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, you can set
|
|
* `loadingSpinner: 'hide'` 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.
|
|
*
|
|
* ### 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(nav: NavController) {
|
|
* this.nav = nav;
|
|
* }
|
|
*
|
|
* presentLoadingDefault() {
|
|
* let loading = Loading.create({
|
|
* content: 'Please wait...'
|
|
* });
|
|
*
|
|
* this.nav.present(loading);
|
|
*
|
|
* setTimeout(() => {
|
|
* loading.dismiss();
|
|
* }, 5000);
|
|
* }
|
|
*
|
|
* presentLoadingCustom() {
|
|
* let loading = Loading.create({
|
|
* spinner: 'hide',
|
|
* content: `
|
|
* <div class="custom-spinner-container">
|
|
* <div class="custom-spinner-box"></div>
|
|
* </div>`,
|
|
* duration: 5000
|
|
* });
|
|
*
|
|
* this.nav.present(loading);
|
|
* }
|
|
*
|
|
* presentLoadingText() {
|
|
* let loading = Loading.create({
|
|
* spinner: 'hide',
|
|
* content: 'Loading Please Wait...'
|
|
* });
|
|
*
|
|
* this.nav.present(loading);
|
|
*
|
|
* setTimeout(() => {
|
|
* this.nav.push(Page2);
|
|
* }, 1000);
|
|
*
|
|
* setTimeout(() => {
|
|
* loading.dismiss();
|
|
* }, 5000);
|
|
* }
|
|
* ```
|
|
*
|
|
* @demo /docs/v2/demos/loading/
|
|
* @see {@link /docs/v2/api/components/spinner/Spinner Spinner API Docs}
|
|
*/
|
|
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);
|
|
this.viewType = 'loading';
|
|
this.isOverlay = true;
|
|
|
|
// by default, loading indicators should not fire lifecycle events of other views
|
|
// for example, when an loading indicators enters, the current active view should
|
|
// not fire its lifecycle events because it's not conceptually leaving
|
|
this.fireOtherLifecycles = false;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getTransitionName(direction: string) {
|
|
let key = (direction === 'back' ? 'loadingLeave' : 'loadingEnter');
|
|
return this._nav && this._nav.config.get(key);
|
|
}
|
|
|
|
/**
|
|
* Create a loading indicator with the following 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` | 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. |
|
|
*
|
|
*
|
|
* @param {object} opts Loading options
|
|
*/
|
|
static create(opts: LoadingOptions = {}) {
|
|
return new Loading(opts);
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
@Component({
|
|
selector: 'ion-loading',
|
|
template:
|
|
'<div (click)="bdClick()" tappable 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>' +
|
|
'</div>' +
|
|
'<div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>' +
|
|
'</div>',
|
|
host: {
|
|
'role': 'dialog'
|
|
},
|
|
directives: [NgIf, Spinner]
|
|
})
|
|
class LoadingCmp {
|
|
private d: any;
|
|
private id: number;
|
|
private created: number;
|
|
private showSpinner: boolean;
|
|
|
|
constructor(
|
|
private _viewCtrl: ViewController,
|
|
private _config: Config,
|
|
private _elementRef: ElementRef,
|
|
params: NavParams,
|
|
renderer: Renderer
|
|
) {
|
|
this.d = params.data;
|
|
this.created = Date.now();
|
|
|
|
if (this.d.cssClass) {
|
|
renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
|
|
}
|
|
|
|
this.id = (++loadingIds);
|
|
}
|
|
|
|
ngOnInit() {
|
|
// If no spinner was passed in loading options we need to fall back
|
|
// to the loadingSpinner in the app's config, then the mode spinner
|
|
if (isUndefined(this.d.spinner)) {
|
|
this.d.spinner = this._config.get('loadingSpinner', this._config.get('spinner', 'ios'));
|
|
}
|
|
|
|
// If the user passed hide to the spinner we don't want to show it
|
|
this.showSpinner = isDefined(this.d.spinner) && this.d.spinner !== 'hide';
|
|
}
|
|
|
|
onPageDidEnter() {
|
|
let activeElement: any = document.activeElement;
|
|
if (document.activeElement) {
|
|
activeElement.blur();
|
|
}
|
|
|
|
// If there is a duration, dismiss after that amount of time
|
|
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);
|
|
}
|
|
|
|
isEnabled() {
|
|
let tm = this._config.getNumber('overlayCreatedDiff', 750);
|
|
return (this.created + tm < Date.now());
|
|
}
|
|
}
|
|
|
|
export interface LoadingOptions {
|
|
spinner?: string;
|
|
content?: string;
|
|
showBackdrop?: boolean;
|
|
dismissOnPageChange?: boolean;
|
|
enableBackdropDismiss?: boolean;
|
|
delay?: number;
|
|
duration?: number;
|
|
}
|
|
|
|
/**
|
|
* Animations for loading
|
|
*/
|
|
class LoadingPopIn extends Transition {
|
|
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
|
super(opts);
|
|
|
|
let ele = enteringView.pageRef().nativeElement;
|
|
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
|
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
|
|
|
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
|
|
backdrop.fromTo('opacity', '0.01', '0.3');
|
|
|
|
this
|
|
.easing('ease-in-out')
|
|
.duration(200)
|
|
.add(backdrop)
|
|
.add(wrapper);
|
|
}
|
|
}
|
|
Transition.register('loading-pop-in', LoadingPopIn);
|
|
|
|
|
|
class LoadingPopOut extends Transition {
|
|
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
|
super(opts);
|
|
|
|
let ele = leavingView.pageRef().nativeElement;
|
|
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
|
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
|
|
|
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
|
|
backdrop.fromTo('opacity', '0.3', '0');
|
|
|
|
this
|
|
.easing('ease-in-out')
|
|
.duration(200)
|
|
.add(backdrop)
|
|
.add(wrapper);
|
|
}
|
|
}
|
|
Transition.register('loading-pop-out', LoadingPopOut);
|
|
|
|
|
|
class LoadingMdPopIn extends Transition {
|
|
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
|
super(opts);
|
|
|
|
let ele = enteringView.pageRef().nativeElement;
|
|
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
|
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
|
|
|
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
|
|
backdrop.fromTo('opacity', '0.01', '0.50');
|
|
|
|
this
|
|
.easing('ease-in-out')
|
|
.duration(200)
|
|
.add(backdrop)
|
|
.add(wrapper);
|
|
}
|
|
}
|
|
Transition.register('loading-md-pop-in', LoadingMdPopIn);
|
|
|
|
|
|
class LoadingMdPopOut extends Transition {
|
|
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
|
super(opts);
|
|
|
|
let ele = leavingView.pageRef().nativeElement;
|
|
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
|
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
|
|
|
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
|
|
backdrop.fromTo('opacity', '0.50', '0');
|
|
|
|
this
|
|
.easing('ease-in-out')
|
|
.duration(200)
|
|
.add(backdrop)
|
|
.add(wrapper);
|
|
}
|
|
}
|
|
Transition.register('loading-md-pop-out', LoadingMdPopOut);
|
|
|
|
|
|
class LoadingWpPopIn extends Transition {
|
|
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
|
super(opts);
|
|
|
|
let ele = enteringView.pageRef().nativeElement;
|
|
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
|
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
|
|
|
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
|
|
backdrop.fromTo('opacity', '0.01', '0.16');
|
|
|
|
this
|
|
.easing('cubic-bezier(0,0 0.05,1)')
|
|
.duration(200)
|
|
.add(backdrop)
|
|
.add(wrapper);
|
|
}
|
|
}
|
|
Transition.register('loading-wp-pop-in', LoadingWpPopIn);
|
|
|
|
|
|
class LoadingWpPopOut extends Transition {
|
|
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
|
super(opts);
|
|
|
|
let ele = leavingView.pageRef().nativeElement;
|
|
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
|
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
|
|
|
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
|
|
backdrop.fromTo('opacity', '0.16', '0');
|
|
|
|
this
|
|
.easing('ease-out')
|
|
.duration(150)
|
|
.add(backdrop)
|
|
.add(wrapper);
|
|
}
|
|
}
|
|
Transition.register('loading-wp-pop-out', LoadingWpPopOut);
|
|
|
|
let loadingIds = -1;
|