break demo into smaller parts

demo/kitchen-sink/demo.js

@@ -89,25 +89,25 @@ require("ace/multi_select").MultiSelect(env.editor);
 
 var consoleEl = dom.createElement("div");
 container.parentNode.appendChild(consoleEl);
-consoleEl.style.position="fixed"
+consoleEl.style.cssText = "position:fixed; bottom:1px; right:0;\
-consoleEl.style.bottom = "1px"
+border:1px solid #baf; zIndex:100";
-consoleEl.style.right = 0
+
-consoleEl.style.background = "white"
-consoleEl.style.border = "1px solid #baf"
-consoleEl.style.zIndex = "100"
 var cmdLine = new layout.singleLineEditor(consoleEl);
 cmdLine.editor = env.editor;
 env.editor.cmdLine = cmdLine;
 
+/**
+ * This demonstrates how you can define commands and bind shortcuts to them.
+ */
 env.editor.commands.addCommands([{
     name: "gotoline",
     bindKey: {win: "Ctrl-L", mac: "Command-L"},
     exec: function(editor, line) {
         if (typeof line == "object") {
             var arg = this.name + " " + editor.getCursorPosition().row;
-            editor.cmdLine.setValue(arg, 1)
+            editor.cmdLine.setValue(arg, 1);
-            editor.cmdLine.focus()
+            editor.cmdLine.focus();
-            return
+            return;
         }
         line = parseInt(line, 10);
         if (!isNaN(line))
@@ -119,10 +119,10 @@ env.editor.commands.addCommands([{
     bindKey: {win: "Ctrl-F", mac: "Command-F"},
     exec: function(editor, needle) {
         if (typeof needle == "object") {
-            var arg = this.name + " " + editor.getCopyText()
+            var arg = this.name + " " + editor.getCopyText();
-            editor.cmdLine.setValue(arg, 1)
+            editor.cmdLine.setValue(arg, 1);
-            editor.cmdLine.focus()
+            editor.cmdLine.focus();
-            return
+            return;
         }
         editor.find(needle);
     },
@@ -136,32 +136,28 @@ env.editor.commands.addCommands([{
     name: "execute",
     bindKey: "ctrl+enter",
     exec: function(editor) { 
-        try{
+        try {
-            var r = eval(editor.getCopyText()||editor.getValue())
+            var r = eval(editor.getCopyText()||editor.getValue());
-        }catch(e){
+        } catch(e) {
-            r = e
+            r = e;
         }
         editor.cmdLine.setValue(r + "")
     },
     readOnly: true
-}])
+}]);
 
 cmdLine.commands.bindKeys({
-    "Shift-Return|Ctrl-Return|Alt-Return": function(cmdLine) { cmdLine.insert("\n")},
+    "Shift-Return|Ctrl-Return|Alt-Return": function(cmdLine) { cmdLine.insert("\n"); },
     "Esc|Shift-Esc": function(cmdLine){ cmdLine.editor.focus(); },
     "Return": function(cmdLine){
         var command = cmdLine.getValue().split(/\s+/);
         var editor = cmdLine.editor;
         editor.commands.exec(command[0], editor, command[1]);
         editor.focus();
-    },
+    }
-})
+});
 
-cmdLine.commands.removeCommands(["find", "gotoline", "findall", "replace", "replaceall"])
+cmdLine.commands.removeCommands(["find", "gotoline", "findall", "replace", "replaceall"]);
-
-/**
- * This demonstrates how you can define commands and bind shortcuts to them.
- */
 
 var commands = env.editor.commands;
 commands.addCommand({
@@ -197,13 +193,13 @@ function onResize() {
     env.split.resize();
 
     consoleEl.style.width = width + "px";
-    cmdLine.resize()
+    cmdLine.resize();
 }
 
 window.onresize = onResize;
 onResize();
 
-/*********** options pane ***************************/
+/*********** options panel ***************************/
 var docEl = document.getElementById("doc");
 var modeEl = document.getElementById("mode");
 var wrapModeEl = document.getElementById("soft_wrap");
@@ -220,19 +216,7 @@ var animateScrollEl = document.getElementById("animate_scroll");
 var softTabEl = document.getElementById("soft_tab");
 var behavioursEl = document.getElementById("enable_behaviours");
 
-var group = document.createElement("optgroup");
+fillDropdown(docEl, doclist.all);
-group.setAttribute("label", "Mode Examples");
-fillDropdown(group, doclist.docs);
-docEl.appendChild(group);
-var group = document.createElement("optgroup");
-group.setAttribute("label", "Huge documents");
-fillDropdown(group, doclist.hugeDocs);
-docEl.appendChild(group);
-var group = document.createElement("optgroup");
-group.setAttribute("label", "own source");
-fillDropdown(group, doclist.ownSource);
-docEl.appendChild(group);
-
 
 fillDropdown(modeEl, modelist.modes);
 var modesByName = modelist.modesByName;
@@ -245,7 +229,7 @@ bindDropdown("doc", function(name) {
     doclist.loadDoc(name, function(session) {
         if (!session)
             return;
-        var session = env.split.setSession(session);
+        session = env.split.setSession(session);
         updateUIEditorOptions();
         env.editor.focus();
     });
@@ -278,18 +262,18 @@ event.addListener(themeEl, "mouseover", function(e){
     this.desiredValue = e.target.value;
     if (!this.$timer)
         this.$timer = setTimeout(this.updateTheme);
-})
+});
 
 event.addListener(themeEl, "mouseout", function(e){
     this.desiredValue = null;
     if (!this.$timer)
         this.$timer = setTimeout(this.updateTheme, 20);
-})
+});
 
 themeEl.updateTheme = function(){
     env.split.setTheme(themeEl.desiredValue || themeEl.selectedValue);
     themeEl.$timer = null;
-}
+};
 
 bindDropdown("theme", function(value) {
     if (!value)

demo/kitchen-sink/doclist.js

@@ -176,7 +176,13 @@ module.exports = {
     ownSource: prepareDocList(ownSource),
     hugeDocs: prepareDocList(hugeDocs),
     initDoc: initDoc,
-    loadDoc: loadDoc
+    loadDoc: loadDoc,
+    
+};
+module.exports.all = {
+    "Mode Examples": module.exports.docs,
+    "Huge documents": module.exports.hugeDocs, 
+    "own source": module.exports.ownSource
 };
     
 });

demo/kitchen-sink/util.js

@@ -177,16 +177,45 @@ exports.bindDropdown = function(id, callback, noInit) {
     noInit || onChange();
 };
 
-exports.fillDropdown = function(el, list) {
+exports.fillDropdown = function(el, values) {
     if (typeof el == "string")
         el = document.getElementById(el);
-    list.forEach(function(item) {
+
-        var option = document.createElement("option");
+    dropdown(values).forEach(function(e) {
-        option.setAttribute("value", item.name);
+        el.appendChild(e);
-        option.innerHTML = item.desc;
-        el.appendChild(option);
     });
 };
 
+function elt(tag, attributes, content) {
+    var el = dom.createElement(tag);
+    if (typeof content == "string") {
+        el.textContent = content;
+    } else {
+        content.forEach(function(ch) {
+            el.appendChild(ch);
+        });
+    }
+
+    for (var i in attributes)
+        el.setAttribute(i, attributes[i]);
+    return el
+}
+
+function optgroup(values) {
+    return values.map(function(item) {
+        return elt("option", {value: item.name}, item.desc);
+    });
+}
+
+function dropdown(values) {
+    if (Array.isArray(values))
+        return optgroup(values);
+
+    return Object.keys(values).map(function(i) {
+        return elt("optgroup", {"label": i}, optgroup(values[i]));
+    });
+}
+
+
 });
 

kitchen-sink.html

@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+<!DOCTYPE html>
-   "http://www.w3.org/TR/html4/strict.dtd">
 
 <html lang="en">
 <head>
@@ -7,11 +6,9 @@
     <title>Ace Kitchen Sink</title>
     <meta name="author" content="Fabian Jakobs">
     <!--
-
     Ace
       version %version%
       commit  %commit%
-
     -->
 
     <!--DEVEL-->
@@ -23,9 +20,13 @@
     PACKAGE-->
 </head>
 <body>
+<div id="optionsPanel" style="position:absolute;height:100%">
   <a href="http://ajaxorg.github.com/ace/" >
     <img id="logo" src="demo/kitchen-sink/logo.png">
   </a> 
+  <div style="position: absolute; overflow: hidden; top:80px; bottom:0">
+  <div style="width: 120%; height:100%; overflow-y: scroll">
+
   <table id="controls">
     <tr>
       <td>
@@ -237,6 +238,9 @@
   </table>
   </td></tr>
   </table>
+  
+  </div>
+  </div>
 </div>
   <div id="editor"></div>