Some Try CoffeeScript tweaks ... scrolling left-hand, opt-out load buttons, correct cursor.

This commit is contained in:
Jeremy Ashkenas 2010-12-21 20:43:13 -05:00
parent f567dafe62
commit 460272291f
3 changed files with 17 additions and 15 deletions

View File

@ -259,6 +259,7 @@ div.code {
}
.navigation .contents.repl_wrapper .code {
cursor: text;
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
background: #181a3a url(../images/banding.png);
border: 2px solid #555;
@ -302,14 +303,15 @@ div.code {
}
#repl_source_wrap {
margin-left: 5px;
width: 45%; right: 50%;
position: relative;
width: 47%; right: 50%;
float: left;
}
#repl_source {
padding-left: 5px;
width: 96%;
width: 100%;
height: 100%;
border: 0;
overflow-y: auto;
resize: none;
}
#repl_results {

View File

@ -2,7 +2,7 @@
require 'uv'
require 'json'
@counter = 0
def code_for(file, executable=false)
def code_for(file, executable=false, show_load=true)
@counter += 1
return '' unless File.exists?("documentation/js/#{file}.js")
cs = File.read("documentation/coffee/#{file}.coffee")
@ -13,7 +13,7 @@
run = executable == true ? 'run' : "run: #{executable}"
name = "example#{@counter}"
script = "<script>window.#{name} = #{cs.to_json}</script>"
import = "<div class='minibutton load' onclick='javascript: loadConsole(#{name});'>Load</div>"
import = show_load ? "<div class='minibutton load' onclick='javascript: loadConsole(#{name});'>Load</div>" : ''
button = executable ? "<div class='minibutton ok' onclick='javascript: #{js};#{append}'>#{run}</div>" : ''
"<div class='code'>#{cshtml}#{jshtml}#{script}#{import}#{button}<br class='clear' /></div>"
end
@ -144,7 +144,7 @@
<p><i>CoffeeScript on the left, compiled JavaScript output on the right.</i></p>
<%= code_for('overview', 'cubes') %>
<%= code_for('overview', 'cubes', false) %>
<h2>
<span id="installation" class="bookmark"></span>
@ -183,8 +183,8 @@ npm install coffee-script</pre>
sudo bin/cake install</pre>
<p>
If installing on Ubuntu or Debian,
<a href="http://opinionated-programmer.com/2010/12/installing-coffeescript-on-debian-or-ubuntu/">be
If installing on Ubuntu or Debian,
<a href="http://opinionated-programmer.com/2010/12/installing-coffeescript-on-debian-or-ubuntu/">be
careful not to use the existing out-of-date package</a>. If installing on
Windows, your best bet is probably to run Node.js under Cygwin.
</p>
@ -553,7 +553,7 @@ coffee --bare --print --stdio</pre>
to the bottom of your function.
</p>
<p>
To step through a range comprehension in fixed-size chunks,
To step through a range comprehension in fixed-size chunks,
use <tt>by</tt>, for example:<br />
<tt>evens = (x for x in [0..10] by 2)</tt>
</p>
@ -564,7 +564,7 @@ coffee --bare --print --stdio</pre>
</p>
<%= code_for('object_comprehensions', 'ages.join(", ")') %>
<p>
If you would like to iterate over just the keys that are defined on the
If you would like to iterate over just the keys that are defined on the
object itself, by adding a <tt>hasOwnProperty</tt>
check to avoid properties that may be interited from the prototype, use<br />
<tt>for own key, value of object</tt>

View File

@ -188,7 +188,7 @@ cubes <span class="Keyword">=</span> (<span class="Storage">function</span>() {
}
<span class="Keyword">return</span> _results;
}());
</pre><script>window.example1 = "# Assignment:\nnumber = 42\nopposite = true\n\n# Conditions:\nnumber = -42 if opposite\n\n# Functions:\nsquare = (x) -> x * x\n\n# Arrays:\nlist = [1, 2, 3, 4, 5]\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n\n# Existence:\nalert \"I knew it!\" if elvis?\n\n# Array comprehensions:\ncubes = (math.cube num for num in list)\n"</script><div class='minibutton load' onclick='javascript: loadConsole(example1);'>Load</div><div class='minibutton ok' onclick='javascript: var cubes, list, math, num, number, opposite, race, square;
</pre><script>window.example1 = "# Assignment:\nnumber = 42\nopposite = true\n\n# Conditions:\nnumber = -42 if opposite\n\n# Functions:\nsquare = (x) -> x * x\n\n# Arrays:\nlist = [1, 2, 3, 4, 5]\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n\n# Existence:\nalert \"I knew it!\" if elvis?\n\n# Array comprehensions:\ncubes = (math.cube num for num in list)\n"</script><div class='minibutton ok' onclick='javascript: var cubes, list, math, num, number, opposite, race, square;
var __slice = Array.prototype.slice;
number = 42;
opposite = true;
@ -261,8 +261,8 @@ npm install coffee-script</pre>
sudo bin/cake install</pre>
<p>
If installing on Ubuntu or Debian,
<a href="http://opinionated-programmer.com/2010/12/installing-coffeescript-on-debian-or-ubuntu/">be
If installing on Ubuntu or Debian,
<a href="http://opinionated-programmer.com/2010/12/installing-coffeescript-on-debian-or-ubuntu/">be
careful not to use the existing out-of-date package</a>. If installing on
Windows, your best bet is probably to run Node.js under Cygwin.
</p>
@ -929,7 +929,7 @@ countdown = (function() {
to the bottom of your function.
</p>
<p>
To step through a range comprehension in fixed-size chunks,
To step through a range comprehension in fixed-size chunks,
use <tt>by</tt>, for example:<br />
<tt>evens = (x for x in [0..10] by 2)</tt>
</p>
@ -973,7 +973,7 @@ ages = function() {
return _results;
}();;alert(ages.join(", "));'>run: ages.join(", ")</div><br class='clear' /></div>
<p>
If you would like to iterate over just the keys that are defined on the
If you would like to iterate over just the keys that are defined on the
object itself, by adding a <tt>hasOwnProperty</tt>
check to avoid properties that may be interited from the prototype, use<br />
<tt>for own key, value of object</tt>