Mercurial > tiny-letterpress
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;