diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 2e993a711b..ae63c61d5a 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2297,6 +2297,7 @@ window.ionic = { }, _startDrag: function(e) { var offsetX, content; + console.log("START"); this._initDrag(); @@ -2320,49 +2321,53 @@ window.ionic = { _handleEndDrag: function(e) { var _this = this; + console.log("END"); var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; + window.requestAnimationFrame(function() { - // We didn't have a drag, so just init and leave - if(!this._currentDrag) { - this._initDrag(); - return; - } + // We didn't have a drag, so just init and leave + if(!_this._currentDrag) { + _this._initDrag(); + return; + } - // Snap to the correct spot + // Snap to the correct spot - content = this._currentDrag.content; + content = _this._currentDrag.content; - // Enable transition duration - content.classList.add('slide-box-animating'); + // Enable transition duration + content.classList.add('slide-box-animating'); - offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; - slideWidth = content.offsetWidth; - totalWidth = content.offsetWidth * content.children.length; + offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; + slideWidth = content.offsetWidth; + totalWidth = content.offsetWidth * content.children.length; - // Calculate how far in this slide we've dragged - ratio = (offsetX % slideWidth) / slideWidth; + // Calculate how far in this slide we've dragged + ratio = (offsetX % slideWidth) / slideWidth; - if(ratio >= 0) { - // Anything greater than zero is too far left - finalOffsetX = 0; - } else if(ratio >= -0.5) { - finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth); - } else { - // Sliiide to the right - finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth); - } + if(ratio >= 0) { + // Anything greater than zero is too far left + finalOffsetX = 0; + } else if(ratio >= -0.5) { + finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth); + } else { + // Sliiide to the right + finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth); + } - // Negative offsetX to slide correctly - content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; + // Negative offsetX to slide correctly + 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. */ _handleDrag: function(e) { var _this = this; + console.log("DRAG"); window.requestAnimationFrame(function() { var content; @@ -2383,7 +2388,7 @@ window.ionic = { content = _this._currentDrag.content; // 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)); diff --git a/js/views/slideBox.js b/js/views/slideBox.js index e5e96e910f..fad0f2f73b 100644 --- a/js/views/slideBox.js +++ b/js/views/slideBox.js @@ -31,6 +31,7 @@ }, _startDrag: function(e) { var offsetX, content; + console.log("START"); this._initDrag(); @@ -54,49 +55,53 @@ _handleEndDrag: function(e) { var _this = this; + console.log("END"); var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; + window.requestAnimationFrame(function() { - // We didn't have a drag, so just init and leave - if(!this._currentDrag) { - this._initDrag(); - return; - } + // We didn't have a drag, so just init and leave + if(!_this._currentDrag) { + _this._initDrag(); + return; + } - // Snap to the correct spot + // Snap to the correct spot - content = this._currentDrag.content; + content = _this._currentDrag.content; - // Enable transition duration - content.classList.add('slide-box-animating'); + // Enable transition duration + content.classList.add('slide-box-animating'); - offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; - slideWidth = content.offsetWidth; - totalWidth = content.offsetWidth * content.children.length; + offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; + slideWidth = content.offsetWidth; + totalWidth = content.offsetWidth * content.children.length; - // Calculate how far in this slide we've dragged - ratio = (offsetX % slideWidth) / slideWidth; + // Calculate how far in this slide we've dragged + ratio = (offsetX % slideWidth) / slideWidth; - if(ratio >= 0) { - // Anything greater than zero is too far left - finalOffsetX = 0; - } else if(ratio >= -0.5) { - finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth); - } else { - // Sliiide to the right - finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth); - } + if(ratio >= 0) { + // Anything greater than zero is too far left + finalOffsetX = 0; + } else if(ratio >= -0.5) { + finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth); + } else { + // Sliiide to the right + finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth); + } - // Negative offsetX to slide correctly - content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; + // Negative offsetX to slide correctly + 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. */ _handleDrag: function(e) { var _this = this; + console.log("DRAG"); window.requestAnimationFrame(function() { var content; @@ -117,7 +122,7 @@ content = _this._currentDrag.content; // 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));