diff --git a/demos/infinite-scroll/main.html b/demos/infinite-scroll/main.html index a901e2adde..72859491ac 100644 --- a/demos/infinite-scroll/main.html +++ b/demos/infinite-scroll/main.html @@ -10,7 +10,7 @@ - + diff --git a/demos/radio/main.html b/demos/radio/main.html index 86b432503f..01272a0470 100644 --- a/demos/radio/main.html +++ b/demos/radio/main.html @@ -36,7 +36,7 @@ Enable "Never" - + diff --git a/demos/refresher/main.html b/demos/refresher/main.html index e9d6be46c3..f6646871e1 100644 --- a/demos/refresher/main.html +++ b/demos/refresher/main.html @@ -4,7 +4,7 @@ - + diff --git a/demos/select/main.html b/demos/select/main.html index 8003bc4389..291b83607c 100644 --- a/demos/select/main.html +++ b/demos/select/main.html @@ -29,7 +29,7 @@ Date - + January February March @@ -43,7 +43,7 @@ November December - + 1989 1990 1991 diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 47063287d2..5e3d086e9a 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -83,7 +83,7 @@ export class Checkbox { /** * @output {Checkbox} expression to evaluate when the checkbox value changes */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() ionChange: EventEmitter = 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); } diff --git a/src/components/checkbox/test/basic/main.html b/src/components/checkbox/test/basic/main.html index ca55c839ea..9a01100916 100644 --- a/src/components/checkbox/test/basic/main.html +++ b/src/components/checkbox/test/basic/main.html @@ -29,13 +29,13 @@ - Kiwi, (change) Secondary color - + Kiwi, (ionChange) Secondary color + - Strawberry, (change) [checked]="true" - + Strawberry, (ionChange) [checked]="true" + diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts index 379d2b4872..b07b5acef3 100644 --- a/src/components/datetime/datetime.ts +++ b/src/components/datetime/datetime.ts @@ -407,12 +407,12 @@ export class DateTime { /** * @output {any} Any expression to evaluate when the datetime selection has changed. */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() ionChange: EventEmitter = new EventEmitter(); /** * @output {any} Any expression to evaluate when the datetime selection was cancelled. */ - @Output() cancel: EventEmitter = new EventEmitter(); + @Output() ionCancel: EventEmitter = 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); }); diff --git a/src/components/datetime/test/basic/index.ts b/src/components/datetime/test/basic/index.ts index 886b0a632d..65ec4a4c07 100644 --- a/src/components/datetime/test/basic/index.ts +++ b/src/components/datetime/test/basic/index.ts @@ -26,6 +26,14 @@ class E2EPage { 'l\u00f8r' ]; + onChange(ev) { + console.log("Changed", ev); + } + + onCancel(ev) { + console.log("Canceled", ev); + } + } diff --git a/src/components/datetime/test/basic/main.html b/src/components/datetime/test/basic/main.html index f5f7f496c4..9d145657c1 100644 --- a/src/components/datetime/test/basic/main.html +++ b/src/components/datetime/test/basic/main.html @@ -44,7 +44,7 @@ h:mm a - + diff --git a/src/components/infinite-scroll/infinite-scroll.ts b/src/components/infinite-scroll/infinite-scroll.ts index 11e5bb4715..f06e8ae083 100644 --- a/src/components/infinite-scroll/infinite-scroll.ts +++ b/src/components/infinite-scroll/infinite-scroll.ts @@ -22,7 +22,7 @@ import {Content} from '../content/content'; * {% raw %}{{i}}{% endraw %} * * - * + * * * * @@ -67,7 +67,7 @@ import {Content} from '../content/content'; * ```html * * - * + * * @@ -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 = new EventEmitter(); + @Output() ionInfinite: EventEmitter = 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; } diff --git a/src/components/infinite-scroll/test/basic/main.html b/src/components/infinite-scroll/test/basic/main.html index 6194cef1fa..374b6d26eb 100644 --- a/src/components/infinite-scroll/test/basic/main.html +++ b/src/components/infinite-scroll/test/basic/main.html @@ -16,7 +16,7 @@ - + diff --git a/src/components/infinite-scroll/test/short-list/main.html b/src/components/infinite-scroll/test/short-list/main.html index 67aa9c5d61..9a33fe0ccd 100644 --- a/src/components/infinite-scroll/test/short-list/main.html +++ b/src/components/infinite-scroll/test/short-list/main.html @@ -8,7 +8,7 @@ - + diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index e72833cb69..91ab505d37 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -283,17 +283,17 @@ export class Menu extends Ion { /** * @output {event} When the menu is being dragged open. */ - @Output() opening: EventEmitter = new EventEmitter(); + @Output() ionDrag: EventEmitter = new EventEmitter(); /** * @output {event} When the menu has been opened. */ - @Output() opened: EventEmitter = new EventEmitter(); + @Output() ionOpen: EventEmitter = new EventEmitter(); /** * @output {event} When the menu has been closed. */ - @Output() closed: EventEmitter = new EventEmitter(); + @Output() ionClose: EventEmitter = 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); } } } diff --git a/src/components/menu/test/basic/index.ts b/src/components/menu/test/basic/index.ts index 3e5830c310..d5ca2e2162 100644 --- a/src/components/menu/test/basic/index.ts +++ b/src/components/menu/test/basic/index.ts @@ -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() { diff --git a/src/components/menu/test/basic/main.html b/src/components/menu/test/basic/main.html index d607c74b63..e77d77771b 100644 --- a/src/components/menu/test/basic/main.html +++ b/src/components/menu/test/basic/main.html @@ -1,4 +1,4 @@ - + Left Menu @@ -140,4 +140,4 @@ -
\ No newline at end of file +
diff --git a/src/components/option/option.ts b/src/components/option/option.ts index a5abdf8354..d85c2b6aaa 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -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 = new EventEmitter(); + @Output() ionSelect: EventEmitter = new EventEmitter(); constructor(private _elementRef: ElementRef) {} diff --git a/src/components/picker/picker.ts b/src/components/picker/picker.ts index 6bbd5a9573..ec43364ff4 100644 --- a/src/components/picker/picker.ts +++ b/src/components/picker/picker.ts @@ -17,7 +17,7 @@ import {raf, cancelRaf, CSS, pointerCoord} from '../../util/dom'; */ export class Picker extends ViewController { - @Output() change: EventEmitter; + @Output() ionChange: EventEmitter; 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 = new EventEmitter(); + @Output() ionChange: EventEmitter = 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 { '' + '
' + '
' + - '
(change)="_colChange($event)"
' + + '
(ionChange)="_colChange($event)"
' + '
' + '
' + '', @@ -538,7 +538,7 @@ class PickerDisplayCmp { private _colChange(selectedOption: PickerColumnOption) { // one of the columns has changed its selected index var picker = this._viewCtrl; - picker.change.emit(this.getSelected()); + picker.ionChange.emit(this.getSelected()); } @HostListener('body:keyup', ['$event']) diff --git a/src/components/radio/radio-button.ts b/src/components/radio/radio-button.ts index 0ceff2a0de..cd45a6f1c3 100644 --- a/src/components/radio/radio-button.ts +++ b/src/components/radio/radio-button.ts @@ -76,7 +76,7 @@ export class RadioButton { /** * @output {any} expression to be evaluated when selected */ - @Output() select: EventEmitter = new EventEmitter(); + @Output() ionSelect: EventEmitter = 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); } /** diff --git a/src/components/radio/radio-group.ts b/src/components/radio/radio-group.ts index efd861e73d..83cdf4ad54 100644 --- a/src/components/radio/radio-group.ts +++ b/src/components/radio/radio-group.ts @@ -86,7 +86,7 @@ export class RadioGroup { /** * @output {any} expression to be evaluated when selection has been changed */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() ionChange: EventEmitter = 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); } /** diff --git a/src/components/radio/test/basic/main.html b/src/components/radio/test/basic/main.html index 76f3c40729..4c4c9681a7 100644 --- a/src/components/radio/test/basic/main.html +++ b/src/components/radio/test/basic/main.html @@ -95,17 +95,17 @@ relationship: {{relationship}} -
+

- + Dogs

- + Cats

- + Turtles

diff --git a/src/components/refresher/refresher-content.ts b/src/components/refresher/refresher-content.ts index 9fbc114676..8df4ce9492 100644 --- a/src/components/refresher/refresher-content.ts +++ b/src/components/refresher/refresher-content.ts @@ -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')); } } } diff --git a/src/components/refresher/refresher.ts b/src/components/refresher/refresher.ts index ef05e3daf3..b2e14b786c 100644 --- a/src/components/refresher/refresher.ts +++ b/src/components/refresher/refresher.ts @@ -25,7 +25,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom'; * ```html * * - * + * * * * @@ -59,7 +59,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom'; * ```html * * - * + * * = new EventEmitter(); + @Output() ionRefresh: EventEmitter = new EventEmitter(); /** * @output {event} While the user is pulling down the content and exposing the refresher. */ - @Output() pulling: EventEmitter = new EventEmitter(); + @Output() ionPull: EventEmitter = new EventEmitter(); /** * @output {event} When the user begins to start pulling down. */ - @Output() start: EventEmitter = new EventEmitter(); + @Output() ionStart: EventEmitter = 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); } /** diff --git a/src/components/refresher/test/basic/main.html b/src/components/refresher/test/basic/main.html index 8d1d5282b5..1e8ded6a6d 100644 --- a/src/components/refresher/test/basic/main.html +++ b/src/components/refresher/test/basic/main.html @@ -2,7 +2,7 @@ - + + * (ionInput)="onInput($event)" + * (ionCancel)="onCancel($event)"> * * ``` * @@ -103,27 +93,27 @@ export class Searchbar extends Ion { /** * @output {event} When the Searchbar input has changed including cleared */ - @Output() input: EventEmitter = new EventEmitter(); + @Output() ionInput: EventEmitter = new EventEmitter(); /** * @output {event} When the Searchbar input has blurred */ - @Output() blur: EventEmitter = new EventEmitter(); + @Output() ionBlur: EventEmitter = new EventEmitter(); /** * @output {event} When the Searchbar input has focused */ - @Output() focus: EventEmitter = new EventEmitter(); + @Output() ionFocus: EventEmitter = new EventEmitter(); /** * @output {event} When the cancel button is clicked */ - @Output() cancel: EventEmitter = new EventEmitter(); + @Output() ionCancel: EventEmitter = new EventEmitter(); /** * @output {event} When the clear input button is clicked */ - @Output() clear: EventEmitter = new EventEmitter(); + @Output() ionClear: EventEmitter = 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; diff --git a/src/components/searchbar/test/floating/main.html b/src/components/searchbar/test/floating/main.html index c5d88e4ae7..d9a2817730 100644 --- a/src/components/searchbar/test/floating/main.html +++ b/src/components/searchbar/test/floating/main.html @@ -1,25 +1,25 @@
Search - Default
- +

defaultSearch: {{ defaultSearch }}

Search - Custom Placeholder
- +

customPlaceholder: {{ customPlaceholder }}

Search - Hide Cancel Button
- +

defaultCancel: {{ defaultCancel }}

Search - Custom Cancel Button Danger
- + diff --git a/src/components/searchbar/test/nav/second.html b/src/components/searchbar/test/nav/second.html index 1260a73363..27a0fc938a 100644 --- a/src/components/searchbar/test/nav/second.html +++ b/src/components/searchbar/test/nav/second.html @@ -8,7 +8,7 @@ - + {{ item }} diff --git a/src/components/segment/segment.ts b/src/components/segment/segment.ts index 8d59f0bdcc..43808db628 100644 --- a/src/components/segment/segment.ts +++ b/src/components/segment/segment.ts @@ -11,10 +11,10 @@ import {isTrueProperty, isPresent} from '../../util/util'; * @usage * ```html * - * + * * Friends * - * + * * Enemies * * @@ -66,7 +66,7 @@ export class SegmentButton { /** * @output {SegmentButton} expression to evaluate when a segment button has been clicked */ - @Output() select: EventEmitter = new EventEmitter(); + @Output() ionSelect: EventEmitter = 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 - * + * * * Friends * @@ -178,7 +178,7 @@ export class Segment { /** * @output {Any} expression to evaluate when a segment button has been changed */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() ionChange: EventEmitter = 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)) { diff --git a/src/components/segment/test/basic/main.html b/src/components/segment/test/basic/main.html index 5b52ddf758..2b8a616600 100644 --- a/src/components/segment/test/basic/main.html +++ b/src/components/segment/test/basic/main.html @@ -1,9 +1,9 @@ - - + + Friends - + Enemies diff --git a/src/components/segment/test/swipe/main.html b/src/components/segment/test/swipe/main.html index e55aaac3c4..a58e135f6d 100644 --- a/src/components/segment/test/swipe/main.html +++ b/src/components/segment/test/swipe/main.html @@ -4,7 +4,7 @@ - + First @@ -19,7 +19,7 @@ - +

{{ slide.title }}

 diff --git a/src/components/select/select.ts b/src/components/select/select.ts index db7b1d74ae..af59706804 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -178,12 +178,12 @@ export class Select { /** * @output {any} Any expression you want to evaluate when the selection has changed. */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() ionChange: EventEmitter = new EventEmitter(); /** * @output {any} Any expression you want to evaluate when the selection was cancelled. */ - @Output() cancel: EventEmitter = new EventEmitter(); + @Output() ionCancel: EventEmitter = 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); } }); diff --git a/src/components/select/test/multiple-value/main.html b/src/components/select/test/multiple-value/main.html index 710f09e896..aa121c6a6e 100644 --- a/src/components/select/test/multiple-value/main.html +++ b/src/components/select/test/multiple-value/main.html @@ -22,7 +22,7 @@ Car Features - + Backup Camera Headted Seats Keyless Entry diff --git a/src/components/select/test/single-value/main.html b/src/components/select/test/single-value/main.html index 2958d19a6d..46508a6f85 100644 --- a/src/components/select/test/single-value/main.html +++ b/src/components/select/test/single-value/main.html @@ -14,7 +14,7 @@ Gaming - + NES Nintendo64 PlayStation @@ -56,7 +56,7 @@ Pearl Jam Smashing Pumpkins Soundgarden - Stone Temple Pilots + Stone Temple Pilots @@ -96,4 +96,4 @@

- \ No newline at end of file + diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts index 6d70118161..a2c56a432a 100644 --- a/src/components/slides/slides.ts +++ b/src/components/slides/slides.ts @@ -146,10 +146,10 @@ import {Scroll} from '../scroll/scroll'; * ``` * * We can also add events to listen to on the `` 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 - * + * * ``` * * 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 = new EventEmitter(); - - /** - * @private Deprecated - */ - @Output() change: EventEmitter = new EventEmitter(); - /** * @output {any} Expression to evaluate when a slide change starts. */ - @Output() willChange: EventEmitter = new EventEmitter(); + @Output() ionWillChange: EventEmitter = new EventEmitter(); /** * @output {any} Expression to evaluate when a slide change ends. */ - @Output() didChange: EventEmitter = new EventEmitter(); + @Output() ionDidChange: EventEmitter = new EventEmitter(); /** * @output {any} Expression to evaluate when a slide moves. */ - @Output() move: EventEmitter = new EventEmitter(); + @Output() ionDrag: EventEmitter = 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); diff --git a/src/components/slides/test/controller/index.ts b/src/components/slides/test/controller/index.ts index e890be7b30..3778dd7ea9 100644 --- a/src/components/slides/test/controller/index.ts +++ b/src/components/slides/test/controller/index.ts @@ -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(); } diff --git a/src/components/slides/test/controller/main.html b/src/components/slides/test/controller/main.html index cbccfbb7b2..ccf7b2678c 100644 --- a/src/components/slides/test/controller/main.html +++ b/src/components/slides/test/controller/main.html @@ -1,4 +1,4 @@ - +

Slide 1

diff --git a/src/components/slides/test/intro/main.html b/src/components/slides/test/intro/main.html index f2a1e4d888..38e9c59b50 100644 --- a/src/components/slides/test/intro/main.html +++ b/src/components/slides/test/intro/main.html @@ -8,7 +8,7 @@ - +

Thank you for choosing the Awesome App!