Mithril Wizard UI

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<div class="container-fluid" id='main'>
   <div class="row">
       <div class="col-xs-12 col-md-6" id='mount'>
         
       </div>
   </div>
</div>

CSS

#main{
  margin-top: 20px;
}

CoffeeScript

Pager = (ctrl) ->
  m 'ul.pager', [
     m 'li.previous', 
      {onclick: ctrl.decrement.bind(ctrl), class: ctrl.class_prev()}
      m 'a[href="#"]', 'Prev'
     m 'li.next',
      {onclick: ctrl.increment.bind(ctrl), class: ctrl.class_next()}
      m 'a[href="#"]', 'Next'
  ]

YesNoButtons = (ctrl) ->
  click_set = (s) -> (e) ->
    ctrl.yn()[ctrl.active()] = s
    console.log(ctrl.yn())
  set_class = (s) ->
    x = if s is 'yes' then ' btn-success' else ' btn-danger'
    cl = "btn btn-sm"
    if ctrl.yn()[ctrl.active()] is s then cl + x else cl 
  m 'div.btn-group.btn-toggle', [
    m 'button.btn.btn-default.btn-sm', 
      {onclick: click_set('yes'), class: set_class('yes')},
      "Yes"
    m 'button.btn.btn-default.btn-sm', 
      {onclick: click_set('no'), class: set_class('no')},
      "No"
  ]
ProgressBar = 
  view: (ctrl, args) ->
      m 'div.progress', {style: {'margin-top': '20px'; height: '10px'}},
        m "div.progress-bar.progress-bar-striped[role='progressbar']",
         {style: {width: "#{args.pct}%"}}
   

Pills = (ctrl, args) ->
   set_class = (i) -> 
     ###
     if (ctrl.active() > 0) and (ctrl.yn()[ctrl.active() - 1] is "")
       'disabled'
     ###
     if (i is ctrl.active()) 
       'active' 
     else 
       '' 
   set_active = (i) -> (e) -> ctrl.active(i)
   m 'div.well', [
     m 'ul.nav.nav-pills', args.items.map (d, i) ->
       m 'li[role="presentation"]', 
         {class: set_class(i), onclick: set_active(i)},
         m 'a[href="#"]', d 
   ]

Pills2 = 
  controller: (args) ->
     set_class: (i) ->
        if i is args.active() then 'active' else ''
     set_active: (i) -> (e) -> args.active(i)
  view: (ctrl, args) ->
    m 'div.well', [
      m 'ul.nav.nav-pills', args.items.map (d, i) ->
        m 'li[role="presentation"]', {
           class: ctrl.set_class(i), 
           onclick: ctrl.set_active(i) 
          },
          m 'a[href="#"]', d
    ]
     
    

Content = (ctrl, args) ->
  p = ctrl.active()
  if p > 0
  ...