break demo into smaller parts

demo/kitchen-sink/util.js

@@ -53,16 +53,16 @@ exports.createSplitEditor = function(el) {
     e0.style.position = e1.style.position = s.style.position = "absolute";
     el.style.position = "relative"
     var split = {$container: el};
-    
+
     split.editor0 = split[0] = new Editor(new Renderer(e0, require("ace/theme/textmate")));
     split.editor1 = split[1] = new Editor(new Renderer(e1, require("ace/theme/textmate")));
     split.splitter = s
-    
+
     MultiSelect(split.editor0);
     MultiSelect(split.editor1);
-    
+
     s.ratio = 0.5
-    
+
     split.resize = function resize(){
         var height = el.parentNode.clientHeight - el.offsetTop;
         var total = el.clientWidth;
@@ -70,26 +70,26 @@ exports.createSplitEditor = function(el) {
         var w2 = total * (1- s.ratio)
         s.style.left = w1 - 1 + "px";
         s.style.height = el.style.height = height + "px";
-        
+
         var st0 = split[0].container.style
         var st1 = split[1].container.style
         st0.width = w1 + "px";
         st1.width = w2 + "px";
         st0.left = 0 + "px";
         st1.left = w1 + "px";
-        
+
         st0.top = st1.top = "0px";
-        st0.height = st1.height = height + "px";        
-        
+        st0.height = st1.height = height + "px";
+
         split[0].resize();
         split[1].resize();
     }
-    
+
     split.onMouseDown = function(e) {
         var rect = el.getBoundingClientRect()
         var x = e.clientX;
         var y = e.clientY;
-        
+
         var button = e.button;
         if (button !== 0) {
             return;
@@ -104,7 +104,7 @@ exports.createSplitEditor = function(el) {
         };
 
         var onResizeInterval = function() {
-            s.ratio = (x - rect.left) / rect.width            
+            s.ratio = (x - rect.left) / rect.width
             split.resize()
         };
 
@@ -113,9 +113,9 @@ exports.createSplitEditor = function(el) {
 
         return e.preventDefault();
     };
- 
 
-    
+
+
     event.addListener(s, "mousedown", split.onMouseDown);
     event.addListener(window, "resize", split.resize);
     split.resize()
@@ -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");
-        option.setAttribute("value", item.name);
-        option.innerHTML = item.desc;
-        el.appendChild(option);
+
+    dropdown(values).forEach(function(e) {
+        el.appendChild(e);
     });
 };
 
+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]));
+    });
+}
+
+
 });