diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts index 7c757019ffe..e228bbff299 100644 --- a/src/components/item/item-sliding.ts +++ b/src/components/item/item-sliding.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ContentChildren, ContentChild, Directive, ElementRef, EventEmitter, Input, Optional, Output, QueryList, Renderer, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ContentChildren, ContentChild, Directive, ElementRef, EventEmitter, Input, Optional, Output, QueryList, Renderer, ViewEncapsulation, NgZone } from '@angular/core'; import { CSS, nativeRaf, nativeTimeout, clearNativeTimeout } from '../../util/dom'; import { Item } from './item'; @@ -40,7 +40,6 @@ export const enum ItemSideFlags { selector: 'ion-item-options', }) export class ItemOptions { - /** * @input {string} the side the option button should be on. Defaults to right * If you have multiple `ion-item-options`, a side must be provided for each. @@ -54,13 +53,6 @@ export class ItemOptions { constructor(private _elementRef: ElementRef, private _renderer: Renderer) {} - /** - * @private - */ - setCssStyle(property: string, value: string) { - this._renderer.setElementStyle(this._elementRef.nativeElement, property, value); - } - /** * @private */ @@ -225,10 +217,14 @@ export class ItemSliding { */ @Output() ionDrag: EventEmitter = new EventEmitter(); - constructor( @Optional() list: List, private _renderer: Renderer, private _elementRef: ElementRef) { + constructor( + @Optional() list: List, + private _renderer: Renderer, + private _elementRef: ElementRef, + private _zone: NgZone) { list && list.containsSlidingItem(true); _elementRef.nativeElement.$ionComponent = this; - this._setCssClass('item-wrapper', true); + this.setElementClass('item-wrapper', true); } @ContentChildren(ItemOptions) @@ -341,9 +337,9 @@ export class ItemSliding { */ private fireSwipeEvent() { if (this._state & SlidingState.SwipeRight) { - this._rightOptions.ionSwipe.emit(this); + this._zone.run(() => this._rightOptions.ionSwipe.emit(this)); } else if (this._state & SlidingState.SwipeLeft) { - this._leftOptions.ionSwipe.emit(this); + this._zone.run(() => this._leftOptions.ionSwipe.emit(this)); } } @@ -404,18 +400,18 @@ export class ItemSliding { } this.item.setElementStyle(CSS.transform, `translate3d(${-openAmount}px,0,0)`); - this.ionDrag.emit(this); + this._zone.run(() => this.ionDrag.emit(this)); } private _setState(state: SlidingState) { if (state === this._state) { return; } - this._setCssClass('active-slide', (state !== SlidingState.Disabled)); - this._setCssClass('active-options-right', !!(state & SlidingState.Right)); - this._setCssClass('active-options-left', !!(state & SlidingState.Left)); - this._setCssClass('active-swipe-right', !!(state & SlidingState.SwipeRight)); - this._setCssClass('active-swipe-left', !!(state & SlidingState.SwipeLeft)); + this.setElementClass('active-slide', (state !== SlidingState.Disabled)); + this.setElementClass('active-options-right', !!(state & SlidingState.Right)); + this.setElementClass('active-options-left', !!(state & SlidingState.Left)); + this.setElementClass('active-swipe-right', !!(state & SlidingState.SwipeRight)); + this.setElementClass('active-swipe-left', !!(state & SlidingState.SwipeLeft)); this._state = state; } @@ -461,16 +457,9 @@ export class ItemSliding { /** * @private */ - _setCssClass(cssClass: string, shouldAdd: boolean) { + setElementClass(cssClass: string, shouldAdd: boolean) { this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd); } - - /** - * @private - */ - _setCssStyle(property: string, value: string) { - this._renderer.setElementStyle(this._elementRef.nativeElement, property, value); - } } function shouldClose(isCloseDirection: boolean, isMovingFast: boolean, isOnCloseZone: boolean): boolean { diff --git a/src/components/item/test/sliding/app-module.ts b/src/components/item/test/sliding/app-module.ts index 8cb6de7b67f..e5f72e85e81 100644 --- a/src/components/item/test/sliding/app-module.ts +++ b/src/components/item/test/sliding/app-module.ts @@ -87,14 +87,14 @@ export class E2EPage { } download(item: ItemSliding) { - item._setCssClass('downloading', true); + item.setElementClass('downloading', true); setTimeout(() => { const toast = this.toastCtrl.create({ message: 'Item was downloaded!' }); toast.present(); - item._setCssClass('downloading', false); + item.setElementClass('downloading', false); item.close(); setTimeout(() => { toast.dismiss();