Mithril TweetBox

by ramnathv

HTML

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

CSS

#main{
  margin: 20px;
}

CoffeeScript

m.bind = (prop) ->
   oninput: m.withAttr("value", prop)
   value: prop()
   
TweetBox =
  controller: ->
    # state. should probably move this to model
    text: m.prop("")
    photoAdded: m.prop(false) 
  view: (c) ->
    # computed properties based on state
    togglePhoto = (e) ->
      console.log('toggling photo')
      c.photoAdded(!c.photoAdded())
    photoText = ->
      if c.photoAdded() then "Photo Added" else "Add Photo"
    remainingCharacters = ->
       140 - c.text().length - 23*Number(c.photoAdded())
    alertMsg = -> [
      "Oops! Too Long..."
       m("strong.bg-danger",  c.text().substr(140))
    ]
    alertDisplay = ->
      if remainingCharacters() < 0
        'block'
      else 
        'none'
 
    # view code starts
    m '.well.clearfix', [
      m '.alert.alert-warning', {style: 
          {display: alertDisplay()}
        }, alertMsg()
      m 'textarea.form-control', m.bind(c.text)
      m 'br'
      m 'span', remainingCharacters()
      m 'button.btn.btn-primary.pull-right', {
           disabled: c.text() is ""
        }, 'Tweet'
      m 'button.btn.btn-default.pull-right', {
          onclick: togglePhoto
        }, photoText()   
    ]
      
      
m.mount(document.querySelector("#tweetbox"), TweetBox)