summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authormeinhard <meinhard@benn.org>2009-03-20 00:36:13 (GMT)
committer meinhard <meinhard@benn.org>2009-03-20 00:36:13 (GMT)
commit089a8dff564835437a7aa4833c4c28412fad00ad (patch)
tree0b9f915ad045929bbb50d22fb6c417e519ffa237
parent424ba3e03af9eaaf7e0112de0aeb9f85512ca2ef (diff)
v0.4 release: now works with all major browsers + smaller fixes
-rw-r--r--js/README13
-rw-r--r--js/tbt.css7
-rw-r--r--js/tbt.html2
-rw-r--r--js/tbt.js66
4 files changed, 68 insertions, 20 deletions
diff --git a/js/README b/js/README
index a397444..28115f7 100644
--- a/js/README
+++ b/js/README
@@ -1,10 +1,8 @@
-== A TBT recorder/player implementation by meinhard at benn.org ==
-
-Currently only properly working on FF3/Linux
+== A TBT recorder/player Javascript implementation by meinhard at benn.org ==
=== TODO ===
- * get running in msie7, opera9 (keydown instead of keypress?) -> write library for key grabbing?
- * merge keycode and charcode in keys array
+ * consider textarea instead of div for input and output (solves cursor and
+ whitespace problem, but is extra grabbing work and less flexible in output)
* display key sequence for copy and paste
* cursor key support + insert mode
@@ -18,6 +16,11 @@ Currently only properly working on FF3/Linux
* http://robin.linuxaudio.org/tbt-generator3.html ;)
=== CHANGES ===
+ * 0.4 (20 Mar 2009)
+ * cross-browser key grabbing
+ * tab key handling
+ * old TBT compatible key record array
+ * CSS tweaks
* 0.3 (18 Mar 2009)
* prototype.js rewrite
* OOP JS
diff --git a/js/tbt.css b/js/tbt.css
index ab8a7b4..d562ee8 100644
--- a/js/tbt.css
+++ b/js/tbt.css
@@ -2,8 +2,8 @@
{
border: 1px solid;
border-color: #fff #000 #000 #fff;
- background: lightyellow;
- color: lightgray;
+ background: #ffffe0;
+ color: #ccc;
font-size: 0.7em;
padding: 0.1em 0.3em;
}
@@ -21,9 +21,8 @@
.papers
{
- background: lightgreen;
+ background: #90ee90;
margin: 1em;
- width: 10em;
}
.poems
diff --git a/js/tbt.html b/js/tbt.html
index 7b4c562..e8fa83f 100644
--- a/js/tbt.html
+++ b/js/tbt.html
@@ -3,7 +3,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
- <title>TBT.js 0.3</title>
+ <title>TBT.js 0.4</title>
<link rel="stylesheet" type="text/css" charset="utf-8" media="all" href="tbt.css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="tbt.js"></script>
diff --git a/js/tbt.js b/js/tbt.js
index 2ac958a..145495b 100644
--- a/js/tbt.js
+++ b/js/tbt.js
@@ -1,6 +1,8 @@
function TBT(keyPressObject, textDisplayId, recordButtonId, replayButtonId, stopButtonId, instanceName) {
// Methods
+ this.handleKeyDown = handleKeyDown;
this.handleKeyPress = handleKeyPress;
+ this.keyDetect = keyDetect;
this.keysToText = keysToText;
this.record = record;
this.recordKey = recordKey;
@@ -19,27 +21,52 @@ function TBT(keyPressObject, textDisplayId, recordButtonId, replayButtonId, stop
// Properties
this.currentKey = 0;
+ this.keyDownCodes = [8, 9];
this.keys = new Array;
this.lastDate = new Date;
this.startDate = new Date;
this.timeout = new Object;
// Static
+ function keyDetect(event) {
+ if (event.keyCode) {
+ keyCode = event.keyCode;
+ } else {
+ keyCode = event.charCode;
+ }
+ return keyCode;
+ }
+
+ // Static
function keysToText(keys) {
outputText = new Array;
keys.each(function(key) {
if (key[0] > 0) {
switch(key[0]) {
// backspace
- case 8:
+ case 8: // backspace
outputText.pop();
break;
- case 13:
+ case 9: // tab
+ outputText.push('&nbsp;&nbsp;&nbsp;&nbsp;');
+ break;
+ case 13: // enter
outputText.push('<br />');
break;
+ case 32: // space
+ outputText.push('&nbsp;');
+ break;
+ case 37: // left
+ break;
+ case 38: // up
+ break;
+ case 39: // right
+ break;
+ case 40: // down
+ break;
+ default:
+ outputText.push(String.fromCharCode(key[0]));
}
- } else if (key[1] > 0) {
- outputText.push(String.fromCharCode(key[1]));
}
})
return outputText.join('');
@@ -49,6 +76,9 @@ function TBT(keyPressObject, textDisplayId, recordButtonId, replayButtonId, stop
this.keys = new Array;
this.startDate = new Date;
this.lastDate = this.startDate;
+ // Some browsers do not fire keypress for special keys (e.g. backspace),
+ // so we need to listen for keydown, but we use keypress for characters
+ this.keyPressObject.observe('keydown', this.handleKeyDown.bind(this));
this.keyPressObject.observe('keypress', this.handleKeyPress.bind(this));
$(this.textDisplayId).update('_');
$(this.recordButtonId).update('Record');
@@ -57,8 +87,9 @@ function TBT(keyPressObject, textDisplayId, recordButtonId, replayButtonId, stop
}
function recordStop() {
+ this.keyPressObject.stopObserving('keydown');
this.keyPressObject.stopObserving('keypress');
- this.recordKey(0, 0); // (Record time between last key and pressing Stop)
+ this.recordKey(0); // (Record time between last key and pressing Stop)
$(this.recordButtonId).update('<a href="javascript:' + instanceName + '.record()">Record</a>');
$(this.replayButtonId).update('<a href="javascript:' + instanceName + '.replay()">Play</a>');
$(this.stopButtonId).update('Stop');
@@ -82,7 +113,7 @@ function TBT(keyPressObject, textDisplayId, recordButtonId, replayButtonId, stop
return;
}
if (this.currentKey + 1 <= this.keys.length) {
- this.timeout = this.replayKeys.bind(this).delay(this.keys[this.currentKey][2]/1000);
+ this.timeout = this.replayKeys.bind(this).delay(this.keys[this.currentKey][1]/1000);
this.currentKey++;
}
}
@@ -94,15 +125,30 @@ function TBT(keyPressObject, textDisplayId, recordButtonId, replayButtonId, stop
$(this.stopButtonId).update('Stop');
}
+ function handleKeyDown(event) {
+ keyCode = this.keyDetect(event);
+ // Only handle special keys
+ if (this.keyDownCodes.indexOf(keyCode) != -1) {
+ this.recordKey(keyCode);
+ $(this.textDisplayId).update(this.keysToText(this.keys) + '_');
+ event.stop();
+ }
+ }
+
function handleKeyPress(event) {
- this.recordKey(event.keyCode, event.charCode);
- $(this.textDisplayId).update(this.keysToText(this.keys) + '_');
+ keyCode = this.keyDetect(event);
+ // Do not handle special keys. Do not, I said!
+ if (this.keyDownCodes.indexOf(keyCode) == -1) {
+ this.recordKey(keyCode);
+ $(this.textDisplayId).update(this.keysToText(this.keys) + '_');
+ }
+ event.stop();
}
- function recordKey(keyCode, charCode) {
+ function recordKey(keyCode) {
var currentDate = new Date;
ms = currentDate.getTime() - this.lastDate.getTime();
this.lastDate = currentDate;
- this.keys.push(new Array(keyCode, charCode, ms));
+ this.keys.push(new Array(keyCode, ms));
}
}