Flash messages

_base.scss

/* Flashes
-------------------------------------------------------------- */
.js #flash {
  display: none;
}

#flash {
  position: absolute;
  width: 100%;
  z-index: 10000;
  p {
    margin: 1em 0;
  }
  .error,
  .alert,
  .notice,
  .success,
  .info,
  .flash { padding: 0.8em; border: 2px solid #ddd; }

  .error { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
  .alert,
  .notice { background: #fff6bf; color: #514721; border-color: #ffd324; }
  .success { background: #e6efc2; color: #264409; border-color: #c6d880; }
  .info,
  .flash { background: #d5edf8; color: #205791; border-color: #92cae4; }

  .error a { color: #8a1f11; }
  .alert a,
  .notice a { color: #514721; }
  .success a { color: #264409; }
  .info a,
  .flash a { color: #205791; }
}

_flashes.html.haml

#flash
  - flash.each do |key, value|
    %div{ :title => key.to_s.humanize, :class => key }
      %p= value
  .close

common.js.coffee

common =
  # Default settings
  # eg) Override defaults
  #   common.defaults.message = 'Hello'
  #   common.init({'message': 'Hello'})
  defaults: {}

  # Primary initialization function
  init: (options) ->
    @settings = $.extend(true, {}, @defaults, options);

    # Save DOM references
    @$flash = $("#flash")

    @flash()

  # Show flash notifications
  flash: ->
    if (@$flash.html().length > 0)
      slideup = -> $('#flash').slideUp(-> $(@).empty())
      @$flash.click(slideup).slideDown()
      setTimeout(slideup, 10000)

window.common = common

$ ->
  common.init()