Better drag interface, start of reorder dragging

dist/css/ionic-ios7.css

@@ -181,7 +181,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1381,7 +1381,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -1468,7 +1468,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1483,7 +1483,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
 
 /* hide a radio button's icon by default */
 .radio-item [class^="icon-"],
@@ -1708,7 +1708,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -1891,7 +1891,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #dddddd; }
+  border: 1px solid #ddd; }
 
 .card-header {
   padding: 10px;

dist/css/ionic.css

@@ -1245,7 +1245,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2468,7 +2468,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -2802,7 +2802,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -2985,7 +2985,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #dddddd; }
+  border: 1px solid #ddd; }
 
 .card-header {
   padding: 10px;

dist/js/ionic-angular.js

@@ -247,7 +247,7 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
                    <div class="list-item-content" ng-transclude>\
                    </div>\
                    <div class="list-item-drag" ng-if="canReorder && isEditing">\
-                     <button class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
+                     <button data-ionic-action="reorder" class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
                    </div>\
                    <div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
                      <button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\

dist/js/ionic.js

@@ -62,6 +62,35 @@ window.ionic = {
   };
 })(ionic);
 ;
+(function(ionic) {
+  ionic.DomUtil = {
+    /**
+     * {returns} the closest parent matching the className
+     */
+    getParentWithClass: function(e, className) {
+      while(e.parentNode) {
+        if(e.parentNode.classList && e.parentNode.classList.contains(className)) {
+          return e.parentNode;
+        }
+        e = e.parentNode;
+      }
+      return null;
+    },
+    /**
+     * {returns} the closest parent or self matching the className
+     */
+    getParentOrSelfWithClass: function(e, className) {
+      while(e) {
+        if(e.classList && e.classList.contains(className)) {
+          return e;
+        }
+        e = e.parentNode;
+      }
+      return null;
+    }
+  }
+})(window.ionic);
+;
 /**
  * ion-events.js
  *
@@ -1805,44 +1834,28 @@ window.ionic = {
 })(ionic);
 ;
 (function(ionic) {
+  var DragOp = function() {}
+  DragOp.prototype = {
+    start: function(e) {
+    },
+    drag: function(e) {
+    },
+    end: function(e) {
+    }
+  }
 
-  /**
+  var SlideDrag = function(opts) {
-   * The ListView handles a list of items. It will process drag animations, edit mode,
-   * and other operations that are common on mobile lists or table views.
-   */
-  ionic.views.List = function(opts) {
-    var _this = this;
-
-    this.el = opts.el;
-
-    // The amount of dragging required to start sliding the element over (in pixels)
     this.dragThresholdX = opts.dragThresholdX || 10;
-      
-    // Start the drag states
-    this._initDrag();
-
-    // Listen for drag and release events
-    window.ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    window.ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
   };
 
-  ionic.views.List.prototype = {
+  SlideDrag.prototype = new DragOp();
-    _initDrag: function() {
+  SlideDrag.prototype.start = function(e) {
-      this._isDragging = false;
+    var content;
-      this._currentDrag = null;
-    },
-    _startDrag: function(e) {
-      this._isDragging = false;
 
-      // Grab the content item
+    if(e.target.classList.contains('list-item-content')) {
-      if(e.target.classList.contains('list-item')) {
-        content = e.target.querySelector('.list-item-content');
-      } else if(e.target.classList.contains('list-item-content')) {
       content = e.target;
+    } else if(e.target.classList.contains('list-item')) {
+      content = e.target.querySelector('.list-item-content');
     }
 
     // If we don't have a content area as one of our children (or ourselves), skip
@@ -1869,17 +1882,54 @@ window.ionic = {
       content: content,
       startOffsetX: offsetX
     };
-    },
+  };
-    _handleEndDrag: function(e) {
+
+  SlideDrag.prototype.drag = function(e) {
     var _this = this;
 
+    window.requestAnimationFrame(function() {
+      // We really aren't dragging
+      if(!_this._currentDrag) {
+        return;
+      }
+
+      // Check if we should start dragging. Check if we've dragged past the threshold,
+      // or we are starting from the open state.
+      if(!_this._isDragging &&
+          ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
+          (Math.abs(_this._currentDrag.startOffsetX) > 0)))
+      {
+        _this._isDragging = true;
+      }
+
+      if(_this._isDragging) {
+
+        // Grab the new X point, capping it at zero
+        var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
+
+        // If the new X position is past the buttons, we need to slow down the drag (rubber band style)
+        if(newX < -buttonsWidth) {
+          // Calculate the new X position, capped at the top of the buttons
+          newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
+        }
+
+        console.log(newX);
+        
+        _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
+      }
+    });
+  };
+
+  SlideDrag.prototype.end = function(e, doneCallback) {
+    var _this = this;
+
+    // There is no drag, just end immediately
     if(!this._currentDrag) {
-        this._initDrag();
+      doneCallback && doneCallback();
       return;
     }
 
     // If we are currently dragging, we want to snap back into place
-
     // The final resting point X will be the width of the exposed buttons
     var restingPoint = -this._currentDrag.buttonsWidth;
 
@@ -1912,98 +1962,88 @@ window.ionic = {
         _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
       }
       _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
+
+      //
+      doneCallback && doneCallback();
+    });
+  }
+
+  var ReorderDrag = function() {}
+  ReorderDrag.prototype = new DragOp();
+  ReorderDrag.prototype.start = function(e) {
+  };
+
+  /**
+   * The ListView handles a list of items. It will process drag animations, edit mode,
+   * and other operations that are common on mobile lists or table views.
+   */
+  ionic.views.List = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+
+    // The amount of dragging required to start sliding the element over (in pixels)
+    this.dragThresholdX = opts.dragThresholdX || 10;
+      
+    // Start the drag states
+    this._initDrag();
+
+    // Listen for drag and release events
+    window.ionic.onGesture('drag', function(e) {
+      _this._handleDrag(e);
+    }, this.el);
+    window.ionic.onGesture('release', function(e) {
+      _this._handleEndDrag(e);
+    }, this.el);
+  };
+
+  ionic.views.List.prototype = {
+    _initDrag: function() {
+      this._isDragging = false;
+      this._currentDrag = null;
+      this._dragOp = null;
+    },
+    _startDrag: function(e) {
+      this._isDragging = false;
+
+      // Check if this is a reorder drag
+      if(ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list-item-drag') && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
+        this._dragOp = new ReorderDrag(this.el);
+        this._dragOp.start(e);
+        return;
+      } 
+      
+      // Or check if this is a swipe to the side drag
+      if(e.gesture.direction == 'left' || e.gesture.direction == 'right') {
+        this._dragOp = new SlideDrag(this.el);
+        this._dragOp.start(e);
+      }
+    },
+
+    _handleEndDrag: function(e) {
+      var _this = this;
+      
+      if(!this._dragOp) {
+        this._initDrag();
+        return;
+      }
+
+      this._dragOp.end(e, function() {
         _this._initDrag();
       });
     },
-
     /**
      * Process the drag event to move the item to the left or right.
      */
     _handleDrag: function(e) {
       var _this = this, content, buttons;
 
-      window.requestAnimationFrame(function() {
+      if(!this._dragOp) {
-
+        this._startDrag(e);
-        if(!_this._currentDrag) {
-          _this._startDrag(e);
       }
 
-        // We really aren't dragging
+      this._dragOp.drag(e);
-        if(!_this._currentDrag) {
-          return;
     }
-
-        // Check if we should start dragging. Check if we've dragged past the threshold,
-        // or we are starting from the open state.
-        if(!_this._isDragging &&
-            ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
-            (Math.abs(_this._currentDrag.startOffsetX) > 0)))
-        {
-          _this._isDragging = true;
-        }
-
-        if(_this._isDragging) {
-
-          // Grab the new X point, capping it at zero
-          var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
-
-          // If the new X position is past the buttons, we need to slow down the drag (rubber band style)
-          if(newX < -buttonsWidth) {
-            // Calculate the new X position, capped at the top of the buttons
-            newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
-          }
-
-          console.log(newX);
-          
-          _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
-        }
-      });
-    },
-
-
-    _handleSwipeLeft: function(e) {
-
-      window.requestAnimationFrame(function() {
-        var item = e.target,
-          cl = item.classList,
-          content, buttons, buttonsWidth;
-
-
-        if(!content) {
-          return;
-        }
-
-        // Grab the buttons
-        buttons = content.parentNode.querySelector('.list-item-buttons');
-        if(buttons) {
-          buttonsWidth = buttons.offsetWidth;
-
-          // Slide the content over left by the button width
-          content.style.left = -buttonsWidth + 'px';
-        }
-      });
-    },
-    _handleSwipeRight: function(e) {
-
-      window.requestAnimationFrame(function() {
-        var item = e.target,
-          cl = item.classList,
-          content;
-
-        if(cl.contains('list-item')) {
-          content = item.querySelector('.list-item-content');
-        } else if(cl.contains('list-item-content')) {
-          content = item;
-        }
-
-        // This item didn't have content
-        if(!content) {
-          return;
-        }
-
-        content.style.left = 0;
-      });
-    },
   };
 
 })(ionic);

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

@@ -22,7 +22,7 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
                    <div class="list-item-content" ng-transclude>\
                    </div>\
                    <div class="list-item-drag" ng-if="canReorder && isEditing">\
-                     <button class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
+                     <button data-ionic-action="reorder" class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
                    </div>\
                    <div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
                      <button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\

js/utils/dom.js

@@ -0,0 +1,28 @@
+(function(ionic) {
+  ionic.DomUtil = {
+    /**
+     * {returns} the closest parent matching the className
+     */
+    getParentWithClass: function(e, className) {
+      while(e.parentNode) {
+        if(e.parentNode.classList && e.parentNode.classList.contains(className)) {
+          return e.parentNode;
+        }
+        e = e.parentNode;
+      }
+      return null;
+    },
+    /**
+     * {returns} the closest parent or self matching the className
+     */
+    getParentOrSelfWithClass: function(e, className) {
+      while(e) {
+        if(e.classList && e.classList.contains(className)) {
+          return e;
+        }
+        e = e.parentNode;
+      }
+      return null;
+    }
+  }
+})(window.ionic);

js/views/listView.js

@@ -1,42 +1,26 @@
 (function(ionic) {
+  var DragOp = function() {}
+  DragOp.prototype = {
+    start: function(e) {
+    },
+    drag: function(e) {
+    },
+    end: function(e) {
+    }
+  }
 
-  /**
+  var SlideDrag = function(opts) {
-   * The ListView handles a list of items. It will process drag animations, edit mode,
-   * and other operations that are common on mobile lists or table views.
-   */
-  ionic.views.List = function(opts) {
-    var _this = this;
-
-    this.el = opts.el;
-
-    // The amount of dragging required to start sliding the element over (in pixels)
     this.dragThresholdX = opts.dragThresholdX || 10;
-      
-    // Start the drag states
-    this._initDrag();
-
-    // Listen for drag and release events
-    window.ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    window.ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
   };
 
-  ionic.views.List.prototype = {
+  SlideDrag.prototype = new DragOp();
-    _initDrag: function() {
+  SlideDrag.prototype.start = function(e) {
-      this._isDragging = false;
+    var content;
-      this._currentDrag = null;
-    },
-    _startDrag: function(e) {
-      this._isDragging = false;
 
-      // Grab the content item
+    if(e.target.classList.contains('list-item-content')) {
-      if(e.target.classList.contains('list-item')) {
-        content = e.target.querySelector('.list-item-content');
-      } else if(e.target.classList.contains('list-item-content')) {
       content = e.target;
+    } else if(e.target.classList.contains('list-item')) {
+      content = e.target.querySelector('.list-item-content');
     }
 
     // If we don't have a content area as one of our children (or ourselves), skip
@@ -63,17 +47,54 @@
       content: content,
       startOffsetX: offsetX
     };
-    },
+  };
-    _handleEndDrag: function(e) {
+
+  SlideDrag.prototype.drag = function(e) {
     var _this = this;
 
+    window.requestAnimationFrame(function() {
+      // We really aren't dragging
+      if(!_this._currentDrag) {
+        return;
+      }
+
+      // Check if we should start dragging. Check if we've dragged past the threshold,
+      // or we are starting from the open state.
+      if(!_this._isDragging &&
+          ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
+          (Math.abs(_this._currentDrag.startOffsetX) > 0)))
+      {
+        _this._isDragging = true;
+      }
+
+      if(_this._isDragging) {
+
+        // Grab the new X point, capping it at zero
+        var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
+
+        // If the new X position is past the buttons, we need to slow down the drag (rubber band style)
+        if(newX < -buttonsWidth) {
+          // Calculate the new X position, capped at the top of the buttons
+          newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
+        }
+
+        console.log(newX);
+        
+        _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
+      }
+    });
+  };
+
+  SlideDrag.prototype.end = function(e, doneCallback) {
+    var _this = this;
+
+    // There is no drag, just end immediately
     if(!this._currentDrag) {
-        this._initDrag();
+      doneCallback && doneCallback();
       return;
     }
 
     // If we are currently dragging, we want to snap back into place
-
     // The final resting point X will be the width of the exposed buttons
     var restingPoint = -this._currentDrag.buttonsWidth;
 
@@ -106,98 +127,88 @@
         _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
       }
       _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
+
+      //
+      doneCallback && doneCallback();
+    });
+  }
+
+  var ReorderDrag = function() {}
+  ReorderDrag.prototype = new DragOp();
+  ReorderDrag.prototype.start = function(e) {
+  };
+
+  /**
+   * The ListView handles a list of items. It will process drag animations, edit mode,
+   * and other operations that are common on mobile lists or table views.
+   */
+  ionic.views.List = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+
+    // The amount of dragging required to start sliding the element over (in pixels)
+    this.dragThresholdX = opts.dragThresholdX || 10;
+      
+    // Start the drag states
+    this._initDrag();
+
+    // Listen for drag and release events
+    window.ionic.onGesture('drag', function(e) {
+      _this._handleDrag(e);
+    }, this.el);
+    window.ionic.onGesture('release', function(e) {
+      _this._handleEndDrag(e);
+    }, this.el);
+  };
+
+  ionic.views.List.prototype = {
+    _initDrag: function() {
+      this._isDragging = false;
+      this._currentDrag = null;
+      this._dragOp = null;
+    },
+    _startDrag: function(e) {
+      this._isDragging = false;
+
+      // Check if this is a reorder drag
+      if(ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list-item-drag') && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
+        this._dragOp = new ReorderDrag(this.el);
+        this._dragOp.start(e);
+        return;
+      } 
+      
+      // Or check if this is a swipe to the side drag
+      if(e.gesture.direction == 'left' || e.gesture.direction == 'right') {
+        this._dragOp = new SlideDrag(this.el);
+        this._dragOp.start(e);
+      }
+    },
+
+    _handleEndDrag: function(e) {
+      var _this = this;
+      
+      if(!this._dragOp) {
+        this._initDrag();
+        return;
+      }
+
+      this._dragOp.end(e, function() {
         _this._initDrag();
       });
     },
-
     /**
      * Process the drag event to move the item to the left or right.
      */
     _handleDrag: function(e) {
       var _this = this, content, buttons;
 
-      window.requestAnimationFrame(function() {
+      if(!this._dragOp) {
-
+        this._startDrag(e);
-        if(!_this._currentDrag) {
-          _this._startDrag(e);
       }
 
-        // We really aren't dragging
+      this._dragOp.drag(e);
-        if(!_this._currentDrag) {
-          return;
     }
-
-        // Check if we should start dragging. Check if we've dragged past the threshold,
-        // or we are starting from the open state.
-        if(!_this._isDragging &&
-            ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
-            (Math.abs(_this._currentDrag.startOffsetX) > 0)))
-        {
-          _this._isDragging = true;
-        }
-
-        if(_this._isDragging) {
-
-          // Grab the new X point, capping it at zero
-          var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
-
-          // If the new X position is past the buttons, we need to slow down the drag (rubber band style)
-          if(newX < -buttonsWidth) {
-            // Calculate the new X position, capped at the top of the buttons
-            newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
-          }
-
-          console.log(newX);
-          
-          _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
-        }
-      });
-    },
-
-
-    _handleSwipeLeft: function(e) {
-
-      window.requestAnimationFrame(function() {
-        var item = e.target,
-          cl = item.classList,
-          content, buttons, buttonsWidth;
-
-
-        if(!content) {
-          return;
-        }
-
-        // Grab the buttons
-        buttons = content.parentNode.querySelector('.list-item-buttons');
-        if(buttons) {
-          buttonsWidth = buttons.offsetWidth;
-
-          // Slide the content over left by the button width
-          content.style.left = -buttonsWidth + 'px';
-        }
-      });
-    },
-    _handleSwipeRight: function(e) {
-
-      window.requestAnimationFrame(function() {
-        var item = e.target,
-          cl = item.classList,
-          content;
-
-        if(cl.contains('list-item')) {
-          content = item.querySelector('.list-item-content');
-        } else if(cl.contains('list-item-content')) {
-          content = item;
-        }
-
-        // This item didn't have content
-        if(!content) {
-          return;
-        }
-
-        content.style.left = 0;
-      });
-    },
   };
 
 })(ionic);