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

refactor(events): rename all Ionic events to start with ion

Browse Source 
BREAKING CHANGES:

Renamed all Ionic events to start with `ion`. The following events were
renamed:

- **Checkbox**
  - `change` -> `ionChange`
- **DateTime**
  - `change` -> `ionChange`
  - `cancel` -> `ionCancel`
- **InfiniteScroll**
  - `infinite` -> `ionInfinite`
- **Menu**
  - `opening` -> `ionDrag`
  - `opened` -> `ionOpen`
  - `closed` -> `ionClose`
- **Option**
  - `select` -> `ionSelect`
- **Picker**
  - `change` -> `ionChange`
- **RadioButton**
  - `select` -> `ionSelect`
- **RadioGroup**
  - `change` -> `ionChange`
- **Refresher**
  - `refresh` -> `ionRefresh`
  - `pulling` -> `ionPull`
  - `start` -> `ionStart`
- **Searchbar**
  - `input` -> `ionInput`
  - `blur` -> `ionBlur`
  - `focus` -> `ionFocus`
  - `cancel` -> `ionCancel`
  - `clear` -> `ionClear`
- **Segment**
  - `change` -> `ionChange`
  - `select` -> `ionSelect`
- **Select**
  - `change` -> `ionChange`
  - `cancel` -> `ionCancel`
- **Slides**
  - `willChange` -> `ionWillChange`
  - `didChange` -> `ionDidChange`
  - `move` -> `ionDrag`
- **TabButton**
  - `select` -> `ionSelect`
- **Tab**
  - `select` -> `ionSelect`
- **Tabs**
  - `change` -> `ionChange`
- **Toggle**
  - `change` -> `ionChange`

Closes #6568
This commit is contained in:
Brandy Carney
2016-05-31 12:01:46 -04:00
parent f6f16340e2
commit d563aa65a3
45 changed files with 172 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demos/infinite-scroll/main.html
View File

@ -10,7 +10,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
demos/radio/main.html
View File

@ -36,7 +36,7 @@
<ion-item>
<ion-label>Enable "Never"</ion-label>
<ion-toggle (change)="isDisabled = !isDisabled"></ion-toggle>
<ion-toggle (ionChange)="isDisabled = !isDisabled"></ion-toggle>
</ion-item>
<ion-item>

2
demos/refresher/main.html
View File

@ -4,7 +4,7 @@
<ion-content>
<ion-refresher (refresh)="doRefresh($event)" (pulling)="doPulling($event)">
<ion-refresher (ionRefresh)="doRefresh($event)" (ionPull)="doPulling($event)">
<ion-refresher-content
pullingText="Pull to refresh..."
refreshingText="Refreshing...">

4
demos/select/main.html
View File

@ -29,7 +29,7 @@
<ion-item>
<ion-label>Date</ion-label>
<ion-select (change)="monthChange($event)">
<ion-select (ionChange)="monthChange($event)">
<ion-option value="01">January</ion-option>
<ion-option value="02">February</ion-option>
<ion-option value="03" checked="true">March</ion-option>
@ -43,7 +43,7 @@
<ion-option value="11">November</ion-option>
<ion-option value="12">December</ion-option>
</ion-select>
<ion-select (change)="yearChange($event)">
<ion-select (ionChange)="yearChange($event)">
<ion-option>1989</ion-option>
<ion-option>1990</ion-option>
<ion-option>1991</ion-option>

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...">

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>

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'])

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>

42
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);

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>

2
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">

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,

12
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
@ -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);
});
});
@ -365,8 +365,8 @@ export class Tabs extends Ion {
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
@ -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);
}