mirror of
https://github.com/jsbin/jsbin.git
synced 2026-01-25 15:38:56 +00:00
602 lines
29 KiB
HTML
602 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html id="jsbin" lang="en" class="{{#if flash_tip}}showtip{{/if}}{{#if embed}} embed{{/if}}">
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>JS Bin - Collaborative JavaScript Debugging</title>
|
|
<link rel="icon" href="{{static}}/images/favicon.png">
|
|
<link rel="stylesheet" href="{{static}}/css/style.css{{cacheBust}}">
|
|
<link rel="stylesheet" href="{{static}}/css/flat-ui.css{{cacheBust}}">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
{{#if custom_css}}<link rel="stylesheet" href="{{static}}/{{custom_css}}{{cacheBust}}">{{/if}}
|
|
<!--[if lte IE 9 ]><link rel="stylesheet" href="{{static}}/css/ie.css{{cacheBust}}"><![endif]-->
|
|
{{#if is_production}}
|
|
{{> analytics}}
|
|
{{/if}}
|
|
<meta name="description" content="A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more..." />
|
|
{{#if bin}}
|
|
<meta property="og:url" content="{{root}}{{code_id_path}}/edit" />
|
|
<meta property="og:title" content="JS Bin" />
|
|
<meta property="og:description" content="Sample of the bin: {{bin.metadata.summary}}" />
|
|
{{else}}
|
|
<meta property="og:url" content="{{root}}" />
|
|
<meta property="og:title" content="JS Bin" />
|
|
<meta property="og:description" content="A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more..." />
|
|
{{/if}}
|
|
<meta property="og:image" content="{{static}}/images/logo.png" />
|
|
</head>
|
|
<!--[if lt IE 7]> <body class="source ie ie6"> <![endif]-->
|
|
<!--[if IE 7]> <body class="source ie ie7"> <![endif]-->
|
|
<!--[if gt IE 7]> <body class="source ie"> <![endif]-->
|
|
<!--[if !IE]><!--> <body class="source {{#if private}}private{{else}}public{{/if}}"> <!--<![endif]-->
|
|
{{#unless embed}}
|
|
<script>
|
|
if(top != self) {
|
|
window.location = '{{embedURL}}';
|
|
document.write('<' + '!--');
|
|
}
|
|
</script>
|
|
<a href="#html" id="skipToEditor" class="visuallyhidden">Skip welcome & menu and move to editor</a>
|
|
{{#feature request "welcomePanel"}}
|
|
{{> welcome_panel}}
|
|
{{/feature}}
|
|
{{/unless}}
|
|
<div id="control">
|
|
<div class="control">
|
|
<div id="menuinfo"><p></p></div>
|
|
<div class="buttons">
|
|
{{#if embed}}
|
|
<span class="menu">
|
|
<a target="_blank" href="{{code_id_path}}/edit" class="brand button group"><img src="{{static}}/images/jsbin_16.png">
|
|
<h1>JS Bin</h1></a><a href="/clone" target="_blank" class="button">Save</a>
|
|
</span>
|
|
{{else}}
|
|
<div class="menu">
|
|
<a href="{{root}}{{code_id_path}}/edit#{{#feature request "fileMenuTest"}}file{{else}}bins{{/feature}}" target="_blank" class="brand button button-dropdown group button-dropdown-arrow"><img src="{{static}}/images/jsbin_16.png"> {{#feature request "fileMenuTest"}}File{{else}}Bins{{/feature}}</a>
|
|
<div class="dropdown" id="{{#feature request "fileMenuTest"}}file{{else}}bins{{/feature}}">
|
|
<div class="dropdownmenu">
|
|
<a id="createnew" data-desc="Create a brand new bin" class="button group" title="Create fresh bin" href="{{root}}" data-label="new">New</a>
|
|
{{#feature request "private"}}
|
|
<a id="public" data-desc="Set this bin to public" class="visibilityToggle button group" title="Set this bin to public" href="{{root}}" data-label="public" data-vis="public">Make bin public</a>
|
|
<a id="private" data-desc="Set this bin to private" class="visibilityToggle button group" title="Set this bin to private" href="{{root}}" data-label="private" data-vis="private">Make bin private</a>
|
|
{{else}}
|
|
{{#feature request "upgrade"}}
|
|
<a data-desc="Set this bin to private" data-pro="true" class="button group" title="Set this bin to private" href="{{root}}/account/upgrade">Make bin private</a>
|
|
{{/feature}}
|
|
{{/feature}}
|
|
{{#feature request "delete"}}
|
|
<a class="deletebin button group" data-desc="Delete bin" title="Delete this bin" href="{{root}}/delete" data-shortcut="ctrl+shift+del">Delete</a>
|
|
{{/feature}}
|
|
<a class="archivebin button group" data-desc="Archive bin" title="Archive this bin" href="{{code_id_path}}/archive" data-shortcut="ctrl+y">Archive</a>
|
|
<a class="unarchivebin button group" data-desc="Unrchive bin" title="Restore this bin from the archive" href="{{code_id_path}}/unarchive" data-shortcut="ctrl+shift+y">Unarchive</a>
|
|
{{#if home}}
|
|
<a href="#" data-desc="Browse your previous created bins" data-shortcut="ctrl+o" class="button group homebtn" data-label="open">My Bins{{#if bincount}} <span class="meta">({{bincount}})</span>{{/if}}</a>
|
|
{{/if}}
|
|
<hr data-desc="">
|
|
<a id="addmeta" data-desc="Insert a description shown in My Bins" title="Add meta data to bin" class="button group" href="#add-description">Add description</a>
|
|
<a title="Create milestone" data-desc="Save current work, and begin new revision on next change" data-shortcut="ctrl+s" class="button save group" data-label="save" href="{{root}}/save">Create milestone</a>
|
|
<a data-desc="Copy and create a new bin start at revision #1" data-shortcut="ctrl+shift+s" id="clone" title="Create a new copy" class="button clone group" data-label="clone" href="{{root}}/clone">Clone</a>
|
|
<hr data-desc="">
|
|
{{#feature request "upgrade"}}
|
|
{{#feature request "vanity"}}
|
|
<a data-desc="Publish the current bin to {{vanity}}" class="publish-to-vanity button group" title="Publish the current bin to {{vanity}}" href="{{root}}/account/bookmark/vanity">Publish to vanity homepage</a>
|
|
{{else}}
|
|
<a data-pro="true" data-desc="Publish the current bin to {{vanity}}" class="button group" title="Publish the current bin to {{vanity}}" href="{{root}}/account/upgrade">Publish to vanity homepage</a>
|
|
{{/feature}}
|
|
{{/feature}}
|
|
<a data-desc="Export individual panels to Github's gist{{#unless user.github_token}} as an anonymous user{{/unless}}" class="export-as-gist button group" title="Create a new {{#unless user.github_token}}anonymous {{/unless}}GitHub Gist from this bin" href="#export-to-gist">Export as gist</a>
|
|
<a data-desc="Download a complete html file for this bin" id="download" title="Save to local drive" class="button download group" href="{{root}}/download" data-label="download">Download</a>
|
|
<a data-desc="Use content from this bin when creating new bins" class="startingpoint button group" title="Set as starting code" href="{{root}}/save" data-label="save-as-template">Save as template</a>
|
|
<a hidden data-desc="How to embed a bin" target="_blank" title="How to embed a bin" data-label="how-to-embed" class="button group" href="http://jsbin.com/help/how-can-i-embed-jsbin">How to embed</a>
|
|
</div>
|
|
</div>
|
|
</div><div class="menu">
|
|
<span class="button group">Add library
|
|
<select id="library"></select>
|
|
</span>
|
|
</div><div id="sharemenu" class="menu {{#unless code_id}}hidden{{/unless}}">
|
|
<a href="#share" class="button button-dropdown group">Share</a>
|
|
<div class="dropdown" id="share">
|
|
<div class="dropdowncontent">
|
|
<form>
|
|
<div data-desc="This bin's full output without the JS Bin editor">
|
|
<strong><a class="link" data-path="/" target="_blank" href="{{root}}{{code_id_path}}">Output only (with live reload)</a></strong><br><input data-path="/" class="link" id="livepreview" value="{{root}}{{code_id_path}}/" type="text">
|
|
</div>
|
|
<hr>
|
|
<div id="sharepanels">
|
|
<strong>Select panels to show:</strong>
|
|
<ul class="inline">
|
|
<li><label><input type="checkbox" data-panel="html">HTML</label></li>
|
|
<li><label><input type="checkbox" data-panel="css">CSS</label></li>
|
|
<li><label><input type="checkbox" data-panel="javascript">JS</label></li>
|
|
<li><label><input type="checkbox" data-panel="console">Console</label></li>
|
|
<li><label><input type="checkbox" data-panel="live">Output</label></li>
|
|
</ul>
|
|
</div>
|
|
<div data-desc="The url to this bin with the JS Bin editor">
|
|
<a class="link heading" data-path="/edit" target="_blank" href="{{root}}{{code_id_path}}/edit">Link</a><br><input data-path="/edit" class="link" value="{{root}}{{code_id_path}}/edit" type="text">
|
|
</div>
|
|
<div data-desc="Embed this bin with the live output on your site">
|
|
<span class="heading">Embed</span><br><textarea id="embedfield" data-path="/embed" class="link"><a class="jsbin-embed" href="{{root}}{{code_id_path}}/embed?live">JS Bin demo</a><script src="{{static}}/js/embed.js"></script></textarea>
|
|
</div>
|
|
<div data-desc="Training/Viewer mode: codecast your bin to any viewers" class="disabled">
|
|
<a class="link heading" target="_blank" data-path="/watch" href="{{root}}{{code_id_path}}/watch">Codecast</a><br><input data-path="/watch" class="link" value="{{root}}{{code_id_path}}/watch" type="text">
|
|
</div>
|
|
<div data-desc="Disallow further changes to this specific revision" data-shortcut="ctrl+s" class="lockoption" id="enablelock"><div title="Locks the bin's content so no more changes will be made this URL, and typing will create a new bin as if you 'created milestone'" class="icon-unlocked lockrevision"><span>Click to lock and prevent further changes</span></div></div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div id="start-saving" class="menu">
|
|
<a href="{{code_id_path}}/save" class="save button group">Start saving your work</a>
|
|
</div>
|
|
{{/if}}
|
|
<div id="panels"></div>
|
|
<div class="help">
|
|
{{#unless embed}}
|
|
{{#if home}}
|
|
{{#feature request "accountPages"}}
|
|
<div class="menu{{#if user.pro}} pro{{/if}}">
|
|
<a title="@{{home}}" href="#profile" class="button button-dropdown avatar" id="accountBtn">{{#if gravatar}}<img src="{{gravatar}}">{{/if}} Account</a>
|
|
<div class="dropdown dd-right" id="profile">
|
|
<div class="dropdowncontent">
|
|
{{#if large_gravatar}}<div class="large-gravatar"><object data="{{static}}/images/default-avatar.min.svg?{{user.name}}&{{version}}" type="image/svg+xml">
|
|
<img src="{{static}}/images/default-avatar.min.svg?{{version}}"></object><img class="large-gravatar" src="{{large_gravatar}}"></div>{{/if}}
|
|
<span class="input" id="username" readonly>
|
|
@{{home}}{{#if user.pro}}<sup class="pro">pro</sup>{{/if}}
|
|
</span>
|
|
|
|
<ul>
|
|
<li><a href="/account/profile">Profile</a></li>
|
|
<li><a href="/account/editor">Editor settings</a></li>
|
|
<li><a href="/account/preferences">Preferences</a></li>
|
|
<li><a href="/logout">Logout</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
{{#feature request "upgrade"}}
|
|
{{#unless user.pro}}
|
|
<a href="/account/upgrade" class="gopro">Support JS Bin: upgrade to PRO</a>
|
|
{{/unless}}
|
|
{{/feature}}
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="menu">
|
|
<a title="@{{home}}" href="#profile" class="button button-dropdown avatar">{{#if gravatar}}<img src="{{gravatar}}">{{/if}}</a>
|
|
<div class="dropdown dd-right" id="profile">
|
|
<div class="dropdowncontent">
|
|
<form method="post" class="login" action="{{root}}/sethome">
|
|
<p class="loginFeedback"></p>
|
|
<div>
|
|
<span class="input" id="username" readonly>
|
|
@{{home}}{{#if user.pro}}<sup class="pro">pro</sup>{{/if}}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<label>Email<br>
|
|
<input name="email" type="email" value="{{email}}"></label>
|
|
</div>
|
|
<div>
|
|
<label>Password<br>
|
|
<input name="password" type="password" value=""></label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Update account">
|
|
<a class="logout" href="#logout">Logout</a>
|
|
</div>
|
|
{{#feature request "github"}}{{#unless user.github_token}}
|
|
<div>
|
|
<span class="login-splitter">or</span>
|
|
<a class="btn-github" href="/auth/github"><img src="{{static}}/images/github-32.png"> Link your Github account</a>
|
|
</div>
|
|
{{/unless}}{{/feature}}
|
|
</form>
|
|
|
|
<form action="{{root}}/logout" method="POST" id="logout">
|
|
<input type="hidden" name="_csrf" value="{{token}}">
|
|
<button hidden>Logout</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/feature}}
|
|
{{else}}
|
|
{{#feature request "sslLogin"}}
|
|
<div class="menu">
|
|
{{#feature request "github"}}
|
|
<a href="/login" class="button button-dropdown focusbtn" id="loginbtn">Login or Register</a>
|
|
<div class="dropdown login" id="registerLogin">
|
|
<div class="dropdowncontent">
|
|
<a class="btn-github" href="/auth/github">
|
|
<img src="{{static}}/images/github-32.png">
|
|
Login or Register via GitHub
|
|
</a>
|
|
<span class="login-group">
|
|
Or
|
|
<a class="btn-login" href="/login">use your email address</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<a href="/login" class="button" id="loginbtn">Login or Register</a>
|
|
{{/feature}}
|
|
</div>
|
|
{{else}}
|
|
<div class="menu">
|
|
<a href="#login" class="button button-open" id="loginbtn">Log in</a>
|
|
<div class="dropdown dd-right" id="login">
|
|
<div class="dropdowncontent">
|
|
<form class="forgot" action="{{root}}/forgot" method="post">
|
|
<div>
|
|
<label>Email<br>
|
|
<input name="email" required type="email"></label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Request password reset">
|
|
<input type="hidden" name="_csrf" value="{{token}}">
|
|
<input type="hidden" name="_redirect" value="home">
|
|
</div>
|
|
</form>
|
|
<form class="login" action="{{root}}/login" method="post">
|
|
<p class="loginFeedback"></p>
|
|
<div>
|
|
<label>Username or Email<br>
|
|
<input name="username" type="text"></label>
|
|
</div>
|
|
<div>
|
|
<label>Password<br>
|
|
<input name="password" type="password"></label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Log in">
|
|
<a id="lostpass" href="{{root}}/forgot">Reset password</a>
|
|
</div>
|
|
{{#feature request "github"}}
|
|
<div>
|
|
<span class="login-splitter">or</span>
|
|
<a title="To sign in using Github and export gists to your Github profile" class="btn-github" href="/auth/github"><img src="{{static}}/images/github-32.png"> Sign in with Github</a>
|
|
</div>
|
|
{{/feature}}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div><div class="menu">
|
|
<a href="#register" class="button button-open focusbtn" id="regbtn">Register</a>
|
|
<div class="dropdown dd-right" id="register">
|
|
<div class="dropdowncontent">
|
|
<p>Registration allows you to retrieve your saved files.</p>
|
|
<form class="login" action="{{root}}/register" method="post">
|
|
<p class="loginFeedback"></p>
|
|
<div>
|
|
<label>Username<br><input required name="username" type="text"></label>
|
|
</div>
|
|
<div>
|
|
<label>Email<br>
|
|
<input name="email" required type="email"></label>
|
|
</div>
|
|
<div>
|
|
<label>Password<br>
|
|
<input required name="password" type="password"></label>
|
|
</div>
|
|
<div>
|
|
<input type=submit value="Register">
|
|
</div>
|
|
{{#feature request "github"}}
|
|
<div>
|
|
<span class="login-splitter">or</span>
|
|
<a class="btn-github" href="/auth/github"><img src="{{static}}/images/github-32.png"> Register with Github</a>
|
|
</div>
|
|
{{/feature}}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/feature}}
|
|
{{/if}}
|
|
{{/unless}}
|
|
|
|
{{#if settings.[ui showblog]}}
|
|
<div class="menu blog">
|
|
<a href="http://jsbin.com/blog" class="button">Blog</a>
|
|
</div>
|
|
{{/if}}
|
|
<div class="menu">
|
|
<a href="#help" class="button button-dropdown">Help</a>
|
|
<div class="dropdown dd-right" id="help">
|
|
<div class="dropdownmenu">
|
|
<a data-shortcut="ctrl+shift+?" data-desc="Discover poweruser keyboard shortcuts" id="showhelp" href="#keyboardHelp">Keyboard shortcuts</a>
|
|
<a data-desc="Shortcut & direct access JS Bin URLs" id="showurls" href="#urls">JS Bin URLs</a>
|
|
<hr data-desc="">
|
|
<a data-desc="Learn about JS Bin features & tricks" target="_blank" href="http://jsbin.com/help">Help topics</a>
|
|
<hr data-desc="">
|
|
<a data-desc="Help make JS Bin better" id="newissue" target="_blank" href="http://github.com/jsbin/jsbin/issues/new">Send feedback & file bugs</a>
|
|
<a data-desc="Help make JS Bin better" target="_blank" href="http://github.com/jsbin/jsbin/">Fork on Github</a>
|
|
<a data-desc="Find out the latest news & info" target="_blank" href="http://twitter.com/js_bin">Follow @js_bin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="bin" class="stretch" style="opacity: 0; filter:alpha(opacity=0);">
|
|
<div id="source" class="binview stretch">
|
|
</div>
|
|
<div id="panelswaiting">
|
|
<div class="code stretch html panel">
|
|
<div class="label menu"><span class="name"><strong><a href="#htmlprocessors" class="fake-dropdown button-dropdown">HTML</a></strong></span><div class="dropdown" id="htmlprocessors">
|
|
<div class="dropdownmenu processorSelector" data-type="html">
|
|
<a href="#html">HTML</a>
|
|
<a href="#markdown">Markdown</a>
|
|
<a href="#jade">Jade</a>
|
|
<a href="#convert">Convert to HTML</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea spellcheck="false" autocapitalize="none" autocorrect="off" id="html"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="code stretch javascript panel">
|
|
<div class="label menu"><span class="name"><strong><a class="fake-dropdown button-dropdown" href="#javascriptprocessors">JavaScript</a></strong></span>
|
|
<div class="dropdown" id="javascriptprocessors">
|
|
<div class="dropdownmenu processorSelector" data-type="javascript">
|
|
<a href="#javascript">JavaScript</a>
|
|
<a href="#coffeescript">CoffeeScript</a>
|
|
<a href="#jsx">JSX (React)</a>
|
|
<a href="#livescript">LiveScript</a>
|
|
<a href="#processing">Processing</a>
|
|
<a href="#traceur">Traceur</a>
|
|
<a href="#typescript">TypeScript</a>
|
|
<a href="#convert">Convert to JavaScript</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea spellcheck="false" autocapitalize="none" autocorrect="off" id="javascript"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="code stretch css panel">
|
|
<div class="label menu"><span class="name"><strong><a class="fake-dropdown button-dropdown" href="#cssprocessors">CSS</a></strong></span>
|
|
<div class="dropdown" id="cssprocessors">
|
|
<div class="dropdownmenu processorSelector" data-type="css">
|
|
<a href="#css">CSS</a>
|
|
<a href="#less">Less</a>
|
|
<a href="#myth">Myth</a>
|
|
{{#feature request "processors"}}
|
|
<a href="#sass" data-label="Sass">Sass <span class="small">with Compass</span></a>
|
|
<a href="#scss" data-label="SCSS">SCSS <span class="small">with Compass</span></a>
|
|
{{/feature}}
|
|
<a href="#stylus">Stylus</a>
|
|
<a href="#convert">Convert to CSS</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="editbox">
|
|
<textarea spellcheck="false" autocapitalize="none" autocorrect="off" id="css"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="stretch console panel">
|
|
<div class="label">
|
|
<span class="name"><strong>Console</strong></span>
|
|
<span class="options">
|
|
<button id="runconsole" title="ctrl + enter">Run</button>
|
|
<button id="clearconsole" title="ctrl + l">Clear</button>
|
|
</span>
|
|
</div>
|
|
<div id="console" class="stretch"><ul id="output"></ul><form>
|
|
<textarea id="exec" spellcheck="false" autocapitalize="none" rows="1" autocorrect="off"></textarea>
|
|
</form></div>
|
|
</div>
|
|
<div id="live" class="stretch live panel">
|
|
<div class="label">
|
|
<span class="name"><strong>Output</strong></span>
|
|
<span class="options">
|
|
<button id="runwithalerts" title="ctrl + enter
|
|
Include alerts, prompts & confirm boxes">Run with JS</button>
|
|
<label>Auto-run JS<input type="checkbox" id="enablejs"></label>
|
|
<a target="_blank" title="Live preview" id="jsbinurl" class="{{#unless code_id}}hidden{{/unless}}" href="{{code_id_path}}"><img src="{{static}}/images/popout.png"></a>
|
|
</span>
|
|
<span class="size"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#unless embed}}
|
|
<form id="saveform" method="post" action="{{code_id_path}}/save">
|
|
<input type="hidden" name="method">
|
|
<input type="hidden" name="_csrf" value="{{token}}">
|
|
</form>
|
|
{{/unless}}
|
|
</div>
|
|
<div id="tip" class="{{#if flash_tip_type}}{{flash_tip_type}}{{/if}}{{#unless flash_tip_type}} notification{{/unless}}">
|
|
<p>
|
|
{{#if flash_tip}}{{{flash_tip}}}{{/if}}
|
|
{{#unless flash_tip}}You can jump to the latest bin by adding <code>/latest</code> to your URL{{/unless}}
|
|
</p>
|
|
<a class="dismiss" href="#">Dismiss x</a>
|
|
</div>
|
|
<div id="keyboardHelp" class="modal">
|
|
<div>
|
|
<h2>Keyboard Shortcuts</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="shortcut">Shortcut</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>ctrl + [num]</td>
|
|
<td>Toggle nth panel</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<small>
|
|
<input type="checkbox" id="enablealt" class="enablealt">
|
|
<label for="enablealt">Require alt key, leaving cmd+1, 2 etc for tab switching.</label>
|
|
</small>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + 0</td>
|
|
<td>Close focused panel</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + enter</td>
|
|
<td>Re-render output.<br>If console visible: run JS in console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Ctrl + l</td>
|
|
<td>Clear the console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + /</td>
|
|
<td>Toggle comment on selected lines</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + [</td>
|
|
<td>Indents selected lines</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + ]</td>
|
|
<td>Unindents selected lines</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tab</td>
|
|
<td>Code complete & <a href="http://docs.emmet.io/" target="_blank">Emmet</a> expand</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + s</td>
|
|
<td>Save & lock current Bin from further changes</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + shift + s</td>
|
|
<td>Clone Bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ctrl + y</td>
|
|
<td>Archive Bin</td>
|
|
</tr>
|
|
<tr><td colspan="2"><small><br><a href="/help/keyboard-shortcuts" target="_blank">Complete list of JS Bin shortcuts</a></small></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="urlHelp" class="modal">
|
|
<div>
|
|
<h2>JS Bin URLs</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="shortcut">URL</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>/</td>
|
|
<td>Show the full rendered output.<br><small>This content will update in real time as it's updated from the /edit url.</small></td>
|
|
</tr>
|
|
<tr>
|
|
<td>/edit</td>
|
|
<td>Edit the current bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/watch</td>
|
|
<td>Follow a Code Casting session</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/embed</td>
|
|
<td>Create an embeddable version of the bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/latest</td>
|
|
<td>Load the very latest bin (/latest goes in place of the revision)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/{{#if home}}{{home}}{{/if}}{{#unless home}}[username]{{/unless}}/last</td>
|
|
<td>View the last edited bin for this user</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/{{#if home}}{{home}}{{/if}}{{#unless home}}[username]{{/unless}}/last/edit</td>
|
|
<td>Edit the last edited bin for this user</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/{{#if home}}{{home}}{{/if}}{{#unless home}}[username]{{/unless}}/last/watch</td>
|
|
<td>Follow the Code Casting session for the latest bin for this user</td>
|
|
</tr>
|
|
<tr>
|
|
<td>/quiet</td>
|
|
<td>Remove analytics and edit button from rendered output</td>
|
|
</tr>
|
|
<tr>
|
|
<td>.js</td>
|
|
<td>Load only the JavaScript for a bin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>.css</td>
|
|
<td>Load only the CSS for a bin</td>
|
|
</tr>
|
|
<tr><td colspan="2"><br><small>Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently.</small></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{{#unless embed}}
|
|
{{#feature request "infocard"}}
|
|
<div hidden>
|
|
<div class="card" id="infocard">
|
|
<header><img>
|
|
<div class="visibility"></div>
|
|
<div class="meta">
|
|
<div class="author">Bin info</div>
|
|
<div class="name"><b></b><span class="pro">pro</span></div><span class="when"><canvas></canvas><time></time></span>
|
|
</div>
|
|
<div class="viewers"><b>0</b><span>viewers</span></div>
|
|
</header>
|
|
<div class="body">
|
|
<ul>
|
|
<li><a href="/clone">Clone</a> </li>
|
|
<li><a class="startingpoint" href="/save-as-template">Save as template</a> </li>
|
|
<li><a class="export-as-gist" href="#export-gist">Export gist</a> </li>
|
|
<li class="owner"><a href="/download">Download</a> </li>
|
|
{{#feature request "delete"}}
|
|
<li class="owner"><a class="deletebin" href="/delete">Delete</a></li>
|
|
{{/feature}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/feature}}
|
|
{{/unless}}
|
|
<!--[if lte IE 8]>
|
|
<script src="{{static}}/js/vendor/jshint/jshint.old.min.js"></script>
|
|
<![endif]-->
|
|
<script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
|
|
{{#if is_production}}
|
|
<script src="{{static}}/js/prod/jsbin-{{version}}.min.js"></script>
|
|
<script>
|
|
start({{{json_template}}}, {{{jsbin}}}, this, document);
|
|
</script>
|
|
{{else}}
|
|
<script>
|
|
window.template = {{{json_template}}};
|
|
window.jsbin = {{{jsbin}}};
|
|
</script>
|
|
{{#if concat}}
|
|
<script src="{{static}}/js/prod/jsbin-{{version}}.js"></script>
|
|
{{else}}
|
|
{{#scripts}}<script src="{{../static}}{{.}}"></script>{{/scripts}}
|
|
{{/if}}
|
|
{{#addons}}<script src="{{../static}}{{.}}"></script>{{/addons}}
|
|
{{/if}}
|
|
{{#if live}}
|
|
<script src="{{static}}/js/vendor/eventsource.js"></script>
|
|
<script src="{{static}}/js/spike.js{{cacheBust}}"></script>
|
|
{{/if}}
|
|
</body>
|
|
</html>
|
|
|