Some Try CoffeeScript tweaks ... scrolling left-hand, opt-out load buttons, correct cursor.
This commit is contained in:
parent
f567dafe62
commit
460272291f
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
10
index.html
10
index.html
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue