brendanberg/coffee.html

## coffee.html
<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Caffeinate Me!</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Brendan Berg">
	<!-- Date: 2011-08-24 -->
	<style>
body {
	font: 18px courier;
	background-color: #333;
}

textarea {
	font: 18px "Courier New";
	color: lightblue;
	background-color: inherit;
	outline-width: 0;
	width: 99%;
	border-color: #444;
	-webkit-tab-size: 4;
	-moz-tab-size: 4;
	tab-size: 4;
}

textarea#output {
	color: orange;
}
	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="coffee-script.js"></script>
	<script language="javascript">

var println;
jQuery.fn.extend({
	insertAtCaret: function(myValue){
		return this.each(function(i) {
			if (document.selection) {
				this.focus();
				sel = document.selection.createRange();
				sel.text = myValue;
				this.focus();
			}
			else if (this.selectionStart || this.selectionStart == '0') {
				var startPos = this.selectionStart;
				var endPos = this.selectionEnd;
				var scrollTop = this.scrollTop;
				this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
				this.focus();
				this.selectionStart = startPos + myValue.length;
				this.selectionEnd = startPos + myValue.length;
				this.scrollTop = scrollTop;
			} else {
				this.value += myValue;
				this.focus();
			}
		})
	}
});
$(document).ready(function() {
	println = function(str) {
		$('#output').val($('#output').val() + str + '\n');
	}
	$('#output').focus(function() {
		this.blur();
	});
	$('#term').keydown(function(evt) {
		if (evt.which == 9) {
			// Tab. Insert tab character at caret position.
			$('#term').insertAtCaret('\t');
			return false;
		} else if (evt.which == 13) {
			// Enter. Eval code.
			if (evt.metaKey && !evt.ctrlKey) {
				$('#output').val('');
				eval(CoffeeScript.compile($('#term').val()));
				return false;
			}
		} else if (evt.which == 74) {
			// Cmd-J shows JavaScript source
			if (evt.metaKey && !evt.ctrlKey) {
				$('#output').val(CoffeeScript.compile($('#term').val()));
				return false;
			}
		}
	});
	(function() {
		var term = $('#term');
		term.focus();
		var len = term.val().length;
		if (term.get(0).setSelectionRange) {
			term.get(0).setSelectionRange(len, len);
		} else if (term.get(0).createTextRange) {
			var range = term.get(0).createTextRange();
			range.moveEnd('character', len);
			range.moveStart('character', pos);
			range.select();
		}
	})();
});
</script>

</head>
<body>
	<div>
		<textarea id="term" rows="20" cols="80"># CoffeeScript shell. Code up here, console down there. There's a 'println' convenience
# function to write to the output console. Type Command-Enter to compile and execute
# the script, Command-J outputs the compiled JavaScript. Enjoy!

</textarea>
	</div>
	<div>
		<textarea id="output" rows="20" cols="80"></textarea>
	</div>
</body>
</html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Caffeinate Me!</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Brendan Berg">
	<!-- Date: 2011-08-24 -->
	<style>
	body {
	font: 18px courier;
	background-color: #333;
	}

	textarea {
	font: 18px "Courier New";
	color: lightblue;
	background-color: inherit;
	outline-width: 0;
	width: 99%;
	border-color: #444;
	-webkit-tab-size: 4;
	-moz-tab-size: 4;
	tab-size: 4;
	}

	textarea#output {
	color: orange;
	}
	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="coffee-script.js"></script>
	<script language="javascript">

	var println;
	jQuery.fn.extend({
	insertAtCaret: function(myValue){
	return this.each(function(i) {
	if (document.selection) {
	this.focus();
	sel = document.selection.createRange();
	sel.text = myValue;
	this.focus();
	}
	else if (this.selectionStart \|\| this.selectionStart == '0') {
	var startPos = this.selectionStart;
	var endPos = this.selectionEnd;
	var scrollTop = this.scrollTop;
	this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
	this.focus();
	this.selectionStart = startPos + myValue.length;
	this.selectionEnd = startPos + myValue.length;
	this.scrollTop = scrollTop;
	} else {
	this.value += myValue;
	this.focus();
	}
	})
	}
	});
	$(document).ready(function() {
	println = function(str) {
	$('#output').val($('#output').val() + str + '\n');
	}
	$('#output').focus(function() {
	this.blur();
	});
	$('#term').keydown(function(evt) {
	if (evt.which == 9) {
	// Tab. Insert tab character at caret position.
	$('#term').insertAtCaret('\t');
	return false;
	} else if (evt.which == 13) {
	// Enter. Eval code.
	if (evt.metaKey && !evt.ctrlKey) {
	$('#output').val('');
	eval(CoffeeScript.compile($('#term').val()));
	return false;
	}
	} else if (evt.which == 74) {
	// Cmd-J shows JavaScript source
	if (evt.metaKey && !evt.ctrlKey) {
	$('#output').val(CoffeeScript.compile($('#term').val()));
	return false;
	}
	}
	});
	(function() {
	var term = $('#term');
	term.focus();
	var len = term.val().length;
	if (term.get(0).setSelectionRange) {
	term.get(0).setSelectionRange(len, len);
	} else if (term.get(0).createTextRange) {
	var range = term.get(0).createTextRange();
	range.moveEnd('character', len);
	range.moveStart('character', pos);
	range.select();
	}
	})();
	});
	</script>

	</head>
	<body>
	<div>
	<textarea id="term" rows="20" cols="80"># CoffeeScript shell. Code up here, console down there. There's a 'println' convenience
	# function to write to the output console. Type Command-Enter to compile and execute
	# the script, Command-J outputs the compiled JavaScript. Enjoy!

	</textarea>
	</div>
	<div>
	<textarea id="output" rows="20" cols="80"></textarea>
	</div>
	</body>
	</html>