Mercurial > tiny-letterpress

changeset 7:0287d65ec97f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
use css transform for scrolling
author Atul Varma <avarma@mozilla.com>
date Sun, 02 May 2010 18:08:14 -0700
parents efb34c9b7c18
children 0cc8c5962c0b
files index.html
diffstat 1 files changed, 36 insertions(+), 35 deletions(-) [+]
line wrap: on
line diff
--- a/index.html	Sun May 02 16:18:40 2010 -0700
+++ b/index.html	Sun May 02 18:08:14 2010 -0700
@@ -28,11 +28,16 @@
 div.palette {
   float: right;
   width: 1em;
-  max-height: 1em;
   overflow: hidden;
   font-size: 144pt;
 }
 
+div.palette-container {
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 0.5s;
+  -webkit-transition-timing-function: ease-out;
+}
+
 .letter-prototype {
   cursor: pointer;
   color: gray;
@@ -42,7 +47,10 @@
 </style>
 </head>
 <body>
-<div id="letters" class="palette"></div>
+<div id="letters" class="palette">
+  <div class="palette-container">
+  </div>
+</div>
 <script>
 if (typeof Array.isArray !== 'function') {
   Array.isArray = function (value) {
@@ -231,37 +239,26 @@
 function makeScrollable() {
   var node = this;
   var startY = 0;
-  var currY = 0;
   var floatScrollTop = 0;
-  var timerID;
-  var veloc = 0;
+  var touchMoved = false;
+  var matrix = new WebKitCSSMatrix();
 
-  var maxHeight = node.scrollHeight - node.clientHeight;
+  var maxHeight = node.parentNode.scrollHeight -
+                  node.parentNode.clientHeight;
 
-  function timer() {
-    floatScrollTop += (veloc * 0.05);
-    if (floatScrollTop < 0)
-      floatScrollTop = 0;
-    else if (floatScrollTop > maxHeight)
-      floatScrollTop = maxHeight;
-    node.scrollTop = Math.floor(floatScrollTop);
-    veloc = 0.95 * veloc;
-    if (Math.abs(veloc) < 1) {
-      veloc = 0;
-      clearInterval(timerID);
-      timerID = undefined;
-    }
-  }
-
-  function accelerate(amount) {
-    veloc += amount;
-    if (timerID === undefined)
-      timerID = setInterval(timer, 10);
+  function accelerate(delta) {
+    matrix = matrix.translate(0, delta);
+    if (matrix.f > 0)
+      matrix.f = 0;
+    else if (matrix.f < -maxHeight)
+      matrix.f = -maxHeight;
+    console.log(matrix.toString());
+    node.style.webkitTransform = matrix;
   }
 
   if (!isTouchSupported) {
     $(node).bind("mousewheel", function(event) {
-      accelerate(-event.wheelDelta);
+      accelerate(event.wheelDelta);
     });
 
     $(node).find(".letter-prototype").bind("click", makeLetter);
@@ -269,18 +266,20 @@
     $(node).bind("touchstart", function(event) {
       event.preventDefault();
       startY = event.targetTouches[0].pageY;
+      touchMoved = false;
     });
 
     $(node).bind("touchmove", function(event) {
       event.preventDefault();
-      currY = event.targetTouches[0].pageY;
-      accelerate(startY - currY);
+      var currY = event.targetTouches[0].pageY;
+      accelerate((currY - startY) * 2);
       startY = currY;
+      touchMoved = true;
     });
 
     $(node).bind("touchend", function(event) {
       event.preventDefault();
-      if (veloc == 0) {
+      if (!touchMoved) {
         var target = event.changedTouches[0].target;
         if (target.nodeType == target.TEXT_NODE)
           target = target.parentNode;
@@ -303,16 +302,18 @@
   letter.appendChild(char);
   letter.appendChild(info);
 
-  var matrix = new WebKitCSSMatrix();
-
   // TODO: This assumes things about the DOM structure that
   // we don't want to have to assume.
+  var parentMatrix = new WebKitCSSMatrix();
+  var matrix = new WebKitCSSMatrix();
+
+  parentMatrix.setMatrixValue(this.parentNode.style.webkitTransform);
   matrix = matrix.translate(
     this.offsetLeft,
-    this.offsetTop - this.parentNode.scrollTop
+    this.offsetTop + parentMatrix.f
   );
+
   letter.style.webkitTransform = matrix;
-
   doc.body.appendChild(letter);
 
   // Apply a new transform to make the letter animate.
@@ -348,9 +349,9 @@
 })();
 
 $(window).bind("DOMContentLoaded", function() {
-  $("#letters").each(addLetters);
+  $("#letters .palette-container").each(addLetters);
   $("#letters").css({"max-height": document.body.clientHeight});
-  $(".palette").each(makeScrollable);
+  $(".palette-container").each(makeScrollable);
 });
 </script>
 </body>