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 offset bug in slidebox

Browse Source 
Sometimes the slidebox would get out of whack, it was a timing issue
with requestAnimationFrame
This commit is contained in:
Max Lynch
2013-10-16 00:39:38 -05:00
parent 1bfbd701ab
commit acd1b368ba
2 changed files with 64 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
dist/js/ionic.js vendored
View File

@ -2297,6 +2297,7 @@ window.ionic = {
}, },
_startDrag: function(e) { _startDrag: function(e) {
var offsetX, content; var offsetX, content;
console.log("START");
this._initDrag(); this._initDrag();
@ -2320,49 +2321,53 @@ window.ionic = {
_handleEndDrag: function(e) { _handleEndDrag: function(e) {
var _this = this; var _this = this;
console.log("END");
var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX;
window.requestAnimationFrame(function() {
// We didn't have a drag, so just init and leave // We didn't have a drag, so just init and leave
if(!this._currentDrag) { if(!_this._currentDrag) {
this._initDrag(); _this._initDrag();
return; return;
} }
// Snap to the correct spot // Snap to the correct spot
content = this._currentDrag.content; content = _this._currentDrag.content;
// Enable transition duration // Enable transition duration
content.classList.add('slide-box-animating'); content.classList.add('slide-box-animating');
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
slideWidth = content.offsetWidth; slideWidth = content.offsetWidth;
totalWidth = content.offsetWidth * content.children.length; totalWidth = content.offsetWidth * content.children.length;
// Calculate how far in this slide we've dragged // Calculate how far in this slide we've dragged
ratio = (offsetX % slideWidth) / slideWidth; ratio = (offsetX % slideWidth) / slideWidth;
if(ratio >= 0) { if(ratio >= 0) {
// Anything greater than zero is too far left // Anything greater than zero is too far left
finalOffsetX = 0; finalOffsetX = 0;
} else if(ratio >= -0.5) { } else if(ratio >= -0.5) {
finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth); finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth);
} else { } else {
// Sliiide to the right // Sliiide to the right
finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth); finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth);
} }
// Negative offsetX to slide correctly // Negative offsetX to slide correctly
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
this._initDrag(); _this._initDrag();
});
}, },
/** /**
* 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) {
var _this = this; var _this = this;
console.log("DRAG");
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
var content; var content;
@ -2383,7 +2388,7 @@ window.ionic = {
content = _this._currentDrag.content; content = _this._currentDrag.content;
// Grab the new X point, capping it at zero // Grab the new X point, capping it at zero
var newX = Math.min(content.offsetWidth, _this._currentDrag.startOffsetX + e.gesture.deltaX); var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
/* /*
var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1)); var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1));

59
js/views/slideBox.js
View File

@ -31,6 +31,7 @@
}, },
_startDrag: function(e) { _startDrag: function(e) {
var offsetX, content; var offsetX, content;
console.log("START");
this._initDrag(); this._initDrag();
@ -54,49 +55,53 @@
_handleEndDrag: function(e) { _handleEndDrag: function(e) {
var _this = this; var _this = this;
console.log("END");
var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX;
window.requestAnimationFrame(function() {
// We didn't have a drag, so just init and leave // We didn't have a drag, so just init and leave
if(!this._currentDrag) { if(!_this._currentDrag) {
this._initDrag(); _this._initDrag();
return; return;
} }
// Snap to the correct spot // Snap to the correct spot
content = this._currentDrag.content; content = _this._currentDrag.content;
// Enable transition duration // Enable transition duration
content.classList.add('slide-box-animating'); content.classList.add('slide-box-animating');
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
slideWidth = content.offsetWidth; slideWidth = content.offsetWidth;
totalWidth = content.offsetWidth * content.children.length; totalWidth = content.offsetWidth * content.children.length;
// Calculate how far in this slide we've dragged // Calculate how far in this slide we've dragged
ratio = (offsetX % slideWidth) / slideWidth; ratio = (offsetX % slideWidth) / slideWidth;
if(ratio >= 0) { if(ratio >= 0) {
// Anything greater than zero is too far left // Anything greater than zero is too far left
finalOffsetX = 0; finalOffsetX = 0;
} else if(ratio >= -0.5) { } else if(ratio >= -0.5) {
finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth); finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth);
} else { } else {
// Sliiide to the right // Sliiide to the right
finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth); finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth);
} }
// Negative offsetX to slide correctly // Negative offsetX to slide correctly
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
this._initDrag(); _this._initDrag();
});
}, },
/** /**
* 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) {
var _this = this; var _this = this;
console.log("DRAG");
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
var content; var content;
@ -117,7 +122,7 @@
content = _this._currentDrag.content; content = _this._currentDrag.content;
// Grab the new X point, capping it at zero // Grab the new X point, capping it at zero
var newX = Math.min(content.offsetWidth, _this._currentDrag.startOffsetX + e.gesture.deltaX); var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
/* /*
var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1)); var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1));