ryanto / ember-flash-message Goto Github PK

Flash message for Ember.JS templates.

Ruby 9.32% JavaScript 87.44% HTML 3.24%

ember-flash-message's Introduction

Ember Flash Message

A simple plugin that allows you to display a message on the next route transition, similiar to Rails' flash[:notice]. This is useful for displaying one time notices on later pages.

Usage

You should include ember-flash-message.js on your page. Since the plugin depends on Ember.js you will have to include Ember first. Now any of your route's will have access to flashMessage('message'), which will set the message.

Template

Any template that you want to display the message should contain the following. It makes the most sense to put this in your application template to have the message be available on all pages.

{{#flashMessage}}
  <div {{bind-attr class="message.type"}}>
    {{message.text}}
  </div>
{{/flashMessage}}

Route

Any route can call this.flashMessage(message) to set the message. The message will be displayed after the next transition. After the router transitions for a second time the message will be destroyed.

Ember.LoginRoute = Ember.Route.extend({
  actions: {
    login: function() {
      // login user ...
      this.flashMessage('Welcome back!', 'success');
      this.transitionTo('index');
    }
  }
});

Instant Message

There may be some instances where you want to display the message right away and not wait for the route to transition. You can use the now() function to update the message.

Ember.ProfileRoute = Ember.Route.extend({
  actions: {
    save: function(profile) {
      var router = this;

      profile.save().then(function() {
        router.flashMessage('Your profile has been updated!').now();
      });
    }
  }
});

Dismissing Messages

While you could easily remove flash messages yourself, the main FlashMessageController contains a convinence action named dismissFlashMessage that will remove the current message. To use this action, you just need to add a link (or any other element) that triggers it.

{{#flashMessage}}
  <div {{bind-attr class=':flash-message message.type'}}>
    {{message.text}}
    <a href='#' class='dismiss' {{action 'dismissFlashMessage'}}>x</a>
  </div>
{{/flashMessage}}

Controller

The flash message can be set from the controller by adding a needs dependency for the flashMessage controller. See the example below.

App.PostController = Ember.ObjectController.extend({
  needs: ['flashMessage'],

  actions: {
    save: function() {
      var flashMessage = this.get('controllers.flashMessage');

      this.get('model').save()
        .then(function() {
          flashMessage.set('message', 'Blog post saved!');
        });
    }
  }
});

Please note that whenever you set the flash message from a control it will be displayed instantly.

Development

This plugin is built with rake pipeline, which requires Ruby. To get started:

bundle install
bundle exec rackup

Edit code and visit http://localhost:9292 to run tests.

ember-flash-message's People

Contributors

Stargazers

Watchers

Forkers

davidherse kdiogenes sagarj87 amiel digitaltoad emerson kieran alexbaizeau ahalliop sebn pollingj r4m treygriffith ferenc-radius f3ndot berdof visoft k-fish skaasten isabella232 iq-scm

ember-flash-message's Issues

Issues with ember 1.2.0

I'm trying to setup ember-flash-message with:

DEBUG: ------------------------------- ember.js?body=1:3233
DEBUG: Ember : 1.2.0 ember.js?body=1:3233
DEBUG: Ember Data : 1.0.0-beta.4+canary.7af6fcb0 ember.js?body=1:3233
DEBUG: Handlebars : 1.0.0 ember.js?body=1:3233
DEBUG: jQuery : 1.10.2 ember.js?body=1:3233
DEBUG: -------------------------------

I'm getting the error below which is being triggered at:

for (var prop in hash) { // <<<<<<<<<<<< prop is 'controller'
if (hashType[prop] === 'ID') {

Uncaught TypeError: Cannot read property 'controller' of undefined ember.js?body=1:26211
makeBindings ember.js?body=1:26211
EmberHandlebars.ViewHelper.Ember.Object.create.helper ember.js?body=1:26344
(anonymous function) ember.js?body=1:26560
(anonymous function) ember-flash-message.js?body=1:29
anonymous _flash.js?body=1:21
Handlebars.VM.template handlebars.js?body=1:2214
renderPartial ember.js?body=1:27454
(anonymous function) ember.js?body=1:27431
anonymous login.js?body=1:46
Handlebars.VM.template handlebars.js?body=1:2214
Ember.View.Ember.CoreView.extend.render ember.js?body=1:20898
Ember.CoreView.Ember.Object.extend._renderToBuffer ember.js?body=1:19846
Ember.View.Ember.CoreView.extend._renderToBuffer ember.js?body=1:21472
superWrapper ember.js?body=1:1180
(anonymous function) ember.js?body=1:19827
Ember.Instrumentation.instrument ember.js?body=1:1627
Ember.CoreView.Ember.Object.extend.renderToBuffer ember.js?body=1:19826
(anonymous function) ember.js?body=1:22790
Ember.View.Ember.CoreView.extend.forEachChildView ember.js?body=1:21136
Ember.ContainerView.Ember.View.extend.render ember.js?body=1:22789
superWrapper ember.js?body=1:1180
Ember.CoreView.Ember.Object.extend._renderToBuffer ember.js?body=1:19846
Ember.View.Ember.CoreView.extend._renderToBuffer ember.js?body=1:21472
superWrapper ember.js?body=1:1180
(anonymous function) ember.js?body=1:19827
Ember.Instrumentation.instrument ember.js?body=1:1627
Ember.CoreView.Ember.Object.extend.renderToBuffer ember.js?body=1:19826
Ember.merge.appendChild ember.js?body=1:22321
Ember.View.Ember.CoreView.extend.appendChild ember.js?body=1:21667
EmberHandlebars.ViewHelper.Ember.Object.create.helper ember.js?body=1:26382
(anonymous function) ember.js?body=1:26560
(anonymous function) ember.js?body=1:34212
(anonymous function) ember.js?body=1:25667
anonymous application.js?body=1:10
Handlebars.VM.template handlebars.js?body=1:2214
Ember.View.Ember.CoreView.extend.render ember.js?body=1:20898
Ember.CoreView.Ember.Object.extend._renderToBuffer ember.js?body=1:19846
Ember.View.Ember.CoreView.extend._renderToBuffer ember.js?body=1:21472
superWrapper ember.js?body=1:1180
(anonymous function) ember.js?body=1:19827
Ember.Instrumentation.instrument ember.js?body=1:1627
Ember.CoreView.Ember.Object.extend.renderToBuffer ember.js?body=1:19826
Ember.View.Ember.CoreView.extend.createElement ember.js?body=1:21300
Ember.merge.insertElement ember.js?body=1:22248
Ember.View.Ember.CoreView.extend._insertElement ember.js?body=1:21228
DeferredActionQueues.flush ember.js?body=1:5593
Backburner.end ember.js?body=1:5684
Backburner.run ember.js?body=1:5723
Ember.run ember.js?body=1:6084
(anonymous function) ember.js?body=1:36366
jQuery.Callbacks.fire jquery.js?body=1:3049
jQuery.Callbacks.self.fireWith jquery.js?body=1:3161
jQuery.extend.ready jquery.js?body=1:434
completed

Any thoughts on what may be causing this?

Ember CLI Port?

Have you thought of porting this to CLI ember-cli/ember-cli#1216

Doesn't work in Ember 1.11.0

It seems that perhaps this issue broke the plugin. this is no longer passed to helpers, thus causing an error when registering the helper.

Add ability to auto dismiss flash messages using a timer

I'm at a point in my project where I'd like to have flash messages automatically disappear after a certain amount of time. Ideally, they would be animated out - something that users would want to configure on an app by app basis.

I've been hacking away on this locally, but have not been able to find a clean solution yet.

In terms of API, I was thinking something along the lines of:

this.flashMessage('I will disappear in 0.5 seconds', 'success', 500);

Once the 500 milliseconds is up, some kind of callback would be triggered on the view, which the user could just extend in their own application to create the desired animation.

I'm hitting a couple problems trying to get this to work:

I think the fact that we are creating anonymous views makes it impossible to have some kind of extendable callback.
Testing this stuff is brutal due to way qunit handles the run loop and async tests in general.

Any thoughts on this would be much appreciated. I may just hack it into my project and come back to this later.

Bower Version

I added this repo to the bower registry under the name "ember-flash-message", but since it doesn't have any versions defined it can't be used. Can you tag

Any way to use from controller?

Hi there, thanks for creating this. Is there an easy way to put up a flash message from a controller? Usual use case is after a model is updated or saved inside a controller action, and I want to put up a flash message with success/error status, currently using it from router only doesn't allow me to express these situations, unless im missing something..

Guess we would have to inject it into each controller using application initializer?

message.text is empty when setting message from controller

This is the version I'm using.

When I set the flash message in a controller message.text in the template ends up being blank. I have to use message instead. My workaround for now is to use this in my template:

        {{#if message.text}}
          {{message.text}}
        {{else}}
          {{message}}
        {{/if}}

Dismiss Flash Message

Is there an easy way to dismiss the provided flash messages on a click event or timeout?

add a tutorial on how to use multiple flashMessages in one application

i would suggest adding a section about it to the readme.

How to set class/type when using in controller?

Hello there,

I want to trigger flash messages from within controllers because that's where my actions lie.
Is there a way to set the class/type of the flashmessage within a controller, too?

I already tried stuff like:

App.PostController = Ember.ObjectController.extend({
  needs: ['flashMessage'],
  actions: {
    // ...
    removePost: function () {
      var confirmed = confirm("Are you sure you want to remove the post \"" + this.get('title') + "\"?");
      if (confirmed) {
        var post = this.get('model');
        post.deleteRecord();
        post.save();
        var flashMessage = this.get('controllers.flashMessage');
        this.transitionTo('posts')
        .then(function() {
          flashMessage.set('message', 'Blog post removed!');
          flashMessage.set('message.type', 'alert alert-success');
        });
      }
    }
  }
});

... but my resulting flashmessage keeps having an empty class attribute.

P.S.: I'm using @treygriffith's version since I'm on ember 1.10.0.
P.P.S.: I just noticed that the message text isn't showing either! So both parameters are not being send to the output properly.

add bower support

i would suggest adding support for bower.

Message not rendering after transitionTo call.

Hi there Ryan, the problem I'm having is the flashmessage call renders when I don't use transitionTo, but when I do it does not render. As requested I've made a JSBin of the issue I've been having. Annoyingly, the JSBin works. Barring using Ember App Kit and the local storage adapter, it's essentially how my code is laid out.

http://jsbin.com/denitora/3/edit

I did manage to get some info that might pertain to the problem- Using the Ember Chrome Plugin and putting some console logs in your code, I found out that the currentMessage value survives the route transition, but doesn't seem to render.

This would indicate that the problem might be somewhere in the helper.

Any suggestions?

Flash Message Types

It'd be helpful to have different types of flash messages (e.g. – notice, success, error). Ideally the type of message would be outputted as a HTML class on the view so that they could be styled appropriately.

Creating a flash:

router.flashMessage('success', 'You made it!');
router.flashMessage('notice', 'Be warned.');
router.flashMessage('error', 'You have made a huge mistake.');

Resulting Ember view HTML:

<div class="flash-message success">You've made it!</div>
<div class="flash-message notice">Be warned.</div>
<div class="flash-message error">You've made a huge mistake.</div>