-
Notifications
You must be signed in to change notification settings - Fork 57
/
Copy pathindex.html
284 lines (210 loc) · 13.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>javascript sandbox console demo</title>
<meta name="description" content="interactive javascript console for demos and homepages" />
<meta name="keywords" content="javascript, console, sandbox, playground, demo, interactive, plugin, backbone.js, jquery, underscore.js" />
<link rel="shortcut icon" href="http://faviconist.com/icons/c8d9b014e98028d3f2432482a1fbb48b/favicon.ico" />
<link rel="canonical" href="http://openexchangerates.github.io/javascript-sandbox-console/" />
<!-- The demo styles: -->
<link href="demo-resources/demo.css" rel="stylesheet"/>
<!-- The Sandbox stylesheet: -->
<link href="src/sandbox.css" rel="stylesheet"/>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17884149-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- HTML -->
<h1>js sandbox console</h1>
<h2>a mini javascript console to play in</h2>
<div id="sandbox">sandbox loading...</div>
<div class="content">
<div class="clearfix">
<p class="left"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="josscrowcroft" data-url="http://openexchangerates.github.io/javascript-sandbox-console" data-text="javascript sandbox console: a backbone.js-powered playground for library/plugin demos" data-related="josscrowcroft">Tweet</a> <g:plusone size="medium"></g:plusone></p>
</div>
<h2>Built with Backbone, jQuery, localStorage and ♥</h2>
<p>The js sandbox console is a javascript playground designed to enhance demos and homepages for javascript libraries, plugins and scripts, giving visitors an easy and chilled-out way to test-drive the functionality.</p>
<p>Inspired by <a href="http://jsconsole.com" title="jsconsole.com" target="_blank">jsconsole.com</a> and built with <a href="http://documentcloud.github.com/backbone/" title="Backbone.js" target="_blank">Backbone.js</a> and jQuery.</p>
<p>Maintained by <strong><a href="https://openexchangerates.org" title="Open Exchange Rates free currency data API" target="_blank">Open Exchange Rates</a> (see it in action on the <strong><a href="http://openexchangerates.github.io/money.js" title="money.js currency conversion javascript library">money.js library</a></strong> homepage).</p>
<h3>Features</h3>
<ul>
<li>Up/down command history (like terminal), with localStorage saving/persistence</li>
<li>Option to evaluate all commands inside a hidden <code><iframe></code> (blocking access to global window scope) with a script loader to inject your libraries of choice</li>
<li>Basic syntax highlighting for errors and variable types
<li>Special commands (like <code>:help</code>, <code>:clear</code> and <code>:load</code>)</li>
<li>Fits into any container and fully embeddable</li>
<li>Easy to set up, intuitive to use</li>
</ul>
<h3>Download / Fork</h3>
<p>You can check out the latest code from the <a href="https://github.com/openexchangerates/javascript-sandbox-console" title="js sandbox console">js sandbox console github repository</a>.</p>
<h3>Installation</h3>
<p>Add a <code><div></code> element, link up the stylesheet, include the templates and dependencies and add the kickoff script and you're good to go:</p>
<h4>In your <head>:</h4>
<pre class="prettyprint"><link href="sandbox.css" rel="stylesheet" /></pre>
<h4>Wherever you want the console to appear:</h4>
<pre class="prettyprint"><div id="sandbox">sandbox loading...</div></pre>
<h4>Anywhere between the <div> and the <script>s:</h4>
<pre class="prettyprint"><!-- The sandbox template -->
<script type="text/template" id="tplSandbox">
<pre class="output"></pre>
<div class="input">
<textarea rows="1" placeholder="<%= placeholder %>"></textarea>
</div>
</script>
<!-- The command/result template (NB whitespace/line breaks matter inside <pre> tag): -->
<script type="text/template" id="tplCommand"><% if (! _hidden) { %><span class="command"><%= command %></span>
<span class="prefix"><%= this.resultPrefix %></span><span class="<%= _class %>"><%= result %></span>
<% } %></script></pre>
<h4>Near the closing </body> tag, after the templates:</h4>
<pre class="prettyprint"><script src="js/libs/underscore.min.js"></script>
<script src="js/libs/backbone.min.js"></script>
<script src="js/libs/backbone-localstorage.min.js"></script><!-- opt -->
<script src="js/libs/jquery.min.js"></script>
<script src="js/sandbox-console.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Create the sandbox:
window.sandbox = new Sandbox.View({
el : $('#sandbox'),
model : new Sandbox.Model()
});
});
</script></pre>
<h3>Extra Options</h3>
<p>You can pass extra options in to the Sandbox Backbone Model and View to control elements of the console. They are self-explanatory - for example:</p>
<pre class="prettyprint">// Create the sandbox:
window.sandbox = new Sandbox.View({
// these two are required:
model : new Sandbox.Model(), // see below for more
el : $('#sandbox'), // or etc.
// these are optional (defaults are given here):
resultPrefix : " => ",
helpText : "type javascript commands into the console, hit enter to evaluate. \n[up/down] to scroll through history, ':clear' to reset it. \n[alt + return/up/down] for returns and multi-line editing.",
tabCharacter : "\t",
placeholder : "// type some javascript and hit enter (:help for info)"
});</pre>
<h3>Sandboxed iFrame Mode</h3>
<p>By default, the sandbox evaluates commands in the global (top-level/window) scope. To prevent users from playing with the active document (or to create a totally clean execution context to play in) you can switch on the <code>iframe</code> mode on the <code>Sandbox.Model</code>. This creates an invisible <code><iframe></code> element and evaluates all commands inside its context.</p>
<p>This means that visitors won't have access to globals from the page you're running (including any libraries or scripts you've included). Use <code>sandbox.model.load()</code> to inject js files into the <code><iframe></code> window, making them available in the sandbox.</p>
<p><strong>This is the recommended way to integrate the sandbox.</strong></p>
<pre class="prettyprint">// Create the sandbox, with `iframe` mode on:
window.sandbox = new Sandbox.View({
model : new Sandbox.Model({ iframe : true }),
el : $('#sandbox')
});
// Pre-load your libraries for the iframe:
sandbox.model.load('http://code.jquery.com/jquery-1.6.4.js');
sandbox.model.load('my/cool/library.js');
// You can also evaluate code inside the iframe after it loads:
sandbox.model.iframeEval("var globalJoss = 'im global, bro'"); // globalJoss is now available in the iframe</pre>
<h3>Roadmap / To-Do</h3>
<p><a href="https://github.com/openexchangerates/javascript-sandbox-console/issues" title="js sandbox console issues">Contributions welcome</a>!</p>
<ul>
<li>Verify IE support</li>
<li>Add maximum history length option</li>
<li>Create extra CSS styles/skins and add to demo</li>
<li>Write CSS for disabled X/Y scrolling and wrapped output</li>
<li>Improve up/down action in multi-line input</li>
</ul>
<h3>Links</h3>
<p>the javascript sandbox console is open source and maintained by <strong><a href="https://openexchangerates.org" title="Open Exchange Rates free currency data API" target="_blank">Open Exchange Rates</a></strong> - the lightweight currency data API for developers, startups and Fortune 500s.</p>
<p>Feedback, support or questions? <strong><a href="mailto:[email protected]" title="Contact Open Exchange Rates">Contact Open Exchange Rates</a></strong> for guidance.</p>
<p>Bugs, issues, suggestions or contributions? Please <strong><a href="https://github.com/openexchangerates/javascript-sandbox-console/issues" title="js sandbox console Github repository issues">post them here</a></strong>.</p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="josscrowcroft" data-url="http://openexchangerates.github.io/javascript-sandbox-console" data-text="javascript sandbox console: a backbone.js-powered playground for library/plugin demos" data-related="josscrowcroft">Tweet</a> <g:plusone size="medium"></g:plusone></p>
</div>
<!-- Templates -->
<!-- The sandbox template: -->
<script type="text/template" id="tplSandbox">
<pre class="output"></pre>
<div class="input">
<textarea rows="1" placeholder="<%= placeholder %>"></textarea>
</div>
</script>
<!-- The command/result template (NB whitespace/line breaks matter inside <pre> tag): -->
<script type="text/template" id="tplCommand"><% if (! _hidden) { %><span class="command"><%= command %></span>
<span class="prefix"><%= this.resultPrefix %></span><span class="<%= _class %>"><%= result %></span>
<% } %></script>
<!-- Scripts -->
<!-- Underscore, Backbone, backbone-localStorage, jQuery -->
<script src="src/libs/underscore.min.js"></script>
<script src="src/libs/backbone.min.js"></script>
<script src="src/libs/backbone-localStorage.min.js"></script>
<script src="src/libs/jquery.min.js"></script>
<!-- Some extras for the demo: -->
<script src="demo-resources/js/lettering.js"></script>
<script src="demo-resources/js/prettify.js"></script>
<script src="demo-resources/js/DAT.GUI.min.js"></script>
<!-- The JS Sandbox Console script (requires underscore, backbone and jquery): -->
<script src="src/sandbox-console.js"></script>
<!-- When ready, create the model and view -->
<script type="text/javascript">
jQuery(document).ready(function($) {
// Create the sandbox:
window.sandbox = new Sandbox.View({
el : $('#sandbox'),
model : new Sandbox.Model()
});
// Lettering.js:
$('h1').add('h2').add('h3').lettering();
// prettify code blocks:
prettyPrint();
// GUI demo controls:
DAT.GUI.autoPlace = false;
DAT.GUI.supressHotKeys = true;
window.gui = new DAT.GUI();
gui.name('Commands to try out');
gui.close();
$(gui.domElement).css({
position:"absolute",
top:0,
right:-10
}).appendTo('body');
// Some custom callback functions for dat.gui:
sandbox.custom1 = function() { sandbox.currentHistory = ":help"; sandbox.update(); sandbox.textarea.focus(); };
sandbox.custom2 = function() { sandbox.currentHistory = ":clear"; sandbox.update(); sandbox.textarea.focus(); };
sandbox.custom3 = function() { sandbox.currentHistory = "JSON.stringify(sandbox.model.get('history'), 0, 4);"; sandbox.update(); sandbox.textarea.focus(); };
sandbox.custom4 = function() { sandbox.currentHistory = "sandbox.resultPrefix = '» '"; sandbox.update(); sandbox.textarea.focus(); };
sandbox.custom5 = function() { sandbox.currentHistory = "var who = 'you', where = 'your life';"; sandbox.update(); sandbox.textarea.focus(); };
sandbox.custom6 = function() { sandbox.currentHistory = "function saySomethingFunny() {\n\treturn 'something funny';\n};\nsaySomethingFunny(); // hit return!"; sandbox.update(); sandbox.textarea.focus(); };
sandbox.custom7 = function() { sandbox.currentHistory = "somethingUndefined; // hit enter!"; sandbox.update(); sandbox.textarea.focus(); };
sandbox.custom8 = function() { sandbox.model.set({ iframe : true }); sandbox.model.addHistory({ command : " ", result : "Commands are now being evaluated inside a sandboxed iframe." }); sandbox.model.iframeSetup(); };
sandbox.custom9 = function() { sandbox.currentHistory = ":load http://code.jquery.com/jquery-1.6.4.js"; sandbox.update(); sandbox.textarea.focus(); };
gui.add(sandbox, 'custom1').name('Show <code>:help</code> menu');
gui.add(sandbox, 'custom2').name('<code>:clear</code> the command history');
gui.add(sandbox, 'custom3').name('View all history');
gui.add(sandbox, 'custom4').name('Set the result/response prefix');
gui.add(sandbox, 'custom5').name('Define some variables');
gui.add(sandbox, 'custom6').name('Multi-line input (use <code>alt</code> + <code>return</code>/<code>up</code>/<code>down</code>)');
gui.add(sandbox, 'custom7').name('Throw an error');
gui.add(sandbox, 'custom8').name('Switch on <code>iFrame</code> sandboxing');
gui.add(sandbox, 'custom9').name('<code>:load</code> a script (jQuery)');
gui.open();
// twitter:
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'http://platform.twitter.com/widgets.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
// google plus:
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
});
</script>
</body>
</html>