javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed list drag subclassing #27

Browse Source
This commit is contained in:
Max Lynch
2013-11-07 12:55:11 -06:00
parent 284b329555
commit 6c4a5177be
3 changed files with 58 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
dist/js/ionic.js vendored
View File

@ -2071,7 +2071,7 @@ window.ionic = {
scrollTop: -by scrollTop: -by
}); });
if(_this._isDragging) { if(_this.isDragging) {
_this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval); _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
} }
}, this.inertialEventInterval); }, this.inertialEventInterval);
@ -2274,7 +2274,7 @@ window.ionic = {
}, },
_onScrollEnd: function() { _onScrollEnd: function() {
this._isDragging = false; this.isDragging = false;
this._drag = null; this._drag = null;
this.el.classList.remove('scroll-scrolling'); this.el.classList.remove('scroll-scrolling');
@ -2367,13 +2367,13 @@ window.ionic = {
_this._drag.pointY = py; _this._drag.pointY = py;
// Check if we should start dragging. Check if we've dragged past the threshold. // 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.deltaY) > _this.dragThreshold) ||
(Math.abs(e.gesture.deltaX) > _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; var drag = _this._drag;
// Request an animation frame to batch DOM reads/writes // 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)'; _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
// Kill the current drag // Kill the current drag
this._currentDrag = null; _this._currentDrag = null;
// We are done, notify caller // We are done, notify caller
@ -3024,14 +3024,6 @@ window.ionic = {
// Start the drag states // Start the drag states
this._initDrag(); 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 * Called to tell the list to stop refreshing. This is useful
@ -3104,7 +3096,7 @@ window.ionic = {
ionic.views.ListView.__super__._initDrag.call(this); ionic.views.ListView.__super__._initDrag.call(this);
//this._isDragging = false; //this._isDragging = false;
//this._dragOp = null; this._dragOp = null;
}, },
// Return the list item from the given target // Return the list item from the given target
@ -3120,13 +3112,12 @@ window.ionic = {
_startDrag: function(e) { _startDrag: function(e) {
ionic.views.ListView.__super__._startDrag.call(this, e);
var _this = this; var _this = this;
this._isDragging = false; this._isDragging = false;
console.log(e.gesture.direction);
// Check if this is a reorder drag // Check if this is a reorder drag
if(ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_DRAG_CLASS) && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) { if(ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_DRAG_CLASS) && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
var item = this._getItem(e.target); var item = this._getItem(e.target);
@ -3134,9 +3125,12 @@ window.ionic = {
if(item) { if(item) {
this._dragOp = new ReorderDrag({ el: item }); this._dragOp = new ReorderDrag({ el: item });
this._dragOp.start(e); this._dragOp.start(e);
e.preventDefault();
return;
} }
} }
// Check if this is a "pull down" drag for pull to refresh // Check if this is a "pull down" drag for pull to refresh
/* /*
else if(e.gesture.direction == 'down') { else if(e.gesture.direction == 'down') {
@ -3157,20 +3151,23 @@ window.ionic = {
*/ */
// Or check if this is a swipe to the side drag // 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 = new SlideDrag({ el: this.el });
this._dragOp.start(e); this._dragOp.start(e);
e.preventDefault(); 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) { _handleEndDrag: function(e) {
ionic.views.ListView.__super__._handleEndDrag.call(this, e);
var _this = this; var _this = this;
if(!this._dragOp) { if(!this._dragOp) {
this._initDrag(); ionic.views.ListView.__super__._handleEndDrag.call(this, e);
return; return;
} }
@ -3183,15 +3180,21 @@ window.ionic = {
* Process the drag event to move the item to the left or right. * Process the drag event to move the item to the left or right.
*/ */
_handleDrag: function(e) { _handleDrag: function(e) {
ionic.views.ListView.__super__._handleDrag.call(this, e);
var _this = this, content, buttons; var _this = this, content, buttons;
if(!this._dragOp) { // If we get a drag event, make sure we aren't in another drag, then check if we should
e.preventDefault(); // start one
if(!this.isDragging && !this._dragOp) {
this._startDrag(e); 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); this._dragOp.drag(e);
} }
}); });

45
js/views/listView.js
View File

@ -256,7 +256,7 @@
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
// Kill the current drag // Kill the current drag
this._currentDrag = null; _this._currentDrag = null;
// We are done, notify caller // We are done, notify caller
@ -391,14 +391,6 @@
// Start the drag states // Start the drag states
this._initDrag(); 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 * Called to tell the list to stop refreshing. This is useful
@ -471,7 +463,7 @@
ionic.views.ListView.__super__._initDrag.call(this); ionic.views.ListView.__super__._initDrag.call(this);
//this._isDragging = false; //this._isDragging = false;
//this._dragOp = null; this._dragOp = null;
}, },
// Return the list item from the given target // Return the list item from the given target
@ -487,13 +479,12 @@
_startDrag: function(e) { _startDrag: function(e) {
ionic.views.ListView.__super__._startDrag.call(this, e);
var _this = this; var _this = this;
this._isDragging = false; this._isDragging = false;
console.log(e.gesture.direction);
// Check if this is a reorder drag // Check if this is a reorder drag
if(ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_DRAG_CLASS) && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) { if(ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_DRAG_CLASS) && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
var item = this._getItem(e.target); var item = this._getItem(e.target);
@ -501,9 +492,12 @@
if(item) { if(item) {
this._dragOp = new ReorderDrag({ el: item }); this._dragOp = new ReorderDrag({ el: item });
this._dragOp.start(e); this._dragOp.start(e);
e.preventDefault();
return;
} }
} }
// Check if this is a "pull down" drag for pull to refresh // Check if this is a "pull down" drag for pull to refresh
/* /*
else if(e.gesture.direction == 'down') { else if(e.gesture.direction == 'down') {
@ -524,20 +518,23 @@
*/ */
// Or check if this is a swipe to the side drag // 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 = new SlideDrag({ el: this.el });
this._dragOp.start(e); this._dragOp.start(e);
e.preventDefault(); 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) { _handleEndDrag: function(e) {
ionic.views.ListView.__super__._handleEndDrag.call(this, e);
var _this = this; var _this = this;
if(!this._dragOp) { if(!this._dragOp) {
this._initDrag(); ionic.views.ListView.__super__._handleEndDrag.call(this, e);
return; return;
} }
@ -550,15 +547,21 @@
* Process the drag event to move the item to the left or right. * Process the drag event to move the item to the left or right.
*/ */
_handleDrag: function(e) { _handleDrag: function(e) {
ionic.views.ListView.__super__._handleDrag.call(this, e);
var _this = this, content, buttons; var _this = this, content, buttons;
if(!this._dragOp) { // If we get a drag event, make sure we aren't in another drag, then check if we should
e.preventDefault(); // start one
if(!this.isDragging && !this._dragOp) {
this._startDrag(e); 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); this._dragOp.drag(e);
} }
}); });

10
js/views/scrollView.js
View File

@ -194,7 +194,7 @@
scrollTop: -by scrollTop: -by
}); });
if(_this._isDragging) { if(_this.isDragging) {
_this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval); _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
} }
}, this.inertialEventInterval); }, this.inertialEventInterval);
@ -397,7 +397,7 @@
}, },
_onScrollEnd: function() { _onScrollEnd: function() {
this._isDragging = false; this.isDragging = false;
this._drag = null; this._drag = null;
this.el.classList.remove('scroll-scrolling'); this.el.classList.remove('scroll-scrolling');
@ -490,13 +490,13 @@
_this._drag.pointY = py; _this._drag.pointY = py;
// Check if we should start dragging. Check if we've dragged past the threshold. // 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.deltaY) > _this.dragThreshold) ||
(Math.abs(e.gesture.deltaX) > _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; var drag = _this._drag;
// Request an animation frame to batch DOM reads/writes // Request an animation frame to batch DOM reads/writes