javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Adam Bradley
2015-12-22 21:45:28 -06:00
parent f409d6add7
commit 98e4336c16
13 changed files with 534 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
ionic/components/alert/alert.ts
View File

@ -1,25 +1,217 @@
import {Component, ElementRef, Injectable, Renderer} from 'angular2/core';
import {Component, ElementRef, Renderer} from 'angular2/core';
import {NgClass, NgIf, NgFor, FORM_DIRECTIVES} from 'angular2/common';
import {OverlayController} from '../overlay/overlay-controller';
import {Config} from '../../config/config';
import {Animation} from '../../animations/animation';
import {NavParams} from '../nav/nav-controller';
import {ViewController} from '../nav/view-controller';
import {Animation} from '../../animations/animation';
import {Button} from '../button/button';
import {extend} from '../../util/util';
import {extend, isDefined} from '../../util/util';
@Injectable()
export class Alert {
export class Alert extends ViewController {
constructor(private _ctrl: OverlayController, private _config: Config) {
constructor(opts={}) {
super(null, AlertCmp, opts);
this.data.inputs = this.data.inputs || [];
let buttons = this.data.buttons || [];
this.data.buttons = [];
for (let button of buttons) {
this.addButton(button);
}
this.enterAnimationKey = 'alertEnter';
this.leaveAnimationKey = 'alertLeave';
}
static create() {
let alert = new Alert();
setTitle(title) {
this.data.title = title;
}
return alert;
setSubTitle(subTitle) {
this.data.subTitle = subTitle;
}
setBodyText(text) {
this.data.text = text;
}
addInput(input) {
input.value = isDefined(input.value) ? input.value : '';
this.data.inputs.push(input);
}
addButton(button) {
if (typeof button === 'string') {
button = {
text: button
};
}
this.data.buttons.push(button);
}
close() {
let index = this._nav.indexOf(this);
this._nav.remove(index, { animateFirst: true });
}
onClose(handler) {
this.data.onClose = handler;
}
static create(opts={}) {
return new Alert(opts);
}
}
@Component({
selector: 'ion-alert',
template:
'<div (click)="close()" tappable disable-activated class="backdrop" role="presentation"></div>' +
'<div class="alert-wrapper">' +
'<div class="alert-head">' +
'<h2 class="alert-title" *ngIf="d.title">{{d.title}}</h2>' +
'<h3 class="alert-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</h3>' +
'</div>' +
'<div class="alert-body" *ngIf="d.text">{{d.text}}</div>' +
'<div class="alert-body alert-inputs" *ngIf="d.inputs.length">' +
'<div class="alert-input-wrapper" *ngFor="#i of d.inputs">' +
'<div class="alert-input-title" *ngIf="i.title">{{i.title}}</div>' +
'<input [placeholder]="i.placeholder" [type]="i.input" [value]="i.value" class="alert-input">' +
'</div>' +
'</div>' +
'<div class="alert-buttons">' +
'<button *ngFor="#b of d.buttons" (click)="click(b)" [ngClass]="b.cssClass" class="alert-button">' +
'{{b.text}}' +
'</button>' +
'</div>' +
'</div>',
host: {
'role': 'dialog'
},
directives: [NgClass, NgIf, NgFor]
})
class AlertCmp {
constructor(
private _viewCtrl: ViewController,
elementRef: ElementRef,
params: NavParams,
renderer: Renderer
) {
this.d = params.data;
if (this.d.cssClass) {
renderer.setElementClass(elementRef, this.d.cssClass, true);
}
}
click(button, ev) {
let shouldClose = true;
if (button.handler) {
// a handler has been provided, run it
if (button.handler() === false) {
// if the return value is a false then do not close
shouldClose = false;
}
}
if (shouldClose) {
this.close();
}
}
close() {
this._viewCtrl.close();
}
onPageDidLeave() {
let values = this.d.inputs.map(i => i.value);
this.d.onClose && this.d.onClose(values);
}
}
/**
* Animations for alerts
*/
class AlertPopIn extends Animation {
constructor(enteringView, leavingView, opts) {
super(null, opts);
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-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, wrapper);
}
}
Animation.register('alert-pop-in', AlertPopIn);
class AlertPopOut extends Animation {
constructor(enteringView, leavingView, opts) {
super(null, opts);
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-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, wrapper);
}
}
Animation.register('alert-pop-out', AlertPopOut);
class AlertMdPopIn extends Animation {
constructor(enteringView, leavingView, opts) {
super(null, opts);
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-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, wrapper);
}
}
Animation.register('alert-md-pop-in', AlertMdPopIn);
class AlertMdPopOut extends Animation {
constructor(enteringView, leavingView, opts) {
super(null, opts);
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.5', '0');
this
.easing('ease-in-out')
.duration(200)
.add(backdrop, wrapper);
}
}
Animation.register('alert-md-pop-out', AlertMdPopOut);