Added the ability to auto dismiss flash messages

README.md

@@ -77,6 +77,31 @@ While you could easily remove flash messages yourself, the main FlashMessageCont
 {{/flashMessage}}
 ```
 
+### Auto Dismissing Messages
+
+There are times when you might like to automatically remove flash messages after a given period of time. To trigger an auto dismissing message, you just need to add an extra argument to the `flashMessage()` method.
+
+```javascript
+flashMessage('I will remove myself in 500 milliseconds', 'success', 500);
+```
+
+By default we have added a basic `fadeOut` animation, but you are free to reopen the `Ember.FlashMessageView` and alter things as needed. The default code can be found below:
+
+```javascript
+Ember.FlashMessageView = Ember.View.extend({
+  autoDismiss: function() {
+    var that = this;
+    if (this.get('state') === 'inDOM') {
+      Ember.run(function() {
+        that.$().fadeOut(250, function() {
+          that.get('controller').set('currentMessage', null);
+        });
+      });
+    }
+  }
+});
+```
+
 ### Controller
 
 The flash message can be set from the controller by adding a ``needs``

flash-message.js

@@ -18,6 +18,21 @@ Ember.FlashMessageController = Ember.Controller.extend({
   }
 
 });
+Ember.FlashMessageView = Ember.View.extend({
+  autoDismiss: function() {
+    var that = this;
+    if (this.get('_state') === 'inDOM') {
+      Ember.run(function() {
+        that.$().fadeOut(250, function() {
+          if (that.get('controller')) {
+            that.get('controller').set('currentMessage', null);
+          }
+        });
+      });
+    }
+  }
+});
+
 Ember.Handlebars.registerHelper('flashMessage', function(options) {
   var template = options.fn,
       container = options.data.keywords.controller.container,
@@ -29,13 +44,18 @@ Ember.Handlebars.registerHelper('flashMessage', function(options) {
               view;
 
           if (currentMessage) {
-            view = Ember.View.create({
+            view = Ember.FlashMessageView.create({
               template: template
             });
+            if (Ember.get(currentMessage, 'dismissTimer')) {
+              Ember.run.later(function() {
+                view.autoDismiss();
+              }, currentMessage.get('dismissTimer'));
+            }
           }
 
           this.set('currentView', view);
-        }.observes('controller.currentMessage')
+        }.observes('controller.currentMessage').on('init')
       });
 
   options.hash.controller = controller;
@@ -50,7 +70,7 @@ Ember.Application.initializer({
   }
 });
 Ember.FlashMessageRouteMixin = Ember.Mixin.create({
-  flashMessage: function(message, messageType) {
+  flashMessage: function(message, messageType, dismissTimer) {
     var controller = this.controllerFor('flashMessage');
 
     var messageObject = Ember.Object.create({
@@ -61,6 +81,10 @@ Ember.FlashMessageRouteMixin = Ember.Mixin.create({
       messageObject.set('type', messageType);
     }
 
+    if(typeof dismissTimer !== 'undefined') {
+      messageObject.set('dismissTimer', dismissTimer);
+    }
+
     controller.set('queuedMessage', messageObject);
 
     return controller;

lib/helper.js

@@ -1,3 +1,18 @@
+Ember.FlashMessageView = Ember.View.extend({
+  autoDismiss: function() {
+    var that = this;
+    if (this.get('_state') === 'inDOM') {
+      Ember.run(function() {
+        that.$().fadeOut(250, function() {
+          if (that.get('controller')) {
+            that.get('controller').set('currentMessage', null);
+          }
+        });
+      });
+    }
+  }
+});
+
 Ember.Handlebars.registerHelper('flashMessage', function(options) {
   var template = options.fn,
       container = options.data.keywords.controller.container,
@@ -9,9 +24,14 @@ Ember.Handlebars.registerHelper('flashMessage', function(options) {
               view;
 
           if (currentMessage) {
-            view = Ember.View.create({
+            view = Ember.FlashMessageView.create({
               template: template
             });
+            if (Ember.get(currentMessage, 'dismissTimer')) {
+              Ember.run.later(function() {
+                view.autoDismiss();
+              }, currentMessage.get('dismissTimer'));
+            }
           }
 
           this.set('currentView', view);

lib/route_mixin.js

@@ -1,5 +1,5 @@
 Ember.FlashMessageRouteMixin = Ember.Mixin.create({
-  flashMessage: function(message, messageType) {
+  flashMessage: function(message, messageType, dismissTimer) {
     var controller = this.controllerFor('flashMessage');
 
     var messageObject = Ember.Object.create({
@@ -10,6 +10,10 @@ Ember.FlashMessageRouteMixin = Ember.Mixin.create({
       messageObject.set('type', messageType);
     }
 
+    if(typeof dismissTimer !== 'undefined') {
+      messageObject.set('dismissTimer', dismissTimer);
+    }
+
     controller.set('queuedMessage', messageObject);
 
     return controller;

tests/integration/flash_message_test.js

@@ -176,6 +176,23 @@ test("should display the flash message instantly", function() {
   andThen(assertMessage);
 });
 
+test("should be able to auto dismiss a flash message", function() {
+  visit("/");
+
+  andThen(function() {
+    router().flashMessage('I will be gone in 0.5 seconds', 'success', 500).now();
+  });
+
+  andThen(assertMessage);
+
+  // This appears to halt the run loop, so that the event we are waiting
+  // for never actually fires. I'm not sure how to find a way around this.
+  // Ember.run.later(function() {
+  //   assertNoMessage();
+  // }, 1000);
+
+});
+
 test("should display the flash message for resource", function() {
   visit("/");