Refactored views/function-box to use models/examples data

src/models/examples.coffee

@@ -2,6 +2,7 @@ Rx = require 'rx'
 
 module.exports = {
   "amb": {
+    "label": "amb()"
     "function": Rx.Observable.amb
     "inputs": [
       [{t:10, d:20}, {t:20, d:40}, {t:30, d:60}, {t:45, d:80}]
@@ -10,13 +11,15 @@ module.exports = {
     ]
   }
   "concat": {
+    "label": "concat()"
     "function": Rx.Observable.concat
     "inputs": [
       [{t:0, d:1}, {t:15, d:1}, {t:50, d:1}]
       [{t:13, d:2}, {t:30, d:2}]
     ]
   }
   "merge": {
+    "label": "merge()"
     "function": Rx.Observable.merge
     "inputs": [
       [{t:0, d:20}, {t:15, d:40}, {t:30, d:60}, {t:45, d:80}, {t:60, d:100}]

src/views/function-box.coffee

@@ -4,32 +4,33 @@
 #
 h = require 'hyperscript'
 Rx = require 'rx'
+Examples = require 'rxmarbles/models/examples'
+
+renderSelectOptionsArray = (examples) ->
+  options = []
+  for key,example of examples
+    if not examples.hasOwnProperty(key)
+      continue
+    options.push(h("option", {value: key}, example["label"]))
+  return options
+
+setupClickBehavior = (functionBoxElement, selectElement) ->
+  Rx.Observable.fromEvent(functionBoxElement, "click").subscribe(->
+    event = document.createEvent('MouseEvents');
+    event.initMouseEvent('mousedown', true, true, window);
+    selectElement.dispatchEvent(event)
+    return true
+  )
 
 module.exports = {
   render: (label) ->
     functionBoxElement = h("div.function-box", [
       h("span.function-box-label", label)
-      select = h("select", [
-        # h("optgroup", {label:"Type 1 functions"}, [
-        h("option", {value:"amb"}, "amb()")
-        h("option", {value:"concat"}, "concat()")
-        h("option", {value:"merge"}, "merge()")
-        # ])
-        # h("optgroup", {label:"Type 2 functions"}, [
-        #   h("option", {value:"debounce"}, "debounce()")
-        #   h("option", {value:"delay"}, "delay()")
-        #   h("option", {value:"take"}, "take()")
-        # ])
-      ])
+      selectElement = h("select", renderSelectOptionsArray(Examples))
       h("div.function-box-dropdown", [
         h("span.function-box-dropdown-arrow")
       ])
     ])
-    Rx.Observable.fromEvent(functionBoxElement, "click").subscribe(->
-      event = document.createEvent('MouseEvents');
-      event.initMouseEvent('mousedown', true, true, window);
-      select.dispatchEvent(event)
-      return true
-    )
+    setupClickBehavior(functionBoxElement, selectElement)
     return functionBoxElement
 }