From 6c4a5177be328a220092b46ea5a14eb246b9c35a Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 7 Nov 2013 12:55:11 -0600 Subject: [PATCH] Fixed list drag subclassing #27 --- dist/js/ionic.js | 55 ++++++++++++++++++++++-------------------- js/views/listView.js | 45 ++++++++++++++++++---------------- js/views/scrollView.js | 10 ++++---- 3 files changed, 58 insertions(+), 52 deletions(-) diff --git a/dist/js/ionic.js b/dist/js/ionic.js index bfd82c6314..11c588743e 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2071,7 +2071,7 @@ window.ionic = { scrollTop: -by }); - if(_this._isDragging) { + if(_this.isDragging) { _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval); } }, this.inertialEventInterval); @@ -2274,7 +2274,7 @@ window.ionic = { }, _onScrollEnd: function() { - this._isDragging = false; + this.isDragging = false; this._drag = null; this.el.classList.remove('scroll-scrolling'); @@ -2367,13 +2367,13 @@ window.ionic = { _this._drag.pointY = py; // Check if we should start dragging. Check if we've dragged past the threshold. - if(!_this._isDragging && + if(!_this.isDragging && ((Math.abs(e.gesture.deltaY) > _this.dragThreshold) || (Math.abs(e.gesture.deltaX) > _this.dragThreshold))) { - _this._isDragging = true; + _this.isDragging = true; } - if(_this._isDragging) { + if(_this.isDragging) { var drag = _this._drag; // Request an animation frame to batch DOM reads/writes @@ -2889,7 +2889,7 @@ window.ionic = { _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; // Kill the current drag - this._currentDrag = null; + _this._currentDrag = null; // We are done, notify caller @@ -3024,14 +3024,6 @@ window.ionic = { // 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); }, /** * Called to tell the list to stop refreshing. This is useful @@ -3104,7 +3096,7 @@ window.ionic = { ionic.views.ListView.__super__._initDrag.call(this); //this._isDragging = false; - //this._dragOp = null; + this._dragOp = null; }, // Return the list item from the given target @@ -3120,13 +3112,12 @@ window.ionic = { _startDrag: function(e) { - ionic.views.ListView.__super__._startDrag.call(this, e); - - var _this = this; this._isDragging = false; + console.log(e.gesture.direction); + // 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); @@ -3134,9 +3125,12 @@ window.ionic = { if(item) { this._dragOp = new ReorderDrag({ el: item }); this._dragOp.start(e); + e.preventDefault(); + return; } } + // Check if this is a "pull down" drag for pull to refresh /* else if(e.gesture.direction == 'down') { @@ -3157,20 +3151,23 @@ window.ionic = { */ // Or check if this is a swipe to the side drag - else if(e.gesture.direction == 'left' || e.gesture.direction == 'right') { + else if((e.gesture.direction == 'left' || e.gesture.direction == 'right') && Math.abs(e.gesture.deltaX) > 5) { 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); }, _handleEndDrag: function(e) { - ionic.views.ListView.__super__._handleEndDrag.call(this, e); var _this = this; if(!this._dragOp) { - this._initDrag(); + ionic.views.ListView.__super__._handleEndDrag.call(this, e); return; } @@ -3183,15 +3180,21 @@ window.ionic = { * Process the drag event to move the item to the left or right. */ _handleDrag: function(e) { - ionic.views.ListView.__super__._handleDrag.call(this, e); var _this = this, content, buttons; - - if(!this._dragOp) { - e.preventDefault(); + + // If we get a drag event, make sure we aren't in another drag, then check if we should + // start one + if(!this.isDragging && !this._dragOp) { this._startDrag(e); - if(!this._dragOp) { return; } } + // No drag still, pass it up + if(!this._dragOp) { + ionic.views.ListView.__super__._handleDrag.call(this, e); + return; + } + + e.preventDefault(); this._dragOp.drag(e); } }); diff --git a/js/views/listView.js b/js/views/listView.js index 91d1f87c42..728583161f 100644 --- a/js/views/listView.js +++ b/js/views/listView.js @@ -256,7 +256,7 @@ _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; // Kill the current drag - this._currentDrag = null; + _this._currentDrag = null; // We are done, notify caller @@ -391,14 +391,6 @@ // 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); }, /** * Called to tell the list to stop refreshing. This is useful @@ -471,7 +463,7 @@ ionic.views.ListView.__super__._initDrag.call(this); //this._isDragging = false; - //this._dragOp = null; + this._dragOp = null; }, // Return the list item from the given target @@ -487,13 +479,12 @@ _startDrag: function(e) { - ionic.views.ListView.__super__._startDrag.call(this, e); - - var _this = this; this._isDragging = false; + console.log(e.gesture.direction); + // 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); @@ -501,9 +492,12 @@ if(item) { this._dragOp = new ReorderDrag({ el: item }); this._dragOp.start(e); + e.preventDefault(); + return; } } + // Check if this is a "pull down" drag for pull to refresh /* else if(e.gesture.direction == 'down') { @@ -524,20 +518,23 @@ */ // Or check if this is a swipe to the side drag - else if(e.gesture.direction == 'left' || e.gesture.direction == 'right') { + else if((e.gesture.direction == 'left' || e.gesture.direction == 'right') && Math.abs(e.gesture.deltaX) > 5) { 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); }, _handleEndDrag: function(e) { - ionic.views.ListView.__super__._handleEndDrag.call(this, e); var _this = this; if(!this._dragOp) { - this._initDrag(); + ionic.views.ListView.__super__._handleEndDrag.call(this, e); return; } @@ -550,15 +547,21 @@ * Process the drag event to move the item to the left or right. */ _handleDrag: function(e) { - ionic.views.ListView.__super__._handleDrag.call(this, e); var _this = this, content, buttons; - - if(!this._dragOp) { - e.preventDefault(); + + // If we get a drag event, make sure we aren't in another drag, then check if we should + // start one + if(!this.isDragging && !this._dragOp) { this._startDrag(e); - if(!this._dragOp) { return; } } + // No drag still, pass it up + if(!this._dragOp) { + ionic.views.ListView.__super__._handleDrag.call(this, e); + return; + } + + e.preventDefault(); this._dragOp.drag(e); } }); diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 9de62dce88..db874b1a2e 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -194,7 +194,7 @@ scrollTop: -by }); - if(_this._isDragging) { + if(_this.isDragging) { _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval); } }, this.inertialEventInterval); @@ -397,7 +397,7 @@ }, _onScrollEnd: function() { - this._isDragging = false; + this.isDragging = false; this._drag = null; this.el.classList.remove('scroll-scrolling'); @@ -490,13 +490,13 @@ _this._drag.pointY = py; // Check if we should start dragging. Check if we've dragged past the threshold. - if(!_this._isDragging && + if(!_this.isDragging && ((Math.abs(e.gesture.deltaY) > _this.dragThreshold) || (Math.abs(e.gesture.deltaX) > _this.dragThreshold))) { - _this._isDragging = true; + _this.isDragging = true; } - if(_this._isDragging) { + if(_this.isDragging) { var drag = _this._drag; // Request an animation frame to batch DOM reads/writes