ember-cli-notifications

An Ember CLI addon that adds Atom inspired notification messages to your app.

Check out the demo.

Installation

ember install ember-cli-notifications

Usage

In v3.1.0 we simplified the API for calling notifications in your Ember application. These were not breaking changes and using the pre v3.1.0 API will still work today.

The old API documentation can be viewed here.

Add a notification

There are four types of notification available.

// Info
this.notifications.info('You have one unread message');

// Error
this.notifications.error('Something went wrong');

// Success
this.notifications.success('Saved successfully!');

// Warning
this.notifications.warning('You have unsaved changes');

Add a notification with autoClear

actions: {
  saveOptions() {
    this.get('model').save()
    .then(() => {
      this.notifications.success('Successfully saved your settings', {
        autoClear: true
      });
    }),
    .catch((err) => {
      this.notifications.error('Something went wrong');
    });
  }
}

Add a clickable notification with callback

actions: {
  saveOptions() {
    this.get('model').save()
    .then(() => {
      this.notifications.success('Successfully saved your settings', {
        autoClear: true
      });
    }),
    .catch((err) => {
      this.notifications.error('Something went wrong - click to retry.', {
        onClick: (notification) => {
            this.get('model').save();
        }
      });
    });
  }
}

Remove all active notifications using clearAll() before adding a new notification

actions: {
  saveOptions() {
    this.get('model').save()
    .then(() => {
      this.notifications.clearAll();
      this.notifications.success('Successfully saved your settings');
    })
  }
}

Set a global, default duration time

This code only needs to be called in one place such as your application route.

this.notifications.setDefaultClearNotification(1000);

Set a global, default auto clear option

This code only needs to be called in one place such as your application route.

this.notifications.setDefaultAutoClear(true);

Template

Include this snippet in your Handlebars template to display the notifications.

{{notification-container notifications=notifications}}

Icons

Font Awesome is required as part of the addon to display the message type icons on the notifications.

If Font Awesome is not already included in the consuming application, add the following to your applications config/environment.js file as a property of the ENV object.

var ENV = {
  'ember-cli-notifications': {
    includeFontAwesome: true
  }
}

Alternatively, you can use Glyphicons that are packaged with Bootstrap. Glyphicons are not added to your application via this addon.

var ENV = {
  'ember-cli-notifications': {
    icons: 'bootstrap'
  }
}

Options

Auto clear

Boolean value that defines whether the notification message dismisses automatically, or whether it needs to be dismissed manually by the user.

If true, inherits the default clearDuration value unless specified.

Default value is false

Example

this.notifications.success('Successfully saved your settings', {
  autoClear: true
});

Clear duration

The time in milliseconds that the notification will automatically dismiss after, if autoClear is true.

Default value is 3200

Example

this.notifications.success('Successfully saved your settings', {
  autoClear: true,
  clearDuration: 1200
});