Skip to content

Commit

Permalink
transfer maintenance to open exchange rates; bump version
Browse files Browse the repository at this point in the history
  • Loading branch information
Joss Crowcroft committed Jul 15, 2014
1 parent 6e5cbe9 commit 75adc7e
Show file tree
Hide file tree
Showing 7 changed files with 72 additions and 79 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
@@ -0,0 +1 @@
.DS_Store
13 changes: 5 additions & 8 deletions demo-resources/demo.css
View file
@@ -1,7 +1,7 @@
/**
* demo styles for the javascript sandbox console
*
* not required for operation, but spanky nonetheless
* not required for operation (use sandbox.css)
*/

/* --- fonts from fontsquirrel.com --- */
Expand Down Expand Up @@ -102,9 +102,6 @@ h4 {
margin:0 0 1.2em;
}


/* --- Other shiz --- */

a,
a:visited {
color:#28F;
Expand Down Expand Up @@ -168,14 +165,14 @@ pre {

/* --- Bonus points: --- */

/* For cool header effects, just add lettering.js! */
/* lettering.js */
h1 span:hover { border-bottom:7px solid #777; }
h2 span { margin-right:-1px; }
h2 span:hover { border-bottom:5px solid #777; }
h3 span { margin-right:-1px; }
h3 span:hover { border-bottom:4px solid #777; }

/* For hot code highlighting, just add prettify.js! */
/* code highlighting */
@media screen {
.pln{ color:#fdf6e3 }
.str{ color:#cb4b16 } /* strings */
Expand Down Expand Up @@ -203,7 +200,7 @@ h3 span:hover { border-bottom:4px solid #777; }
}
}

/* For great scrollbars, just add Webkit! */
/* Webkit scrollbars */
.content pre::-webkit-scrollbar {
background: transparent;
}
Expand All @@ -227,4 +224,4 @@ h3 span:hover { border-bottom:4px solid #777; }
.content pre::-webkit-scrollbar-corner {
width:0;
height:0;
}
}
Binary file added demo-resources/img/js-sandbox-console.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 38 additions & 45 deletions index.html
View file
Expand Up @@ -2,19 +2,19 @@
<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" />
<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://josscrowcroft.github.com/javascript-sandbox-console/" />
<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']);
Expand All @@ -39,43 +39,38 @@ <h2>a mini javascript console to play in</h2>

<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> &nbsp; <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>
<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> &nbsp; <g:plusone size="medium"></g:plusone></p>
</div>

<h2>Built with Backbone, jQuery, localStorage and &hearts;</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>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>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>
<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>
<h3>Features</h3>

<ul>
<li>Up/down command history, with localStorage saving/persistence</li>
<li>Option to evaluate all commands inside a hidden <code>&lt;iframe&gt;</code>, to block access to the global window, with a script loader to inject your libraries of choice</li>
<li>Up/down command history (like terminal), with localStorage saving/persistence</li>
<li>Option to evaluate all commands inside a hidden <code>&lt;iframe&gt;</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>Resizes nicely into any container, fully embeddable</li>
<li>No complicated setup required, just paste in the codez and off you go.</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 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>
<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>How to Install</h3>
<h3>Installation</h3>

<p>This is pretty simple. Add a <code>&lt;div&gt;</code> element, link up the stylesheet, include the templates and dependencies and add the kickoff script and you're good to go:</p>
<p>Add a <code>&lt;div&gt;</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 &lt;head&gt;:</h4>
<pre class="prettyprint">&lt;link href=&quot;sandbox.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre>
Expand Down Expand Up @@ -117,7 +112,7 @@ <h4>Near the closing &lt;/body&gt; tag, after the templates:</h4>

<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>
<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({
Expand All @@ -135,9 +130,10 @@ <h3>Extra Options</h3>

<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>&lt;iframe&gt;</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>&lt;iframe&gt;</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>
<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>&lt;iframe&gt;</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>&lt;iframe&gt;</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 }),
Expand All @@ -154,27 +150,25 @@ <h3>Sandboxed iFrame Mode</h3>

<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>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>
<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>


<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>
<h3>Links</h3>

<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>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:info@openexchangerates.org" 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> &nbsp; <g:plusone size="medium"></g:plusone></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> &nbsp; <g:plusone size="medium"></g:plusone></p>
</div>


Expand Down Expand Up @@ -228,7 +222,6 @@ <h2>What's Next?</h2>
// prettify code blocks:
prettyPrint();


// GUI demo controls:
DAT.GUI.autoPlace = false;
DAT.GUI.supressHotKeys = true;
Expand All @@ -249,8 +242,8 @@ <h2>What's Next?</h2>
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 = '&raquo; '"; 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.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(); };
Expand Down
42 changes: 22 additions & 20 deletions readme.md
View file
@@ -1,34 +1,36 @@
# JavaScript Sandbox Console

![js sandbox console screenshot](http://www.josscrowcroft.com/wp-content/uploads/2011/10/js-sandbox-console.png)
![js sandbox console screenshot](http://openexchangerates.github.io/js-sandbox-console/demo-resources/img/js-sandbox-console.png)

The **[js sandbox console](http://josscrowcroft.github.com/javascript-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.
a javascript playground to enhance demos and homepages for javascript libraries, plugins and scripts, giving visitors an easy and chilled-out way to test-drive functionality.

## Live demo and such:
see the **[project homepage](http://openexchangerates.github.io/javascript-sandbox-console/)** for a live demo, features, installation guide and more info.

**&rarr;** Check out the **[project homepage](http://josscrowcroft.github.com/javascript-sandbox-console/)** for a live demo, features, installation guide and more info!

by **[joss](http://www.josscrowcroft.com)**
maintained by [Open Exchange Rates](https://openexchangerates.org) (see it in action on the **[money.js](http://openexchangerates.github.com/money.js)** homepage).


## Changelog

### 0.1.5
* Adds `setValue` method, to set the value inside the sandbox
**0.2**
* Now maintained by Open Exchange Rates
* Improved documentation

**0.1.5**
* Added `setValue` method, to programmatically set the value inside the sandbox

### 0.1.4
* Adds an `iframe` setting on the Sandbox Model that, when active, creates a hidden `iframe` and evaluates all commands inside its 'sandboxed' scope - this blocks access to globals and prevents users screwing up the DOM.
* Adds a script loader method, `sandbox.model.load`, that injects a script into the page (or the `iframe`), making it available for the user.
* Adds a special command, `:load`, available from the sandbox command line, that load's a script into the global context (most useful in `iframe` mode. Usage eg: `:load http://code.jquery.com/jquery-1.6.4.js`
**0.1.4**
* Added an `iframe` setting on the Sandbox Model that creates a hidden `iframe` and evaluates all commands inside its 'sandboxed' scope - effectively blocking access to global variables.
* Added a script loader method `sandbox.model.load` to inject a script into the page (or the `iframe`).
* Added `:load` special command, available from the sandbox command line, to bootstrap any script into the global context (most useful in `iframe` mode. E.g.: `:load http://code.jquery.com/jquery-1.6.4.js`

### 0.1.3
* Added very basic stringification for objects. If `JSON.stringify(obj)` works, it prints the result, otherwise it's `obj.toString()` like a loser. Soon try to integrate a custom solution like in jsconsole.com, that includes circular structures, native/browser objects, and object methods.
**0.1.3**
* Added very basic stringification for objects. If `JSON.stringify(obj)` works, it prints the result, otherwise it's `obj.toString()`

### 0.1.2
* Mirrored gh-pages and master, much easier than trying to maintain both separately.
**0.1.2**
* Mirrored gh-pages and master branches

### 0.1.1
* Added view.toEscaped method to escape HTML strings so that they can be safely templated into the output
**0.1.1**
* Added view.toEscaped() method to escape HTML strings for safe output templating

#### 0.1
* First release
**0.1**
* First release
6 changes: 3 additions & 3 deletions src/sandbox-console.js
View file
@@ -1,9 +1,9 @@
/**
* javascript sandbox console 0.1.5 - joss crowcroft
* javascript sandbox console 0.2
*
* requires underscore, backbone, backbone-localStorage and jquery
*
* http://josscrowcroft.github.com/javascript-sandbox-console/
* http://openexchangerates.github.io/javascript-sandbox-console/
*/
var Sandbox = {

Expand Down Expand Up @@ -388,4 +388,4 @@ var Sandbox = {
return false;
}
})
};
};
6 changes: 3 additions & 3 deletions src/sandbox.css
View file
@@ -1,7 +1,7 @@
/**
* basic styles for the javascript sandbox console - joss crowcroft
* basic styles for the javascript sandbox console
*
* http://josscrowcroft.github.com/javascript-sandbox-console/
* http://openexchangerates.github.io/javascript-sandbox-console/
*/

#sandbox,
Expand Down Expand Up @@ -102,4 +102,4 @@
#sandbox pre.output::-webkit-scrollbar-button {
width:0;
height:0;
}
}

0 comments on commit 75adc7e

Please sign in to comment.