Slide box velocity fix both directions

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 {

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)';

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)';

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%;

test/slideBox.html

@@ -22,15 +22,17 @@
 
       <main class="content-wrapper">
         <div class="content has-header">
+          <button id="prepend" class="button button-primary">Prepend content</button>
+          <button id="append" class="button button-primary">Append content</button>
           <div class="slide-box" id="slide-box">
-            <div class="slide-box-items">
-              <div class="slide-box-content">
+            <div class="slide-box-slides">
+              <div class="slide">
                 <img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
               </div>
-              <div class="slide-box-content">
+              <div class="slide">
                 <img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
               </div>
-              <div class="slide-box-content">
+              <div class="slide">
                 <img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
               </div>
             </div>
@@ -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 = '<img src="http://1.bp.blogspot.com/-A1IIpwx7jnE/TymvyGvjxNI/AAAAAAAAHi4/80CCftqRY0o/s640/sweetheart2.jpg">';//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 = '<img src="http://1.bp.blogspot.com/-A1IIpwx7jnE/TymvyGvjxNI/AAAAAAAAHi4/80CCftqRY0o/s640/sweetheart2.jpg">';//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);
+        */
+      });
+
+/*
+        */
     </script>
   </body>
 </html>