bootstrapping.js

try {
 
var RIGHTCURLYBRACE = "}", LEFTCURLYBRACE = "{";
  
  // bookmarklet to kick things off
  //javascript:function%20runCode(e)%20%7Be.preventDefault();eval(document.getElementById(%22codearea%22).value);return%20false;%7D;(function()%7Ba=document.createElement(%22div%22);b=document.body.appendChild(a);b.style.background=%22%23eeeeee%22;b.style.width=%22100%25%22;b.style.height=%22100px%22;b.innerHTML='%3Ctextarea%20id=%22codearea%22%3E%3C/textarea%3E%3Cbutton%20id=%22runcodebutton%22%3ERun%3C/button%3E';document.getElementById('runcodebutton').addEventListener(%22click%22,runCode);a.style.position=%22absolute%22;a.style.top=%220px%22;document.getElementById(%22codearea%22).value=window.localStorage.getItem(%22codeMSG%22);a.style.zIndex=%221000%22%7D)();
  
  function bootstrap() {
   
   var startTheDance = 5000;
   
   // get ourself 
   var codeArea = document.getElementById("codearea");
   
   function trim(text) {
    text = text.replace(/(^\s*)|(\s*$)/gi,"");
   text = text.replace(/[ ]{2,}/gi," ");
    text = text.replace(/\n /,"\n");
    return text;
   }
   
   function indent(text) {
    
    var lines = text.split("\n");
    var currentDepth = 0;
    
    for(var i = 0; i < lines.length; ++i) {
     
     var line = lines[i];
     // have to use constants to avoid the line containing the token itself getting split 
     currentDepth -= line.split(RIGHTCURLYBRACE).length - 1;
     
     if(currentDepth > 0){
      line=Array(currentDepth + 1).join(" ") + line;
      lines[i] = line;
     }
     
     currentDepth += line.split(LEFTCURLYBRACE).length - 1;
    }
    return lines.join("\n");
   }
   
   codeArea.value=trim(codeArea.value);
   
   //thisArea.value=thisArea.value.replace(/{/g,"{\n");
   // thisArea.value=thisArea.value.replace(/}/g,"} \n");
   //thisArea.value=thisArea.value.replace(/;/g,";\n");
   
   var runButton = document.getElementById("runcodebutton");
   runButton.style.width = "100%";
   runButton.style.height = "80px";
   runButton.style.border = "1px solid #aa9af77";
   runButton.style.backgroundColor = "#ffefbb";
   runButton.style.fontSize = "40px";
   runButton.style.position = "absolute";
   runButton.style.top = 0;
   
   
   // disable auto capitalisation and other 'helpful' things 
   codeArea.autocapitalize = "off";
   codeArea.autocorrect = "off";
   codeArea.autocomplete = "off";
   codeArea.spellcheck = "false";
   
   // flash the background blue for 100ms at end of function
   codeArea.style.backgroundColor="grey";
   function resetBackground(){
    codeArea.style.backgroundColor="white";
   }
   
   setTimeout(resetBackground,100);
   
   // auto reindents the code 
   codeArea.value = indent(codeArea.value);
   
   // Save ourselves! 
   window.localStorage.setItem("codeMSG",codeArea.value);
   
   var dialogButtonStyle = document.createElement("style");
  dialogStyle = ".ideDialog {height:300px;width:70%;left:15%;top:30%;position:absolute;background:white;z-index:1000;border:1px solid white;box-shadow:6px 6px 30px 6px grey;}\n";
  dialogStyle += ".dialogButton {width:40%;height:80px;border:1px solid black;background:#ddddff;font-size:40px;}\n";
   dialogButtonStyle.innerHTML = dialogStyle;
   document.body.appendChild(dialogButtonStyle);
   
   function showOpenDialog() {
    var editor = null;
    if(arguments.length === 2) {
     editor = arguments[0]; 
    }
    var index = window.localStorage.getItem("index");
    
    if(index === null) {
    index = {};
    } else {
     index = JSON.parse(index);
    } 
    
    var indexSize = 0;
    var itemString = "";
    for(key in index) {
     ++indexSize;
     itemString += index[key] + "\n";
    }
    
    if(document.getElementById("openDialog") === null) {
     var openDialog = document.createElement("div");
     openDialog.id = "openDialog";
     openDialog.className = "ideDialog"; 
     
     var selectControl = document.createElement("select");
     selectControl.id = "openDialogSelectControl";
     selectControl.size = "5";
     selectControl.style.width = "70%";
     selectControl.style.height = "50px"; 
     selectControl.style.border = "1px solid #ccccee";
     selectControl.style.fontSize = "40px";
     // Populate with the saved document names
     for(key in index) {
      var optionControl = document.createElement("option");
      optionControl.innerHTML = key;
      optionControl.value = index[key];
      selectControl.appendChild(optionControl);
     }
     openDialog.appendChild(selectControl);
     
     var openButton = document.createElement("button");
     openButton.innerHTML = "Open";
     openButton.className = "dialogButton";
     
     function openDocument() {
      var codeArea = document.getElementById("codearea");
      var documentKey = document.getElementById("openDialogSelectControl").value;
      
      codeArea.value = window.localStorage.getItem(documentKey);
      if(editor !== null) {
       editor.getDoc().setValue(window.localStorage.getItem(documentKey));
      }
     }
     
     openButton.addEventListener("click",openDocument); 
     openDialog.appendChild(openButton);
     
     var closeDialogButton = document.createElement("button");
     closeDialogButton.className = "dialogButton";
     
     closeDialogButton.innerHTML = "Close";
     function closeOpenDialog() {
      if(document.getElementById("openDialog") !== null) {
       var openDialog = document.getElementById("openDialog");
       document.body.removeChild(openDialog);
      }
     }
     closeDialogButton.addEventListener("click",closeOpenDialog);
     openDialog.appendChild(closeDialogButton);
     document.body.appendChild(openDialog);
    }
    
   }
   
   function showSaveDialog() {
    
    if(document.getElementById("saveDialog") === null) {
     var saveDialog = document.createElement("div");
     saveDialog.id = "saveDialog";
     	 saveDialog.className = "ideDialog";
     
     // Create field to get the name under which to save the document
     var nameInputField = document.createElement("input");
     nameInputField.type = "text";
     nameInputField.id = "saveNameInputField";
     nameInputField.style.width = "90%";
     nameInputField.style.fontSize = "40px";
     saveDialog.appendChild(nameInputField);
     
     var saveButton = document.createElement("button");
     saveButton.innerHTML = "Save";
     saveButton.className = "dialogButton";
     
     function saveDocument() {
      var nameInputField = document.getElementById("saveNameInputField");
      var codeArea = document.getElementById("codearea");
      
      var index = window.localStorage.getItem("index");
      
     if(index === null) index = {};
      else index = JSON.parse(index);
      
      index[nameInputField.value] = "Document-" + nameInputField.value;
      window.localStorage.setItem("index", JSON.stringify(index));
      window.localStorage.setItem("Document-" + nameInputField.value, codeArea.value); 
     }
     
     saveButton.addEventListener("click", saveDocument); 
     saveDialog.appendChild(saveButton);
     
     var closeDialogButton = document.createElement("button");
     closeDialogButton.className = "dialogButton";
     
     closeDialogButton.innerHTML = "Close";
     function closeSaveDialog() {
      if(document.getElementById("saveDialog") !== null) {
       var saveDialog = document.getElementById("saveDialog");
       document.body.removeChild(saveDialog);
      }
     }
     closeDialogButton.addEventListener("click", closeSaveDialog);
     saveDialog.appendChild(closeDialogButton);
     document.body.appendChild(saveDialog);
    }
   }
   
   // Create an 'open' button if it doesn't already exist
   if(document.getElementById("openButton") === null) {
    var openButton = document.createElement("button");
    openButton.id = "openButton";
    
    openButton.addEventListener("click", showOpenDialog);
    var container = codeArea.parentNode;
    container.appendChild(openButton);
   }
   
   var bigButtonStyle = document.createElement("style");
  bigButtonStyle.innerHTML =".bigButton {width:50%;height:80px;border:1px solid black;background:#ddddff;font-size:40px;position:absolute;top:580px;}\n";
   document.body.appendChild(bigButtonStyle);
   
   var openButton = document.getElementById("openButton");
   openButton.innerHTML = "Open";
   openButton.className = "bigButton";
   
   // Create a 'save' button, unless it already exists
   if(document.getElementById("saveButton") === null) {
    var saveButton = document.createElement("button");
    saveButton.id = "saveButton";
    
    saveButton.addEventListener("click", showSaveDialog);
    
    var container = codeArea.parentNode;
    container.appendChild(saveButton);
   }
   
   
   var saveButton = document.getElementById("saveButton");
   saveButton.innerHTML = "Save";
   saveButton.style.left = "50%";
   saveButton.className = "bigButton";
   
   // Inject style file into the end of the document body
   var requireStyle = function(name) {
    var styleElement = document.createElement("style");
    styleElement.innerHTML = window.localStorage.getItem("Document-" + name);
    document.body.appendChild(styleElement);
   };
   // Inject script into the end of the document body
   var requireScript = function(name) {
    var scriptElement = document.createElement("script");
    scriptElement.innerHTML=window.localStorage.getItem("Document-" + name);
    document.body.appendChild(scriptElement);
   };
   
   // Require the CodeMirror source, plus JavaScript mode, and Vim keymap
   requireScript("codemirror.js");
   requireScript("mode.javascript.js");
   requireScript("keymap.vim.js");
   requireStyle("codemirror.css");
   
   // Add style element to override root codemirror style
   var codeMirrorStyleElement = document.createElement("style");
  codeMirrorStyleElement.innerHTML =".CodeMirror {margin:80px 0px 0px 0px;height:500px;}\n";
   document.body.appendChild(codeMirrorStyleElement);
   
   setTimeout(function() {
    try {
     var codeArea=document.getElementById("codearea");
     var editor = CodeMirror.fromTextArea(codeArea, {
      lineNumbers: true,
      mode: "javascript",
      keyMap: "vim",
      gutters: ["CodeMirror-lint-markers"],
      lint: true
     });
     document.getElementById("runcodebutton").removeEventListener("click", runCode);
    document.getElementById("runcodebutton").addEventListener("click", function(e) {editor.save();e.preventDefault();eval(document.getElementById("codearea").value);return false;});
    document.getElementById("saveButton").addEventListener("click", function() {editor.save();});
     document.getElementById("openButton").removeEventListener("click", showOpenDialog);
     document.getElementById("openButton").addEventListener("click", showOpenDialog.bind(this,editor));
     
    } catch(e) {
     alert(e);
    };
    
   }, startTheDance);
   
   codeArea.style.width = "85%";
   codeArea.style.height="500px";
   codeArea.style.fontFamily="courier new";
   codeArea.style.fontSize="20px";
   codeArea.style.position="absolute";
   codeArea.style.marginTop="80px";
   
  }
  
  bootstrap();
 // CodeMirror CSS https://raw.githubusercontent.com/marijnh/CodeMirror/master/lib/codemirror.css
  //codeMirrorScriptElement.src = "https://raw.github.com/marijnh/CodeMirror/master/mode/javascript/javascript.js";
  //codeMirrorScriptElement.src = "https://raw.github.com/marijnh/CodeMirror/268cc7422b21d95e8f3db0d346d4fec346bc76ff/keymap/vim.js";
  //codeMirrorScriptElement.src = "https://raw.github.com/marijnh/CodeMirror/master/lib/codemirror.js";
  
} catch(e){
  alert(e);
}