Few keyboard shortcuts and tweak to language

jsbin · Mar 27, 2012 · 98bf3f5 · 98bf3f5
1 parent b3ddc04
commit 98bf3f5
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 19 deletions.
diff --git a/css/style.css b/css/style.css
@@ -2009,17 +2009,24 @@ div.CodeMirror-selected { background: #d9d9d9; }
 
 .label {
   /*overflow: hidden;*/
+  /*min-height: 34px;*/
+  /*line-height: 34px;*/
+  padding: 10px;
+}
+
+.label label {
+  margin: 0;
 }
 
 .label .options {
   float: right;
   display: block;
-  height: 35px;
-  margin-right: 10px;
+  /*height: 35px;*/
+  /*margin-right: 10px;*/
 }
 
 .label .options label {
-  height: 35px;
+  /*height: 35px;*/
   display: inline-block;
   cursor: pointer;
 }

diff --git a/index.php b/index.php
@@ -129,8 +129,8 @@
       <div class="label">
         <strong>Live Preview</strong>
         <span class="options">
-          <button id="runwithalerts">Run with alerts</button>
-          <label>Disable JS<input type="checkbox" id="disablejs" checked></label>
+          <button id="runwithalerts">Run JS with alerts</button>
+          <label>Include JS<input type="checkbox" id="enablejs"></label>
         </span>
       </div>
     </div>

diff --git a/js/chrome/app.js b/js/chrome/app.js
@@ -61,7 +61,6 @@ $document.one('jsbinReady', function () {
 
   // $sp1.filter(':visible').trigger('init', (splitterSettings[0] || {x:null}).x);
   // $sp2.filter(':visible').trigger('init', (splitterSettings[1] || {x:null}).x);
-  console.log('>>>>>>>> ready');
   $bin.removeAttr('style').addClass('ready');
 });
 

diff --git a/js/chrome/navigation.js b/js/chrome/navigation.js
@@ -181,7 +181,7 @@ $('#runwithalerts').click(function () {
 
 // TODO memorise
 editors.live.disablejs = jsbin.settings.disablejs;
-$('#disablejs').change(function () {
-  jsbin.settings.disablejs = editors.live.disablejs = this.checked;
+$('#enablejs').change(function () {
+  jsbin.settings.disablejs = editors.live.disablejs = !this.checked;
   editors.live.render();
-}).attr('checked', jsbin.settings.disablejs ? true : false);
+}).attr('checked', jsbin.settings.disablejs ? false : true);
diff --git a/js/editors/editors.js b/js/editors/editors.js
@@ -120,6 +120,15 @@ panels.distribute = function () {
   }
 };
 
+panels.show = function (panelId) {
+  this.panels[panelId].show();
+  if (this.panels[panelId].editor) {
+    this.panels[panelId].editor.focus();
+  }
+}
+
+panels.focused = null;
+
 // dirty, but simple
 Panel.prototype.distribute = function () {
   panels.distribute();

diff --git a/js/editors/keycontrol.js b/js/editors/keycontrol.js
@@ -3,9 +3,21 @@
 
 var keyboardHelpVisible = false;
 
-function keycontrol(panel, event) {
+$body.keydown(keycontrol);
+
+var panelShortcuts = {
+  49: 'javascript',
+  50: 'css',
+  51: 'html',
+  52: 'console',
+  53: 'live'
+};
+
+function keycontrol(event) {
   event = normalise(event);
 
+  var panel = jsbin.panels.focused ? jsbin.panels.focused.editor : {};
+
   // these should fire when the key goes down
   if (event.type == 'keydown') {
     if (panel.id == 'javascript') {
@@ -15,6 +27,21 @@ function keycontrol(panel, event) {
       }
     }
 
+    // shortcut for showing a panel
+    if (panelShortcuts[event.which] !== undefined && event.altKey && event.metaKey) {
+      jsbin.panels.show(panelShortcuts[event.which]);
+      event.stop();
+    } else if (event.which === 27 && event.altKey) {
+      jsbin.panels.focused.hide();
+      var visible = jsbin.panels.getVisible();
+      if (visible.length) {
+        jsbin.panels.focused = visible[0];
+        if (visible[0].editor) {
+          visible[0].editor.focus();
+        }
+      }
+    }
+
     if (event.which == 191 && event.shiftKey && event.metaKey) {
       // show help
       $body.toggleClass('keyboardHelp');

diff --git a/js/editors/libraries.js b/js/editors/libraries.js
@@ -59,10 +59,11 @@ Libraries.prototype.init = function () {
     jquerymobile : {
       text: 'jQuery Mobile',
       requires: 'http://code.jquery.com/jquery-1.6.4.min.js',
-      style: 'http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0.min.css',
+      style: 'http://code.jquery.com/mobile/latest/jquery.mobile.css',
       scripts: [
-        { text: 'jQuery Mobile 1.0', url: 'http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js' },
-        { text: 'jQuery Mobile 1.0b3', url: 'http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js' }
+        { text: 'jQuery Mobile Latest', url: 'http://code.jquery.com/mobile/latest/jquery.mobile.js' },
+        { text: 'jQuery Mobile 1.0.1', url: 'http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.1.min.js' },
+        { text: 'jQuery Mobile 1.1.0rc1', url: 'http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.js' }
       ]
     },
     others: {

diff --git a/js/editors/panel.js b/js/editors/panel.js
@@ -9,7 +9,7 @@ var editorModes = {
 var Panel = function (name, settings) {
   var panel = this;
   panel.settings = settings = settings || {};
-  panel.name = name;
+  panel.id = panel.name = name;
   panel.$el = $('.panel.' + name);
   panel.el = document.getElementById(name);
   panel.order = Panel.order++;
@@ -66,9 +66,9 @@ var Panel = function (name, settings) {
   });
   this.controlButton.appendTo('#panels');
 
-  this.$el.find('.label').prepend('<a href="#close" class="close"></a>').find('.close').click(function () {
-    panel.hide();
-  });
+  // this.$el.find('.label').prepend('<a href="#close" class="close"></a>').find('.close').click(function () {
+  //   panel.hide();
+  // });
 
   panel.hide();
 }
@@ -162,8 +162,10 @@ Panel.prototype = {
       return pos.line;
     };
 
-    editor.setOption('onKeyEvent', keycontrol);
-    this.settings.focus && editor.setOption('onFocus', $.proxy(this.settings.focus, this));
+    // editor.setOption('onKeyEvent', keycontrol);
+    editor.setOption('onFocus', function () {
+      jsbin.panels.focused = panel;
+    });
 
     editor.id = panel.name;