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

List item drag improvements

Browse Source
This commit is contained in:
Max Lynch
2013-10-10 16:21:22 -05:00
parent dedc5e9b87
commit 92c0d2315b
2 changed files with 116 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
dist/ionic.js vendored
View File

@ -1814,6 +1814,7 @@ window.ionic = {
ionic.views.List.prototype = { ionic.views.List.prototype = {
_initDrag: function() { _initDrag: function() {
this._offsetX = 0; this._offsetX = 0;
this._deltaSlowX = null;
this._isDragging = false; this._isDragging = false;
this._currentDrag = null; this._currentDrag = null;
}, },
@ -1827,12 +1828,17 @@ window.ionic = {
content = e.target; content = e.target;
} }
// If we don't have a content area as one of our children (or ourselves), skip
if(!content) { if(!content) {
return; return;
} }
// Make sure we aren't animating as we slide
content.classList.remove('list-item-sliding'); content.classList.remove('list-item-sliding');
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
var offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
// Grab the buttons // Grab the buttons
buttons = content.parentNode.querySelector('.list-item-buttons'); buttons = content.parentNode.querySelector('.list-item-buttons');
if(!buttons) { if(!buttons) {
@ -1843,25 +1849,34 @@ window.ionic = {
this._currentDrag = { this._currentDrag = {
buttonsWidth: buttonsWidth, buttonsWidth: buttonsWidth,
content: content content: content,
startOffsetX: offsetX
}; };
}, },
_handleEndDrag: function(e) { _handleEndDrag: function(e) {
var _this = this; var _this = this;
if(!this._currentDrag) {
this._initDrag();
return;
}
// If we are currently dragging, we want to snap back into place // If we are currently dragging, we want to snap back into place
if(this._currentDrag) {
// The final resting point X will be the width of the exposed buttons // The final resting point X will be the width of the exposed buttons
var restingPoint = -this._currentDrag.buttonsWidth; var restingPoint = -this._currentDrag.buttonsWidth;
// Check if the drag didn't clear the buttons and we aren't moving fast enough to swipe open // Check if the drag didn't clear the buttons mid-point
if(e.gesture.deltaX > -this._currentDrag.buttonsWidth) { // and we aren't moving fast enough to swipe open
if(e.gesture.deltaX > -(this._currentDrag.buttonsWidth/2)) {
// If we are going left but too slow, or going right, go back to resting
if(e.gesture.direction == "left" && Math.abs(e.gesture.velocityX) < 0.3) { if(e.gesture.direction == "left" && Math.abs(e.gesture.velocityX) < 0.3) {
restingPoint = 0; restingPoint = 0;
} else if(e.gesture.direction == "right") { } else if(e.gesture.direction == "right") {
restingPoint = 0; restingPoint = 0;
} }
} }
var content = this._currentDrag.content; var content = this._currentDrag.content;
@ -1882,10 +1897,6 @@ window.ionic = {
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
_this._initDrag(); _this._initDrag();
}); });
} else {
this._initDrag();
}
}, },
/** /**
@ -1894,34 +1905,30 @@ window.ionic = {
_handleDrag: function(e) { _handleDrag: function(e) {
var _this = this, content, buttons; var _this = this, content, buttons;
if(!this._currentDrag) {
this._startDrag(e);
}
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
if(!_this._currentDrag) { if(!_this._currentDrag) {
return; _this._startDrag(e);
} }
// Calculate difference from the tap points // Check if we should start dragging. Check if we've dragged past the threshold,
if(!_this._isDragging && Math.abs(e.gesture.deltaX) > _this.dragThresholdX) { // 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; _this._isDragging = true;
// Grab the starting X point for this item
_this._offsetX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
} }
if(_this._isDragging) { if(_this._isDragging) {
// Grab the new X point, capping it at zero // Grab the new X point, capping it at zero
var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
var newX = Math.min(0, _this._offsetX + 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 && !_this._deltaSlowX) {
_this._deltaSlowX = e.gesture.deltaX;
}
if(newX < -buttonsWidth) { if(newX < -buttonsWidth) {
newX = Math.min(_this._deltaSlowX, _this._deltaSlowX + (((e.gesture.deltaX - _this._deltaSlowX) * 0.4))); // 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); console.log(newX);

53
js/views/listView.js
View File

@ -34,6 +34,7 @@
ionic.views.List.prototype = { ionic.views.List.prototype = {
_initDrag: function() { _initDrag: function() {
this._offsetX = 0; this._offsetX = 0;
this._deltaSlowX = null;
this._isDragging = false; this._isDragging = false;
this._currentDrag = null; this._currentDrag = null;
}, },
@ -47,12 +48,17 @@
content = e.target; content = e.target;
} }
// If we don't have a content area as one of our children (or ourselves), skip
if(!content) { if(!content) {
return; return;
} }
// Make sure we aren't animating as we slide
content.classList.remove('list-item-sliding'); content.classList.remove('list-item-sliding');
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
var offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
// Grab the buttons // Grab the buttons
buttons = content.parentNode.querySelector('.list-item-buttons'); buttons = content.parentNode.querySelector('.list-item-buttons');
if(!buttons) { if(!buttons) {
@ -63,25 +69,34 @@
this._currentDrag = { this._currentDrag = {
buttonsWidth: buttonsWidth, buttonsWidth: buttonsWidth,
content: content content: content,
startOffsetX: offsetX
}; };
}, },
_handleEndDrag: function(e) { _handleEndDrag: function(e) {
var _this = this; var _this = this;
if(!this._currentDrag) {
this._initDrag();
return;
}
// If we are currently dragging, we want to snap back into place // If we are currently dragging, we want to snap back into place
if(this._currentDrag) {
// The final resting point X will be the width of the exposed buttons // The final resting point X will be the width of the exposed buttons
var restingPoint = -this._currentDrag.buttonsWidth; var restingPoint = -this._currentDrag.buttonsWidth;
// Check if the drag didn't clear the buttons and we aren't moving fast enough to swipe open // Check if the drag didn't clear the buttons mid-point
if(e.gesture.deltaX > -this._currentDrag.buttonsWidth) { // and we aren't moving fast enough to swipe open
if(e.gesture.deltaX > -(this._currentDrag.buttonsWidth/2)) {
// If we are going left but too slow, or going right, go back to resting
if(e.gesture.direction == "left" && Math.abs(e.gesture.velocityX) < 0.3) { if(e.gesture.direction == "left" && Math.abs(e.gesture.velocityX) < 0.3) {
restingPoint = 0; restingPoint = 0;
} else if(e.gesture.direction == "right") { } else if(e.gesture.direction == "right") {
restingPoint = 0; restingPoint = 0;
} }
} }
var content = this._currentDrag.content; var content = this._currentDrag.content;
@ -102,10 +117,6 @@
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
_this._initDrag(); _this._initDrag();
}); });
} else {
this._initDrag();
}
}, },
/** /**
@ -114,34 +125,30 @@
_handleDrag: function(e) { _handleDrag: function(e) {
var _this = this, content, buttons; var _this = this, content, buttons;
if(!this._currentDrag) {
this._startDrag(e);
}
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
if(!_this._currentDrag) { if(!_this._currentDrag) {
return; _this._startDrag(e);
} }
// Calculate difference from the tap points // Check if we should start dragging. Check if we've dragged past the threshold,
if(!_this._isDragging && Math.abs(e.gesture.deltaX) > _this.dragThresholdX) { // 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; _this._isDragging = true;
// Grab the starting X point for this item
_this._offsetX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
} }
if(_this._isDragging) { if(_this._isDragging) {
// Grab the new X point, capping it at zero // Grab the new X point, capping it at zero
var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
var newX = Math.min(0, _this._offsetX + 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 && !_this._deltaSlowX) {
_this._deltaSlowX = e.gesture.deltaX;
}
if(newX < -buttonsWidth) { if(newX < -buttonsWidth) {
newX = Math.min(_this._deltaSlowX, _this._deltaSlowX + (((e.gesture.deltaX - _this._deltaSlowX) * 0.4))); // 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); console.log(newX);