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:
Adam Bradley
2016-06-28 15:18:09 -05:00
parent 2fe42ed63e
commit 215c6d846c
39 changed files with 3578 additions and 3303 deletions

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