Mercurial > tiny-letterpress

changeset 5:d2f7b69ac319

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
animation for letter sliding out of palette on spawn
author Atul Varma <avarma@mozilla.com>
date Sun, 02 May 2010 15:21:48 -0700
parents 9c7ae0ae7240
children efb34c9b7c18
files index.html
diffstat 1 files changed, 19 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/index.html	Sun May 02 14:40:37 2010 -0700
+++ b/index.html	Sun May 02 15:21:48 2010 -0700
@@ -146,13 +146,11 @@
 
 $.fn.init.prototype = $.fn;
 
-function makeDraggable() {
-  var node = this;
+function makeDraggable(node, matrix) {
   var startX = 0;
   var startY = 0;
   var currX = 0;
   var currY = 0;
-  var matrix = new WebKitCSSMatrix();
 
   function updateInfo() {
     var msg = "";
@@ -288,8 +286,25 @@
   letter.appendChild(char);
   letter.appendChild(info);
 
+  var matrix = new WebKitCSSMatrix();
+
+  console.log(this.offsetLeft + " " + this.offsetTop);
+
+  // TODO: This assumes things about the DOM structure that
+  // we don't want to have to assume.
+  matrix = matrix.translate(
+    this.offsetLeft,
+    this.offsetTop - this.parentNode.scrollTop
+  );
+  letter.style.webkitTransform = matrix;
+
   doc.body.appendChild(letter);
-  makeDraggable.call(letter);
+
+  // Apply a new transform to make the letter animate.
+  matrix = matrix.translate(-this.offsetWidth, 0);
+  letter.style.webkitTransform = matrix;
+
+  makeDraggable(letter, matrix);
 }
 
 function addLetters() {