diff --git a/README.md b/README.md index 45d1ac5..5a057cf 100644 --- a/README.md +++ b/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 diff --git a/lib/helper.js b/lib/helper.js index ea74743..f805955 100644 --- a/lib/helper.js +++ b/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); diff --git a/lib/route_mixin.js b/lib/route_mixin.js index 26e7751..40f5a3a 100644 --- a/lib/route_mixin.js +++ b/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; + }, }); diff --git a/tests/integration/flash_message_test.js b/tests/integration/flash_message_test.js index 853efed..0b8d3ab 100644 --- a/tests/integration/flash_message_test.js +++ b/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}}{{message.text}}{{/flashMessage}}'); +Ember.TEMPLATES.customFlashTemplate = Ember.Handlebars.compile('Blah'); + 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')); + }); +}); +