From 77d9ef53d11a54da5eea31e74b25fa1e2ac90461 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 16 Oct 2013 08:24:31 -0500 Subject: [PATCH] Slide box velocity fix both directions --- dist/css/ionic.css | 6 ++--- dist/js/ionic.js | 23 +++++++++++++----- js/views/slideBox.js | 23 +++++++++++++----- scss/ionic/_slideBox.scss | 4 ++-- test/slideBox.html | 50 +++++++++++++++++++++++++++++++++++---- 5 files changed, 85 insertions(+), 21 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 11c39dd6a6..279e1839ff 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -3025,7 +3025,7 @@ a.button { position: relative; overflow: hidden; } -.slide-box-items { +.slide-box-slides { position: relative; white-space: nowrap; -webkit-transition: -webkit-transform 0 ease-in-out; @@ -3034,12 +3034,12 @@ a.button { .slide-box-animating { -webkit-transition-duration: 0.2s; } -.slide-box-content { +.slide { display: inline-block; vertical-align: top; width: 100%; height: 100%; } - .slide-box-content img { + .slide img { width: 100%; } .slide-box-pager { diff --git a/dist/js/ionic.js b/dist/js/ionic.js index ccdf803e4f..f237e14b2d 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2302,6 +2302,16 @@ window.ionic = { }; ionic.views.SlideBox.prototype = { + /** + * Tell the pager to update itself if content is added or + * removed. + */ + update: function() { + this._updatePager(); + }, + + prependSlide: function(el) { + }, /** * Slide to the given slide index. @@ -2406,16 +2416,15 @@ window.ionic = { // TODO: Do we need this anymore? finalOffsetX = 0; } else if(ratio >= -0.5) { - // We are more than half-way through a drag + // We are less than half-way through a drag // Sliiide to the left finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth); } else { - // We are less than half-way through a drag + // We are more than half-way through a drag // Sliiide to the right finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth); } - _this.slideIndex = Math.ceil(finalOffsetX / slideWidth); if(e.gesture.velocityX > _this.velocityXThreshold) { if(e.gesture.direction == 'left') { @@ -2424,6 +2433,9 @@ window.ionic = { _this.slideToSlide(_this.slideIndex - 1); } } else { + // Calculate the new slide index (or "page") + _this.slideIndex = Math.ceil(finalOffsetX / slideWidth); + // Negative offsetX to slide correctly content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; } @@ -2442,7 +2454,7 @@ window.ionic = { this._initDrag(); // Make sure to grab the element we will slide as our target - content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-items'); + content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-slides'); if(!content) { return; } @@ -2488,7 +2500,6 @@ window.ionic = { if(_this._isDragging) { content = _this._drag.content; - // Grab the new X point, capping it at zero var newX = _this._drag.startOffsetX + (e.gesture.deltaX / _this._drag.resist); var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1)); @@ -2499,7 +2510,7 @@ window.ionic = { } else if(newX < rightMostX) { // Dragging past the rightmost pane, rubber band //newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4))); - _this._drag.resist = (Math.abs(newX) / content.offsetWidth) + 1.4; + _this._drag.resist = (Math.abs(newX) / content.offsetWidth) - 0.6; } _this._drag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; diff --git a/js/views/slideBox.js b/js/views/slideBox.js index 1e83759e33..34a494e0de 100644 --- a/js/views/slideBox.js +++ b/js/views/slideBox.js @@ -36,6 +36,16 @@ }; ionic.views.SlideBox.prototype = { + /** + * Tell the pager to update itself if content is added or + * removed. + */ + update: function() { + this._updatePager(); + }, + + prependSlide: function(el) { + }, /** * Slide to the given slide index. @@ -140,16 +150,15 @@ // TODO: Do we need this anymore? finalOffsetX = 0; } else if(ratio >= -0.5) { - // We are more than half-way through a drag + // We are less than half-way through a drag // Sliiide to the left finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth); } else { - // We are less than half-way through a drag + // We are more than half-way through a drag // Sliiide to the right finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth); } - _this.slideIndex = Math.ceil(finalOffsetX / slideWidth); if(e.gesture.velocityX > _this.velocityXThreshold) { if(e.gesture.direction == 'left') { @@ -158,6 +167,9 @@ _this.slideToSlide(_this.slideIndex - 1); } } else { + // Calculate the new slide index (or "page") + _this.slideIndex = Math.ceil(finalOffsetX / slideWidth); + // Negative offsetX to slide correctly content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; } @@ -176,7 +188,7 @@ this._initDrag(); // Make sure to grab the element we will slide as our target - content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-items'); + content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-slides'); if(!content) { return; } @@ -222,7 +234,6 @@ if(_this._isDragging) { content = _this._drag.content; - // Grab the new X point, capping it at zero var newX = _this._drag.startOffsetX + (e.gesture.deltaX / _this._drag.resist); var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1)); @@ -233,7 +244,7 @@ } else if(newX < rightMostX) { // Dragging past the rightmost pane, rubber band //newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4))); - _this._drag.resist = (Math.abs(newX) / content.offsetWidth) + 1.4; + _this._drag.resist = (Math.abs(newX) / content.offsetWidth) - 0.6; } _this._drag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; diff --git a/scss/ionic/_slideBox.scss b/scss/ionic/_slideBox.scss index b53440e204..2b8413cd4e 100644 --- a/scss/ionic/_slideBox.scss +++ b/scss/ionic/_slideBox.scss @@ -4,7 +4,7 @@ // Make sure items don't scroll over ever overflow: hidden; } -.slide-box-items { +.slide-box-slides { position: relative; white-space: nowrap; -webkit-transition: -webkit-transform 0 ease-in-out; @@ -15,7 +15,7 @@ .slide-box-animating { -webkit-transition-duration: 0.2s; } -.slide-box-content { +.slide { display: inline-block; vertical-align: top; width: 100%; diff --git a/test/slideBox.html b/test/slideBox.html index ca799b29cb..003bd7faa8 100644 --- a/test/slideBox.html +++ b/test/slideBox.html @@ -22,15 +22,17 @@
+ +
-
-
+
+
-
+
-
+
@@ -52,6 +54,46 @@ var box = new ionic.views.SlideBox({ el: b }); + document.getElementById('prepend').addEventListener('click', function(e) { + var content = document.createElement('div'); + content.className = 'slide-box-content'; + content.innerHTML = '';//http://1.bp.blogspot.com/_6bMuhb3yWOA/TSiS2nYfQoI/AAAAAAAAAGA/AXOlDxrmMNQ/s1600/cow.jpg">'; + + + box.prependSlide(content); + + /* + var items = b.querySelector('.slide-box-items'); + items.insertBefore(content, items.firstChild); + + var pager = document.querySelector('.slide-box-pager'); + for(var i = 0; i < pager.children.length; i++) { + pager.children[i].innerHTML = parseInt(pager.children[i].innerHTML) + 1; + } + + var count = document.createElement('span'); + count.innerHTML = "1"; + pager.insertBefore(count, pager.firstChild); + */ + }); + document.getElementById('append').addEventListener('click', function(e) { + var content = document.createElement('div'); + content.className = 'slide-box-content'; + content.innerHTML = '';//http://1.bp.blogspot.com/_6bMuhb3yWOA/TSiS2nYfQoI/AAAAAAAAAGA/AXOlDxrmMNQ/s1600/cow.jpg">'; + var items = b.querySelector('.slide-box-items'); + + box.appendSlide(content); + + /* + var pager = document.querySelector('.slide-box-pager'); + var count = document.createElement('span'); + count.innerHTML = pager.children.length + 1; + pager.appendChild(count); + */ + }); + +/* + */