Merge branch 'master' of github.com:remy/jsbin

index.php

@@ -143,7 +143,7 @@ iframe.javascript {
     <p><a class="light" href="#">Revert</a> &mdash; <a class="light" href="#">New milestone</a></p>
   </div>
   <div class="starting">
-    <a class="light" href="#">Use this code as<br /> my starting point</a>
+    <a id="startingpoint" class="light" href="#">Use this code as<br /> my starting point</a>
   </div>
   <div class="help">
     <ul class="flat">
@@ -156,25 +156,10 @@ iframe.javascript {
 <div id="bin" class="stretch javascript">
   <div class="source binview stretch">
     <div class="code stretch javascript">
-      <textarea id="javascript">if (document.getElementById('hello')) {
-  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
-}</textarea>
+      <textarea id="javascript"></textarea>
     </div>
     <div class="code stretch html">
-      <textarea id="html">&lt;!DOCTYPE html&gt;
-&lt;html lang=&quot;en&quot;&gt;
-&lt;head&gt;
-  &lt;meta charset=utf-8 /&gt;
-  &lt;title&gt;JS Bin Sandbox&lt;/title&gt;
-  &lt;style&gt;
-    body { font: 13px Helvetica, Arial; }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;Hello from JS Bin&lt;/p&gt;
-  &lt;p id=&quot;hello&quot;&gt;&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;</textarea>
+      <textarea id="html"></textarea>
     </div>
   </div>
   <div class="preview binview stretch">
@@ -182,10 +167,10 @@ iframe.javascript {
   </div>
 </div>
 <script src="js/vendor/codemirror/codemirror.js" type="text/javascript"></script>
-<script src="/js/vendor/json2.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script src="/js/storage.js"></script>
 <script src="/js/editors.js"></script>
+<script src="/js/app.js"></script>
 </body>
 </html>
 

js/app.js

@@ -0,0 +1,18 @@
+$('#startingpoint').click(function () {
+  if (localStorage) {
+    localStorage.setItem('saved-javascript', editors.javascript.getCode());
+    localStorage.setItem('saved-html', editors.html.getCode());
+  }
+  return false;
+});
+
+// has to be first because we need to set first
+$(window).unload(function () {
+  sessionStorage.setItem('javascript', editors.javascript.getCode());
+  sessionStorage.setItem('html', editors.html.getCode());
+  
+  var panel = getFocusedPanel();
+  sessionStorage.setItem('panel', panel);
+  sessionStorage.setItem('line', editors[panel].currentLine());
+  sessionStorage.setItem('character', editors[panel].cursorPosition().character);
+});

js/editors.js

@@ -1,33 +1,60 @@
-var htmleditor = CodeMirror.fromTextArea('html', {
+var focusPanel = 'javascript';
+var editors = {};
+
+editors.html = CodeMirror.fromTextArea('html', {
   parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js", "parsehtmlmixed.js"],
   stylesheet: ["css/xmlcolors.css", "css/jscolors.css", "css/csscolors.css", "css/htmlcodeframe.css"],
-  path: "js/vendor/codemirror/",
+  path: 'js/vendor/codemirror/',
+  tabMode: 'shift',
   iframeClass: 'stretch codeframe',
   initCallback: function () {
-    var seq = 0;
-    htmleditor.win.document.id = 'html';
-    $(htmleditor.win.document).bind('keydown', keycontrol);
+    setupEditor('html');
   }
 });
 
-var jseditor = CodeMirror.fromTextArea('javascript', {
+editors.javascript = CodeMirror.fromTextArea('javascript', {
   parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
   stylesheet: ["css/jscolors.css", "css/codeframe.css"],
-  path: "js/vendor/codemirror/",
+  path: 'js/vendor/codemirror/',
   iframeClass: 'stretch codeframe javascript',
   tabMode: 'shift',
   initCallback: function () {
-    jseditor.focus();
-    jseditor.selectLines(jseditor.nthLine(sessionStorage.getItem('line')), sessionStorage.getItem('character'));
-    jseditor.win.document.id = 'javascript';
-    $(jseditor.win.document).bind('keydown', keycontrol);
+    setupEditor('javascript');
   }
 });
 
-htmleditor.wrapping.style.position = 'static';
-htmleditor.wrapping.style.height = 'auto';
-jseditor.wrapping.style.position = 'static';
-jseditor.wrapping.style.height = 'auto';
+function focused(event) {
+  focusPanel = this.id;
+  // console.log('focused ' + this.id);
+}
+
+function getFocusedPanel() {
+  return focusPanel;
+}
+
+function setupEditor(panel) {
+  var e = editors[panel];
+  
+  e.wrapping.style.position = 'static';
+  e.wrapping.style.height = 'auto';
+  e.win.document.id = 'html';
+  $(e.win.document).bind('keydown', keycontrol);
+  $(e.win.document).bind('focus', focused);
+  
+  // populate
+  var data = sessionStorage.getItem(panel);
+  var saved = localStorage.getItem('saved-' + panel);
+  if (data) {
+    e.setCode(data);
+  } else if (saved) {
+    e.setCode(saved);
+  }
+  
+  if (sessionStorage.getItem('panel') == panel) {
+    e.focus();
+    e.selectLines(e.nthLine(sessionStorage.getItem('line')), sessionStorage.getItem('character'));
+  }
+}
 
 function keycontrol(event) {
   if (event.ctrlKey == true && event.keyCode == 39 && this.id == 'javascript') {

js/storage.js

@@ -1,38 +1,15 @@
-// has to be first because we need to set first
-$(window).unload(function () {
-  sessionStorage.setItem('javascript', jseditor.getCode());
-  sessionStorage.setItem('html', htmleditor.getCode());
-  sessionStorage.setItem('line', jseditor.currentLine());
-  sessionStorage.setItem('character', jseditor.cursorPosition().character);
-});
-
 if (!window.sessionStorage) {
   window.sessionStorage = (function () {
     var data = window.top.name ? JSON.parse(window.top.name) : {};
 
-    $(window).unload(function () {
-      window.top.name = JSON.stringify(data);
-    });
-    
-    return {    
+    return {
       setItem: function (key, value) {
         data[key] = value;
+        window.top.name = JSON.stringify(data);
       },
       getItem: function (key) {
         return data[key] || undefined;
       }
     };
   })();
-}
-
-(function () {
-  function load(n) {
-    var data = sessionStorage.getItem(n);
-    if (data != null) {
-      document.getElementById(n).value = data;
-    }
-  }
-  
-  load('javascript');
-  load('html');
-})();
+}