Ember-addon-toast-message

Installation

• ember install ember-addon-toast-message

or add it to the package.json and run npm install

The add-on contains a service notification and a component notification-toast-message. To use the add-on you need to bind the service to the component properties.

Example usage

In your template

{{notification-toast-message
  isOpen=notification.isOpen
  type=notification.type
  message=notification.message
  icon=notification.icon
  actionToBeExecuted=notification.actionToBeExecuted
  actionText=notification.actionText
  transitionObjectSelector=notification.transitionObjectSelector}}

In your controller

notification: Ember.inject.service(),

And to activate your toast you need to call the show() method of the service.

this.get('notification').show(
                "Could not save your record", //Message to be shown
                "default",  //Type of the notification
                this.retryAction, //Action the toast message will invoked once clicked on the button
                "Retry", //Message for the button which invoked the action
                ".save-btn") //This is a query selector for one html element

• When calling the show method, Type error is thrown if query selector is passed and no element is found.
• Every property is mandatory except the message in the toast.
• If an action is passed to the show() method, the toast will last 5 seconds (5000ms) and if not 2 seconds (2000ms)

Meaning of the components properties.

1. isOpen Controlls if the toast is shown or not. When this property changes (from the show() function in the service) it will display the toast.
2. type This is the type of the notification (default / static-notification)
3. message The message which will be displayed in the toast.
4. icon The icon which will be displayed in the toast.
5. actionToBeExecuted Closure which will be invoked if the action button is clicked.
6. actionText The text of the action button.
7. transitionObjectSelector This is a query selector for one html element. If present in the DOM, that element will be moved up to compensate the height of the toast.

If the show() method is called twice, the service will wait untill the first toast disappears.

TODO

• [ ] Currently the toast transitions with fixed height (75px) for desktop, remove the hardcoded px