changeset 15:d7761afdae70

made touch-based palette scrolling on ipad better
author Atul Varma <avarma@mozilla.com>
date Tue, 04 May 2010 21:27:58 -0700
parents c156c147c741
children ebb3d1fa65d3
files index.html
diffstat 1 files changed, 17 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- a/index.html	Mon May 03 11:23:39 2010 -0700
+++ b/index.html	Tue May 04 21:27:58 2010 -0700
@@ -35,9 +35,14 @@
 
 div.palette-container {
   -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 0.1s;
+  -webkit-transition-timing-function: linear;
+  -webkit-backface-visibility: hidden;
+}
+
+div.decelerating {
   -webkit-transition-duration: 0.5s;
   -webkit-transition-timing-function: ease-out;
-  -webkit-backface-visibility: hidden;
 }
 
 .letter-prototype {
@@ -244,7 +249,8 @@
 
 function makeScrollable() {
   var node = this;
-  var startY = 0;
+  var lastY = 0;
+  var lastDelta = 0;
   var floatScrollTop = 0;
   var touchMoved = false;
   var matrix = new WebKitCSSMatrix();
@@ -269,22 +275,27 @@
     $(node).find(".letter-prototype").bind("mousedown", makeLetter);
   } else {
     $(node).bind("touchstart", function(event) {
+      $(node).removeClass("decelerating");
       event.preventDefault();
-      startY = event.targetTouches[0].pageY;
+      lastY = event.targetTouches[0].pageY;
       touchMoved = false;
     });
 
     $(node).bind("touchmove", function(event) {
       event.preventDefault();
       var currY = event.targetTouches[0].pageY;
-      accelerate((currY - startY) * 2);
-      startY = currY;
+      lastDelta = currY - lastY;
+      accelerate(lastDelta);
+      lastY = currY;
       touchMoved = true;
     });
 
     $(node).bind("touchend", function(event) {
       event.preventDefault();
-      if (!touchMoved) {
+      if (touchMoved) {
+        accelerate(lastDelta * 20);
+        $(node).addClass("decelerating");
+      } else {
         var target = event.changedTouches[0].target;
         if (target.nodeType == target.TEXT_NODE)
           target = target.parentNode;