Mercurial > tiny-letterpress

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/index.html	Sat May 01 17:39:57 2010 -0700
@@ -0,0 +1,183 @@
+<html>
+<head>
+<style type="text/css">
+body {
+  font-family: Palatino;
+}
+
+div.letter {
+  -webkit-transition-property: -webkit-transform, color;
+  -webkit-transition-duration: 0.1s, 0.2s;
+  -webkit-transition-timing-function: linear;
+  cursor: pointer;
+  font-size: 144pt;
+  width: 1em;
+}
+
+div.letter .info {
+  font-family: Futura, Helvetica;
+  white-space: pre;
+  font-size: 9pt;
+}
+
+div.letter.active {
+  color: red;
+}
+</style>
+</head>
+<body>
+<div class="letter">u<div class="info"></div></div>
+<div class="letter">m<div class="info"></div></div>
+<script>
+if (typeof Array.isArray !== 'function') {
+  Array.isArray = function (value) {
+    return Object.prototype.toString.call(value) === '[object Array]';
+  };
+}
+
+function $(selector) {
+  return new $.fn.init(selector);
+}
+
+$.fn = $.prototype = {
+  _qsa: function qsa(selector, element) {
+    if (element === undefined)
+      element = document;
+    var nodeList = element.querySelectorAll(selector);
+    var array = [];
+    for (var i = 0; i < nodeList.length; i++) {
+      array.push(nodeList[i]);
+    }
+    return array;
+  },
+  length: 0,
+  init: function init(selector) {
+    if (typeof(selector) == "string") {
+      this.elems = this._qsa(selector);
+    } else {
+      if (Array.isArray(selector)) {
+        this.elems = selector;
+      } else
+        this.elems = [selector];
+    }
+    this.length = this.elems.length;
+  },
+  get: function(i) {
+    if (i !== undefined)
+      return this.elems[i];
+    return this.elems;
+  },
+  bind: function(name, handler) {
+    this.elems.forEach(function(elem) {
+     elem.addEventListener(name, handler, false);
+    });
+  },
+  css: function(options) {
+    this.elems.forEach(function(elem) {
+      for (name in options)
+        elem.style.setProperty(name, options[name], null);
+    });
+  },
+  removeClass: function(name) {
+    this.elems.forEach(function(elem) {
+      var classes = elem.className.split(" ");
+      var index = classes.indexOf(name);
+      if (index != -1) {
+        classes.splice(index, 1);
+        elem.className = classes.join(" ");
+      }
+    });
+  },
+  addClass: function(name) {
+    this.elems.forEach(function(elem) {
+      var classes = elem.className.split(" ");
+      var index = classes.indexOf(name);
+      if (index == -1) {
+        classes.push(name);
+        elem.className = classes.join(" ");
+      }
+    });
+  },
+  toggleClass: function(name) {
+    this.elems.forEach(function(elem) {
+      var classes = elem.className.split(" ");
+      var index = classes.indexOf(name);
+      if (index == -1)
+        classes.push(name);
+      else
+        classes.splice(index, 1);
+      elem.className = classes.join(" ");
+    });
+  },
+  text: function(text) {
+    if (text === undefined)
+      return this.elems[0].textContent;
+    this.elems.forEach(function(elem) {
+      elem.textContent = text;
+    });
+  },
+  find: function(selector) {
+    var self = this;
+    var array = [];
+    this.elems.forEach(function(elem) {
+      array = array.concat(self._qsa(selector, elem));
+    });
+    return new this.init(array);
+  },
+  each: function(cb) {
+    this.elems.forEach(function(elem) { cb.call(elem); });
+  }
+};
+
+$.fn.init.prototype = $.fn;
+
+function makeDraggable() {
+  var node = this;
+  var startX = 0;
+  var startY = 0;
+  var currX = 0;
+  var currY = 0;
+  var matrix = new WebKitCSSMatrix();
+
+  function updateInfo() {
+    //query.find(".info").text("curr: " + currX + ", " + currY + "\n" +
+    //                         "start: " + startX + ", " + startY);
+  }
+
+  function move() {
+    matrix = matrix.translate(currX - startX, currY - startY);
+    node.style.webkitTransform = matrix;
+  }
+
+  updateInfo();
+
+  $(node).bind("touchstart", function(event) {
+    event.preventDefault();
+    startX = event.targetTouches[0].pageX;
+    startY = event.targetTouches[0].pageY;
+    updateInfo();
+    $(this).addClass("active");
+  });
+
+  $(node).bind("touchmove", function(event) {
+    event.preventDefault();
+    currX = event.targetTouches[0].pageX;
+    currY = event.targetTouches[0].pageY;
+    move(this);
+    startX = currX;
+    startY = currY;
+    updateInfo();
+  });
+
+  $(node).bind("touchend", function(event) {
+    event.preventDefault();
+    $(this).removeClass("active");
+  });
+}
+
+$(window).bind("DOMContentLoaded", function() {
+  $(".letter").each(makeDraggable);
+});
+</script>
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server.py	Sat May 01 17:39:57 2010 -0700
@@ -0,0 +1,16 @@
+import os
+import BaseHTTPServer
+import SimpleHTTPServer
+
+PORT = 8000
+
+def run(server_class=BaseHTTPServer.HTTPServer,
+        handler_class=SimpleHTTPServer.SimpleHTTPRequestHandler,
+        port=PORT):
+    server_address = ('', port)
+    print "Serving files in '%s' on port %d." % (os.getcwd(), port)
+    httpd = server_class(server_address, handler_class)
+    httpd.serve_forever()
+
+if __name__ == '__main__':
+    run()