2015-01-28 07:35:57 +02:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Create a new tinker - JSTinker</title>
|
|
|
|
|
|
<!-- JSTinker Style -->
|
|
|
|
|
|
<link rel="stylesheet" href="css/style.css" type="text/css">
|
|
|
|
|
|
<!-- Latest jQuery from Google CDN -->
|
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
|
|
|
|
<!-- Crypto JS -->
|
|
|
|
|
|
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
|
|
|
|
|
|
<!-- Beautify Web - HTML, CSS, JS -->
|
|
|
|
|
|
<script src="js/beautify-web/beautify-html.js"></script>
|
|
|
|
|
|
<script src="js/beautify-web/beautify-css.js"></script>
|
|
|
|
|
|
<script src="js/beautify-web/beautify.js"></script>
|
|
|
|
|
|
<!-- Ace Editor -->
|
|
|
|
|
|
<script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
|
<!-- JSTinker Scripts -->
|
|
|
|
|
|
<script src="js/index.js"></script>
|
|
|
|
|
|
<!-- Latest compiled and minified CSS -->
|
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
|
|
|
|
|
<!-- Optional theme -->
|
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
|
|
|
|
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
|
|
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<nav class="navbar navbar-default">
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
|
|
|
|
<div class="navbar-header">
|
|
|
|
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar">
|
|
|
|
|
|
<span class="sr-only">Toggle toolbar</span>
|
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> JSTinker</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
|
|
|
|
<div class="collapse navbar-collapse" id="toolbar">
|
|
|
|
|
|
<ul class="nav navbar-nav">
|
|
|
|
|
|
<li id="btnRun"><a href=""><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Run</a></li>
|
|
|
|
|
|
<li id="btnSave"><a href=""><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Save</a></li>
|
|
|
|
|
|
<li id="btnTidyUp"><a href=""><span class="glyphicon glyphicon-flash" aria-hidden="true"></span> TidyUp</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div><!-- /.navbar-collapse -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Dialog Modals -->
|
|
|
|
|
|
<div class="modal fade" id="modalSave" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
|
|
|
|
|
|
<div class="modal-dialog modal-lg">
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
|
|
|
|
<h4 class="modal-title" id="mySmallModalLabel">Save URL</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<!-- Content provided by JS -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div><!-- /.modal-content -->
|
|
|
|
|
|
</div><!-- /.modal-dialog -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<!-- Sidebar -->
|
|
|
|
|
|
<div class="col-md-3" id="sidebar">
|
|
|
|
|
|
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
|
|
|
|
|
<!-- Frameworks & Extensions -->
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
|
<div class="panel-heading" role="tab" id="headingOne">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
|
|
|
|
Frameworks & Extensions
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
<div class="dropdown">
|
|
|
|
|
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
|
|
|
|
|
|
No-Library (pure JS)
|
|
|
|
|
|
<span class="caret"></span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
|
|
|
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="">No-Library (pure JS)</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<div class="dropdown">
|
|
|
|
|
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
|
|
|
|
|
|
onLoad
|
|
|
|
|
|
<span class="caret"></span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
|
|
|
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="">onLoad</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Tinker Options -->
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
|
<div class="panel-heading" role="tab" id="headingTwo">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
|
|
|
|
|
Tinker Options
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
Stuff
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- External Resources -->
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
|
<div class="panel-heading" role="tab" id="headingThree">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
|
|
|
|
|
|
External Resources
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
Stuff
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Languages -->
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
|
<div class="panel-heading" role="tab" id="headingFour">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
|
|
|
|
|
|
Languages
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
Stuff
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Ajax Requests
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
|
<div class="panel-heading" role="tab" id="headingFive">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
|
|
|
|
|
|
Ajax Requests
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
Stuff
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<!-- Legal, Credits and Links -->
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
|
<div class="panel-heading" role="tab" id="headingSix">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
|
|
|
|
|
|
Legal, Credits and Links
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
<p>Created and maintained by <a title="John's homepage" href="http://johncipponeri.github.io/">John Cipponeri</a>.</p>
|
|
|
|
|
|
<p>Hosted by <a href="https://pages.github.com/">GitHub Pages</a>.</p>
|
|
|
|
|
|
<p>Special thanks to <a href="http://jsfiddle.net" target="_new">JSFiddle</a> as this is an open source clone of it.</p>
|
|
|
|
|
|
<p><strong>License</strong></p>
|
|
|
|
|
|
<p>All code belongs to the poster and no license is enforced.</p>
|
|
|
|
|
|
<p>JSTinker or its author are not responsible or liable for any loss or damage of any kind during the usage of provided code.</p>
|
|
|
|
|
|
<p><strong>Links</strong></p>
|
|
|
|
|
|
For updates please follow my
|
|
|
|
|
|
<a href="http://twitter.com/johncipponeri/" target="_new">tweets</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2015-01-31 22:41:22 +02:00
|
|
|
|
</div><!-- /sidebar -->
|
2015-01-28 07:35:57 +02:00
|
|
|
|
<!-- HTML Editor -->
|
|
|
|
|
|
<div class="col-md-4 editorContainer">
|
|
|
|
|
|
<div class="editor" id="html-editor"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- CSS EDitor -->
|
|
|
|
|
|
<div class="col-md-4 editorContainer">
|
|
|
|
|
|
<div class="editor" id="css-editor"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- JS Editor -->
|
|
|
|
|
|
<div class="col-md-4 editorContainer">
|
|
|
|
|
|
<div class="editor" id="js-editor"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Preview -->
|
|
|
|
|
|
<div class="col-md-4 editorContainer">
|
2015-01-31 22:41:22 +02:00
|
|
|
|
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
|
|
|
|
|
|
#document
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
2015-01-28 07:35:57 +02:00
|
|
|
|
<!-- Editor content goes here -->
|
2015-01-31 22:41:22 +02:00
|
|
|
|
</iframe>
|
2015-01-28 07:35:57 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div><!-- /.container-fluid -->
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Editor Script -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var htmlEditor = ace.edit("html-editor");
|
|
|
|
|
|
htmlEditor.setTheme("ace/theme/crimson-editor");
|
|
|
|
|
|
htmlEditor.getSession().setMode("ace/mode/html");
|
|
|
|
|
|
|
|
|
|
|
|
var cssEditor = ace.edit("css-editor");
|
|
|
|
|
|
cssEditor.setTheme("ace/theme/crimson-editor");
|
|
|
|
|
|
cssEditor.getSession().setMode("ace/mode/css");
|
|
|
|
|
|
|
|
|
|
|
|
var jsEditor = ace.edit("js-editor");
|
|
|
|
|
|
jsEditor.setTheme("ace/theme/crimson-editor");
|
|
|
|
|
|
jsEditor.getSession().setMode("ace/mode/javascript");
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
