From 7fb6099e1e2a9b6ee5c03a953ab8fc75af7205e3 Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Tue, 6 Oct 2015 19:10:44 -0500
Subject: [PATCH] fix(item): slide close on tap

---
 ionic/components/item/item-sliding.ts        | 16 +++++++++++++---
 ionic/components/item/modes/ios.scss         | 13 ++++++++++++-
 ionic/components/item/test/sliding/main.html | 14 ++++++++++++--
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts
index 1e3345c1f0..6f6b2bed51 100644
--- a/ionic/components/item/item-sliding.ts
+++ b/ionic/components/item/item-sliding.ts
@@ -88,8 +88,12 @@ export class ItemSliding {
     this.openAmount = 0;
 
     // Enable it once, it'll get disabled on the next drag
-    this.enableAnimation();
-    el.style[CSS.transform] = 'translateX(' + -amt + 'px)';
+    raf(() => {
+      this.enableAnimation();
+      if(this.itemSlidingContent) {
+        this.itemSlidingContent.style[CSS.transform] = 'translateX(0)';
+      }
+    });
   }
   open(amt) {
     let el = this.itemSlidingContent;
@@ -101,7 +105,7 @@ export class ItemSliding {
       el.style[CSS.transform] = 'translateX(' + -amt + 'px)';
     }
   }
-  get isOpen() {
+  isOpen() {
     return this.openAmount > 0;
   }
   getOpenAmt() {
@@ -130,6 +134,12 @@ class ItemSlideGesture extends DragGesture {
     this.el = el;
     this.item = item;
     this.listen();
+
+    this.el.addEventListener('touchstart', (e) => {
+      if(this.item.isOpen()) {
+        this.item.close();
+      }
+    })
   }
 
   onDragStart(ev) {
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index dc9a2938db..b3fd4f0594 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -213,13 +213,24 @@ button.item {
 .card {
   button[ion-item]:not([detail-none]),
   a[ion-item]:not([detail-none]),
-  [detail-push] {
+  [detail-push]:not(ion-item-sliding) {
     @include ios-detail-push-icon($item-ios-detail-push-color);
     background-repeat: no-repeat;
     background-position: right ($item-ios-padding-right - 2) center;
     background-size: 14px 14px;
     padding-right: 32px;
   }
+
+  ion-item-sliding[detail-push] {
+
+    ion-item-sliding-content {
+      @include ios-detail-push-icon($item-ios-detail-push-color);
+      background-repeat: no-repeat;
+      background-position: right ($item-ios-padding-right - 2) center;
+      background-size: 14px 14px;
+      padding-right: 32px;
+    }
+  }
 }
 
 
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index bccfc8fe5f..5ac6e19fec 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -2,7 +2,7 @@
 
 <ion-list>
 
-  <ion-item-sliding class="item-text-wrap">
+  <ion-item-sliding class="item-text-wrap" detail-push>
     <h3>Max Lynch</h3>
     <p>
       Hey do you want to go to the game tonight?
@@ -12,7 +12,7 @@
     </ion-item-options>
   </ion-item-sliding>
 
-  <ion-item-sliding class="item-text-wrap">
+  <ion-item-sliding class="item-text-wrap" detail-push>
     <h3>Adam Bradley</h3>
     <p>
       I think I figured out how to get more Mountain Dew
@@ -21,4 +21,14 @@
       <button primary>Archive</button>
     </ion-item-options>
   </ion-item-sliding>
+
+  <ion-item-sliding class="item-text-wrap" detail-push>
+    <h3>Ben Sperry</h3>
+    <p>
+      I like paper
+    </p>
+    <ion-item-options>
+      <button primary>Archive</button>
+    </ion-item-options>
+  </ion-item-sliding>
 </ion-list>