Mithril with Github Buttons

by ramnathv

HTML

<link rel="stylesheet" href="//necolas.github.io/css3-github-buttons/gh-buttons.css">
<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>
<div class="button-group">
    <a href="#" class="button primary">Dashboard</a>
    <a href="#" class="button">Inbox</a>
    <a href="#" class="button">Account</a>
    <a href="#" class="button">Logout</a>
</div>
<div id="app"></div>

CoffeeScript

ButtonGroup = 
  controller: (props) ->
    active: m.prop(props.active || 0)
  view: (ctrl, props) ->
    m '.button-group', props.items.map (d, i) ->
      cl = classNames(button: true, active: ctrl.active() is i)
      m 'a[href="#"]', {
        class: cl
        onclick: (e) -> 
          ctrl.active(i)
          if (props.callback) then props.callback(ctrl.active())
      }, d

###
m.mount(
  document.getElementById("app"),
  m ButtonGroup, {items: [1, 2, 3], callback: (i) -> console.log(i)}
)
###

App =
  controller: ->
    showing: m.prop(false)
  view: (ctrl, props) ->
    m 'div',
      m 'button.button', {
        onclick: (e) -> ctrl.showing(!ctrl.showing())
      }, 'Click to Show'
      m '.secret', 
       {style: {display: if ctrl.showing() then 'block' else 'none'}},
       'Showing!!'
      
m.mount(
  document.getElementById("app"),
  m App
)