From 4da9fec0ef5ceac1b9b0a5dd7b298cb29b93f99e Mon Sep 17 00:00:00 2001 From: Emerson Lackey Date: Mon, 14 Jul 2014 18:22:01 -0400 Subject: [PATCH 1/2] Added the ability to auto dismiss flash messages --- README.md | 25 ++++++++++++++++++++++ flash-message.js | 28 +++++++++++++++++++++++-- lib/helper.js | 22 ++++++++++++++++++- lib/route_mixin.js | 6 +++++- tests/integration/flash_message_test.js | 17 +++++++++++++++ 5 files changed, 94 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index bd6cab7..4d5a083 100644 --- a/README.md +++ b/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`` diff --git a/flash-message.js b/flash-message.js index b6ef720..2b3225b 100644 --- a/flash-message.js +++ b/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,9 +44,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); @@ -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; diff --git a/lib/helper.js b/lib/helper.js index ea74743..959a66b 100644 --- a/lib/helper.js +++ b/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); diff --git a/lib/route_mixin.js b/lib/route_mixin.js index 26e7751..af9da03 100644 --- a/lib/route_mixin.js +++ b/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; diff --git a/tests/integration/flash_message_test.js b/tests/integration/flash_message_test.js index 853efed..5907003 100644 --- a/tests/integration/flash_message_test.js +++ b/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("/"); From 4d642fbd8d2323a9733136dbf24016202f1666d5 Mon Sep 17 00:00:00 2001 From: Emerson Lackey Date: Mon, 18 Aug 2014 10:49:42 -0400 Subject: [PATCH 2/2] fixing an issue that prevented transitioned flash messages from appearing --- flash-message.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flash-message.js b/flash-message.js index 2b3225b..76ea177 100644 --- a/flash-message.js +++ b/flash-message.js @@ -55,7 +55,7 @@ Ember.Handlebars.registerHelper('flashMessage', function(options) { } this.set('currentView', view); - }.observes('controller.currentMessage') + }.observes('controller.currentMessage').on('init') }); options.hash.controller = controller;