fix(listView): only allow one swipeable item open. Fixes #763

Author: mlynch

js/ext/angular/src/directive/ionicList.js

@@ -229,6 +229,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
       var destroyShowReorderWatch = $scope.$watch('showReorder', function(val) {
         if(val) {
           $element[0].classList.add('item-options-hide');
+          $scope.listView && $scope.listView.clearDragEffects();
         } else if(val === false) {
           // false checking is because it could be undefined
           // if its undefined then we don't care to do anything

js/views/listView.js

@@ -16,6 +16,9 @@
     drag: function(e) {
     },
     end: function(e) {
+    },
+    isSameItem: function(item) {
+      return false;
     }
   };
 
@@ -27,6 +30,7 @@
   };
 
   SlideDrag.prototype = new DragOp();
+
   SlideDrag.prototype.start = function(e) {
     var content, buttons, offsetX, buttonsWidth;
 
@@ -64,6 +68,27 @@
     };
   };
 
+  /**
+   * Check if this is the same item that was previously dragged.
+   */
+  SlideDrag.prototype.isSameItem = function(op) {
+    if(op._lastDrag && this._currentDrag) {
+      return this._currentDrag.content == op._lastDrag.content;
+    }
+    return false;
+  };
+
+  SlideDrag.prototype.clean = function(e) {
+    var lastDrag = this._lastDrag;
+
+    if(!lastDrag) return;
+
+    ionic.requestAnimationFrame(function() {
+      lastDrag.content.style[ionic.CSS.TRANSITION] = '';
+      lastDrag.content.style[ionic.CSS.TRANSFORM] = 'translate3d(0, 0, 0)';
+    });
+  };
+
   SlideDrag.prototype.drag = ionic.animationFrameThrottle(function(e) {
     var buttonsWidth;
 
@@ -124,21 +149,7 @@
 
     }
 
-    // var content = this._currentDrag.content;
-
-    // var onRestingAnimationEnd = function(e) {
-    //   if(e.propertyName == '-webkit-transform') {
-    //     if(content) content.classList.remove(ITEM_SLIDING_CLASS);
-    //   }
-    //   e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd);
-    // };
-
     ionic.requestAnimationFrame(function() {
-      // var currentX = parseFloat(_this._currentDrag.content.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]) || 0;
-      // if(currentX !== restingPoint) {
-      //   _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS);
-      //   _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
-      // }
       if(restingPoint === 0) {
         _this._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';
       } else {
@@ -148,9 +159,9 @@
 
 
       // Kill the current drag
+      _this._lastDrag = _this._currentDrag;
       _this._currentDrag = null;
 
-
       // We are done, notify caller
       doneCallback && doneCallback();
     });
@@ -396,10 +407,22 @@
       }
     },
 
+    /**
+     * Clear any active drag effects on the list.
+     */
+    clearDragEffects: function() {
+      if(this._lastDragOp) {
+        this._lastDragOp.clean && this._lastDragOp.clean();
+        this._lastDragOp = null;
+      }
+    },
+
     _initDrag: function() {
       //ionic.views.ListView.__super__._initDrag.call(this);
 
-      //this._isDragging = false;
+      // Store the last one 
+      this._lastDragOp = this._dragOp;
+
       this._dragOp = null;
     },
 
@@ -418,8 +441,12 @@
     _startDrag: function(e) {
       var _this = this;
 
+      var didStart = false;
+
       this._isDragging = false;
 
+      var lastDragOp = this._lastDragOp;
+
       // Check if this is a reorder drag
       if(ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_DRAG_CLASS) && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
         var item = this._getItem(e.target);
@@ -435,7 +462,6 @@
           });
           this._dragOp.start(e);
           e.preventDefault();
-          return;
         }
       }
 
@@ -448,12 +474,13 @@
           this._dragOp = new SlideDrag({ el: this.el });
           this._dragOp.start(e);
           e.preventDefault();
-          return;
         }
       }
 
-      // We aren't handling it, so pass it up the chain
-      //ionic.views.ListView.__super__._startDrag.call(this, e);
+      // If we had a last drag operation and this is a new one on a different item, clean that last one
+      if(lastDragOp && this._dragOp && !this._dragOp.isSameItem(lastDragOp) && e.defaultPrevented) {
+        lastDragOp.clean && lastDragOp.clean();
+      }
     },