Flash message system for Ember.js and Node.js (Stylus/Jade)

_flash_view.jade

prepend content
  script(type="text/x-handlebars")
    {{#view Who.FlashView id="flash-view"}}
    #message {{content.message}}
    {{/view}}

flash.styl

#flash-view

  &.is-notice
    color inherit

    #message
      background-color #ffffff
      background rgb(255, 255, 255)
      background rgba(255, 255, 255, 0.8)

  &.is-error
    color #AC1212

    #message
      background-color #ffc4b6
      background-color rgb(255, 196, 182)
      background-color rgba(255, 196, 182, 0.8)
    
  &.is-warning
    color #574b13

    #message
      background-color #ffec81
      background-color rgb(255, 236, 129)
      background-color rgba(255, 236, 129, 0.8)

  #message
    position fixed
    width 100%
    top 40px
    z-index 23
    padding 1em
    -webkit-box-shadow 0 1px 5px rgba(0, 0, 0, 0.3)
    -moz-box-shadow 0 1px 5px rgba(0, 0, 0, 0.3)
    box-shadow 0 1px 5px rgba(0, 0, 0, 0.3)
    border-bottom 1px solid #999

    a.close
      position absolute
      bottom 0
      right 0
      padding 8px

flash_controller.js

App.flashController = Em.Object.create({
  content: null,

  contentChanged: function() {
    if (this.get('content')) {
      this.get('view').show();
      setTimeout(this.clearContent, 3000, this.get('content'), this.get('view'));
    } else {
      Who.flashQueue.contentChanged();
    }
  }.observes('content'),

  clearContent: function(content, view) {
    view.hide(function() {
      Who.flashQueue.removeObject(content);
    });
  }
});

flash_message.js

App.FlashMessage = Em.Object.extend({
  type: "notice",
  message: null,

  isNotice: function() {
    return this.get("type") == "notice";
  }.property("type").cacheable(),

  isWarning: function() {
    return this.get("type") == "warning";
  }.property("type").cacheable(),

  isError: function() {
    return this.get("type") == "error";
  }.property("type").cacheable()
});

flash_queue.js

App.flashQueue = Em.ArrayProxy.create({
  content: [],

  contentChanged: function() {
    var current = Who.flashController.get('content');

    if (current != this.objectAt(0)) {
      Who.flashController.set('content', this.objectAt(0));
    }
  }.observes("content.[]"),

  pushFlash: function(type, message) {
    this.pushObject(Who.FlashMessage.create({
      message: message,
      type: type
    }));
  }
});

flash_view.js

App.FlashView = Em.View.extend({
  contentBinding: 'Who.flashController.content',
  classNameBindings: ['isNotice', 'isWarning', 'isError'],
  isNoticeBinding: 'content.isNotice',
  isWarningBinding: 'content.isWarning',
  isErrorBinding: 'content.isError',

  didInsertElement: function() {
    this.$('#message').hide();
    Who.flashController.set('view', this);
  },

  show: function(callback) {
    this.$('#message').
      css({ top: '-9px' }).
      animate({ top: '40px', opacity: 'toggle' }, 700, callback);
  },

  hide: function(callback) {
    this.$('#message').
      css({ top: '40px' }).
      animate({ top: '-9px', opacity: 'toggle' }, 700, callback);
  }
});