mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
chore(build): rename ionic directory to src and update all references in the build process.
This commit is contained in:
Josh Thomas
363
src/components/loading/loading.ts
Normal file
363
src/components/loading/loading.ts
Normal file
@ -0,0 +1,363 @@
|
||||
import {Component, Renderer, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
|
||||
|
||||
import {Animation} from '../../animations/animation';
|
||||
import {Transition, TransitionOptions} from '../../transitions/transition';
|
||||
import {Config} from '../../config/config';
|
||||
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 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: `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, 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
|
||||
* `onDismiss` 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(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
|
||||
* });
|
||||
*
|
||||
* loading.onDismiss(() => {
|
||||
* console.log('Dismissed loading');
|
||||
* });
|
||||
*
|
||||
* 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.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true;
|
||||
opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
|
||||
|
||||
super(LoadingCmp, opts);
|
||||
this.viewType = 'loading';
|
||||
this.isOverlay = true;
|
||||
this.usePortal = 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. |
|
||||
* | duration |`number` | How many milliseconds to wait before hiding the indicator. By default, it will show until `dismiss()` is called. |
|
||||
*
|
||||
*
|
||||
* @param {object} opts Loading options
|
||||
*/
|
||||
static create(opts: LoadingOptions = {}) {
|
||||
return new Loading(opts);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-loading',
|
||||
template:
|
||||
'<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>' +
|
||||
'</div>' +
|
||||
'<div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>' +
|
||||
'</div>',
|
||||
host: {
|
||||
'role': 'dialog'
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
cssClass?: string;
|
||||
showBackdrop?: boolean;
|
||||
dismissOnPageChange?: 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;
|
||||
Reference in New Issue
Block a user