fix(itemSliding): close items when scrolling content

ionic/components/content/content.ts

@@ -73,15 +73,16 @@ export class Content extends Ion {
   }
 
   onScrollEnd(callback) {
-    let timerId;
+    let timerId, deregister;
 
     function debounce() {
       timerId = setTimeout(() => {
-
+        deregister();
+        callback();
       }, 250);
     }
 
-    this.addScrollEventListener(debounce);
+    deregister = this.addScrollEventListener(debounce);
   }
 
   /**

ionic/components/item/item-sliding-gesture.ts

@@ -9,7 +9,7 @@ export class ItemSlidingGesture extends DragGesture {
   constructor(list: List, listEle) {
     super(listEle, {
       direction: 'x',
-      threshold: 40
+      threshold: DRAG_THRESHOLD
     });
 
     this.data = {};
@@ -24,7 +24,7 @@ export class ItemSlidingGesture extends DragGesture {
       if (!isFromOptionButtons(ev.target)) {
         let didClose = this.closeOpened();
         if (didClose) {
-          ev.preventDefault();
+          preventDefault(ev);
         }
       }
     });
@@ -46,7 +46,7 @@ export class ItemSlidingGesture extends DragGesture {
 
     if (this.preventDrag) {
       this.closeOpened(ev);
-      return ev.preventDefault();
+      return preventDefault(ev);
     }
 
     itemContainerEle.classList.add('active-slide');
@@ -60,6 +60,11 @@ export class ItemSlidingGesture extends DragGesture {
   }
 
   onDrag(ev) {
+    if (Math.abs(ev.deltaY) > 30) {
+      this.preventDrag = true;
+      return this.closeOpened(ev);
+    }
+
     let itemContainerEle = getItemConatiner(ev.target);
     if (!itemContainerEle || !isActive(itemContainerEle) || this.preventDrag) return;
 
@@ -142,7 +147,7 @@ export class ItemSlidingGesture extends DragGesture {
 
     clearTimeout(this.get(itemContainerEle).timerId);
 
-    if (openAmount > 0) {
+    if (openAmount) {
       this.openItems++;
 
     } else {
@@ -157,7 +162,11 @@ export class ItemSlidingGesture extends DragGesture {
     }
 
     slidingEle.style[CSS.transition] = (isFinal ? '' : 'none');
-    slidingEle.style[CSS.transform] = (openAmount === 0 ? '' : 'translate3d(' + -openAmount + 'px,0,0)');
+    slidingEle.style[CSS.transform] = (openAmount ? 'translate3d(' + -openAmount + 'px,0,0)' : '');
+
+    if (isFinal) {
+      this.enableScroll(!openAmount);
+    }
   }
 
   getOpenAmount(itemContainerEle) {
@@ -175,12 +184,23 @@ export class ItemSlidingGesture extends DragGesture {
     this.data[itemContainerEle.$ionSlide][key] = value;
   }
 
+  enableScroll(shouldEnable) {
+    let scrollContentEle = closest(this.listEle, 'scroll-content');
+    if (scrollContentEle) {
+      scrollContentEle[shouldEnable ? 'removeEventListener' : 'addEventListener']('touchstart', preventDefault);
+    }
+  }
+
   unlisten() {
     super.unlisten();
     this.listEle = null;
   }
 }
 
+function preventDefault(ev) {
+  ev.preventDefault();
+}
+
 function getItemConatiner(ele) {
   return closest(ele, 'ion-item-sliding', true);
 }
@@ -199,3 +219,6 @@ function getOptionsWidth(itemContainerEle) {
 function isActive(itemContainerEle) {
   return itemContainerEle.classList.contains('active-slide');
 }
+
+
+const DRAG_THRESHOLD = 20;

ionic/components/item/test/sliding/index.ts

@@ -16,7 +16,11 @@ class E2EApp {
   }
 
   getItems() {
-    return [0,1];
+    let items = [];
+    for (let x = 0; x < 20; x++) {
+      items.push(x);
+    }
+    return items;
   }
 
   didClick(ev, item) {
@@ -32,4 +36,8 @@ class E2EApp {
     console.log('Delete', ev, item);
     item.close();
   }
+
+  reload() {
+    window.location.reload();
+  }
 }

ionic/components/item/test/sliding/main.html

@@ -1,4 +1,9 @@
-<ion-toolbar><ion-title>Sliding Items</ion-title></ion-toolbar>
+<ion-toolbar>
+  <ion-title>Sliding Items</ion-title>
+  <ion-nav-items secondary>
+    <button (click)="reload()">Reload</button>
+  </ion-nav-items>
+</ion-toolbar>
 
 <ion-content>
 

ionic/gestures/drag-gesture.ts

@@ -29,6 +29,8 @@ export class DragGesture extends Gesture {
       this.onDragEnd(ev);
       this.dragging = false;
     });
+
+    this.hammertime.get('pan').set(this._options);
   }
 
   onDrag() {}