FunctionBox dropdown to choose other examples

TODO

@@ -15,16 +15,22 @@
 + DONE Refactor views: components OutputStream, InputStream, Stream
 + DONE Introduce virtual-dom for output stream view
 + DONE More generalized handling of examples
-- TODO FunctionBox dropdown to choose other examples
++ DONE FunctionBox dropdown to choose other examples
 >>> v0.1.0
 
 - TODO Examples for Observable Instance Methods, such as debounce
+>>> v0.2.0
+
 - TODO RxMarbles title and proposition value
 - TODO Webpage footer
+>>> v0.2.1
+
 - TODO Styling for dragging a marble
   - z-depth and side arrows
 - TODO Render each stream with a different regular polygon?
 - TODO Render also the stream completion time marker?
+>>> v0.2.2
+
 - TODO Interactively add marbles to an InputStream
 - TODO Interactively remove marbles from an InputStream
 - TODO Add many examples to the dropdown

src/controllers/selected-example.coffee

@@ -1,11 +1,12 @@
 Rx = require 'rx'
 Examples = require 'rxmarbles/models/examples'
+FunctionBox = require 'rxmarbles/views/function-box'
 
 #
 # Exports a stream of the currently selected example.
 #
 
-selectedExampleKey$ = Rx.Observable.just("concat")
+selectedExampleKey$ = FunctionBox.getSelected$().startWith("concat")
 
 selectedExample$ = selectedExampleKey$
   .map((key) ->

src/views/function-box.coffee

@@ -6,6 +6,8 @@ h = require 'hyperscript'
 Rx = require 'rx'
 Examples = require 'rxmarbles/models/examples'
 
+selected$ = new Rx.Subject()
+
 renderSelectOptionsArray = (examples) ->
   options = []
   for key,example of examples
@@ -21,16 +23,26 @@ setupClickBehavior = (functionBoxElement, selectElement) ->
     selectElement.dispatchEvent(event)
     return true
   )
+  # We should use Rx.Observable.from(selectElement, "change") but it doesnt work
+  selectElement.addEventListener("change", (ev) ->
+    selected$.onNext(ev.target.value)
+    return true
+  )
+  return true
 
 module.exports = {
-  render: (label) ->
+  getSelected$: ->
+    return selected$
+
+  render: (example) ->
     functionBoxElement = h("div.function-box", [
-      h("span.function-box-label", label)
+      h("span.function-box-label", example.label)
       selectElement = h("select", renderSelectOptionsArray(Examples))
-      h("div.function-box-dropdown", [
+      dropdown = h("div.function-box-dropdown", [
         h("span.function-box-dropdown-arrow")
       ])
     ])
+    selectElement.value = example.key
     setupClickBehavior(functionBoxElement, selectElement)
     return functionBoxElement
 }

src/views/sandbox.coffee

@@ -29,7 +29,7 @@ createFunctionBoxElement = ->
   SelectedExample = require 'rxmarbles/controllers/selected-example'
   return Utils.renderObservableDOMElement(
     SelectedExample.stream
-      .map((example) -> FunctionBox.render(example.key))
+      .map((example) -> FunctionBox.render(example))
   )
 
 createOutputDiagramElement = ->