From 53af99c054cb2c19c8b626f3b3913aa1c976034a Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 15 Oct 2013 17:04:48 -0500 Subject: [PATCH] Slide box with start and end bounds --- dist/css/ionic.css | 6 +++++- dist/js/ionic.js | 33 ++++++++++++++++++++------------- js/views/slideBox.js | 33 ++++++++++++++++++++------------- scss/ionic/_slideBox.scss | 7 +++++-- 4 files changed, 50 insertions(+), 29 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index a87c177d41..a7501c084c 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -3090,7 +3090,11 @@ a.button { .slide-box { position: relative; white-space: nowrap; - -webkit-transition: -webkit-transform 0 ease-in-out; } + -webkit-transition: -webkit-transform 0 ease-in-out; + font-size: 0; } + +.slide-box-animating { + -webkit-transition-duration: 0.2s; } .slide-box-content { display: inline-block; diff --git a/dist/js/ionic.js b/dist/js/ionic.js index e0195276ff..270e60d89b 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2307,7 +2307,7 @@ window.ionic = { } // Disable transitions during drag - content.style.webkitTransitionDuration = '0'; + content.classList.remove('slide-box-animating'); // Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start) offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; @@ -2320,6 +2320,8 @@ window.ionic = { _handleEndDrag: function(e) { var _this = this; + + var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; // We didn't have a drag, so just init and leave if(!this._currentDrag) { @@ -2329,25 +2331,29 @@ window.ionic = { // Snap to the correct spot - var content = this._currentDrag.content; + content = this._currentDrag.content; // Enable transition duration - content.style.webkitTransitionDuration = '0.2s'; + content.classList.add('slide-box-animating'); - var offsetX = Math.abs(parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0); - var slideWidth = content.offsetWidth; - var 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 - var ratio = (offsetX % slideWidth) / slideWidth; + ratio = (offsetX % slideWidth) / slideWidth; - var finalOffsetX = Math.min(totalWidth, Math.ceil(offsetX / slideWidth) * slideWidth); - - if(ratio < 0.5) { - finalOffsetX = Math.max(0, Math.floor(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)'; this._initDrag(); @@ -2373,7 +2379,8 @@ window.ionic = { if(_this._isDragging) { // Grab the new X point, capping it at zero - var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX); + var newX = Math.min(_this._currentDrag.content.offsetWidth, _this._currentDrag.startOffsetX + e.gesture.deltaX); + _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; } diff --git a/js/views/slideBox.js b/js/views/slideBox.js index 46c40293ae..be3703dafe 100644 --- a/js/views/slideBox.js +++ b/js/views/slideBox.js @@ -41,7 +41,7 @@ } // Disable transitions during drag - content.style.webkitTransitionDuration = '0'; + content.classList.remove('slide-box-animating'); // Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start) offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; @@ -54,6 +54,8 @@ _handleEndDrag: function(e) { var _this = this; + + var finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; // We didn't have a drag, so just init and leave if(!this._currentDrag) { @@ -63,25 +65,29 @@ // Snap to the correct spot - var content = this._currentDrag.content; + content = this._currentDrag.content; // Enable transition duration - content.style.webkitTransitionDuration = '0.2s'; + content.classList.add('slide-box-animating'); - var offsetX = Math.abs(parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0); - var slideWidth = content.offsetWidth; - var 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 - var ratio = (offsetX % slideWidth) / slideWidth; + ratio = (offsetX % slideWidth) / slideWidth; - var finalOffsetX = Math.min(totalWidth, Math.ceil(offsetX / slideWidth) * slideWidth); - - if(ratio < 0.5) { - finalOffsetX = Math.max(0, Math.floor(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)'; this._initDrag(); @@ -107,7 +113,8 @@ if(_this._isDragging) { // Grab the new X point, capping it at zero - var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX); + var newX = Math.min(_this._currentDrag.content.offsetWidth, _this._currentDrag.startOffsetX + e.gesture.deltaX); + _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; } diff --git a/scss/ionic/_slideBox.scss b/scss/ionic/_slideBox.scss index ce96d99dfb..b572317df9 100644 --- a/scss/ionic/_slideBox.scss +++ b/scss/ionic/_slideBox.scss @@ -1,10 +1,13 @@ .slide-box { position: relative; white-space: nowrap; - -webkit-transition: -webkit-transform 0 ease-in-out; + + // Remove the gaps between slide content items + font-size: 0; } -.slide-box.animate { +.slide-box-animating { + -webkit-transition-duration: 0.2s; } .slide-box-content { display: inline-block;