js flash plugin

container.html

<div id="fixture">
  <div class="container">
  </div>
  <div class="container">
  </div>
</div>

js_flash.js.coffee

$.flash = (opts) ->

  defaults = {}
  opts = $.extend defaults, (opts || {})
  flashClass = 'flash alert alert-' + opts.type
  flashMsg = $('<div>', "class": flashClass ).html(opts.msg)
  type = opts.type
  closeBtn = $("<button>",
    type: 'button'
    'class': 'close'
    'data-dismiss':'alert'
    'aria-hidden': true
  ).html('&times;')
  flashMsg.append closeBtn
  flashMsg.addClass('alert-dismissable');

  placement = $('body .container').first();
  placementAfter = placement.find('.page-header')

  # clear old flashes
  $('.' + flashClass.split(/\s+/).join(".")).remove();

  if (!placementAfter.length)
    placement.prepend flashMsg
  else
    placementAfter.first().after flashMsg

  if type != 'danger'
    setTimeout () ->
      flashMsg.fadeOut()
    , 5000

$.flashNotice = (msg) ->
  $.flash({msg:msg, type: 'info'})

$.flashError = (msg) ->
  $.flash({msg:msg, type: 'danger'})

js_flash_spec.js.coffee

describe "jquery.flash", ->
  describe 'with out a .container', ->
    it 'does not render the flash', ->
      $.flash({msg:'blurp it', type: 'blondie'})
      expect($('body')).not.toContain('.alert-blondie')

  describe "when there is a page-header element", ->
    beforeEach ->
      loadFixtures 'page_header.html'
      $.flash({msg:'blurp it', type: 'blondie'})
    it 'renders the flash', ->
      expect($('body')).toContain('.alert-blondie')
      expect($('body .alert-blondie')).toContainText('blurp it')
    it 'puts the message after the page header', ->
      expect($('#fixture .container').first().children()[1]).toHaveClass('alert-blondie');
    it 'renders the flash as dismissable', ->
      expect($('body')).toContain('.alert-dismissable')
      expect($('body')).toContain('button.close')
    it 'does not render a duplicate if it\'s called twice', ->
      $.flash({msg:'second', type: 'blondie'})
      expect($('.alert-blondie')).toContainText('second')
      expect($('.alert-blondie').length).toEqual(1)

  describe "when there is only a body container element", ->
    beforeEach ->
      loadFixtures 'container.html'
    it 'puts the message after the page header', ->
      $.flash({msg:'blurp it', type: 'blondie'})
      expect($('#fixture .container').children().first()).toHaveClass('alert-blondie');

  describe "flashError", ->
    beforeEach ->
      loadFixtures 'page_header.html'
      $.flashError 'hey there'
    it 'renders the flash', ->
      expect($('body')).toContain('.alert-danger')
      expect($('.alert-danger')).toContainText('hey there')

  describe "flashNotice", ->
    beforeEach ->
      loadFixtures 'page_header.html'
      $.flashNotice 'hey there'
    it 'renders the flash', ->
      expect($('body')).toContain('.alert-info')
      expect($('.alert-info')).toContainText('hey there')

page_header.html

<div id="fixture">
  <div class="container">
    <div class="page-header"></div>
    <div class="other"></div>
    <div class="page-header"></div>
  </div>
  <div class="container">
    <div class="other"></div>
  </div>
</div>