Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: jsbin/jsbin
...
head fork: jsbin/jsbin
Checking mergeability… Don't worry, you can still create the pull request.
  • 4 commits
  • 8 files changed
  • 0 commit comments
  • 1 contributor
View
22 app.php
@@ -23,11 +23,22 @@
$action = array_pop($request);
+if (stripos($action, '.') !== false) {
+ $parts = split('\.', $action);
+ array_push($request, $parts[0]);
+ $action = $parts[1];
+}
+
// remove the home path section from the request so we can correctly read the next action
if ($action == $home) {
$action = array_pop($request);
}
+// allow us to request .html
+if ($action == 'html') {
+ $action = array_pop($request);
+}
+
$quiet = false;
if ($action == 'quiet') {
$quiet = true;
@@ -104,8 +115,7 @@
// could be listed under a user OR could be listing all the revisions for a particular bin
exit();
-} else if ($action == 'source' || $action == 'js') {
- header('Content-type: text/javascript');
+} else if ($action == 'source' || $action == 'js' || $action == 'css' || $action == 'json') {
list($code_id, $revision) = getCodeIdParams($request);
$edit_mode = false;
@@ -117,8 +127,16 @@
}
if ($action == 'js') {
+ header('Content-type: text/javascript');
+ echo $javascript;
+ } else if ($action == 'json') {
+ header('Content-type: application/json');
echo $javascript;
+ } else if ($action == 'css') {
+ header('Content-type: text/css');
+ echo $css;
} else {
+ header('Content-type: application/json');
$url = $host . ROOT . $code_id . ($revision == 1 ? '' : '/' . $revision);
if (!$ajax) {
echo 'var template = ';
View
20 css/style.css
@@ -1947,7 +1947,8 @@ a.button.active:hover {
/*box-shadow: inset 0 1px 6px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05) !important;*/
}
-.open .button-dropdown {
+.open .button-dropdown,
+.open .button-dropdown:hover {
background: #eee;
}
@@ -2207,9 +2208,26 @@ a.button.active:hover {
}
}
+#panelswaiting {
+ display: none;
+}
+#actionmenu {
+ top: 100%;
+ left: -10px;
+ padding: 0;
+}
+#actionmenu .dropdownmenu {
+ margin: 3px 0;
+}
+#actionmenu .button {
+ padding: 5px 30px 5px 15px;
+}
+#savebtn {
+ width: 50px;
+}
View
111 index.php
@@ -35,24 +35,23 @@
<div id="control">
<div class="control">
<div class="buttons">
+ <a id="savebtn" href="<?php echo ROOT?>save" class="save title button">Save</a>
<div class="menu">
- <div class="group">
- <a href="<?php echo ROOT?>save" class="save title button">Save</a><a href="#savemenu" class="button button-dropdown"><span class="icon icon-chevron-down"></span></a>
- </div>
- <div class="dropdown" id="savemenu">
+ <a href="#actionmenu" class="button button-dropdown group"><span class="icon icon-chevron-down"></span></a>
+ <div class="dropdown" id="actionmenu">
<div class="dropdownmenu">
-<?php if ($code_id) : ?>
+ <a id="createnew" class="button group" title="Create fresh bin" href="<?=ROOT?>">New</a>
+ <?php if ($code_id) : ?>
<a id="clone" title="Create a new copy" class="button clone group" href="<?php echo ROOT?>clone">Clone</a>
- <a id="save" title="Save new a new revision" class="button save group" href="<?php echo $code_id_path?>save">Save</a>
-<?php else : ?>
- <a id="save" title="Save new bin" class="button save group" href="<?php echo ROOT?>save">Save</a>
-<?php endif ?>
- <a id="download" title="Save to drive" class="button download group" href="<?php echo ROOT?>download">Download</a>
- <a id="startingpoint" title="Set as starting code" class="button group" href="<?php echo ROOT?>save">As template</a>
+ <!-- <a id="save" title="Save new a new revision" class="button save group" href="<?php echo $code_id_path?>save">Save</a> -->
+ <?php else : ?>
+ <!-- <a id="save" title="Save new bin" class="button save group" href="<?php echo ROOT?>save">Save</a> -->
+ <?php endif ?>
+ <a id="startingpoint" title="Set as starting code" class="button group" href="<?php echo ROOT?>save">Save as template</a>
+ <a id="download" title="Save to local drive" class="button download group" href="<?php echo ROOT?>download">Download</a>
</div>
</div>
</div>
- <a id="createnew" class="button group" href="<?=ROOT?>">New</a>
<div id="panels"></div>
</div>
</div>
@@ -82,18 +81,8 @@
</div>
<div id="bin" class="stretch" style="opacity: 0; filter:alpha(opacity=0);">
<div id="source" class="binview stretch">
- <div class="code stretch javascript panel">
- <div class="label"><strong>JavaScript</strong></div>
- <div class="editbox">
- <textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="javascript"></textarea>
- </div>
- </div>
- <div class="code stretch css panel">
- <div class="label"><strong id="csslabel">CSS</strong></div>
- <div class="editbox">
- <textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="css"></textarea>
- </div>
- </div>
+ </div>
+ <div id="panelswaiting">
<div class="code stretch html panel">
<div class="label">
<strong>HTML</strong>
@@ -114,6 +103,18 @@
<textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="html"></textarea>
</div>
</div>
+ <div class="code stretch javascript panel">
+ <div class="label"><strong>JavaScript</strong></div>
+ <div class="editbox">
+ <textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="javascript"></textarea>
+ </div>
+ </div>
+ <div class="code stretch css panel">
+ <div class="label"><strong id="csslabel">CSS</strong></div>
+ <div class="editbox">
+ <textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="css"></textarea>
+ </div>
+ </div>
<div class="stretch console panel">
<div class="label"><strong>Console</strong></div>
<div id="console" class="stretch"><ul id="output"></ul></div>
@@ -240,5 +241,67 @@
<?php
showSaved($home);
?>
+<div id="urlHelp" class="modal">
+ <div>
+ <p>Where the url may be http://jsbin.com/abc the following url fragments can be added to the url to view it differently.</p>
+ <h2>JS Bin URLs</h2>
+ <table>
+ <thead>
+ <tr>
+ <th class="shortcut">URL</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>/edit</td>
+ <td>Edit the current bin</td>
+ </tr>
+ <tr>
+ <td>/edit</td>
+ <td>Edit the current bin</td>
+ </tr>
+ <tr>
+ <td>/</td>
+ <td>Hide focused panel</td>
+ </tr>
+ <tr>
+ <td>ctrl + enter</td>
+ <td>If console visible: run JS in console<br>If live visible: render with alerts, prompts &amp; confirms</td>
+ </tr>
+ <tr>
+ <td>ctrl + /</td>
+ <td>Toggle comment on single line</td>
+ </tr>
+ <tr>
+ <td>ctrl + alt + .</td>
+ <td>Close current HTML element</td>
+ </tr>
+ <tr>
+ <td>esc</td>
+ <td>Code complete (JavaScript only) and close open overlays - like this</td>
+ </tr>
+ <tr>
+ <td>ctrl + s</td>
+ <td>Save current Bin</td>
+ </tr>
+ <tr>
+ <td>ctrl + shift + s</td>
+ <td>Clone current Bin</td>
+ </tr>
+ <tr>
+ <td>tab</td>
+ <td>Indents selected lines</td>
+ </tr>
+ <tr>
+ <td>shift + tab</td>
+ <td>Unindents selected lines</td>
+ </tr>
+ <tr><td colspan="2"><br><small>Note that Mac users can use cmd in place of ctrl</small></td></tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
</body>
</html>
View
7 js/chrome/navigation.js
@@ -101,7 +101,7 @@ var dropdownButtons = $('.button-dropdown').click(function (e) {
e.preventDefault();
})
-$('.menu').has('.dropdown').hover(function (event) {
+$('.menu').has('.dropdown.hover').hover(function (event) {
console.log(event.target)
if ($(event.target).is('.button-dropdown')) {
opendropdown(this);
@@ -114,9 +114,8 @@ $('.menu').has('.dropdown').hover(function (event) {
}
});
-$('.button-dropdown').mouseover(function () {
- opendropdown(this);
- onhover = true;
+$('#actionmenu').click(function () {
+ dropdownOpen = true;
})
$body.click(function (event) {
View
57 js/editors/editors.js
@@ -5,10 +5,10 @@
//= require "panel"
//= require "../render/live"
//= require "../render/console"
+//= require "keycontrol"
var panels = {};
-
panels.getVisible = function () {
var panels = this.panels,
visible = [];
@@ -182,10 +182,12 @@ Panel.prototype.distribute = function () {
jsbin.panels = panels;
var editors = panels.panels = {
- javascript: new Panel('javascript', { editor: true, label: 'JavaScript', nosplitter: true }),
- css: new Panel('css', { editor: true, label: 'CSS' }),
html: new Panel('html', { editor: true, label: 'HTML' }),
- console: new Panel('console', { label: 'Console', init: function () { this.render(); } }),
+ css: new Panel('css', { editor: true, label: 'CSS' }),
+ javascript: new Panel('javascript', { editor: true, label: 'JavaScript', init: function () {
+ // checkForErrors();
+ } }),
+ console: new Panel('console', { label: 'Console' }),
live: new Panel('live', { label: 'Output', show: function () {
// contained in live.js
$(document).bind('codeChange.live', function (event, data) {
@@ -198,7 +200,7 @@ var editors = panels.panels = {
}
});
renderLivePreview();
- }})
+ } })
};
@@ -245,12 +247,49 @@ Panel.prototype.hide = function () {
panels.restore();
panels.focus(panels.getVisible()[0] || null);
+// allow panels to be reordered
+(function () {
+ var panelsEl = document.getElementById('panels'),
+ moving = null;
+
+ panelsEl.ondragstart = function (e) {
+ if (e.target.nodeName == 'A') {
+ moving = e.target;
+ } else {
+ return false;
+ }
+ };
+
+ panelsEl.ondragover = function (e) {
+ console.log(e)
+ return false;
+ };
+
+ panelsEl.ondragend = function () {
+ moving = false;
+ return false;
+ };
+
+ panelsEl.ondrop = function (e) {
+ console.log(e.dataTransfer);
+ if (moving) {
+
+ }
+ return false;
+ };
+
+}());
+
var editorsReady = setInterval(function () {
var ready = true,
- resizeTimer = null;
- for (var panel in panels.panels) {
- if (!panels.panels[panel].ready) ready = false;
+ resizeTimer = null,
+ panel,
+ panelId;
+
+ for (panelId in panels.panels) {
+ panel = panels.panels[panelId];
+ if (panel.visible && !panel.ready) ready = false;
}
panels.ready = ready;
@@ -272,5 +311,3 @@ var editorsReady = setInterval(function () {
$document.trigger('jsbinReady');
}
}, 100);
-
-//= require "keycontrol"
View
15 js/editors/keycontrol.js
@@ -5,13 +5,14 @@ var keyboardHelpVisible = false;
$body.keydown(keycontrol);
-var panelShortcuts = {
- 49: 'javascript', // 1
- 50: 'css', // 2
- 51: 'html', // 3
- 52: 'console', // 4
- 53: 'live' // 5
-};
+var panelShortcuts = {}
+// 49: 'javascript', // 1
+// 50: 'css', // 2
+// 51: 'html', // 3
+// 52: 'console', // 4
+// 53: 'live' // 5
+// };
+panelShortcuts.start = 48;
// work out the browser platform
var ua = navigator.userAgent;
View
15 js/editors/panel.js
@@ -1,4 +1,5 @@
-var $document = $(document);
+var $document = $(document),
+ $source = $('#source');
var editorModes = {
html: 'htmlmixed',
@@ -10,9 +11,17 @@ var Panel = function (name, settings) {
var panel = this;
panel.settings = settings = settings || {};
panel.id = panel.name = name;
- panel.$el = $('.panel.' + name);
+ panel.$el = $('.panel.' + name).remove();
+ panel.$el.appendTo($source);
panel.el = document.getElementById(name);
- panel.order = Panel.order++;
+ panel.order = ++Panel.order;
+
+ // keyboard shortcut (set in keyboardcontrol.js)
+ panelShortcuts[panelShortcuts.start + panel.order] = panel.id;
+
+ if (panel.order === 1) {
+ settings.nosplitter = true;
+ }
var splitterSettings = {};
View
3  js/render/console.js
@@ -506,7 +506,8 @@ jsconsole.init = function () {
editors.console.settings.render = function () {
// TODO decide whether we should also grab all the JS in the HTML panel
// jsconsole.reset();
- jsconsole.run(editors.javascript.render());
+ var code = editors.javascript.render();
+ if ($.trim(code)) jsconsole.run(code);
};
editors.console.settings.show = function () {
if (editors.live.visible) {

No commit comments for this range

Something went wrong with that request. Please try again.