Tweetbox with Mithril

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px;}

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)

vm = 
  text: m.prop("")
  photoAdded: m.prop(false)
  disableBtn: -> @text() is ""
  remainingChars: -> 140 - @text().length - 23*@photoAdded()
  photoBtnText: -> 
    if @photoAdded() then 'Photo Added' else 'Add Photo'
    
TweetBox = {}
TweetBox.view = ->
  m '.clearfix',
    m 'h4', 'TweetBox with Mithril'
    m '.well',
      m 'textarea.form-control', 
        style: 
          "margin-bottom": "20px"
          resize: "vertical"
        value: vm.text()
        oninput: m.withAttr("value", vm.text)
      m '.pull-right',
        m 'button.btn.btn-default.btn-sm',
          onclick: (e) => vm.photoAdded(!vm.photoAdded())
        , vm.photoBtnText()
        m 'button.btn.btn-primary.btn-sm', 
          disabled: vm.disableBtn()
          onclick: (e) -> console.log vm.text()
        , 'Tweet'
      m 'span.remaining', vm.remainingChars()
      
m.mount(
  document.getElementById("app"),
  m TweetBox
)