Run `grunt`.

Gruntfile.js

@@ -64,6 +64,7 @@ module.exports = function(grunt) {
     sass: {
       options: {
         banner: '<%= banner %>',
+        sourcemap: 'none',
         style: 'expanded',
         unixNewlines: true
       },

dist/css/ratchet-theme-ios.css

@@ -463,7 +463,6 @@ textarea,
     -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
             box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
   }
-
   to {
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
             box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);

dist/css/ratchet.css

@@ -370,7 +370,7 @@ p {
   white-space: nowrap;
   vertical-align: top;
   cursor: pointer;
-  background-color: white;
+  background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 3px;
 }
@@ -492,7 +492,7 @@ input[type="button"] {
   height: 44px;
   padding-right: 10px;
   padding-left: 10px;
-  background-color: white;
+  background-color: #fff;
   border-bottom: 1px solid #ddd;
 
   -webkit-backface-visibility: hidden;
@@ -694,7 +694,7 @@ input[type="button"] {
 .card {
   margin: 10px;
   overflow: hidden;
-  background-color: white;
+  background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 6px;
 }
@@ -926,7 +926,7 @@ select {
   overflow: hidden;
   font-size: 12px;
   font-weight: 400;
-  background-color: white;
+  background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 3px;
 }
@@ -1013,7 +1013,7 @@ select {
   display: none;
   width: 280px;
   margin-left: -140px;
-  background-color: white;
+  background-color: #fff;
   border-radius: 6px;
   -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
           box-shadow: 0 0 15px rgba(0, 0, 0, .1);
@@ -1034,7 +1034,7 @@ select {
   margin-left: -15px;
   content: '';
   border-right: 15px solid transparent;
-  border-bottom: 15px solid white;
+  border-bottom: 15px solid #fff;
   border-left: 15px solid transparent;
 }
 .popover.visible {

dist/js/ratchet.js

@@ -182,7 +182,6 @@
     }
     cacheMapping[data.id] = JSON.stringify(data);
     window.history.replaceState(data.id, data.title, data.url);
-    domCache[data.id] = document.body.cloneNode(true);
   };
 
   var cachePush = function () {
@@ -200,7 +199,7 @@
       delete cacheMapping[cacheBackStack.shift()];
     }
 
-    window.history.pushState(null, '', cacheMapping[PUSH.id].url);
+    window.history.pushState(null, '', getCached(PUSH.id).url);
 
     cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
     cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
@@ -331,7 +330,9 @@
     swapContent(
       (activeObj.contents || activeDom).cloneNode(true),
       document.querySelector('.content'),
-      transition
+      transition, function() {
+        triggerStateChange();
+      }
     );
 
     PUSH.id = id;
@@ -383,6 +384,8 @@
       });
     }
 
+    cacheCurrentContent();
+
     if (options.timeout) {
       options._timeout = setTimeout(function () {  xhr.abort('timeout'); }, options.timeout);
     }
@@ -394,6 +397,10 @@
     }
   };
 
+  function cacheCurrentContent() {
+    domCache[PUSH.id] = document.body.cloneNode(true);
+  }
+
 
   // Main XHR handlers
   // =================
@@ -713,6 +720,7 @@
   var slideNumber;
   var isScrolling;
   var scrollableArea;
+  var startedMoving;
 
   var getSlider = function (target) {
     var i;
@@ -773,12 +781,17 @@
       return; // Exit if a pinch || no slider
     }
 
+    // adjust the starting position if we just started to avoid jumpage
+    if (!startedMoving) {
+      pageX += (e.touches[0].pageX - pageX) - 1;
+    }
+
     deltaX = e.touches[0].pageX - pageX;
     deltaY = e.touches[0].pageY - pageY;
     pageX  = e.touches[0].pageX;
     pageY  = e.touches[0].pageY;
 
-    if (typeof isScrolling === 'undefined') {
+    if (typeof isScrolling === 'undefined' && startedMoving) {
       isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
     }
 
@@ -794,6 +807,9 @@
                  slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
 
     slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+
+    // started moving
+    startedMoving = true;
   };
 
   var onTouchEnd = function (e) {
@@ -801,6 +817,9 @@
       return;
     }
 
+    // we're done moving
+    startedMoving = false;
+
     setSlideNumber(
       (+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
     );

docs/assets/css/docs.css

@@ -64,7 +64,7 @@ body {
   background-image:     -ms-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
   background-image:      -o-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
   background-image:         linear-gradient(45deg, #0a1855 0%, #da0024 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a1855', endColorstr='#da0024', GradientType=1 );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a1855', endColorstr='#da0024', GradientType=1 );
 }
 
 .docs-header {
@@ -1386,7 +1386,6 @@ hr {
     -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
             box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
   }
-
   to {
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
             box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
@@ -1977,7 +1976,6 @@ hr {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }

docs/dist/css/ratchet-theme-ios.css

@@ -463,7 +463,6 @@ textarea,
     -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
             box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
   }
-
   to {
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
             box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);

docs/dist/css/ratchet.css

@@ -370,7 +370,7 @@ p {
   white-space: nowrap;
   vertical-align: top;
   cursor: pointer;
-  background-color: white;
+  background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 3px;
 }
@@ -492,7 +492,7 @@ input[type="button"] {
   height: 44px;
   padding-right: 10px;
   padding-left: 10px;
-  background-color: white;
+  background-color: #fff;
   border-bottom: 1px solid #ddd;
 
   -webkit-backface-visibility: hidden;
@@ -694,7 +694,7 @@ input[type="button"] {
 .card {
   margin: 10px;
   overflow: hidden;
-  background-color: white;
+  background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 6px;
 }
@@ -926,7 +926,7 @@ select {
   overflow: hidden;
   font-size: 12px;
   font-weight: 400;
-  background-color: white;
+  background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 3px;
 }
@@ -1013,7 +1013,7 @@ select {
   display: none;
   width: 280px;
   margin-left: -140px;
-  background-color: white;
+  background-color: #fff;
   border-radius: 6px;
   -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
           box-shadow: 0 0 15px rgba(0, 0, 0, .1);
@@ -1034,7 +1034,7 @@ select {
   margin-left: -15px;
   content: '';
   border-right: 15px solid transparent;
-  border-bottom: 15px solid white;
+  border-bottom: 15px solid #fff;
   border-left: 15px solid transparent;
 }
 .popover.visible {

docs/dist/js/ratchet.js

@@ -182,7 +182,6 @@
     }
     cacheMapping[data.id] = JSON.stringify(data);
     window.history.replaceState(data.id, data.title, data.url);
-    domCache[data.id] = document.body.cloneNode(true);
   };
 
   var cachePush = function () {
@@ -200,7 +199,7 @@
       delete cacheMapping[cacheBackStack.shift()];
     }
 
-    window.history.pushState(null, '', cacheMapping[PUSH.id].url);
+    window.history.pushState(null, '', getCached(PUSH.id).url);
 
     cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
     cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
@@ -331,7 +330,9 @@
     swapContent(
       (activeObj.contents || activeDom).cloneNode(true),
       document.querySelector('.content'),
-      transition
+      transition, function() {
+        triggerStateChange();
+      }
     );
 
     PUSH.id = id;
@@ -383,6 +384,8 @@
       });
     }
 
+    cacheCurrentContent();
+
     if (options.timeout) {
       options._timeout = setTimeout(function () {  xhr.abort('timeout'); }, options.timeout);
     }
@@ -394,6 +397,10 @@
     }
   };
 
+  function cacheCurrentContent() {
+    domCache[PUSH.id] = document.body.cloneNode(true);
+  }
+
 
   // Main XHR handlers
   // =================
@@ -713,6 +720,7 @@
   var slideNumber;
   var isScrolling;
   var scrollableArea;
+  var startedMoving;
 
   var getSlider = function (target) {
     var i;
@@ -773,12 +781,17 @@
       return; // Exit if a pinch || no slider
     }
 
+    // adjust the starting position if we just started to avoid jumpage
+    if (!startedMoving) {
+      pageX += (e.touches[0].pageX - pageX) - 1;
+    }
+
     deltaX = e.touches[0].pageX - pageX;
     deltaY = e.touches[0].pageY - pageY;
     pageX  = e.touches[0].pageX;
     pageY  = e.touches[0].pageY;
 
-    if (typeof isScrolling === 'undefined') {
+    if (typeof isScrolling === 'undefined' && startedMoving) {
       isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
     }
 
@@ -794,6 +807,9 @@
                  slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
 
     slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+
+    // started moving
+    startedMoving = true;
   };
 
   var onTouchEnd = function (e) {
@@ -801,6 +817,9 @@
       return;
     }
 
+    // we're done moving
+    startedMoving = false;
+
     setSlideNumber(
       (+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
     );