From 56a6f985d579c6f9712092ee7d5d9475867aa6f2 Mon Sep 17 00:00:00 2001
From: Fabian Jakobs <fabian.jakobs@web.de>
Date: Thu, 27 Jan 2011 19:41:08 +0100
Subject: [PATCH] extend demo

---
 demo/startup.js | 59 ++++++++++++++++++-------------------------------
 demo/styles.css |  8 +++----
 editor.html     | 42 ++++++++++++++++++++++++++---------
 3 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/demo/startup.js b/demo/startup.js
index 00e6d205..d46622bf 100644
--- a/demo/startup.js
+++ b/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();
     };
 
diff --git a/demo/styles.css b/demo/styles.css
index 5cefe22b..3f244f7c 100644
--- a/demo/styles.css
+++ b/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 {
diff --git a/editor.html b/editor.html
index 8240c6ea..5962ea67 100644
--- a/editor.html
+++ b/editor.html
@@ -11,7 +11,7 @@
 <body>
     <table id="controls">
       <tr>
-        <td>
+        <td rowspan="2">
         <label for="doc">Document:</label>
         <select id="doc" size="1">
           <option value="js">JS Document</option>
@@ -22,7 +22,7 @@
           <option value="plain">Text Document</option>
         </select>
       </td>
-      <td>
+      <td rowspan="2">
         <label for="mode">Mode:</label>
         <select id="mode" size="1">
           <option value="text">Plain Text</option>
@@ -34,7 +34,7 @@
           <option value="php">PHP</option>
         </select>
       </td>
-      <td>
+      <td align="right">
         <label for="theme">Theme:</label>
         <select id="theme" size="1">
           <option value="ace/theme/textmate">TextMate</option>
@@ -45,22 +45,44 @@
           <option value="ace/theme/twilight">Twilight</option>
         </select>
       </td>
-      <td>
-        <label for="select_style">Full line selections</label>
+      <td align="right">
+        <label for="select_style">Full Line Selection</label>
         <input type="checkbox" name="select_style" id="select_style" checked>
       </td>
-      <td>
-        <label for="highlight_active">Highlight active line</label>
+      <td align="right">
+        <label for="highlight_active">Highlight Active Line</label>
         <input type="checkbox" name="highlight_active" id="highlight_active" checked>
       </td>
-      <td>
-        <label for="show_hidden">Show invisibles</label>
+      <td align="right">
+        <label for="show_hidden">Show Invisibles</label>
         <input type="checkbox" name="show_hidden" id="show_hidden">
       </td>
-      <td align="right">
+      <td align="right" rowspan="2">
         <img src="demo/logo.png">
       </td>
       </tr>
+      <tr>
+      <td align="right">
+        <label for="keybinding">Key Binding:</label>
+        <select id="keybinding" size="1">
+          <option value="ace">Ace</option>
+          <option value="vim">Vim</option>
+          <option value="emace">Emacs</option>
+        </select>
+      </td>
+      <td align="right">
+        <label for="show_gutter">Show Gutter</label>
+        <input type="checkbox" id="show_gutter" checked>
+      </td>
+      <td align="right">
+        <label for="show_print_margin">Show Print Margin</label>
+        <input type="checkbox" id="show_print_margin" checked>
+      </td>
+      <td align="right">
+        <label for="soft_wrap">Soft Wrap</label>
+        <input type="checkbox" id="soft_wrap">
+      </td>
+      </tr>
     </table>
 
     <div id="editor">