Skip to content

Commit

Permalink
Add edit-n-run sections
Browse files Browse the repository at this point in the history
  • Loading branch information
padolsey committed Jul 5, 2012
1 parent ca58dba commit 17a355a
Show file tree
Hide file tree
Showing 20 changed files with 30,953 additions and 21 deletions.
2 changes: 1 addition & 1 deletion _config.yml
@@ -1,4 +1,4 @@
permalink: /:categories/:title.html
auto: true
pygments: true
baseurl: /bonsai-docs/
baseurl: /bonsai-docs
18 changes: 13 additions & 5 deletions _layouts/doc.html
@@ -1,8 +1,8 @@
<!doctype html>

<meta charset="utf-8" />
<link rel="stylesheet" href="/bonsai-docs/assets/pygment.css" />
<link rel="stylesheet" href="/bonsai-docs/assets/main.css" />
<link rel="stylesheet" href="{{site.baseurl}}/assets/pygment.css" />
<link rel="stylesheet" href="{{site.baseurl}}/assets/main.css" />

<title>Bonsai documentation - {{page.title}}</title>

Expand All @@ -11,10 +11,10 @@
<div id="nav">
<h1>Bonsai</h1>
<ul>
<li><a {% if '/index.html' == page.url or '/' == page.url %}class="active"{% endif %} href="/bonsai-docs/">Introduction</a></li>
<li><a {% if '/index.html' == page.url or '/' == page.url %}class="active"{% endif %} href="{{site.baseurl}}/">Introduction</a></li>
{% for p in site.pages %}
{% unless p.title == 'Introduction' %}
<li><a {% if p.url == page.url %}class="active"{% endif %} href="/bonsai-docs{{p.url}}">{{p.title}}</a></li>
<li><a {% if p.url == page.url %}class="active"{% endif %} href="{{site.baseurl}}{{p.url}}">{{p.title}}</a></li>
{% endunless %}
{% endfor %}
</ul>
Expand All @@ -25,4 +25,12 @@ <h2>{{page.title}}</h2>
{{content}}
</div>

</body>
<script src="{{site.baseurl}}/lib/ace/ace-noconflict.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="{{site.baseurl}}/lib/bonsai/bonsai.iframe.js"></script>
<script src="{{site.baseurl}}/assets/doc.js"></script>
<script>
doc.init();
</script>

</body>
23 changes: 21 additions & 2 deletions _site/api/Shape.html
Expand Up @@ -24,7 +24,18 @@ <h1>Bonsai</h1>

<div id="content">
<h2>Shape</h2>
<h3 id='shape_constructor'>Shape constructor</h3>
<h3 id='try_it_out'>Try it out:</h3>
<!--runnable--><div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>a</span> <span class='o'>=</span> <span class='nx'>Shape</span><span class='p'>.</span><span class='nx'>circle</span><span class='p'>(</span><span class='mi'>100</span><span class='p'>,</span> <span class='o'>-</span><span class='mi'>50</span><span class='p'>,</span> <span class='mi'>50</span><span class='p'>);</span>
<span class='nx'>a</span><span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>&#39;fillColor&#39;</span><span class='p'>,</span> <span class='s1'>&#39;lightblue&#39;</span><span class='p'>).</span><span class='nx'>addTo</span><span class='p'>(</span><span class='nx'>stage</span><span class='p'>);</span>

<span class='nx'>a</span><span class='p'>.</span><span class='nx'>animate</span><span class='p'>(</span><span class='s1'>&#39;1s&#39;</span><span class='p'>,</span> <span class='p'>{</span>
<span class='nx'>scale</span><span class='o'>:</span> <span class='mf'>1.5</span><span class='p'>,</span>
<span class='nx'>fillColor</span><span class='o'>:</span> <span class='s1'>&#39;darkblue&#39;</span><span class='p'>,</span>
<span class='nx'>y</span><span class='o'>:</span> <span class='mi'>100</span>
<span class='p'>},</span> <span class='p'>{</span> <span class='nx'>easing</span><span class='o'>:</span> <span class='s1'>&#39;bounceOut&#39;</span> <span class='p'>});</span>
</code></pre>
</div>
<h3 id='shape_constructor'>Shape constructor</h3>

<p>The Shape constructor accepts three different argument signatures:</p>

Expand Down Expand Up @@ -76,4 +87,12 @@ <h3 id='factorieshelpers'>Factories/Helpers</h3>
</ul>
</div>

</body>
<script src="/bonsai-docs/lib/ace/ace-noconflict.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="/bonsai-docs/lib/bonsai/bonsai.iframe.js"></script>
<script src="/bonsai-docs/assets/doc.js"></script>
<script>
doc.init();
</script>

</body>
83 changes: 83 additions & 0 deletions _site/assets/doc.js
@@ -0,0 +1,83 @@
var doc = {

init: function() {
doc.forEachRunnableCodeBlock(doc.makeRunnable);
},

/**
* Gathers aggregate text of node
*/
_innerText: function(node) {
if (node.nodeType === 3) {
return node.data;
}
var txt = '';
if (node = node.firstChild) do {
txt += doc._innerText(node);
} while (node = node.nextSibling);
return txt;
},

forEachRunnableCodeBlock: function(fn) {
$('div.highlight').each(function(i, block) {
if (block.previousSibling.nodeType === 8 && block.previousSibling.data === 'runnable') {
fn(block, doc._innerText(block));
}
});
},

makeRunnable: function(block, code) {

block = $(block);

var height = Math.max(200, block.height()),
width = 700;

var dom = $('<div class=runner />');
dom.nav = $('<div class=nav />').appendTo(dom);
dom.nav.edit = $('<a href="javascript:void 0">edit</a>').appendTo(dom.nav);
dom.nav.run = $('<a href="javascript:void 0">run</a>').appendTo(dom.nav);
dom.editor = $('<div class=editor />').appendTo(dom);
dom.stage = $('<div class=stage />').appendTo(dom);
dom.insertBefore(block);
block.appendTo(dom.editor);

block.removeClass('highlight');

block.css({ width: width, height: height });
dom.editor.css({ width: width, height: height });
dom.stage.css({ width: width, height: height });

var aceEditor = ace.edit(block[0]);
aceEditor.session.setMode("ace/mode/javascript");
aceEditor.getSession().setTabSize(2);
aceEditor.getSession().setUseSoftTabs(true);

var bonsaiPlayer;

// Bind buttons:

dom.nav.edit.click(function() {
dom.nav.edit.addClass('active');
dom.nav.run.removeClass('active');
dom.stage.hide();
dom.editor.show();
});
dom.nav.run.click(function() {
dom.nav.edit.removeClass('active');
dom.nav.run.addClass('active');
dom.stage.show();
dom.editor.hide();
bonsaiPlayer && bonsaiPlayer.destroy();
bonsaiPlayer = bonsai.run(dom.stage[0], {
height: height,
width: width,
code: aceEditor.getSession().getValue(),
framerate: 40
});
});
dom.nav.edit.click();

}

};
44 changes: 42 additions & 2 deletions _site/assets/main.css
@@ -1,5 +1,5 @@
body {
font: .8em sans-serif;
font: 1em sans-serif;
}

body, pre, p, h1, h2, h3 {
Expand Down Expand Up @@ -85,4 +85,44 @@ table td {

table td td {

}
}

/** Players **/

.runner {
margin-top: 1em;
border: 1px solid #CCC;
border-bottom: 5px solid #CCC;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

.runner .nav {
font-size: .7em;
height: 2.5em;
background: #EEE;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom: 1px solid #CCC;
}

.runner .nav a {
cursor: pointer;
text-transform: uppercase;
border-right: 1px solid #CCC;
color: black;
text-decoration: none;
float: left;
height: 2.5em;
line-height: 2.5em;
padding: 0 1.25em;
}

.runner .nav a:hover, .runner .nav a:focus, .runner .nav a.active {
background: #000;
color: #FFF;
}

.runner .editor {

}
24 changes: 18 additions & 6 deletions _site/index.html
Expand Up @@ -29,14 +29,26 @@ <h2>Introduction</h2>
<p>Bonsai is a graphics library which includes an intuitive graphics API and an SVG renderer.</p>

<p>What does Bonsai look like?</p>
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>square</span> <span class='o'>=</span> <span class='nx'>Shape</span><span class='p'>.</span><span class='nx'>rect</span><span class='p'>(</span><span class='mi'>0</span><span class='p'>,</span> <span class='mi'>0</span><span class='p'>,</span> <span class='mi'>100</span><span class='p'>,</span> <span class='mi'>100</span><span class='p'>);</span>

<span class='nx'>square</span><span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>&#39;fillColor&#39;</span><span class='p'>,</span> <span class='s1'>&#39;red&#39;</span><span class='p'>).</span><span class='nx'>animate</span><span class='p'>(</span><span class='s1'>&#39;1s&#39;</span><span class='p'>,</span> <span class='p'>{</span>
<span class='nx'>x</span><span class='o'>:</span> <span class='mi'>200</span><span class='p'>,</span>
<span class='nx'>y</span><span class='o'>:</span> <span class='mi'>200</span>
<!--runnable--><div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>square</span> <span class='o'>=</span> <span class='nx'>Shape</span><span class='p'>.</span><span class='nx'>rect</span><span class='p'>(</span><span class='mi'>0</span><span class='p'>,</span> <span class='mi'>0</span><span class='p'>,</span> <span class='mi'>100</span><span class='p'>,</span> <span class='mi'>100</span><span class='p'>);</span>

<span class='nx'>square</span><span class='p'>.</span><span class='nx'>addTo</span><span class='p'>(</span><span class='nx'>stage</span><span class='p'>);</span>
<span class='nx'>square</span><span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>&#39;fillColor&#39;</span><span class='p'>,</span> <span class='s1'>&#39;red&#39;</span><span class='p'>);</span>
<span class='nx'>square</span><span class='p'>.</span><span class='nx'>animate</span><span class='p'>(</span><span class='s1'>&#39;1.5s&#39;</span><span class='p'>,</span> <span class='p'>{</span>
<span class='nx'>origin</span><span class='o'>:</span> <span class='p'>[</span><span class='mi'>50</span><span class='p'>,</span> <span class='mi'>50</span><span class='p'>],</span>
<span class='nx'>rotation</span><span class='o'>:</span> <span class='nb'>Math</span><span class='p'>.</span><span class='nx'>PI</span> <span class='o'>*</span> <span class='mi'>1</span><span class='p'>,</span>
<span class='nx'>x</span><span class='o'>:</span> <span class='mi'>700</span><span class='p'>,</span>
<span class='nx'>fillColor</span><span class='o'>:</span> <span class='s1'>&#39;green&#39;</span>
<span class='p'>});</span>
</code></pre>
</div>
</div>

</body>
<script src="/bonsai-docs/lib/ace/ace-noconflict.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="/bonsai-docs/lib/bonsai/bonsai.iframe.js"></script>
<script src="/bonsai-docs/assets/doc.js"></script>
<script>
doc.init();
</script>

</body>
10 changes: 10 additions & 0 deletions _site/lib/ace/ace-noconflict.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions _site/lib/ace/mode-javascript-noconflict.js

Large diffs are not rendered by default.

0 comments on commit 17a355a

Please sign in to comment.