HTMLWidgets + CrossTalk Experiments

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.1/mithril.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classnames/2.2.3/index.min.js"></script>
<script src="//cdn.rawgit.com/rstudio/crosstalk/master/inst/www/js/crosstalk.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdn.rawgit.com/ramnathv/htmlwidgets/master/inst/www/htmlwidgets.js"></script>
<script src="//rawgit.com/ramnathv/de1ec9bb13f74ca9394e/raw/00ff176548bbaedc4567b550895902c872354e28/hello.js"></script>
<script src="//cdn.rawgit.com/Riim/cellx/master/cellx.min.js"></script>
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
      <p id="htmlwidget-6493" class="hello"></p>
      <script>
        shared = {}
      </script>
      <script type="application/json" data-for="htmlwidget-6493">
      {
        "x":{"message": "btn1"}, 
        "evals": [], 
        "jsHooks":{
          "render":["function(el, x){console.log(this)}"]
         }
       }
      </script>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px;}

CoffeeScript

ButtonGroup = 
  controller: (props) ->
    shared[props.id] = cellx(props.active)
    active: m.prop(props.active)
  view: (ctrl, props) ->
    m '.btn-group', {role: "group", id: props.id}, 
      props.data.map (d, i) ->
        c = classNames(
          {btn: true, 'btn-default': true, active: ctrl.active() is d.key}
        )
        m 'button[type="button"]', {
          class: c
          onclick: (e) -> 
            ctrl.active(d.key)
            shared[props.id](d.key)
        }, d.value
      
btnData = [
  {key: 'btn1', value: 1},
  {key: 'btn2', value: 2},
  {key: 'btn3', value: 3}
]



m.mount(
  document.getElementById("app"),
  m ButtonGroup, {data: btnData, active: 'btn1', id: 'mybg'}
)