Render a custom template as flash, with an associated controller

Author: Sébastien Nicouleaud

README.md

@@ -103,6 +103,52 @@ App.PostController = Ember.ObjectController.extend({
 Please note that whenever you set the flash message from a control it
 will be displayed instantly.
 
+### Using flash templates instead of text messages
+
+In case you believe flash is a "view" thing, or if you need to use
+different markup through your messages (custom actions, images...),
+you can define your flash messages in templates, and render them
+using a specific controller.
+
+Example from a route:
+
+```javascript
+Ember.ProfileRoute = Ember.Route.extend({
+  setupController: function(controller, profile) {
+    if(profile.isEmpty()) {
+      this.flash({
+        templateName: 'emptyProfileNotice',
+        controller: controller,
+      });
+    }
+    this._super(controller, profile);
+  },
+});
+```
+
+Example from a controller:
+
+```javascript
+App.PostController = Ember.ObjectController.extend({
+  needs: ['flashMessage'],
+
+  actions: {
+    save: function() {
+      var flashMessage = this.get('controllers.flashMessage');
+      var controller = this;
+
+      this.get('model').save()
+        .then(function() {
+          flashMessage.set('message', Ember.Object.create({
+            templateName: 'savedPostNotice',
+            controller: controller,
+          });
+        });
+    }
+  }
+});
+```
+
 ## Development
 
 This plugin is built with rake pipeline, which requires Ruby. To get

lib/helper.js

@@ -9,9 +9,20 @@ Ember.Handlebars.registerHelper('flashMessage', function(options) {
               view;
 
           if (currentMessage) {
-            view = Ember.View.create({
-              template: template
-            });
+            if (currentMessage.get && currentMessage.get('templateName')) {
+              var customTemplateName = currentMessage.get('templateName'),
+                  customTemplateController = currentMessage.get('controller');
+
+              view = Ember.View.create({
+                templateName: customTemplateName,
+                controller: customTemplateController,
+              });
+            }
+            else {
+              view = Ember.View.create({
+                template: template
+              });
+            }
           }
 
           this.set('currentView', view);

lib/route_mixin.js

@@ -13,5 +13,18 @@ Ember.FlashMessageRouteMixin = Ember.Mixin.create({
     controller.set('queuedMessage', messageObject);
 
     return controller;
-  }
+  },
+
+  flash: function(options) {
+    var controller = this.controllerFor('flashMessage');
+
+    var messageObject = Ember.Object.create({
+      templateName: options.templateName,
+      controller: options.controller
+    });
+
+    controller.set('queuedMessage', messageObject);
+
+    return controller;
+  },
 });

tests/integration/flash_message_test.js

@@ -25,17 +25,39 @@ App.PromiseRoute = Ember.Route.extend({
 App.LoadingRoute = Ember.Route.extend();
 
 App.FromControllerController = Ember.Controller.extend({
-  needs: 'flashMessage'.w(),
+  needs: 'flashMessage customFlashTemplate'.w(),
 
   actions: {
     showMessage: function() {
       var flashMessage = this.get('controllers.flashMessage');
       flashMessage.set('message', 'testing');
-    }
+    },
+
+    showCustomTemplate: function() {
+      var flashMessage = this.get('controllers.flashMessage');
+      flashMessage.set('message', Ember.Object.create({
+        templateName: 'customFlashTemplate',
+        controller: this.get('controllers.customFlashTemplate'),
+      }));
+    },
   }
 });
 
+App.CustomFlashTemplateController = Ember.Controller.extend({
+  model: null,
+  customActionCalled: false,
+
+  actions: {
+    customAction: function() {
+      this.set('customActionCalled', true);
+    },
+  },
+});
+  
+
 Ember.TEMPLATES.application = Ember.Handlebars.compile('{{#flashMessage}}<span {{bind-attr class=":message message.type"}}>{{message.text}}</span>{{/flashMessage}}');
+Ember.TEMPLATES.customFlashTemplate = Ember.Handlebars.compile('<span class="message custom"}}><a id="custom-flash-template-action" {{action "customAction"}}>Blah</a></span>');
+
 
 var findMessage = function() {
   return $('#qunit-fixture .message');
@@ -211,3 +233,47 @@ test("should be able to use the flash messenger from a controller", function() {
     assertMessage();
   });
 });
+
+test("should be able to render a custom flash template from a route", function() {
+  visit("/");
+
+  andThen(function() {
+    var customFlashTemplateController = App.__container__.lookup('controller:customFlashTemplate');
+
+    customFlashTemplateController.set('model', {name: 'Foo'});
+
+    router().flash({
+      templateName: 'customFlashTemplate',
+      controller: customFlashTemplateController,
+    });
+  });
+
+  visit("/posts/new");
+
+  andThen(function() {
+    assertMessage();
+    ok(hasClass('custom'));
+  });
+});
+
+test("should be able to render a custom flash template from a controller", function() {
+  visit("/");
+
+  andThen(function() {
+    App.__container__.lookup('controller:fromController')
+      .send('showCustomTemplate');
+  });
+
+  andThen(function() {
+    assertMessage();
+    ok(hasClass('custom'));
+  });
+
+  click("#custom-flash-template-action");
+
+  andThen(function() {
+    var customFlashTemplateController = App.__container__.lookup('controller:customFlashTemplate');
+    ok(customFlashTemplateController.get('customActionCalled'));
+  });
+});
+