extend demo

demo/startup.js

@@ -75,36 +75,6 @@ exports.launch = function(env) {
     docs.js.setMode(new JavaScriptMode());
     docs.js.setUndoManager(new UndoManager());
 
-    if (false && window.Worker) {
-        var worker = new WorkerClient("../..", ["ace", "pilot"], "ace/worker/mirror", "Mirror");
-        worker.call("setValue", [docs.js.getValue()]);
-
-        docs.js.getDocument().on("change", function(e) {
-            e.range = {
-                start: e.data.range.start,
-                end: e.data.range.end
-            };
-            worker.emit("change", e);
-        });
-
-        worker.on("jslint", function(results) {
-            var errors = [];
-            for (var i=0; i<results.data.length; i++) {
-                var error = results.data[i];
-                if (error)
-                    errors.push({
-                        row: error.line-1,
-                        column: error.character-1,
-                        text: error.reason,
-                        type: "error",
-                        lint: error
-                    })
-            }
-
-            docs.js.setAnnotations(errors)
-        });
-    };
-
     docs.css = new EditSession(document.getElementById("csstext").innerHTML);
     docs.css.setMode(new CssMode());
     docs.css.setUndoManager(new UndoManager());
@@ -140,11 +110,7 @@ exports.launch = function(env) {
     }
 
     var modeEl = document.getElementById("mode");
-    function setMode() {
-        env.editor.getSession().setMode(modes[modeEl.value] || modes.text);
-    }
-    modeEl.onchange = setMode;
-    setMode();
+    var wrapModeEl = document.getElementById("soft_wrap");
 
     // This is how you can set a custom keyboardHandler.
     //
@@ -182,10 +148,15 @@ exports.launch = function(env) {
         else {
             modeEl.value = "text";
         }
-
+        
+        wrapModeEl.checked = doc.getUseWrapMode() ? "checked" : "";
         env.editor.focus();
     });
 
+    bindDropdown("mode", function(value) {
+        env.editor.getSession().setMode(modes[value] || modes.text);
+    });
+
     bindDropdown("theme", function(value) {
         env.editor.setTheme(value);
     });
@@ -202,6 +173,18 @@ exports.launch = function(env) {
         env.editor.setShowInvisibles(checked);
     });
     
+    bindCheckbox("show_gutter", function(checked) {
+        env.editor.renderer.setShowGutter(checked);
+    });
+    
+    bindCheckbox("show_print_margin", function(checked) {
+        env.editor.renderer.setShowPrintMargin(checked);
+    });
+    
+    bindCheckbox("soft_wrap", function(checked) {
+        env.editor.getSession().setUseWrapMode(checked);
+    });
+    
     function bindCheckbox(id, callback) {
         var el = document.getElementById(id);
         var onCheck = function() {
@@ -221,8 +204,8 @@ exports.launch = function(env) {
     }
 
     function onResize() {
-        container.style.width = (document.documentElement.clientWidth - 4) + "px";
-        container.style.height = (document.documentElement.clientHeight - 55 - 4 - 23) + "px";
+        container.style.width = (document.documentElement.clientWidth) + "px";
+        container.style.height = (document.documentElement.clientHeight - 60 - 22) + "px";
         env.editor.resize();
     };
 

demo/styles.css

@@ -1,4 +1,4 @@
-    html {
+html {
     height: 100%;
     overflow: hidden;
 }
@@ -15,15 +15,15 @@ body {
     color: white;
 }
 
-#editor {  
-    top: 55px;
+#editor {
+    position: absolute;
+    top: 60px;
     left: 0px;
     background: white;
 }
 
 #controls {
     width: 100%;
-    height: 55px;
 }
 
 #cockpitInput {