Skip to content

Instantly share code, notes, and snippets.

@brendanberg
Created August 24, 2011 20:28
Show Gist options
  • Save brendanberg/1169121 to your computer and use it in GitHub Desktop.
Save brendanberg/1169121 to your computer and use it in GitHub Desktop.
CoffeeScript in Your Browser
<!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>
@brendanberg
Copy link
Author

Type in the top box, find output in the second. Type CmdJ to view compiled JavaScript, CmdEnter to execute. There's a convenience function called println that prints to the output console.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment