mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
refactor(overlays): inject overlay providers
BREAKING CHANGES: - Overlay components, such as Alert or Modals, should now be created using its injected provider. - Overlays now have the `present()` method on the overlay’s instance, rather than using `nav.present(overlayInstance)`. - All overlays now present on top of all app content, to include menus. - Below is an example of the change to `Alert`, but the pattern is the same for all overlays: ActionSheet, Loading, Modal, Picker, Popover, Toast WAS: ``` import { NavController, Alert } from ‘ionic-angular’; constructor(private nav: NavController) { } doAlert() { let alert = Alert.create({ title: 'Alert', }); this.nav.present(alert); } ``` NOW: ``` import { AlertController } from ‘ionic-angular’; constructor(private alertCtrl: AlertController) { } doAlert() { let alert = this.alertCtrl.create({ title: 'Alert' }); alert.present(); } ```
This commit is contained in:
205
src/components/loading/loading-component.ts
Normal file
205
src/components/loading/loading-component.ts
Normal file
@ -0,0 +1,205 @@
|
||||
import { Component, ElementRef, Renderer, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
import { Animation } from '../../animations/animation';
|
||||
import { Config } from '../../config/config';
|
||||
import { isDefined, isPresent, isUndefined } from '../../util/util';
|
||||
import { NavParams } from '../nav/nav-params';
|
||||
import { Transition, TransitionOptions } from '../../transitions/transition';
|
||||
import { ViewController} from '../nav/view-controller';
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-loading',
|
||||
template:
|
||||
'<ion-backdrop [class.hide-backdrop]="!d.showBackdrop"></ion-backdrop>' +
|
||||
'<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,
|
||||
})
|
||||
export class LoadingCmp {
|
||||
private d: any;
|
||||
private id: number;
|
||||
private showSpinner: boolean;
|
||||
|
||||
constructor(
|
||||
private _viewCtrl: ViewController,
|
||||
private _config: Config,
|
||||
private _elementRef: ElementRef,
|
||||
params: NavParams,
|
||||
renderer: Renderer
|
||||
) {
|
||||
this.d = params.data;
|
||||
|
||||
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';
|
||||
}
|
||||
|
||||
ionViewDidEnter() {
|
||||
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: any): Promise<any> {
|
||||
return this._viewCtrl.dismiss(null, role);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Animations for loading
|
||||
*/
|
||||
class LoadingPopIn extends Transition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-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(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
||||
|
||||
wrapper.fromTo('opacity', 0.99, 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(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-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.5);
|
||||
|
||||
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(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
||||
|
||||
wrapper.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
|
||||
backdrop.fromTo('opacity', 0.5, 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(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-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(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
|
||||
|
||||
wrapper.fromTo('opacity', 0.99, 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