Mithril with PrimerCSS

by ramnathv

HTML

<link rel="stylesheet" href="//rawgit.com/primer/primer/gh-pages/docs.css">
<div id="root">Page</div>

CSS

#main{margin-top: 20px;}
p{font-size: 14px;}

CoffeeScript

## https://gist.github.com/impinball/5e4d6e64aba2ffb7cd23
## Patches Mithril to accept components as well as strings
@m = ((o) ->
  Object.assign (->
    (if typeof arguments[0] == 'string' then o else o.component).apply undefined, arguments
  ), o
)(m)

TabNav = 
  view: (ctrl, props) ->
    m '.tabnav',
      m 'nav.tabnav-tabs', props.links.map (d, i) ->
        isSelected = if props.selected() is i then ' selected' else ''
        m 'a[href="#"]', {
          class: "tabnav-tab#{isSelected}"
          onclick: (e) -> props.selected(i)
        }, m 'span.tooltipped.tooltipped-n', {
          "aria-label": "This is #{d}"
        }, d

Tabs = 
  controller: ->
    selected: m.prop(0)
  view: (ctrl, props) ->
    m 'div',
      m TabNav, {
        links: props.tabs.map((d) -> d.title),
        selected: ctrl.selected
      }
      m 'div', 
        m 'p', m.trust(props.tabs[ctrl.selected()].content)
        
mytabs = [
  { title: 'Tab 1', ref: 'tab1', content: 'Lorem ipsum dolor..' },
  { title: 'Tab 2', ref: 'tab2', content: "Lorem ipsum dolor" },
]

App = 
  view: (ctrl, props) ->
    m '.container#main',
      m '.columns',
        m '.column.centered',
          m Tabs, {tabs: mytabs}
m.mount(
  document.getElementById("root"),
  m App
)