forked from openexchangerates/javascript-sandbox-console
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
291 lines (213 loc) · 14.2 KB
/
index.html
File metadata and controls
291 lines (213 loc) · 14.2 KB
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
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>javascript sandbox console demo - joss crowcroft</title>
<meta name="description" content="an interactive javascript console built on backbone.js, perfect for js library/plugin 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://josscrowcroft.github.com/javascript-sandbox-console/" />
<!-- The demo styles: -->
<link href="demo-resources/demo.css" rel="stylesheet"/>
<!-- The Sandbox stylesheet: -->
<link href="src/sandbox.css" rel="stylesheet"/>
<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://josscrowcroft.github.com/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>
<p class="right">by <a target="_blank" href="http://www.josscrowcroft.com" title="joss">joss</a>. best in webkit, not ie-tested yet.</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 - without whacking open their Firebug / Dev Tools console.</p>
<p>The idea is inspired by <a href="http://jsconsole.com" title="jsconsole.com" target="_blank">jsconsole.com</a> and was built with <a href="http://documentcloud.github.com/backbone/" title="Backbone.js" target="_blank">Backbone.js</a> and jQuery, in a strange and terrible all-night code-off. Then tidied up a bit the next day.</p>
<p>You'll get to see it in action next week on the demo page of a new js thing I'm working on (that's actually what this was originally built for, if I'm honest).</p>
<p>For now, have a play around, see if you can contribute and please <a href="https://github.com/josscrowcroft/javascript-sandbox-console/issues" title="js sandbox console issues">report issues</a>!</p>
<h3>Features!</h3>
<ul>
<li>Up/down command history, with localStorage saving/persistence</li>
<li>Option to evaluate all commands inside a hidden <code><iframe></code>, to block access to the global window, 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>Resizes nicely into any container, fully embeddable</li>
<li>No complicated setup required, just paste in the codez and off you go.</li>
</ul>
<h3>Download / Fork</h3>
<p>You can grab the latest code from the <a href="https://github.com/josscrowcroft/javascript-sandbox-console" title="js sandbox console">js sandbox console github repository</a>. Hit 'watch' to see when new features get added and bugs get squashed!</p>
<p>Oh and if you use this on a site/demo/launch page anywhere, please let me know and I'll add it to the showcase.</p>
<h3>How to Install</h3>
<p>This is pretty simple. 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. Here they are (more on the way):</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) scope. To prevent users from screwing up 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 will create an invisible <code><iframe></code> element, and evaluate all the commands inside its window context.</p>
<p>NB: if you do this, the users won't have access to globals from the page you're running (including any libraries or scripts you've included). That might be what you want, or it might not. Either way, there's also a <code>sandbox.model.load()</code> method you can tap, to inject js files into the <code><iframe></code> window, which makes them available in the sandbox.</p>
<p>In retrospect, this is probably the best way to run the sandbox - as long as you remember to include the libraries you want to have available!</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>
<ul>
<li>Test it in IE 7+ and make changes</li>
<li>Make sure it works without localStorage</li>
<li>Add option for maximum history length</li>
<li>Create some extra CSS styles/skins and add to demo</li>
<li>Write CSS example where X/Y scrolling is disabled and output is wrapped</li>
<li>Work on the up/down action in multi-line input</li>
</ul>
<h2>What's Next?</h2>
<p>If you've read this far, check out <a href="http://www.josscrowcroft.com" title="joss">josscrowcroft.com</a>, where I write about javascript, wordpress, music, business (sometimes), and things I've built for fun/profit.</p>
<p>There's some fun new open-source stuff coming in a week or two, so follow <a href="http://twitter.com/josscrowcroft" title="@josscrowcroft">@josscrowcroft</a> on Twitter if you're into this kinda thing.</p>
<p>And make sure to hit 'watch' on the <a href="https://github.com/josscrowcroft/javascript-sandbox-console" title="js sandbox console">js sandbox console github repository</a>.</p>
<p>Thanks for reading!</p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="josscrowcroft" data-url="http://josscrowcroft.github.com/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 = 'joss', where = 'hong kong';"; sandbox.update(); sandbox.textarea.focus(); };
sandbox.custom6 = function() { sandbox.currentHistory = "function doYaFeelLucky() {\n\treturn 'well do ya, punk?';\n};\ndoYaFeelLucky(); // 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>