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

Don't even try to use the scroll shit, it's broken

Browse Source
This commit is contained in:
Max Lynch
2013-10-24 18:56:27 -05:00
parent 0536c03271
commit 1aba0399e7
6 changed files with 300 additions and 2503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
js/views/scrollView.js
View File

@ -10,7 +10,9 @@
dragThresholdY: 10,
resistance: 2,
scrollEventName: 'momentumScrolled',
intertialEventInterval: 50
intertialEventInterval: 50,
bounceTime: 600 //how long to take when bouncing back in a rubber band
});
ionic.Utils.extend(this, opts);
@ -34,6 +36,37 @@
DECEL_RATE_FAST: 0.99,
DECEL_RATE_SLOW: 0.996,
_getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
var distance = current - start,
speed = Math.abs(distance) / time,
destination,
duration,
deceleration = 0.0006;
// Calculate the final desination
destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
duration = speed / deceleration;
// Check if the final destination needs to be rubber banded
if ( destination < lowerMargin ) {
// We have dragged too far down, snap back to the maximum
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
distance = Math.abs(destination - current);
duration = distance / speed;
} else if ( destination > 0 ) {
// We have dragged too far up, snap back to 0
destination = 0;//wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
distance = Math.abs(current) + destination;
duration = distance / speed;
}
console.log('Momentum of time', time, speed, destination, duration);
return {
destination: Math.round(destination),
duration: duration
};
},
/**
* Scroll to the given X and Y point, taking
* the given amount of time, with the given
@ -79,6 +112,8 @@
this._isStopped = false;
},
_endTransition: function() {
this._isDragging = false;
this._drag = null;
@ -90,6 +125,8 @@
clearTimeout(this._momentumStepTimeout)
},
/**
* Initialize a drag by grabbing the content area to drag, and any other
* info we might need for the dragging.
@ -102,76 +139,90 @@
var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
this._drag = {
direction: 'v',
y: scrollTop,
pointY: e.gesture.touches[0].pageY,
startY: scrollTop,
resist: 1,
startTime: +(new Date)
startTime: Date.now()
};
},
/**
* Process the drag event to move the item to the left or right.
*/
_handleDrag: function(e) {
var _this = this;
window.requestAnimationFrame(function() {
var content;
var content;
// The drag stopped already, don't process this one
if(_this._isStopped) {
_this._initDrag();
return;
}
// The drag stopped already, don't process this one
if(_this._isStopped) {
_this._initDrag();
return;
}
// We really aren't dragging
if(!_this._drag) {
_this._startDrag(e);
}
// We really aren't dragging
if(!_this._drag) {
_this._startDrag(e);
}
// Stop any default events during the drag
e.preventDefault();
// Stop any default events during the drag
e.preventDefault();
var py = e.gesture.touches[0].pageY;
var deltaY = py - _this._drag.pointY;
console.log("Delta y", deltaY);
var py = e.gesture.touches[0].pageY;
var deltaY = py - _this._drag.pointY;
console.log("Delta y", deltaY);
_this._drag.pointY = py;
_this._drag.pointY = py;
// Check if we should start dragging. Check if we've dragged past the threshold.
if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
_this._isDragging = true;
}
if(_this._isDragging) {
// Check if we should start dragging. Check if we've dragged past the threshold.
if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
_this._isDragging = true;
}
if(_this._isDragging) {
var drag = _this._drag;
window.requestAnimationFrame(function() {
// We are dragging, grab the current content height
// and the height of the parent container
var totalHeight = _this.el.offsetHeight;
var parentHeight = _this.el.parentNode.offsetHeight;
var timestamp = Date.now();
// Calculate the new Y point for the container
var newY = _this._drag.y + deltaY;
var newY = drag.y + deltaY;
// Check if the dragging is beyond the bottom or top
if(newY > 0 || (-newY + parentHeight) > totalHeight) {
// Rubber band
newY = _this._drag.y + deltaY / 3;//(-_this.resistance);
newY = drag.y + deltaY / 3;//(-_this.resistance);
}
// Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
_this._drag.y = newY;
drag.y = newY;
// Check if we need to reset the drag initial states if we've
// been dragging for a bit
if(timestamp - drag.startTime > 300) {
console.log('Resetting timer');
drag.startTime = timestamp;
drag.startY = drag.y;
}
ionic.trigger(_this.scrollEventName, {
target: _this.el,
scrollTop: -newY
});
}
});
});
}
},
_handleEndDrag: function(e) {
// We didn't have a drag, so just init and leave
if(!this._drag) {
@ -189,56 +240,59 @@
},
// Find the stopping point given the current velocity and acceleration rate, and
// animate to that position
_animateToStop: function(e) {
var _this = this;
var totalHeight = this.el.offsetHeight;
var parentHeight = this.el.parentNode.offsetHeight;
var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var duration = +(new Date) - this._drag.startTime;
var newY = scrollTop;
if(e.gesture.velocityY) {
// Get the final resting point
var vy = e.gesture.velocityY;
var speed = Math.abs(e.gesture.deltaY) / duration;
//newY = newY + (vy * vy) / (0.05 * this.decelerationRate);
var destination = newY + ( speed * speed ) / ( 2 * (1-_this.decelerationRate)) * ( e.gesture.deltaY < 0 ? -1 : 1 );
var dur = speed / (1-_this.decelerationRate);
if((-destination + parentHeight) > totalHeight) {
destination = -(totalHeight - parentHeight);
} else if(destination > 0) {
destination = 0;
}
console.log('Ending at velocity and point', speed, vy, destination, dur);
var el = this.el;
window.requestAnimationFrame(function() {
_this.scrollTo(0, destination, dur);
});
if(this._drag.direction == 'v') {
this._animateToStopVertical(e);
} else {
this._animateToStopHorizontal(e);
}
/*
// Check if the dragging is beyond the bottom or top
*/
},
/*
setTimeout(function() {
window.requestAnimationFrame(function() {
_this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
});
}, 50);
*/
_animateToStopHorizontal: function(e) {
},
_animateToStopVertical: function(e) {
var _this = this;
window.requestAnimationFrame(function() {
var drag = _this._drag;
// Turn on animation
this.el.classList.add('scroll-scrolling');
// Calculate the viewport height and the height of the content
var totalHeight = _this.el.offsetHeight;
var parentHeight = _this.el.parentNode.offsetHeight;
// Calculate how long we've been dragging for, with a max of 300ms
var duration = Math.min(300, (Date.now()) - _this._drag.startTime);
//var newX = Math.round(this.x),
var newY = Math.round(drag.y);
//distanceX = Math.abs(newX - this.startX),
//var distanceY = Math.abs(newY - drag.startY);
var momentum = _this._getMomentum(drag.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
//var newX = momentumX.destination;
newY = momentum.destination;
var time = momentum.duration;
if(drag.y > 0) {
_this.scrollTo(0, 0, _this.bounceTime);
return;
} else if ((-drag.y + parentHeight) > totalHeight) {
_this.scrollTo(0, totalHeight - parentHeight, _this.bounceTime);
return;
}
var el = _this.el;
// Turn on animation
_this.scrollTo(0, newY, time);
});
}
};