On-screen messaging for Spine + Zepto

messaging.coffee

class Messages extends Spine.Controller
  constructor: ->
    super
    @el.addClass("messages")
    @appendTo "body"
    
  send: (str) ->
    @append(new Message({ message: str }))
    
  @instance: ->
    @_instance or= new Messages
  
class Message extends Spine.Controller
  constructor: (options) ->
    super
    @el.addClass("message").html options.message
    @el.bind "click", @hide
    setTimeout @hide, 3000
    
  hide: => @el.animate({ opacity: 0 }, { complete: @release })

Messaging =
  message: (str) -> Messages.instance().send(str)
    
Spine.Controller.include Messaging

messaging.css

.messages {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.messages .message {
  margin: 0 8px 8px;
  padding: 8px;
  background: rgba(255, 255, 204, 0.75);
  box-shadow: 0 0 8px black;
  border-radius: 4px;
}