Mercurial > tiny-letterpress

changeset 4:9c7ae0ae7240

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added all letters to palette and fixed mousewheel axis reversal.
author Atul Varma <avarma@mozilla.com>
date Sun, 02 May 2010 14:40:37 -0700
parents d7b17c17bfeb
children d2f7b69ac319
files index.html
diffstat 1 files changed, 44 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/index.html	Sun May 02 08:49:55 2010 -0700
+++ b/index.html	Sun May 02 14:40:37 2010 -0700
@@ -3,6 +3,7 @@
 <style type="text/css">
 body {
   font-family: Palatino;
+  margin: 0;
 }
 
 div.letter {
@@ -31,12 +32,17 @@
   overflow: hidden;
   font-size: 144pt;
 }
+
+.letter-prototype {
+  cursor: pointer;
+  color: gray;
+  padding: 1px;
+  border-bottom: 1px solid gray;
+}
 </style>
 </head>
 <body>
-<div class="letter">u<div class="info"></div></div>
-<div class="letter">m<div class="info"></div></div>
-<div class="palette">a b c d e f g</div>
+<div id="letters" class="palette"></div>
 <script>
 if (typeof Array.isArray !== 'function') {
   Array.isArray = function (value) {
@@ -252,7 +258,7 @@
 
   if (!isTouchSupported) {
     $(node).bind("mousewheel", function(event) {
-      accelerate(event.wheelDelta);
+      accelerate(-event.wheelDelta);
     });
   } else {
     $(node).bind("touchstart", function(event) {
@@ -269,6 +275,38 @@
   }
 }
 
+function makeLetter() {
+  var node = this;
+  var doc = this.ownerDocument;
+
+  var letter = doc.createElement("div");
+  var char = doc.createTextNode(this.textContent);
+  var info = doc.createElement("div");
+
+  letter.className = "letter";
+  info.className = "info";
+  letter.appendChild(char);
+  letter.appendChild(info);
+
+  doc.body.appendChild(letter);
+  makeDraggable.call(letter);
+}
+
+function addLetters() {
+  var node = this;
+
+  const ALPHABET = "abcdefghijklmnopqrstuvwxyz" +
+                   "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+  for (var i = 0; i < ALPHABET.length; i++) {
+    var div = document.createElement("div");
+    div.textContent = ALPHABET[i];
+    div.className = "letter-prototype";
+    node.appendChild(div);
+    $(div).bind("click", makeLetter);
+  }
+}
+
 var isTouchSupported = (function isTouchSupported() {
   try {
     document.createEvent("TouchEvent");
@@ -281,7 +319,8 @@
 })();
 
 $(window).bind("DOMContentLoaded", function() {
-  $(".letter").each(makeDraggable);
+  $("#letters").each(addLetters);
+  $("#letters").css({"max-height": document.body.clientHeight});
   $(".palette").each(makeScrollable);
 });
 </script>