diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts index 6f6b2bed51..dda5f995e9 100644 --- a/ionic/components/item/item-sliding.ts +++ b/ionic/components/item/item-sliding.ts @@ -1,8 +1,9 @@ -import {Component, Directive, View, ElementRef, NgIf, ViewQuery, QueryList} from 'angular2/angular2'; +import {Component, Directive, View, ElementRef, NgIf, Host, Optional} from 'angular2/angular2'; import {Gesture} from 'ionic/gestures/gesture'; import {DragGesture} from 'ionic/gestures/drag-gesture'; import {Hammer} from 'ionic/gestures/hammer'; +import {List} from 'ionic/components/list/list'; import * as util from 'ionic/util'; @@ -53,12 +54,14 @@ export class ItemSliding { * TODO * @param {ElementRef} elementRef A reference to the component's DOM element. */ - constructor(elementRef: ElementRef) { + constructor(elementRef: ElementRef, @Optional() @Host() list: List) { this._isOpen = false; this._isSlideActive = false; this._isTransitioning = false; this._transform = ''; + this.list = list; + this.ele = elementRef.nativeElement; this.swipeButtons = {}; this.optionButtons = {}; @@ -84,7 +87,7 @@ export class ItemSliding { this.gesture = new ItemSlideGesture(this, itemSlidingContent); } - close() { + close(andStopDrag) { this.openAmount = 0; // Enable it once, it'll get disabled on the next drag @@ -99,6 +102,10 @@ export class ItemSliding { let el = this.itemSlidingContent; this.openAmount = amt || 0; + if(this.list) { + this.list.setOpenItem(this); + } + if(amt === '') { el.style[CSS.transform] = ''; } else { @@ -121,6 +128,20 @@ export class ItemSliding { // Clear the explicit transition, allow for CSS one to take over this.itemSlidingContent.style[CSS.transition] = ''; } + /** + * User did a touchstart + */ + didTouch() { + if(this.isOpen()) { + this.close(); + this.didClose = true; + } else { + if(this.list) { + this.list.closeOpenItem(); + } + } + + } } class ItemSlideGesture extends DragGesture { @@ -133,16 +154,23 @@ class ItemSlideGesture extends DragGesture { this.el = el; this.item = item; + this.canDrag = true; this.listen(); this.el.addEventListener('touchstart', (e) => { - if(this.item.isOpen()) { - this.item.close(); - } + this.item.didTouch(); }) + + this.el.addEventListener('touchend', (e) => { + this.item.didClose = false; + }); + this.el.addEventListener('touchcancel', (e) => { + this.item.didClose = false; + }); } onDragStart(ev) { + if(this.item.didClose) { return; } this.slide = {}; diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index b3fd4f0594..91d497470e 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -181,7 +181,7 @@ $item-ios-sliding-transition: transform 250ms ease-in-out !default; ion-item-options { button, [button] { height: calc(100% - 2px); - margin: 1px 0 1px 0; + margin: 1px 0 2px 0; border: none; border-radius: 0; diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index 88a831ccfd..405e32443e 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -69,6 +69,18 @@ export class List extends Ion { setItemTemplate(item) { this.itemTemplate = item; } + + /** + * Keeps track of any open item (a sliding item, for example), to close it later + */ + setOpenItem(item) { + this.openItem = item; + } + closeOpenItem() { + if(this.openItem) { + this.openItem.close(true); + } + } } /**