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

chore(components): ngmodule updates

Browse Source
This commit is contained in:
Adam Bradley
2016-09-13 17:07:33 -05:00
parent 16df3a4aab
commit 52ada1ca6d
50 changed files with 927 additions and 790 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/alert/alert-component.ts
View File

@ -1,15 +1,12 @@
import { Component, ElementRef, HostListener, Renderer, ViewEncapsulation } from '@angular/core';
import { NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
import { NgModel } from '@angular/forms';
import { Animation } from '../../animations/animation';
import { Backdrop } from '../backdrop/backdrop';
import { Config } from '../../config/config';
import { isPresent } from '../../util/util';
import { Key } from '../../util/key';
import { NavParams } from '../nav/nav-params';
import { Transition, TransitionOptions } from '../../transitions/transition';
import { ViewController } from '../nav/view-controller';
import { NavParams } from '../../navigation/nav-params';
import { Transition } from '../../transitions/transition';
import { ViewController } from '../../navigation/view-controller';
/**
@ -17,55 +14,53 @@ import { ViewController } from '../nav/view-controller';
*/
@Component({
selector: 'ion-alert',
template: `
<ion-backdrop (click)="bdClick()"></ion-backdrop>
<div class="alert-wrapper">
<div class="alert-head">
<h2 id="{{hdrId}}" class="alert-title" *ngIf="d.title" [innerHTML]="d.title"></h2>
<h3 id="{{subHdrId}}" class="alert-sub-title" *ngIf="d.subTitle" [innerHTML]="d.subTitle"></h3>
</div>
<div id="{{msgId}}" class="alert-message" [innerHTML]="d.message"></div>
<div *ngIf="d.inputs.length" [ngSwitch]="inputType">
template:
'<ion-backdrop (click)="bdClick()"></ion-backdrop>' +
'<div class="alert-wrapper">' +
'<div class="alert-head">' +
'<h2 id="{{hdrId}}" class="alert-title" *ngIf="d.title" [innerHTML]="d.title"></h2>' +
'<h3 id="{{subHdrId}}" class="alert-sub-title" *ngIf="d.subTitle" [innerHTML]="d.subTitle"></h3>' +
'</div>' +
'<div id="{{msgId}}" class="alert-message" [innerHTML]="d.message"></div>' +
'<div *ngIf="d.inputs.length" [ngSwitch]="inputType">' +
<template ngSwitchCase="radio">
<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">
<button ion-button="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">
<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>
<div class="alert-radio-label">
{{i.label}}
</div>
</button>
</div>
</template>
'<template ngSwitchCase="radio">' +
'<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
'<button ion-button="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
'<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>' +
'<div class="alert-radio-label">' +
'{{i.label}}' +
'</div>' +
'</button>' +
'</div>' +
'</template>' +
<template ngSwitchCase="checkbox">
<div class="alert-checkbox-group">
<button ion-button="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">
<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>
<div class="alert-checkbox-label">
{{i.label}}
</div>
</button>
</div>
</template>
'<template ngSwitchCase="checkbox">' +
'<div class="alert-checkbox-group">' +
'<button ion-button="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">' +
'<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
'<div class="alert-checkbox-label">' +
'{{i.label}}' +
'</div>' +
'</button>' +
'</div>' +
'</template>' +
<template ngSwitchDefault>
<div class="alert-input-group">
<div *ngFor="let i of d.inputs" class="alert-input-wrapper">
<input [placeholder]="i.placeholder" [(ngModel)]="i.value" [type]="i.type" class="alert-input">
</div>
</div>
</template>
'<template ngSwitchDefault>' +
'<div class="alert-input-group">' +
'<div *ngFor="let i of d.inputs" class="alert-input-wrapper">' +
'<input [placeholder]="i.placeholder" [(ngModel)]="i.value" [type]="i.type" class="alert-input">' +
'</div>' +
'</div>' +
'</template>' +
</div>
<div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">
<button ion-button="alert-button" *ngFor="let b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass">
{{b.text}}
</button>
</div>
</div>
`,
directives: [Backdrop, NgClass, NgFor, NgIf, NgModel, NgSwitch, NgSwitchCase, NgSwitchDefault],
'</div>' +
'<div class="alert-button-group" [ngClass]="{\'alert-button-group-vertical\':d.buttons.length>2}">' +
'<button ion-button="alert-button" *ngFor="let b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass">' +
'{{b.text}}' +
'</button>' +
'</div>' +
'</div>',
host: {
'role': 'dialog',
'[attr.aria-labelledby]': 'hdrId',
@ -74,32 +69,36 @@ import { ViewController } from '../nav/view-controller';
encapsulation: ViewEncapsulation.None,
})
export class AlertCmp {
private activeId: string;
private descId: string;
private d: {
activeId: string;
descId: string;
d: {
cssClass?: string;
message?: string;
title?: string;
subTitle?: string;
buttons?: any[];
inputs?: any[];
enableBackdropDismiss?: boolean;
};
private enabled: boolean;
private hdrId: string;
private id: number;
private inputType: string;
private lastClick: number;
private msgId: string;
private subHdrId: string;
enabled: boolean;
hdrId: string;
id: number;
inputType: string;
lastClick: number;
msgId: string;
subHdrId: string;
mode: string;
constructor(
private _viewCtrl: ViewController,
private _elementRef: ElementRef,
private _config: Config,
public _viewCtrl: ViewController,
public _elementRef: ElementRef,
public _config: Config,
params: NavParams,
renderer: Renderer
) {
this.d = params.data;
this.mode = _config.get('mode');
renderer.setElementClass(_elementRef.nativeElement, `alert-${this.mode}`, true);
if (this.d.cssClass) {
this.d.cssClass.split(' ').forEach(cssClass => {
@ -128,7 +127,7 @@ export class AlertCmp {
}
}
ionViewLoaded() {
ionViewDidLoad() {
// normalize the data
let data = this.d;
@ -175,7 +174,7 @@ export class AlertCmp {
}
@HostListener('body:keyup', ['$event'])
private _keyUp(ev: KeyboardEvent) {
keyUp(ev: KeyboardEvent) {
if (this.enabled && this._viewCtrl.isLast()) {
if (ev.keyCode === Key.ENTER) {
if (this.lastClick + 1000 < Date.now()) {
@ -294,10 +293,8 @@ export class AlertCmp {
* Animations for alerts
*/
class AlertPopIn extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(enteringView, leavingView, opts);
let ele = enteringView.pageRef().nativeElement;
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-wrapper'));
@ -315,10 +312,8 @@ Transition.register('alert-pop-in', AlertPopIn);
class AlertPopOut extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(enteringView, leavingView, opts);
let ele = leavingView.pageRef().nativeElement;
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-wrapper'));
@ -336,10 +331,8 @@ Transition.register('alert-pop-out', AlertPopOut);
class AlertMdPopIn extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(enteringView, leavingView, opts);
let ele = enteringView.pageRef().nativeElement;
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-wrapper'));
@ -357,10 +350,8 @@ Transition.register('alert-md-pop-in', AlertMdPopIn);
class AlertMdPopOut extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(enteringView, leavingView, opts);
let ele = leavingView.pageRef().nativeElement;
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-wrapper'));
@ -377,12 +368,9 @@ class AlertMdPopOut extends Transition {
Transition.register('alert-md-pop-out', AlertMdPopOut);
class AlertWpPopIn extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(enteringView, leavingView, opts);
let ele = enteringView.pageRef().nativeElement;
init() {
let ele = this.enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-wrapper'));
@ -400,10 +388,8 @@ Transition.register('alert-wp-pop-in', AlertWpPopIn);
class AlertWpPopOut extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(enteringView, leavingView, opts);
let ele = leavingView.pageRef().nativeElement;
init() {
let ele = this.leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
let wrapper = new Animation(ele.querySelector('.alert-wrapper'));