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

Merge branch '2.0' into ion-range

Browse Source
This commit is contained in:
Brandy Carney
2016-05-31 13:42:11 -04:00
parent af6d5e4be4 6bd91f02a3
commit f239b72be4
62 changed files with 792 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/checkbox/checkbox.ts
View File

@@ -83,7 +83,7 @@ export class Checkbox {
/**
* @output {Checkbox} expression to evaluate when the checkbox value changes
*/
@Output() change: EventEmitter<Checkbox> = new EventEmitter();
@Output() ionChange: EventEmitter<Checkbox> = new EventEmitter();
constructor(
private _form: Form,
@@ -129,7 +129,7 @@ export class Checkbox {
if (isChecked !== this._checked) {
this._checked = isChecked;
if (this._init) {
this.change.emit(this);
this.ionChange.emit(this);
}
this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
}

8
src/components/checkbox/test/basic/main.html
View File

@@ -29,13 +29,13 @@
</ion-item>
<ion-item>
<ion-label>Kiwi, (change) Secondary color</ion-label>
<ion-checkbox secondary (change)="kiwiChange($event)"></ion-checkbox>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-checkbox secondary (ionChange)="kiwiChange($event)"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Strawberry, (change) [checked]="true"</ion-label>
<ion-checkbox light (change)="strawberryChange($event)" [checked]="true"></ion-checkbox>
<ion-label>Strawberry, (ionChange) [checked]="true"</ion-label>
<ion-checkbox light (ionChange)="strawberryChange($event)" [checked]="true"></ion-checkbox>
</ion-item>
<ion-item>

10
src/components/datetime/datetime.ts
View File

@@ -407,12 +407,12 @@ export class DateTime {
/**
* @output {any} Any expression to evaluate when the datetime selection has changed.
*/
@Output() change: EventEmitter<any> = new EventEmitter();
@Output() ionChange: EventEmitter<any> = new EventEmitter();
/**
* @output {any} Any expression to evaluate when the datetime selection was cancelled.
*/
@Output() cancel: EventEmitter<any> = new EventEmitter();
@Output() ionCancel: EventEmitter<any> = new EventEmitter();
constructor(
private _form: Form,
@@ -469,7 +469,7 @@ export class DateTime {
text: this.cancelText,
role: 'cancel',
handler: () => {
this.cancel.emit(null);
this.ionCancel.emit(null);
}
},
{
@@ -477,7 +477,7 @@ export class DateTime {
handler: (data) => {
console.log('datetime, done', data);
this.onChange(data);
this.change.emit(data);
this.ionChange.emit(data);
}
}
];
@@ -485,7 +485,7 @@ export class DateTime {
this.generate(picker);
this.validate(picker);
picker.change.subscribe(() => {
picker.ionChange.subscribe(() => {
this.validate(picker);
});

8
src/components/datetime/test/basic/index.ts
View File

@@ -26,6 +26,14 @@ class E2EPage {
'l\u00f8r'
];
onChange(ev) {
console.log("Changed", ev);
}
onCancel(ev) {
console.log("Canceled", ev);
}
}

2
src/components/datetime/test/basic/main.html
View File

@@ -44,7 +44,7 @@
<ion-item>
<ion-label>h:mm a</ion-label>
<ion-datetime displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
<ion-datetime (ionChange)="onChange($event)" (ionCancel)="onCancel($event)" displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
</ion-item>
<ion-item>

8
src/components/infinite-scroll/infinite-scroll.ts
View File

@@ -22,7 +22,7 @@ import {Content} from '../content/content';
* <ion-item *ngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
* </ion-list>
*
* <ion-infinite-scroll (infinite)="doInfinite($event)">
* <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
* <ion-infinite-scroll-content></ion-infinite-scroll-content>
* </ion-infinite-scroll>
*
@@ -67,7 +67,7 @@ import {Content} from '../content/content';
* ```html
* <ion-content>
*
* <ion-infinite-scroll (infinite)="doInfinite($event)">
* <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
* <ion-infinite-scroll-content
* loadingSpinner="bubbles"
* loadingText="Loading more data...">
@@ -137,7 +137,7 @@ export class InfiniteScroll {
* you must call the infinite scroll's `complete()` method when
* your async operation has completed.
*/
@Output() infinite: EventEmitter<InfiniteScroll> = new EventEmitter();
@Output() ionInfinite: EventEmitter<InfiniteScroll> = new EventEmitter();
constructor(
@Host() private _content: Content,
@@ -179,7 +179,7 @@ export class InfiniteScroll {
if (distanceFromInfinite < 0) {
this._zone.run(() => {
this.state = STATE_LOADING;
this.infinite.emit(this);
this.ionInfinite.emit(this);
});
return 5;
}

2
src/components/infinite-scroll/test/basic/main.html
View File

@@ -16,7 +16,7 @@
</button>
</ion-list>
<ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">

2
src/components/infinite-scroll/test/short-list/main.html
View File

@@ -8,7 +8,7 @@
</ion-item>
</ion-list>
<ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">

2
src/components/input/input.wp.scss
View File

@@ -107,8 +107,8 @@ ion-input[clearInput] {
.text-input-clear-icon {
@include svg-background-image($text-input-wp-input-clear-icon-svg);
top: $item-wp-padding-top;
right: ($item-wp-padding-right / 2);
bottom: 7px;
width: $text-input-wp-input-clear-icon-width;

12
src/components/menu/menu.ts
View File

@@ -283,17 +283,17 @@ export class Menu extends Ion {
/**
* @output {event} When the menu is being dragged open.
*/
@Output() opening: EventEmitter<number> = new EventEmitter();
@Output() ionDrag: EventEmitter<number> = new EventEmitter();
/**
* @output {event} When the menu has been opened.
*/
@Output() opened: EventEmitter<boolean> = new EventEmitter();
@Output() ionOpen: EventEmitter<boolean> = new EventEmitter();
/**
* @output {event} When the menu has been closed.
*/
@Output() closed: EventEmitter<boolean> = new EventEmitter();
@Output() ionClose: EventEmitter<boolean> = new EventEmitter();
constructor(
private _menuCtrl: MenuController,
@@ -444,7 +444,7 @@ export class Menu extends Ion {
if (this._isEnabled && this._isSwipeEnabled) {
this._prevent();
this._getType().setProgessStep(stepValue);
this.opening.next(stepValue);
this.ionDrag.emit(stepValue);
}
}
@@ -490,12 +490,12 @@ export class Menu extends Ion {
if (isOpen) {
this._cntEle.addEventListener('click', this.onContentClick);
this.opened.emit(true);
this.ionOpen.emit(true);
} else {
this.getNativeElement().classList.remove('show-menu');
this.getBackdropElement().classList.remove('show-backdrop');
this.closed.emit(true);
this.ionClose.emit(true);
}
}
}

12
src/components/menu/test/basic/index.ts
View File

@@ -67,8 +67,16 @@ class E2EApp {
});
}
onMenuOpening(ev) {
console.log('onMenuOpening', ev);
onDrag(ev) {
console.log('Menu is being dragged', ev);
}
onOpen(ev) {
console.log('Menu is open', ev);
}
onClose(ev) {
console.log('Menu is closed', ev);
}
isChangeDetecting() {

4
src/components/menu/test/basic/main.html
View File

@@ -1,4 +1,4 @@
<ion-menu [content]="content" side="left" persistent="true">
<ion-menu [content]="content" side="left" persistent="true" (ionDrag)="onDrag($event)" (ionOpen)="onOpen($event)"(ionClose)="onClose($event)">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@@ -140,4 +140,4 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
<div [hidden]="isChangeDetecting()"></div>
<div [hidden]="isChangeDetecting()"></div>

9
src/components/modal/modal.ios.scss
View File

@@ -6,14 +6,7 @@
$modal-ios-background-color: $background-ios-color !default;
$modal-ios-border-radius: 5px !default;
.modal ion-page {
background-color: $modal-ios-background-color;
}
.modal-wrapper {
@media only screen and (min-width: 768px) and (min-height: 600px) {
overflow: hidden;
border-radius: $modal-ios-border-radius;
}
background-color: $modal-ios-background-color;
}

2
src/components/modal/modal.md.scss
View File

@@ -6,6 +6,6 @@
$modal-md-background-color: $background-md-color !default;
.modal ion-page {
.modal-wrapper {
background-color: $modal-md-background-color;
}

64
src/components/modal/modal.ts
View File

@@ -1,5 +1,7 @@
import {Component, DynamicComponentLoader, ViewChild, ViewContainerRef} from '@angular/core';
import {Component, ComponentRef, DynamicComponentLoader, ElementRef, ViewChild, ViewContainerRef} from '@angular/core';
import {windowDimensions} from '../../util/dom';
import {pascalCaseToDashCase} from '../../util/util';
import {NavParams} from '../nav/nav-params';
import {ViewController} from '../nav/view-controller';
import {Animation} from '../../animations/animation';
@@ -106,9 +108,12 @@ import {Transition, TransitionOptions} from '../../transitions/transition';
*/
export class Modal extends ViewController {
public modalViewType: string;
constructor(componentType, data: any = {}) {
data.componentType = componentType;
super(ModalCmp, data);
this.modalViewType = componentType.name;
this.viewType = 'modal';
this.isOverlay = true;
}
@@ -129,6 +134,21 @@ export class Modal extends ViewController {
return new Modal(componentType, data);
}
// Override the load method and load our child component
loaded(done) {
// grab the instance, and proxy the ngAfterViewInit method
let originalNgAfterViewInit = this.instance.ngAfterViewInit;
this.instance.ngAfterViewInit = () => {
if ( originalNgAfterViewInit ) {
originalNgAfterViewInit();
}
this.instance.loadComponent().then( (componentRef: ComponentRef<any>) => {
this.setInstance(componentRef.instance);
done();
});
};
}
}
@Component({
@@ -139,20 +159,22 @@ export class Modal extends ViewController {
'<div #viewport></div>' +
'</div>'
})
class ModalCmp {
export class ModalCmp {
@ViewChild('viewport', {read: ViewContainerRef}) viewport: ViewContainerRef;
constructor(private _loader: DynamicComponentLoader, private _navParams: NavParams, private _viewCtrl: ViewController) {}
constructor(protected _eleRef: ElementRef, protected _loader: DynamicComponentLoader, protected _navParams: NavParams, protected _viewCtrl: ViewController) {
}
onPageWillEnter() {
this._loader.loadNextToLocation(this._navParams.data.componentType, this.viewport).then(componentRef => {
this._viewCtrl.setInstance(componentRef.instance);
// manually fire onPageWillEnter() since ModalCmp's onPageWillEnter already happened
this._viewCtrl.willEnter();
loadComponent(): Promise<ComponentRef<any>> {
return this._loader.loadNextToLocation(this._navParams.data.componentType, this.viewport).then(componentRef => {
return componentRef;
});
}
ngAfterViewInit() {
// intentionally kept empty
}
}
/**
@@ -166,6 +188,13 @@ class ModalSlideIn extends Transition {
let backdrop = new Animation(ele.querySelector('.backdrop'));
backdrop.fromTo('opacity', 0.01, 0.4);
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
let page = <HTMLElement> ele.querySelector('ion-page');
page.classList.add('show-page');
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
page.classList.add(cssClassName);
wrapper.fromTo('translateY', '100%', '0%');
this
.element(enteringView.pageRef())
@@ -191,10 +220,17 @@ class ModalSlideOut extends Transition {
super(opts);
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
backdrop.fromTo('opacity', 0.4, 0.0);
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
wrapper.fromTo('translateY', '0%', '100%');
let wrapperEle = <HTMLElement> ele.querySelector('.modal-wrapper');
let wrapperEleRect = wrapperEle.getBoundingClientRect();
let wrapper = new Animation(wrapperEle);
// height of the screen - top of the container tells us how much to scoot it down
// so it's off-screen
let screenDimensions = windowDimensions();
wrapper.fromTo('translateY', '0px', `${screenDimensions.height - wrapperEleRect.top}px`);
this
.element(leavingView.pageRef())
@@ -216,6 +252,12 @@ class ModalMDSlideIn extends Transition {
backdrop.fromTo('opacity', 0.01, 0.4);
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
wrapper.fromTo('translateY', '40px', '0px');
let page = <HTMLElement> ele.querySelector('ion-page');
page.classList.add('show-page');
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
page.classList.add(cssClassName);
this
.element(enteringView.pageRef())

2
src/components/modal/modal.wp.scss
View File

@@ -6,6 +6,6 @@
$modal-wp-background-color: $background-wp-color !default;
.modal ion-page {
.modal-wrapper {
background-color: $modal-wp-background-color;
}

83
src/components/modal/test/basic/index.ts
View File

@@ -68,8 +68,53 @@ class E2EPage {
animation: 'my-fade-in'
});
}
presentNavigableModal(){
let modal = Modal.create(NavigableModal);
this.nav.present(modal);
//this.nav.push(NavigableModal);
}
}
@Page({
template: `
<ion-navbar *navbar>
<ion-title>Page One</ion-title>
</ion-navbar>
<ion-content>
<button full (click)="submit()">Submit</button>
</ion-content>
`
})
class NavigableModal{
constructor(private navController:NavController){
}
submit(){
this.navController.push(NavigableModal2);
}
}
@Page({
template: `
<ion-navbar *navbar>
<ion-title>Page Two</ion-title>
</ion-navbar>
<ion-content>
<button full (click)="submit()">Submit</button>
</ion-content>
`
})
class NavigableModal2{
constructor(private navController:NavController){
}
submit(){
this.navController.pop();
}
}
@Page({
template: `
@@ -105,6 +150,10 @@ class ModalPassData {
this.viewCtrl.dismiss(this.data);
}
onPageLoaded(){
console.log("ModalPassData onPageLoaded fired");
}
onPageWillEnter(){
console.log("ModalPassData onPagewillEnter fired");
}
@@ -280,15 +329,26 @@ class ModalFirstPage {
push() {
let page = ModalSecondPage;
let params = { id: 8675309, myData: [1,2,3,4] };
let opts = { animation: 'ios-transition' };
this.nav.push(page, params, opts);
this.nav.push(page, params);
}
dismiss() {
this.nav.rootNav.pop();
}
onPageLoaded(){
console.log("ModalFirstPage OnPageLoaded fired");
}
onPageWillEnter(){
console.log("ModalFirstPage onPageWillEnter fired");
}
onPageDidEnter(){
console.log("ModalFirstPage onPageDidEnter fired");
}
openActionSheet() {
let actionSheet = ActionSheet.create({
buttons: [
@@ -352,12 +412,21 @@ class ModalFirstPage {
`
})
class ModalSecondPage {
constructor(
private nav: NavController,
params: NavParams
) {
constructor(private nav: NavController, params: NavParams) {
console.log('Second page params:', params);
}
onPageLoaded(){
console.log("ModalSecondPage onPageLoaded");
}
onPageWillEnter(){
console.log("ModalSecondPage onPageWillEnter");
}
onPageDidEnter(){
console.log("ModalSecondPage onPageDidEnter");
}
}
@@ -398,4 +467,4 @@ class FadeOut extends Transition {
.before.addClass('show-page');
}
}
Transition.register('my-fade-out', FadeOut);
Transition.register('my-fade-out', FadeOut);

4
src/components/modal/test/basic/main.html
View File

@@ -1,4 +1,3 @@
<ion-navbar *navbar>
<ion-title>Modals</ion-title>
</ion-navbar>
@@ -7,6 +6,9 @@
<p>
<button (click)="presentModal()">Present modal, pass params</button>
</p>
<p>
<button (click)="presentNavigableModal()">Present modal, push page</button>
</p>
<p>
<button class="e2eOpenModal" (click)="presentModalChildNav()">Present modal w/ child ion-nav</button>
</p>

100
src/components/modal/test/modal.spec.ts Normal file
View File

@@ -0,0 +1,100 @@
import {Modal, ModalCmp, Page, NavController, ViewController} from '../../../../src';
export function run() {
describe('Modal', () => {
describe('create', () => {
it('should have the correct properties on modal view controller instance', () => {
let modalViewController = Modal.create(ComponentToPresent);
expect(modalViewController.modalViewType).toEqual("ComponentToPresent");
expect(modalViewController.componentType).toEqual(ModalCmp);
expect(modalViewController.viewType).toEqual("modal");
expect(modalViewController.isOverlay).toEqual(true);
expect(modalViewController instanceof ViewController).toEqual(true);
});
});
describe('loaded', () => {
it('should call done after loading component and call original ngAfterViewInit method', (done) => {
// arrange
let modal = new Modal({}, {});
let mockInstance = {
ngAfterViewInit: () => {},
loadComponent: () => {}
};
let mockComponentRef = {
instance: "someData"
};
modal.instance = mockInstance;
let ngAfterViewInitSpy = spyOn(mockInstance, "ngAfterViewInit");
spyOn(mockInstance, "loadComponent").and.returnValue(Promise.resolve(mockComponentRef));
let doneCallback = () => {
// assert
expect(ngAfterViewInitSpy).toHaveBeenCalled();
expect(modal.instance).toEqual("someData");
done();
};
// act
modal.loaded(doneCallback);
// (angular calls ngAfterViewInit, we're not testing angular so manually call it)
mockInstance.ngAfterViewInit();
}, 5000);
});
});
describe('ModalCmp', () => {
it('should return a componentRef object after loading component', (done) => {
// arrange
let mockLoader = {
loadNextToLocation: () => {}
};
let mockNavParams = {
data: {
componentType: "myComponentType"
}
};
let mockComponentRef = {};
spyOn(mockLoader, "loadNextToLocation").and.returnValue(Promise.resolve(mockComponentRef));
let modalCmp = new ModalCmp(null, mockLoader, mockNavParams, null);
modalCmp.viewport = "mockViewport";
// act
modalCmp.loadComponent().then(loadedComponentRef => {
// assert
expect(loadedComponentRef).toEqual(mockComponentRef);
expect(mockLoader.loadNextToLocation).toHaveBeenCalledWith(mockNavParams.data.componentType, modalCmp.viewport);
done();
});
}, 5000);
});
}
const STATE_ACTIVE = 'active';
const STATE_INACTIVE = 'inactive';
const STATE_INIT_ENTER = 'init_enter';
const STATE_INIT_LEAVE = 'init_leave';
const STATE_TRANS_ENTER = 'trans_enter';
const STATE_TRANS_LEAVE = 'trans_leave';
const STATE_REMOVE = 'remove';
const STATE_REMOVE_AFTER_TRANS = 'remove_after_trans';
const STATE_FORCE_ACTIVE = 'force_active';
let componentToPresentSpy = {
_ionicProjectContent: () => {},
};
@Page({
template: `<div class="myComponent"></div>`
})
class ComponentToPresent{
constructor(){
}
}

115
src/components/nav/nav-controller.ts
View File

@@ -505,7 +505,8 @@ export class NavController extends Ion {
enteringView.setLeavingOpts({
keyboardClose: false,
direction: 'back',
animation: enteringView.getTransitionName('back')
animation: enteringView.getTransitionName('back'),
ev: opts.ev
});
// start the transition
@@ -818,10 +819,10 @@ export class NavController extends Ion {
if (!parentNav['_tabs']) {
// Tabs can be a parent, but it is not a collection of views
// only we're looking for an actual NavController w/ stack of views
leavingView.willLeave();
leavingView.fireWillLeave();
return parentNav.pop(opts).then((rtnVal: boolean) => {
leavingView.didLeave();
leavingView.fireDidLeave();
return rtnVal;
});
}
@@ -918,7 +919,7 @@ export class NavController extends Ion {
// set that it is the init leaving view
// the first view to be removed, it should init leave
view.state = STATE_INIT_LEAVE;
view.willUnload();
view.fireWillUnload();
// from the index of the leaving view, go backwards and
// find the first view that is inactive so it can be the entering
@@ -951,8 +952,8 @@ export class NavController extends Ion {
// remove views that have been set to be removed, but not
// apart of any transitions that will eventually happen
this._views.filter(v => v.state === STATE_REMOVE).forEach(view => {
view.willLeave();
view.didLeave();
view.fireWillLeave();
view.fireDidLeave();
this._views.splice(this.indexOf(view), 1);
view.destroy();
});
@@ -986,7 +987,7 @@ export class NavController extends Ion {
if (!enteringView) {
// if no entering view then create a bogus one
enteringView = new ViewController();
enteringView.loaded();
enteringView.fireLoaded();
}
/* Async steps to complete a transition
@@ -1042,19 +1043,8 @@ export class NavController extends Ion {
this.setTransitioning(true, 500);
this.loadPage(enteringView, null, opts, () => {
if (enteringView.onReady) {
// this entering view needs to wait for it to be ready
// this is used by Tabs to wait for the first page of
// the first selected tab to be loaded
enteringView.onReady(() => {
enteringView.loaded();
this._postRender(transId, enteringView, leavingView, isAlreadyTransitioning, opts, done);
});
} else {
enteringView.loaded();
this._postRender(transId, enteringView, leavingView, isAlreadyTransitioning, opts, done);
}
enteringView.fireLoaded();
this._postRender(transId, enteringView, leavingView, isAlreadyTransitioning, opts, done);
});
}
}
@@ -1112,13 +1102,13 @@ export class NavController extends Ion {
if (leavingView.fireOtherLifecycles) {
// only fire entering lifecycle if the leaving
// view hasn't explicitly set not to
enteringView.willEnter();
enteringView.fireWillEnter();
}
if (enteringView.fireOtherLifecycles) {
// only fire leaving lifecycle if the entering
// view hasn't explicitly set not to
leavingView.willLeave();
leavingView.fireWillLeave();
}
} else {
@@ -1224,13 +1214,13 @@ export class NavController extends Ion {
if (leavingView.fireOtherLifecycles) {
// only fire entering lifecycle if the leaving
// view hasn't explicitly set not to
enteringView.didEnter();
enteringView.fireDidEnter();
}
if (enteringView.fireOtherLifecycles) {
// only fire leaving lifecycle if the entering
// view hasn't explicitly set not to
leavingView.didLeave();
leavingView.fireDidLeave();
}
}
@@ -1440,56 +1430,61 @@ export class NavController extends Ion {
// load the page component inside the nav
this._loader.loadNextToLocation(view.componentType, this._viewport, providers).then(component => {
// the ElementRef of the actual ion-page created
let pageElementRef = component.location;
// a new ComponentRef has been created
// set the ComponentRef's instance to its ViewController
view.setInstance(component.instance);
// remember the ChangeDetectorRef for this ViewController
view.setChangeDetector(component.changeDetectorRef);
// the component has been loaded, so call the view controller's loaded method to load any dependencies into the dom
view.loaded( () => {
// remember the ElementRef to the ion-page elementRef that was just created
view.setPageRef(pageElementRef);
// the ElementRef of the actual ion-page created
let pageElementRef = component.location;
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase(view.componentType['name']);
this._renderer.setElementClass(pageElementRef.nativeElement, cssClassName, true);
// remember the ChangeDetectorRef for this ViewController
view.setChangeDetector(component.changeDetectorRef);
view.onDestroy(() => {
// ensure the element is cleaned up for when the view pool reuses this element
this._renderer.setElementAttribute(pageElementRef.nativeElement, 'class', null);
this._renderer.setElementAttribute(pageElementRef.nativeElement, 'style', null);
component.destroy();
});
// remember the ElementRef to the ion-page elementRef that was just created
view.setPageRef(pageElementRef);
if (!navbarContainerRef) {
// there was not a navbar container ref already provided
// so use the location of the actual navbar template
navbarContainerRef = view.getNavbarViewRef();
}
// find a navbar template if one is in the page
let navbarTemplateRef = view.getNavbarTemplateRef();
// check if we have both a navbar ViewContainerRef and a template
if (navbarContainerRef && navbarTemplateRef) {
// let's now create the navbar view
let navbarViewRef = navbarContainerRef.createEmbeddedView(navbarTemplateRef);
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase(view.componentType['name']);
this._renderer.setElementClass(pageElementRef.nativeElement, cssClassName, true);
view.onDestroy(() => {
// manually destroy the navbar when the page is destroyed
navbarViewRef.destroy();
// ensure the element is cleaned up for when the view pool reuses this element
this._renderer.setElementAttribute(pageElementRef.nativeElement, 'class', null);
this._renderer.setElementAttribute(pageElementRef.nativeElement, 'style', null);
component.destroy();
});
}
// options may have had a postLoad method
// used mainly by tabs
opts.postLoad && opts.postLoad(view);
if (!navbarContainerRef) {
// there was not a navbar container ref already provided
// so use the location of the actual navbar template
navbarContainerRef = view.getNavbarViewRef();
}
// our job is done here
done(view);
// find a navbar template if one is in the page
let navbarTemplateRef = view.getNavbarTemplateRef();
// check if we have both a navbar ViewContainerRef and a template
if (navbarContainerRef && navbarTemplateRef) {
// let's now create the navbar view
let navbarViewRef = navbarContainerRef.createEmbeddedView(navbarTemplateRef);
view.onDestroy(() => {
// manually destroy the navbar when the page is destroyed
navbarViewRef.destroy();
});
}
// options may have had a postLoad method
// used mainly by tabs
opts.postLoad && opts.postLoad(view);
// our job is done here
done(view);
});
});
}

104
src/components/nav/test/nav-controller.spec.ts
View File

@@ -269,20 +269,20 @@ export function run() {
view4.state = STATE_ACTIVE;
nav._views = [view1, view2, view3, view4];
spyOn(view1, 'willLeave');
spyOn(view1, 'didLeave');
spyOn(view1, 'fireWillLeave');
spyOn(view1, 'fireDidLeave');
spyOn(view1, 'destroy');
spyOn(view2, 'willLeave');
spyOn(view2, 'didLeave');
spyOn(view2, 'fireWillLeave');
spyOn(view2, 'fireDidLeave');
spyOn(view2, 'destroy');
spyOn(view3, 'willLeave');
spyOn(view3, 'didLeave');
spyOn(view3, 'fireWillLeave');
spyOn(view3, 'fireDidLeave');
spyOn(view3, 'destroy');
spyOn(view4, 'willLeave');
spyOn(view4, 'didLeave');
spyOn(view4, 'fireWillLeave');
spyOn(view4, 'fireDidLeave');
spyOn(view4, 'destroy');
nav._remove(1, 3);
@@ -292,20 +292,20 @@ export function run() {
expect(view3.state).toBe(STATE_REMOVE);
expect(view4.state).toBe(STATE_INIT_LEAVE);
expect(view1.willLeave).not.toHaveBeenCalled();
expect(view1.didLeave).not.toHaveBeenCalled();
expect(view1.fireWillLeave).not.toHaveBeenCalled();
expect(view1.fireDidLeave).not.toHaveBeenCalled();
expect(view1.destroy).not.toHaveBeenCalled();
expect(view2.willLeave).toHaveBeenCalled();
expect(view2.didLeave).toHaveBeenCalled();
expect(view2.fireWillLeave).toHaveBeenCalled();
expect(view2.fireDidLeave).toHaveBeenCalled();
expect(view2.destroy).toHaveBeenCalled();
expect(view3.willLeave).toHaveBeenCalled();
expect(view3.didLeave).toHaveBeenCalled();
expect(view3.fireWillLeave).toHaveBeenCalled();
expect(view3.fireDidLeave).toHaveBeenCalled();
expect(view3.destroy).toHaveBeenCalled();
expect(view4.willLeave).not.toHaveBeenCalled();
expect(view4.didLeave).not.toHaveBeenCalled();
expect(view4.fireWillLeave).not.toHaveBeenCalled();
expect(view4.fireDidLeave).not.toHaveBeenCalled();
expect(view4.destroy).not.toHaveBeenCalled();
});
});
@@ -412,11 +412,11 @@ export function run() {
var done = () => {};
nav._beforeTrans = () => {}; //prevent running beforeTrans for tests
spyOn(enteringView, 'willEnter');
spyOn(enteringView, 'fireWillEnter');
nav._postRender(1, enteringView, leavingView, false, navOptions, done);
expect(enteringView.willEnter).toHaveBeenCalled();
expect(enteringView.fireWillEnter).toHaveBeenCalled();
});
it('should not call willEnter on entering view when it is being preloaded', () => {
@@ -428,11 +428,11 @@ export function run() {
var done = () => {};
nav._beforeTrans = () => {}; //prevent running beforeTrans for tests
spyOn(enteringView, 'willEnter');
spyOn(enteringView, 'fireWillEnter');
nav._postRender(1, enteringView, leavingView, false, navOptions, done);
expect(enteringView.willEnter).not.toHaveBeenCalled();
expect(enteringView.fireWillEnter).not.toHaveBeenCalled();
});
it('should call willLeave on leaving view', () => {
@@ -442,11 +442,11 @@ export function run() {
var done = () => {};
nav._beforeTrans = () => {}; //prevent running beforeTrans for tests
spyOn(leavingView, 'willLeave');
spyOn(leavingView, 'fireWillLeave');
nav._postRender(1, enteringView, leavingView, false, navOptions, done);
expect(leavingView.willLeave).toHaveBeenCalled();
expect(leavingView.fireWillLeave).toHaveBeenCalled();
});
it('should not call willEnter when the leaving view has fireOtherLifecycles not true', () => {
@@ -456,15 +456,15 @@ export function run() {
var done = () => {};
nav._beforeTrans = () => {}; //prevent running beforeTrans for tests
spyOn(enteringView, 'willEnter');
spyOn(leavingView, 'willLeave');
spyOn(enteringView, 'fireWillEnter');
spyOn(leavingView, 'fireWillLeave');
leavingView.fireOtherLifecycles = false;
nav._postRender(1, enteringView, leavingView, false, navOptions, done);
expect(enteringView.willEnter).not.toHaveBeenCalled();
expect(leavingView.willLeave).toHaveBeenCalled();
expect(enteringView.fireWillEnter).not.toHaveBeenCalled();
expect(leavingView.fireWillLeave).toHaveBeenCalled();
});
it('should not call willLeave when the entering view has fireOtherLifecycles not true', () => {
@@ -474,15 +474,15 @@ export function run() {
var done = () => {};
nav._beforeTrans = () => {}; //prevent running beforeTrans for tests
spyOn(enteringView, 'willEnter');
spyOn(leavingView, 'willLeave');
spyOn(enteringView, 'fireWillEnter');
spyOn(leavingView, 'fireWillLeave');
enteringView.fireOtherLifecycles = false;
nav._postRender(1, enteringView, leavingView, false, navOptions, done);
expect(enteringView.willEnter).toHaveBeenCalled();
expect(leavingView.willLeave).not.toHaveBeenCalled();
expect(enteringView.fireWillEnter).toHaveBeenCalled();
expect(leavingView.fireWillLeave).not.toHaveBeenCalled();
});
it('should not call willLeave on leaving view when it is being preloaded', () => {
@@ -494,11 +494,11 @@ export function run() {
var done = () => {};
nav._beforeTrans = () => {}; //prevent running beforeTrans for tests
spyOn(leavingView, 'willLeave');
spyOn(leavingView, 'fireWillLeave');
nav._postRender(1, enteringView, leavingView, false, navOptions, done);
expect(leavingView.willLeave).not.toHaveBeenCalled();
expect(leavingView.fireWillLeave).not.toHaveBeenCalled();
});
it('should set animate false when preloading', () => {
@@ -725,13 +725,13 @@ export function run() {
let doneCalled = false;
let done = () => {doneCalled = true;}
spyOn(enteringView, 'didEnter');
spyOn(leavingView, 'didLeave');
spyOn(enteringView, 'fireDidEnter');
spyOn(leavingView, 'fireDidLeave');
nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
expect(enteringView.didEnter).toHaveBeenCalled();
expect(leavingView.didLeave).toHaveBeenCalled();
expect(enteringView.fireDidEnter).toHaveBeenCalled();
expect(leavingView.fireDidLeave).toHaveBeenCalled();
expect(doneCalled).toBe(true);
});
@@ -745,13 +745,13 @@ export function run() {
let doneCalled = false;
let done = () => {doneCalled = true;}
spyOn(enteringView, 'didEnter');
spyOn(leavingView, 'didLeave');
spyOn(enteringView, 'fireDidEnter');
spyOn(leavingView, 'fireDidLeave');
nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
expect(enteringView.didEnter).not.toHaveBeenCalled();
expect(leavingView.didLeave).not.toHaveBeenCalled();
expect(enteringView.fireDidEnter).not.toHaveBeenCalled();
expect(leavingView.fireDidLeave).not.toHaveBeenCalled();
expect(doneCalled).toBe(true);
});
@@ -765,13 +765,13 @@ export function run() {
enteringView.fireOtherLifecycles = false;
spyOn(enteringView, 'didEnter');
spyOn(leavingView, 'didLeave');
spyOn(enteringView, 'fireDidEnter');
spyOn(leavingView, 'fireDidLeave');
nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
expect(enteringView.didEnter).toHaveBeenCalled();
expect(leavingView.didLeave).not.toHaveBeenCalled();
expect(enteringView.fireDidEnter).toHaveBeenCalled();
expect(leavingView.fireDidLeave).not.toHaveBeenCalled();
expect(doneCalled).toBe(true);
});
@@ -785,13 +785,13 @@ export function run() {
leavingView.fireOtherLifecycles = false;
spyOn(enteringView, 'didEnter');
spyOn(leavingView, 'didLeave');
spyOn(enteringView, 'fireDidEnter');
spyOn(leavingView, 'fireDidLeave');
nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
expect(enteringView.didEnter).not.toHaveBeenCalled();
expect(leavingView.didLeave).toHaveBeenCalled();
expect(enteringView.fireDidEnter).not.toHaveBeenCalled();
expect(leavingView.fireDidLeave).toHaveBeenCalled();
expect(doneCalled).toBe(true);
});
@@ -803,13 +803,13 @@ export function run() {
let doneCalled = false;
let done = () => {doneCalled = true;}
spyOn(enteringView, 'didEnter');
spyOn(leavingView, 'didLeave');
spyOn(enteringView, 'fireDidEnter');
spyOn(leavingView, 'fireDidLeave');
nav._afterTrans(enteringView, leavingView, navOpts, hasCompleted, done);
expect(enteringView.didEnter).not.toHaveBeenCalled();
expect(leavingView.didLeave).not.toHaveBeenCalled();
expect(enteringView.fireDidEnter).not.toHaveBeenCalled();
expect(leavingView.fireDidLeave).not.toHaveBeenCalled();
expect(doneCalled).toBe(true);
});

133
src/components/nav/test/view-controller.spec.ts Normal file
View File

@@ -0,0 +1,133 @@
import {LifeCycleEvent, ViewController} from '../../../../src';
export function run() {
describe('ViewController', () => {
afterEach(() => {
if ( subscription ){
subscription.unsubscribe();
}
});
describe('loaded', () => {
it('should emit LifeCycleEvent when called with component data', (done) => {
// arrange
let viewController = new ViewController(FakePage);
subscription = viewController.didLoad.subscribe((event:LifeCycleEvent) => {
// assert
expect(event).toEqual(null);
done();
}, err => {
done(err);
});
// act
viewController.fireLoaded();
}, 10000);
});
describe('willEnter', () => {
it('should emit LifeCycleEvent when called with component data', (done) => {
// arrange
let viewController = new ViewController(FakePage);
subscription = viewController.willEnter.subscribe((event:LifeCycleEvent) => {
// assert
expect(event).toEqual(null);
done();
}, err => {
done(err);
});
// act
viewController.fireWillEnter();
}, 10000);
});
describe('didEnter', () => {
it('should emit LifeCycleEvent when called with component data', (done) => {
// arrange
let viewController = new ViewController(FakePage);
subscription = viewController.didEnter.subscribe((event:LifeCycleEvent) => {
// assert
expect(event).toEqual(null);
done();
}, err => {
done(err);
});
// act
viewController.fireDidEnter();
}, 10000);
});
describe('willLeave', () => {
it('should emit LifeCycleEvent when called with component data', (done) => {
// arrange
let viewController = new ViewController(FakePage);
subscription = viewController.willLeave.subscribe((event:LifeCycleEvent) => {
// assert
expect(event).toEqual(null);
done();
}, err => {
done(err);
});
// act
viewController.fireWillLeave();
}, 10000);
});
describe('didLeave', () => {
it('should emit LifeCycleEvent when called with component data', (done) => {
// arrange
let viewController = new ViewController(FakePage);
subscription = viewController.didLeave.subscribe((event:LifeCycleEvent) => {
// assert
expect(event).toEqual(null);
done();
}, err => {
done(err);
});
// act
viewController.fireDidLeave();
}, 10000);
});
describe('willUnload', () => {
it('should emit LifeCycleEvent when called with component data', (done) => {
// arrange
let viewController = new ViewController(FakePage);
subscription = viewController.willUnload.subscribe((event:LifeCycleEvent) => {
expect(event).toEqual(null);
done();
}, err => {
done(err);
});
// act
viewController.fireWillUnload();
}, 10000);
});
describe('destroy', () => {
it('should emit LifeCycleEvent when called with component data', (done) => {
// arrange
let viewController = new ViewController(FakePage);
subscription = viewController.didUnload.subscribe((event:LifeCycleEvent) => {
// assert
expect(event).toEqual(null);
done();
}, err => {
done(err);
});
// act
viewController.destroy();
}, 10000);
});
});
let subscription = null;
class FakePage{}
}

55
src/components/nav/view-controller.ts
View File

@@ -37,6 +37,14 @@ export class ViewController {
private _cd: ChangeDetectorRef;
protected _nav: NavController;
didLoad: EventEmitter<any>;
willEnter: EventEmitter<any>;
didEnter: EventEmitter<any>;
willLeave: EventEmitter<any>;
didLeave: EventEmitter<any>;
willUnload: EventEmitter<any>;
didUnload: EventEmitter<any>;
/**
* @private
*/
@@ -62,11 +70,6 @@ export class ViewController {
*/
viewType: string = '';
/**
* @private
*/
onReady: Function;
/**
* @private
* If this is currently the active view, then set to false
@@ -97,6 +100,14 @@ export class ViewController {
constructor(public componentType?: Type, data?: any) {
// passed in data could be NavParams, but all we care about is its data object
this.data = (data instanceof NavParams ? data.data : (isPresent(data) ? data : {}));
this.didLoad = new EventEmitter();
this.willEnter = new EventEmitter();
this.didEnter = new EventEmitter();
this.willLeave = new EventEmitter();
this.didLeave = new EventEmitter();
this.willUnload = new EventEmitter();
this.didUnload = new EventEmitter();
}
subscribe(generatorOrNext?: any): any {
@@ -472,6 +483,16 @@ export class ViewController {
isLoaded(): boolean {
return this._loaded;
}
/**
* The loaded method is used to load any dynamic content/components
* into the dom before proceeding with the transition. If a component needs
* dynamic component loading, extending ViewController and overriding
* this method is a good option
* @param {function} done is a callback that must be called when async loading/actions are completed
*/
loaded(done: (() => any)) {
done();
}
/**
* @private
@@ -481,8 +502,9 @@ export class ViewController {
* to put your setup code for the view; however, it is not the
* recommended method to use when a view becomes active.
*/
loaded() {
fireLoaded() {
this._loaded = true;
this.didLoad.emit(null);
ctrlFn(this, 'onPageLoaded');
}
@@ -490,7 +512,7 @@ export class ViewController {
* @private
* The view is about to enter and become the active view.
*/
willEnter() {
fireWillEnter() {
if (this._cd) {
// ensure this has been re-attached to the change detector
this._cd.reattach();
@@ -498,7 +520,7 @@ export class ViewController {
// detect changes before we run any user code
this._cd.detectChanges();
}
this.willEnter.emit(null);
ctrlFn(this, 'onPageWillEnter');
}
@@ -507,9 +529,10 @@ export class ViewController {
* The view has fully entered and is now the active view. This
* will fire, whether it was the first load or loaded from the cache.
*/
didEnter() {
fireDidEnter() {
let navbar = this.getNavbar();
navbar && navbar.didEnter();
this.didEnter.emit(null);
ctrlFn(this, 'onPageDidEnter');
}
@@ -517,7 +540,8 @@ export class ViewController {
* @private
* The view has is about to leave and no longer be the active view.
*/
willLeave() {
fireWillLeave() {
this.willLeave.emit(null);
ctrlFn(this, 'onPageWillLeave');
}
@@ -526,7 +550,8 @@ export class ViewController {
* The view has finished leaving and is no longer the active view. This
* will fire, whether it is cached or unloaded.
*/
didLeave() {
fireDidLeave() {
this.didLeave.emit(null);
ctrlFn(this, 'onPageDidLeave');
// when this is not the active page
@@ -538,7 +563,8 @@ export class ViewController {
* @private
* The view is about to be destroyed and have its elements removed.
*/
willUnload() {
fireWillUnload() {
this.willUnload.emit(null);
ctrlFn(this, 'onPageWillUnload');
}
@@ -553,6 +579,7 @@ export class ViewController {
* @private
*/
destroy() {
this.didUnload.emit(null);
ctrlFn(this, 'onPageDidUnload');
for (var i = 0; i < this._destroys.length; i++) {
@@ -564,6 +591,10 @@ export class ViewController {
}
export interface LifeCycleEvent {
componentType?: any;
}
function ctrlFn(viewCtrl: ViewController, fnName: string) {
if (viewCtrl.instance && viewCtrl.instance[fnName]) {
try {

4
src/components/option/option.ts
View File

@@ -17,9 +17,9 @@ export class Option {
private _value;
/**
* @input {any} Event to evaluate when option has changed
* @input {any} Event to evaluate when option is selected
*/
@Output() select: EventEmitter<any> = new EventEmitter();
@Output() ionSelect: EventEmitter<any> = new EventEmitter();
constructor(private _elementRef: ElementRef) {}

12
src/components/picker/picker.ts
View File

@@ -17,7 +17,7 @@ import {raf, cancelRaf, CSS, pointerCoord} from '../../util/dom';
*/
export class Picker extends ViewController {
@Output() change: EventEmitter<any>;
@Output() ionChange: EventEmitter<any>;
constructor(opts: PickerOptions = {}) {
opts.columns = opts.columns || [];
@@ -28,7 +28,7 @@ export class Picker extends ViewController {
this.viewType = 'picker';
this.isOverlay = true;
this.change = new EventEmitter();
this.ionChange = new EventEmitter();
// by default, pickers should not fire lifecycle events of other views
// for example, when an picker enters, the current active view should
@@ -122,7 +122,7 @@ class PickerColumnCmp {
maxY: number;
rotateFactor: number;
lastIndex: number;
@Output() change: EventEmitter<any> = new EventEmitter();
@Output() ionChange: EventEmitter<any> = new EventEmitter();
constructor(config: Config, private _sanitizer: DomSanitizationService) {
this.rotateFactor = config.getNumber('pickerRotateFactor', 0);
@@ -382,7 +382,7 @@ class PickerColumnCmp {
// new selected index has changed from the last index
// update the lastIndex and emit that it has changed
this.lastIndex = this.col.selectedIndex;
this.change.emit(this.col.options[this.col.selectedIndex]);
this.ionChange.emit(this.col.options[this.col.selectedIndex]);
}
}
}
@@ -445,7 +445,7 @@ class PickerColumnCmp {
'</div>' +
'<div class="picker-columns">' +
'<div class="picker-above-highlight"></div>' +
'<div *ngFor="let c of d.columns" [col]="c" class="picker-col"> (change)="_colChange($event)"</div>' +
'<div *ngFor="let c of d.columns" [col]="c" class="picker-col"> (ionChange)="_colChange($event)"</div>' +
'<div class="picker-below-highlight"></div>' +
'</div>' +
'</div>',
@@ -538,7 +538,7 @@ class PickerDisplayCmp {
private _colChange(selectedOption: PickerColumnOption) {
// one of the columns has changed its selected index
var picker = <Picker>this._viewCtrl;
picker.change.emit(this.getSelected());
picker.ionChange.emit(this.getSelected());
}
@HostListener('body:keyup', ['$event'])

100
src/components/popover/popover.ts
View File

@@ -10,7 +10,8 @@ import {isPresent, isUndefined, isDefined} from '../../util/util';
import {nativeRaf, CSS} from '../../util/dom';
import {ViewController} from '../nav/view-controller';
const POPOVER_BODY_PADDING = 2;
const POPOVER_IOS_BODY_PADDING = 2;
const POPOVER_MD_BODY_PADDING = 12;
/**
* @name Popover
@@ -194,7 +195,7 @@ class PopoverCmp {
this._viewCtrl.setInstance(componentRef.instance);
// manually fire onPageWillEnter() since PopoverCmp's onPageWillEnter already happened
this._viewCtrl.willEnter();
this._viewCtrl.fireWillEnter();
});
}
@@ -240,8 +241,7 @@ class PopoverTransition extends Transition {
super(opts);
}
positionView(nativeEle: HTMLElement, ev) {
mdPositionView(nativeEle: HTMLElement, ev) {
let originY = 'top';
let originX = 'left';
@@ -257,19 +257,73 @@ class PopoverTransition extends Transition {
let bodyWidth = window.innerWidth;
let bodyHeight = window.innerHeight;
let targetTop = (bodyHeight / 2) - (popoverHeight / 2);
let targetLeft = bodyWidth / 2;
let targetWidth = 0;
let targetHeight = 0;
// If ev was passed, use that for target element
let targetDim = ev && ev.target && ev.target.getBoundingClientRect();
let targetTop = targetDim && targetDim.top || (bodyHeight / 2) - (popoverHeight / 2);
let targetLeft = targetDim && targetDim.left || bodyWidth / 2 - (popoverWidth / 2);
let targetWidth = targetDim && targetDim.width || 0;
let targetHeight = targetDim && targetDim.height || 0;
let popoverCSS = {
top: targetTop,
left: targetLeft
};
// If the popover left is less than the padding it is off screen
// to the left so adjust it, else if the width of the popover
// exceeds the body width it is off screen to the right so adjust
if (popoverCSS.left < POPOVER_MD_BODY_PADDING) {
popoverCSS.left = POPOVER_MD_BODY_PADDING;
} else if (popoverWidth + POPOVER_MD_BODY_PADDING + popoverCSS.left > bodyWidth) {
popoverCSS.left = bodyWidth - popoverWidth - POPOVER_MD_BODY_PADDING;
originX = 'right';
}
// If the popover when popped down stretches past bottom of screen,
// make it pop up if there's room above
if (targetTop + targetHeight + popoverHeight > bodyHeight && targetTop - popoverHeight > 0) {
popoverCSS.top = targetTop - popoverHeight;
nativeEle.className = nativeEle.className + ' popover-bottom';
originY = 'bottom';
// If there isn't room for it to pop up above the target cut it off
} else if (targetTop + targetHeight + popoverHeight > bodyHeight) {
popoverEle.style.bottom = POPOVER_MD_BODY_PADDING + 'px';
}
popoverEle.style.top = popoverCSS.top + 'px';
popoverEle.style.left = popoverCSS.left + 'px';
popoverEle.style[CSS.transformOrigin] = originY + ' ' + originX;
// Since the transition starts before styling is done we
// want to wait for the styles to apply before showing the wrapper
popoverWrapperEle.style.opacity = '1';
}
iosPositionView(nativeEle: HTMLElement, ev) {
let originY = 'top';
let originX = 'left';
let popoverWrapperEle = <HTMLElement>nativeEle.querySelector('.popover-wrapper');
// Popover content width and height
let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-content');
let popoverDim = popoverEle.getBoundingClientRect();
let popoverWidth = popoverDim.width;
let popoverHeight = popoverDim.height;
// Window body width and height
let bodyWidth = window.innerWidth;
let bodyHeight = window.innerHeight;
// If ev was passed, use that for target element
if (ev && ev.target) {
let targetDim = ev.target.getBoundingClientRect();
targetTop = targetDim.top;
targetLeft = targetDim.left;
targetWidth = targetDim.width;
targetHeight = targetDim.height;
}
let targetDim = ev && ev.target && ev.target.getBoundingClientRect();
let targetTop = targetDim && targetDim.top || (bodyHeight / 2) - (popoverHeight / 2);
let targetLeft = targetDim && targetDim.left || bodyWidth / 2;
let targetWidth = targetDim && targetDim.width || 0;
let targetHeight = targetDim && targetDim.height || 0;
// The arrow that shows above the popover on iOS
var arrowEle = <HTMLElement>nativeEle.querySelector('.popover-arrow');
@@ -290,10 +344,10 @@ class PopoverTransition extends Transition {
// If the popover left is less than the padding it is off screen
// to the left so adjust it, else if the width of the popover
// exceeds the body width it is off screen to the right so adjust
if (popoverCSS.left < POPOVER_BODY_PADDING) {
popoverCSS.left = POPOVER_BODY_PADDING;
} else if (popoverWidth + POPOVER_BODY_PADDING + popoverCSS.left > bodyWidth) {
popoverCSS.left = bodyWidth - popoverWidth - POPOVER_BODY_PADDING;
if (popoverCSS.left < POPOVER_IOS_BODY_PADDING) {
popoverCSS.left = POPOVER_IOS_BODY_PADDING;
} else if (popoverWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left > bodyWidth) {
popoverCSS.left = bodyWidth - popoverWidth - POPOVER_IOS_BODY_PADDING;
originX = 'right';
}
@@ -306,7 +360,7 @@ class PopoverTransition extends Transition {
originY = 'bottom';
// If there isn't room for it to pop up above the target cut it off
} else if (targetTop + targetHeight + popoverHeight > bodyHeight) {
popoverEle.style.bottom = POPOVER_BODY_PADDING + '%';
popoverEle.style.bottom = POPOVER_IOS_BODY_PADDING + '%';
}
arrowEle.style.top = arrowCSS.top + 'px';
@@ -315,7 +369,7 @@ class PopoverTransition extends Transition {
popoverEle.style.top = popoverCSS.top + 'px';
popoverEle.style.left = popoverCSS.left + 'px';
popoverEle.style[CSS.transformOrigin] = originY + " " + originX;
popoverEle.style[CSS.transformOrigin] = originY + ' ' + originX;
// Since the transition starts before styling is done we
// want to wait for the styles to apply before showing the wrapper
@@ -344,7 +398,7 @@ class PopoverPopIn extends PopoverTransition {
play() {
nativeRaf(() => {
this.positionView(this.enteringView.pageRef().nativeElement, this.opts.ev);
this.iosPositionView(this.enteringView.pageRef().nativeElement, this.opts.ev);
super.play();
});
}
@@ -394,7 +448,7 @@ class PopoverMdPopIn extends PopoverTransition {
play() {
nativeRaf(() => {
this.positionView(this.enteringView.pageRef().nativeElement, this.opts.ev);
this.mdPositionView(this.enteringView.pageRef().nativeElement, this.opts.ev);
super.play();
});
}

2
src/components/popover/test/basic/index.ts
View File

@@ -4,7 +4,7 @@ import {App, Page, Popover, NavController, Content, NavParams, ViewController} f
@Page({
template: `
<ion-list radio-group [(ngModel)]="fontFamily" (change)="changeFontFamily()">
<ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()">
<ion-row>
<ion-col>
<button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>

5
src/components/popover/test/basic/main.html
View File

@@ -19,6 +19,11 @@
</ion-navbar>
<ion-content #popoverContent padding>
<ion-list>
<button ion-item (click)="presentListPopover($event)">
Present List Popover
</button>
</ion-list>
<button block (click)="presentListPopover($event)" class="e2eOpenListPopover">
Present List Popover

4
src/components/radio/radio-button.ts
View File

@@ -76,7 +76,7 @@ export class RadioButton {
/**
* @output {any} expression to be evaluated when selected
*/
@Output() select: EventEmitter<any> = new EventEmitter();
@Output() ionSelect: EventEmitter<any> = new EventEmitter();
constructor(
private _form: Form,
@@ -151,7 +151,7 @@ export class RadioButton {
ev.stopPropagation();
this.checked = true;
this.select.emit(this.value);
this.ionSelect.emit(this.value);
}
/**

10
src/components/radio/radio-group.ts
View File

@@ -86,7 +86,7 @@ export class RadioGroup {
/**
* @output {any} expression to be evaluated when selection has been changed
*/
@Output() change: EventEmitter<RadioGroup> = new EventEmitter();
@Output() ionChange: EventEmitter<RadioGroup> = new EventEmitter();
constructor(
private _renderer: Renderer,
@@ -105,7 +105,7 @@ export class RadioGroup {
if (this._init) {
this._update();
this.onTouched();
this.change.emit(val);
this.ionChange.emit(val);
}
this._init = true;
@@ -133,7 +133,7 @@ export class RadioGroup {
this.value = val;
this._update();
this.onTouched();
this.change.emit(val);
this.ionChange.emit(val);
};
}
@@ -174,7 +174,7 @@ export class RadioGroup {
this._btns.push(button);
// listen for radiobutton select events
button.select.subscribe((val) => {
button.ionSelect.subscribe((val) => {
// this radiobutton has been selected
this.onChange(val);
});
@@ -217,7 +217,7 @@ export class RadioGroup {
this.value = val;
this._update();
this.onTouched();
this.change.emit(val);
this.ionChange.emit(val);
}
/**

8
src/components/radio/test/basic/main.html
View File

@@ -95,17 +95,17 @@
<code><b>relationship:</b> {{relationship}}</code>
</div>
<div radio-group (change)="petChange($event)">
<div radio-group (ionChange)="petChange($event)">
<p>
<ion-radio (select)="dogSelect($event)"></ion-radio>
<ion-radio (ionSelect)="dogSelect($event)"></ion-radio>
Dogs
</p>
<p>
<ion-radio (select)="catSelect($event)"></ion-radio>
<ion-radio (ionSelect)="catSelect($event)"></ion-radio>
Cats
</p>
<p>
<ion-radio (select)="turtleSelect($event)"></ion-radio>
<ion-radio (ionSelect)="turtleSelect($event)"></ion-radio>
Turtles
</p>
</div>

4
src/components/refresher/refresher-content.ts
View File

@@ -57,10 +57,10 @@ export class RefresherContent {
*/
ngOnInit() {
if (!this.pullingIcon) {
this.pullingIcon = this._config.get('refresherPullingIcon', 'arrow-down');
this.pullingIcon = this._config.get('ionPullIcon', 'arrow-down');
}
if (!this.refreshingSpinner) {
this.refreshingSpinner = this._config.get('refresherRefreshingSpinner', this._config.get('spinner', 'ios'));
this.refreshingSpinner = this._config.get('ionRefreshingSpinner', this._config.get('spinner', 'ios'));
}
}
}

16
src/components/refresher/refresher.ts
View File

@@ -25,7 +25,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom';
* ```html
* <ion-content>
*
* <ion-refresher (refresh)="doRefresh($event)">
* <ion-refresher (ionRefresh)="doRefresh($event)">
* <ion-refresher-content></ion-refresher-content>
* </ion-refresher>
*
@@ -59,7 +59,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom';
* ```html
* <ion-content>
*
* <ion-refresher (refresh)="doRefresh($event)">
* <ion-refresher (ionRefresh)="doRefresh($event)">
* <ion-refresher-content
* pullingIcon="arrow-dropdown"
* pullingText="Pull to refresh"
@@ -186,17 +186,17 @@ export class Refresher {
* updated to `refreshing`. From within your refresh handler, you must call the
* `complete()` method when your async operation has completed.
*/
@Output() refresh: EventEmitter<Refresher> = new EventEmitter();
@Output() ionRefresh: EventEmitter<Refresher> = new EventEmitter();
/**
* @output {event} While the user is pulling down the content and exposing the refresher.
*/
@Output() pulling: EventEmitter<Refresher> = new EventEmitter();
@Output() ionPull: EventEmitter<Refresher> = new EventEmitter();
/**
* @output {event} When the user begins to start pulling down.
*/
@Output() start: EventEmitter<Refresher> = new EventEmitter();
@Output() ionStart: EventEmitter<Refresher> = new EventEmitter();
constructor(
@@ -348,11 +348,11 @@ export class Refresher {
// emit "start" if it hasn't started yet
if (!this._didStart) {
this._didStart = true;
this.start.emit(this);
this.ionStart.emit(this);
}
// emit "pulling" on every move
this.pulling.emit(this);
this.ionPull.emit(this);
// do nothing if the delta is less than the pull threshold
if (this.deltaY < this.pullMin) {
@@ -414,7 +414,7 @@ export class Refresher {
// emit "refresh" because it was pulled down far enough
// and they let go to begin refreshing
this.refresh.emit(this);
this.ionRefresh.emit(this);
}
/**

2
src/components/refresher/test/basic/main.html
View File

@@ -2,7 +2,7 @@
<ion-content>
<ion-refresher (start)="doStart($event)" (pulling)="doPulling($event)" (refresh)="doRefresh($event)">
<ion-refresher (ionStart)="doStart($event)" (ionPull)="doPulling($event)" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingText="Pull to refresh..."

36
src/components/searchbar/searchbar.ts
View File

@@ -15,16 +15,6 @@ import {isPresent, debounce} from '../../util/util';
selector: '.searchbar-input',
})
export class SearchbarInput {
@HostListener('input', ['$event'])
/**
* @private
* Don't send the input's input event
*/
private stopInput(ev) {
ev.preventDefault();
ev.stopPropagation();
}
constructor(private _elementRef: ElementRef) {}
}
@@ -40,8 +30,8 @@ export class SearchbarInput {
* <ion-searchbar
* [(ngModel)]="myInput"
* [hideCancelButton]="shouldHideCancel"
* (input)="onInput($event)"
* (cancel)="onCancel($event)">
* (ionInput)="onInput($event)"
* (ionCancel)="onCancel($event)">
* </ion-searchbar>
* ```
*
@@ -103,27 +93,27 @@ export class Searchbar extends Ion {
/**
* @output {event} When the Searchbar input has changed including cleared
*/
@Output() input: EventEmitter<Searchbar> = new EventEmitter();
@Output() ionInput: EventEmitter<Searchbar> = new EventEmitter();
/**
* @output {event} When the Searchbar input has blurred
*/
@Output() blur: EventEmitter<Searchbar> = new EventEmitter();
@Output() ionBlur: EventEmitter<Searchbar> = new EventEmitter();
/**
* @output {event} When the Searchbar input has focused
*/
@Output() focus: EventEmitter<Searchbar> = new EventEmitter();
@Output() ionFocus: EventEmitter<Searchbar> = new EventEmitter();
/**
* @output {event} When the cancel button is clicked
*/
@Output() cancel: EventEmitter<Searchbar> = new EventEmitter();
@Output() ionCancel: EventEmitter<Searchbar> = new EventEmitter();
/**
* @output {event} When the clear input button is clicked
*/
@Output() clear: EventEmitter<Searchbar> = new EventEmitter();
@Output() ionClear: EventEmitter<Searchbar> = new EventEmitter();
/**
* @private
@@ -265,7 +255,7 @@ export class Searchbar extends Ion {
this._tmr = setTimeout(() => {
this.value = value;
this.onChange(value);
this.input.emit(this);
this.ionInput.emit(this);
}, Math.round(this.debounce));
}
@@ -274,7 +264,7 @@ export class Searchbar extends Ion {
* Sets the Searchbar to focused and aligned left on input focus.
*/
inputFocused() {
this.focus.emit(this);
this.ionFocus.emit(this);
this.isFocused = true;
this.shouldLeftAlign = true;
@@ -294,7 +284,7 @@ export class Searchbar extends Ion {
this.blurInput = true;
return;
}
this.blur.emit(this);
this.ionBlur.emit(this);
this.isFocused = false;
this.shouldLeftAlign = this.value && this.value.trim() !== '';
@@ -306,11 +296,11 @@ export class Searchbar extends Ion {
* Clears the input field and triggers the control change.
*/
clearInput() {
this.clear.emit(this);
this.ionClear.emit(this);
this.value = '';
this.onChange(this.value);
this.input.emit(this);
this.ionInput.emit(this);
this.blurInput = false;
}
@@ -322,7 +312,7 @@ export class Searchbar extends Ion {
* then calls the custom cancel function if the user passed one in.
*/
cancelSearchbar() {
this.cancel.emit(this);
this.ionCancel.emit(this);
this.clearInput();
this.blurInput = true;

8
src/components/searchbar/test/floating/main.html
View File

@@ -1,25 +1,25 @@
<ion-content>
<h5 padding-left> Search - Default </h5>
<ion-searchbar [(ngModel)]="defaultSearch" debounce="500" (input)="triggerInput($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
<ion-searchbar [(ngModel)]="defaultSearch" debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
<p padding-left>
defaultSearch: <b>{{ defaultSearch }}</b>
</p>
<h5 padding-left> Search - Custom Placeholder </h5>
<ion-searchbar [(ngModel)]="customPlaceholder" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
<ion-searchbar [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
<p padding-left>
customPlaceholder: <b>{{ customPlaceholder }}</b>
</p>
<h5 padding-left> Search - Hide Cancel Button </h5>
<ion-searchbar [(ngModel)]="defaultCancel" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
<ion-searchbar [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
<p padding-left>
defaultCancel: <b>{{ defaultCancel }}</b>
</p>
<h5 padding-left> Search - Custom Cancel Button Danger </h5>
<ion-searchbar (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
<ion-searchbar (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
</ion-content>

2
src/components/searchbar/test/nav/second.html
View File

@@ -8,7 +8,7 @@
</ion-toolbar>
<ion-content>
<ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
<ion-searchbar [(ngModel)]="searchQuery" (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items">
{{ item }}

16
src/components/segment/segment.ts
View File

@@ -11,10 +11,10 @@ import {isTrueProperty, isPresent} from '../../util/util';
* @usage
* ```html
* <ion-segment [(ngModel)]="relationship" primary>
* <ion-segment-button value="friends" (select)="selectedFriends()">
* <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
* Friends
* </ion-segment-button>
* <ion-segment-button value="enemies" (select)="selectedEnemies()">
* <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
* Enemies
* </ion-segment-button>
* </ion-segment>
@@ -66,7 +66,7 @@ export class SegmentButton {
/**
* @output {SegmentButton} expression to evaluate when a segment button has been clicked
*/
@Output() select: EventEmitter<SegmentButton> = new EventEmitter();
@Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter();
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
@@ -97,7 +97,7 @@ export class SegmentButton {
@HostListener('click', ['$event'])
private onClick(ev) {
console.debug('SegmentButton, select', this.value);
this.select.emit(this);
this.ionSelect.emit(this);
}
/**
@@ -130,7 +130,7 @@ export class SegmentButton {
*
* @usage
* ```html
* <ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger>
* <ion-segment [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)" danger>
* <ion-segment-button value="friends">
* Friends
* </ion-segment-button>
@@ -178,7 +178,7 @@ export class Segment {
/**
* @output {Any} expression to evaluate when a segment button has been changed
*/
@Output() change: EventEmitter<SegmentButton> = new EventEmitter();
@Output() ionChange: EventEmitter<SegmentButton> = new EventEmitter();
/**
@@ -231,10 +231,10 @@ export class Segment {
ngAfterViewInit() {
let buttons = this._buttons.toArray();
for (let button of buttons) {
button.select.subscribe((selectedButton) => {
button.ionSelect.subscribe((selectedButton) => {
this.writeValue(selectedButton.value);
this.onChange(selectedButton.value);
this.change.emit(selectedButton);
this.ionChange.emit(selectedButton);
});
if (isPresent(this.value)) {

6
src/components/segment/test/basic/main.html
View File

@@ -1,9 +1,9 @@
<ion-toolbar>
<ion-segment id="segment" [(ngModel)]="relationship" (change)="onSegmentChanged($event)">
<ion-segment-button value="friends" (select)="onSegmentSelected($event)" class="e2eSegmentFriends">
<ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
<ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies" (select)="onSegmentSelected($event)">
<ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)">
Enemies
</ion-segment-button>
</ion-segment>

4
src/components/segment/test/swipe/main.html
View File

@@ -4,7 +4,7 @@
</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-segment [(ngModel)]="selectedSegment" (change)="onSegmentChanged($event)">
<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
<ion-segment-button value="first">
First
</ion-segment-button>
@@ -19,7 +19,7 @@
<ion-content padding>
<ion-slides (change)="onSlideChanged($event)" #loopSlider>
<ion-slides (ionDidChange)="onSlideChanged($event)" #loopSlider>
<ion-slide *ngFor="let slide of slides">
<h1>{{ slide.title }}</h1>
</ion-slide>

10
src/components/select/select.ts
View File

@@ -178,12 +178,12 @@ export class Select {
/**
* @output {any} Any expression you want to evaluate when the selection has changed.
*/
@Output() change: EventEmitter<any> = new EventEmitter();
@Output() ionChange: EventEmitter<any> = new EventEmitter();
/**
* @output {any} Any expression you want to evaluate when the selection was cancelled.
*/
@Output() cancel: EventEmitter<any> = new EventEmitter();
@Output() ionCancel: EventEmitter<any> = new EventEmitter();
constructor(
private _form: Form,
@@ -239,7 +239,7 @@ export class Select {
text: this.cancelText,
role: 'cancel',
handler: () => {
this.cancel.emit(null);
this.ionCancel.emit(null);
}
}];
@@ -268,7 +268,7 @@ export class Select {
text: input.text,
handler: () => {
this.onChange(input.value);
this.change.emit(input.value);
this.ionChange.emit(input.value);
}
};
}));
@@ -307,7 +307,7 @@ export class Select {
text: this.okText,
handler: selectedValues => {
this.onChange(selectedValues);
this.change.emit(selectedValues);
this.ionChange.emit(selectedValues);
}
});

2
src/components/select/test/multiple-value/main.html
View File

@@ -22,7 +22,7 @@
<ion-item>
<ion-label>Car Features</ion-label>
<ion-select [(ngModel)]="carFeatures" [multiple]="true" (change)="carChange($event)">
<ion-select [(ngModel)]="carFeatures" [multiple]="true" (ionChange)="carChange($event)">
<ion-option value="backupcamera">Backup Camera</ion-option>
<ion-option value="heatedseats">Headted Seats</ion-option>
<ion-option value="keyless">Keyless Entry</ion-option>

6
src/components/select/test/single-value/main.html
View File

@@ -14,7 +14,7 @@
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select [(ngModel)]="gaming" (cancel)="gamingCancel()" (change)="gamingChange($event)">
<ion-select [(ngModel)]="gaming" (ionCancel)="gamingCancel()" (ionChange)="gamingChange($event)">
<ion-option value="nes">NES</ion-option>
<ion-option value="n64">Nintendo64</ion-option>
<ion-option value="ps">PlayStation</ion-option>
@@ -56,7 +56,7 @@
<ion-option>Pearl Jam</ion-option>
<ion-option>Smashing Pumpkins</ion-option>
<ion-option>Soundgarden</ion-option>
<ion-option (select)="stpSelect()">Stone Temple Pilots</ion-option>
<ion-option (ionSelect)="stpSelect()">Stone Temple Pilots</ion-option>
</ion-select>
</ion-item>
@@ -96,4 +96,4 @@
<br>
</p>
</ion-content>
</ion-content>

48
src/components/slides/slides.ts
View File

@@ -146,10 +146,10 @@ import {Scroll} from '../scroll/scroll';
* ```
*
* We can also add events to listen to on the `<ion-slides>` element.
* Let's add the `didChange` event and call a method when the slide changes:
* Let's add the `ionDidChange` event and call a method when the slide changes:
*
* ```html
* <ion-slides #mySlider (didChange)="onSlideChanged()" [options]="mySlideOptions">
* <ion-slides #mySlider (ionDidChange)="onSlideChanged()" [options]="mySlideOptions">
* ```
*
* In our class, we add the `onSlideChanged()` method which gets the active
@@ -311,30 +311,20 @@ export class Slides extends Ion {
*/
@Input() zoomMax: any;
/**
* @private Deprecated
*/
@Output() slideChangeStart: EventEmitter<any> = new EventEmitter();
/**
* @private Deprecated
*/
@Output() change: EventEmitter<any> = new EventEmitter();
/**
* @output {any} Expression to evaluate when a slide change starts.
*/
@Output() willChange: EventEmitter<any> = new EventEmitter();
@Output() ionWillChange: EventEmitter<any> = new EventEmitter();
/**
* @output {any} Expression to evaluate when a slide change ends.
*/
@Output() didChange: EventEmitter<any> = new EventEmitter();
@Output() ionDidChange: EventEmitter<any> = new EventEmitter();
/**
* @output {any} Expression to evaluate when a slide moves.
*/
@Output() move: EventEmitter<any> = new EventEmitter();
@Output() ionDrag: EventEmitter<any> = new EventEmitter();
constructor(elementRef: ElementRef, renderer: Renderer) {
@@ -371,10 +361,6 @@ export class Slides extends Ion {
console.warn('The "zoom" attribute has been deprecated. Please pass it in options.');
}
// Deprecated 04-18 beta.5
console.warn('The "slideChangeStart" event has been deprecated. Please use "willChange" instead. Ignore this if you aren\'t using it.');
console.warn('The "change" event has been deprecated. Please use "didChange" instead. Ignore this if you aren\'t using it.');
if (isPresent(this.options.pager)) {
this.showPager = isTrueProperty(this.options.pager);
}
@@ -406,17 +392,11 @@ export class Slides extends Ion {
return this.options.onTransitionEnd && this.options.onTransitionEnd(swiper, e);
};
options.onSlideChangeStart = (swiper) => {
// TODO deprecated 2016-04-18
this.slideChangeStart.emit(swiper);
this.willChange.emit(swiper);
this.ionWillChange.emit(swiper);
return this.options.onSlideChangeStart && this.options.onSlideChangeStart(swiper);
};
options.onSlideChangeEnd = (swiper) => {
// TODO deprecated 2016-04-18
this.change.emit(swiper);
this.didChange.emit(swiper);
this.ionDidChange.emit(swiper);
return this.options.onSlideChangeEnd && this.options.onSlideChangeEnd(swiper);
};
options.onLazyImageLoad = (swiper, slide, img) => {
@@ -426,7 +406,7 @@ export class Slides extends Ion {
return this.options.onLazyImageReady && this.options.onLazyImageReady(swiper, slide, img);
};
options.onSliderMove = (swiper, e) => {
this.move.emit(swiper);
this.ionDrag.emit(swiper);
return this.options.onSliderMove && this.options.onSliderMove(swiper, e);
};
@@ -784,7 +764,7 @@ export class Slides extends Ion {
*
* @param {number} index The index number of the slide.
* @param {number} speed Transition duration (in ms). Optional.
* @param {boolean} runCallbacks Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
* @param {boolean} runCallbacks Whether or not to emit the `ionWillChange`/`ionDidChange` events. Optional. Default true.
*/
slideTo(index: number, speed?: number, runCallbacks?: boolean) {
this.slider.slideTo(index, speed, runCallbacks);
@@ -794,7 +774,7 @@ export class Slides extends Ion {
* Transition to the next slide.
*
* @param {number} speed Transition duration (in ms). Optional.
* @param {boolean} runCallbacks Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
* @param {boolean} runCallbacks Whether or not to emit the `ionWillChange`/`ionDidChange` events. Optional. Default true.
*/
slideNext(speed?: number, runCallbacks?: boolean) {
this.slider.slideNext(runCallbacks, speed);
@@ -804,7 +784,7 @@ export class Slides extends Ion {
* Transition to the previous slide.
*
* @param {number} speed Transition duration (in ms). Optional.
* @param {boolean} runCallbacks Whether or not to emit the `willChange`/`didChange` events. Optional. Default true.
* @param {boolean} runCallbacks Whether or not to emit the `ionWillChange`/`ionDidChange` events. Optional. Default true.
*/
slidePrev(speed?: number, runCallbacks?: boolean) {
this.slider.slidePrev(runCallbacks, speed);
@@ -902,13 +882,17 @@ export class Slide {
constructor(
elementRef: ElementRef,
@Host() slides: Slides
@Host() private slides: Slides
) {
this.ele = elementRef.nativeElement;
this.ele.classList.add('swiper-slide');
slides.rapidUpdate();
}
ngOnDestroy() {
this.slides.rapidUpdate();
}
}
/**

4
src/components/slides/test/controller/index.ts
View File

@@ -22,6 +22,10 @@ class MyPage {
console.log("Previous index is", previousIndex, "Current index is", currentIndex);
}
onSlideMove(ev) {
console.log("Slide moving", ev);
}
goToPrevSlide() {
this.slider.slidePrev();
}

2
src/components/slides/test/controller/main.html
View File

@@ -1,4 +1,4 @@
<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()" class="my-slides">
<ion-slides #mySlider [options]="mySlideOptions" (ionDidChange)="onSlideChanged()" (ionDrag)="onSlideMove($event)" class="my-slides">
<ion-slide padding>
<h1>Slide 1</h1>
<button block (click)="goToPrevSlide()">Navigate Back</button>

5
src/components/slides/test/intro/index.ts
View File

@@ -19,6 +19,7 @@ class IntroPage {
continueText: string = "Skip";
startingIndex: number = 1;
mySlideOptions;
showSlide: boolean = true;
constructor(private nav: NavController) {
this.mySlideOptions = {
@@ -42,6 +43,10 @@ class IntroPage {
console.log("Slide move", slider);
}
toggleLastSlide() {
this.showSlide = !this.showSlide;
}
skip() {
this.nav.push(MainPage);
}

5
src/components/slides/test/intro/main.html
View File

@@ -8,7 +8,7 @@
</ion-navbar>
<ion-content>
<ion-slides pager [options]="mySlideOptions" (didChange)="onSlideChanged($event)" (willChange)="onSlideChangeStart($event)" (move)="onSlideMove($event)">
<ion-slides pager [options]="mySlideOptions" (ionDidChange)="onSlideChanged($event)" (ionWillChange)="onSlideChangeStart($event)" (ionDrag)="onSlideMove($event)">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
@@ -29,8 +29,9 @@
<li>There is no step 3</li>
</ol>
</div>
<button (click)="toggleLastSlide()">Toggle Last Slide</button>
</ion-slide>
<ion-slide>
<ion-slide *ngIf="showSlide">
<h3>Any questions?</h3>
</ion-slide>
</ion-slides>

4
src/components/slides/test/loop/main.html
View File

@@ -1,5 +1,5 @@
<div class="slides-div">
<ion-slides [options]="myTopSlideOptions" #loopSlider (didChange)="onSlideChanged($event)" pager>
<ion-slides [options]="myTopSlideOptions" #loopSlider (ionDidChange)="onSlideChanged($event)" pager>
<ion-slide *ngFor="let slide of slides" [ngClass]="slide.class">
Loop {{ slide.name }}
</ion-slide>
@@ -8,7 +8,7 @@
<div class="slides-div">
<ion-slides (didChange)="onSlideChanged($event)" pager>
<ion-slides (ionDidChange)="onSlideChanged($event)" pager>
<ion-slide *ngFor="let slide of slides" [ngClass]="slide.class">
Don't Loop {{ slide.name }}
</ion-slide>

4
src/components/tabs/tab-button.ts
View File

@@ -32,7 +32,7 @@ export class TabButton extends Ion {
private _layout: string;
@Input() tab: Tab;
@Output() select: EventEmitter<Tab> = new EventEmitter();
@Output() ionSelect: EventEmitter<Tab> = new EventEmitter();
constructor(config: Config, elementRef: ElementRef) {
super(elementRef);
@@ -53,6 +53,6 @@ export class TabButton extends Ion {
@HostListener('click')
private onClick() {
this.select.emit(this.tab);
this.ionSelect.emit(this.tab);
}
}

6
src/components/tabs/tab.ts
View File

@@ -85,13 +85,13 @@ import {TabButton} from './tab-button';
* ```
*
* Sometimes you may want to call a method instead of navigating to a new
* page. You can use the `(select)` event to call a method on your class when
* page. You can use the `(ionSelect)` event to call a method on your class when
* the tab is selected. Below is an example of presenting a modal from one of
* the tabs.
*
* ```html
* <ion-tabs preloadTabs="false">
* <ion-tab (select)="chat()"></ion-tab>
* <ion-tab (ionSelect)="chat()"></ion-tab>
* </ion-tabs>
* ```
*
@@ -204,7 +204,7 @@ export class Tab extends NavController {
/**
* @output {Tab} Method to call when the current tab is selected
*/
@Output() select: EventEmitter<Tab> = new EventEmitter();
@Output() ionSelect: EventEmitter<Tab> = new EventEmitter();
constructor(
@Inject(forwardRef(() => Tabs)) parentTabs: Tabs,

22
src/components/tabs/tabs.ts
View File

@@ -203,7 +203,7 @@ export class Tabs extends Ion {
/**
* @input {any} Expression to evaluate when the tab changes.
*/
@Output() change: EventEmitter<Tab> = new EventEmitter();
@Output() ionChange: EventEmitter<Tab> = new EventEmitter();
/**
* @private
@@ -252,7 +252,7 @@ export class Tabs extends Ion {
viewCtrl.setContent(this);
viewCtrl.setContentRef(_elementRef);
viewCtrl.onReady = (done) => {
viewCtrl.loaded = (done) => {
this._onReady = done;
};
}
@@ -272,7 +272,7 @@ export class Tabs extends Ion {
}
this._btns.toArray().forEach((tabButton: TabButton) => {
tabButton.select.subscribe((tab: Tab) => {
tabButton.ionSelect.subscribe((tab: Tab) => {
this.select(tab);
});
});
@@ -357,16 +357,16 @@ export class Tabs extends Ion {
let deselectedPage;
if (deselectedTab) {
deselectedPage = deselectedTab.getActive();
deselectedPage && deselectedPage.willLeave();
deselectedPage && deselectedPage.fireWillLeave();
}
let selectedPage = selectedTab.getActive();
selectedPage && selectedPage.willEnter();
selectedPage && selectedPage.fireWillEnter();
selectedTab.load(opts, () => {
selectedTab.select.emit(selectedTab);
this.change.emit(selectedTab);
selectedTab.ionSelect.emit(selectedTab);
this.ionChange.emit(selectedTab);
if (selectedTab.root) {
// only show the selectedTab if it has a root
@@ -382,8 +382,8 @@ export class Tabs extends Ion {
}
}
selectedPage && selectedPage.didEnter();
deselectedPage && deselectedPage.didLeave();
selectedPage && selectedPage.fireDidEnter();
deselectedPage && deselectedPage.fireDidLeave();
if (this._onReady) {
this._onReady();
@@ -445,8 +445,8 @@ export class Tabs extends Ion {
let instance = active.instance;
// If they have a custom tab selected handler, call it
if (instance.tabSelected) {
return instance.tabSelected();
if (instance.ionSelected) {
return instance.ionSelected();
}
// If we're a few pages deep, pop to root

6
src/components/tabs/test/advanced/index.ts
View File

@@ -73,14 +73,14 @@ class TabsPage {
constructor(private nav: NavController, private params: NavParams) {}
ngAfterViewInit() {
this.tabs.change.subscribe(tab => {
console.log('tabs.change.subscribe', tab.index);
this.tabs.ionChange.subscribe(tab => {
console.log('tabs.ionChange.subscribe', tab.index);
});
}
onTabChange() {
// wired up through the template
// <ion-tabs (change)="onTabChange()">
// <ion-tabs (ionChange)="onTabChange()">
console.log('onTabChange');
}

4
src/components/tabs/test/advanced/tabs.html
View File

@@ -1,7 +1,7 @@
<ion-tabs preloadTabs="false" (change)="onTabChange()">
<ion-tabs preloadTabs="false" (ionChange)="onTabChange()">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="params"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
<ion-tab tabTitle="Chat" tabIcon="chatbubbles" (select)="chat()"></ion-tab>
<ion-tab tabTitle="Chat" tabIcon="chatbubbles" (ionSelect)="chat()"></ion-tab>
</ion-tabs>

12
src/components/tabs/test/basic/index.ts
View File

@@ -171,8 +171,8 @@ export class Tab3 {
</ion-content>
</ion-menu>
<ion-tabs #content>
<ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1"></ion-tab>
<ion-tabs #content (ionChange)="onChange($event)">
<ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1" (ionSelect)="onSelect($event)"></ion-tab>
<ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
<ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>
</ion-tabs>
@@ -182,6 +182,14 @@ export class TabsPage {
root1 = Tab1;
root2 = Tab2;
root3 = Tab3;
onChange(ev) {
console.log("Changed tab", ev);
}
onSelect(ev) {
console.log("Selected tab", ev);
}
}
@App({

12
src/components/toggle/test/basic/main.html
View File

@@ -19,12 +19,12 @@
<ion-item>
<ion-label>Apple, ngControl</ion-label>
<ion-toggle ngControl="appleCtrl" (change)="appleChange($event)"></ion-toggle>
<ion-toggle ngControl="appleCtrl" (ionChange)="appleChange($event)"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Banana, ngControl</ion-label>
<ion-toggle ngControl="bananaCtrl" (change)="bananaChange($event)"></ion-toggle>
<ion-toggle ngControl="bananaCtrl" (ionChange)="bananaChange($event)"></ion-toggle>
</ion-item>
<ion-item>
@@ -38,13 +38,13 @@
</ion-item>
<ion-item>
<ion-label>Kiwi, (change) Secondary color</ion-label>
<ion-toggle secondary (change)="kiwiChange($event)"></ion-toggle>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-toggle secondary (ionChange)="kiwiChange($event)"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Strawberry, (change) [checked]="true"</ion-label>
<ion-toggle danger (change)="strawberryChange($event)" [checked]="true"></ion-toggle>
<ion-label>Strawberry, (ionChange) [checked]="true"</ion-label>
<ion-toggle danger (ionChange)="strawberryChange($event)" [checked]="true"></ion-toggle>
</ion-item>
</ion-list>

4
src/components/toggle/toggle.ts
View File

@@ -96,7 +96,7 @@ export class Toggle implements ControlValueAccessor {
/**
* @output {Toggle} expression to evaluate when the toggle value changes
*/
@Output() change: EventEmitter<Toggle> = new EventEmitter();
@Output() ionChange: EventEmitter<Toggle> = new EventEmitter();
constructor(
private _form: Form,
@@ -195,7 +195,7 @@ export class Toggle implements ControlValueAccessor {
if (isChecked !== this._checked) {
this._checked = isChecked;
if (this._init) {
this.change.emit(this);
this.ionChange.emit(this);
}
this._item && this._item.setCssClass('item-toggle-checked', isChecked);
}