ember-cli-notifications

Installation

ember install ember-cli-notifications

Basic usage

Include the container component in your template.

Optionally, change the position or z-index value of the notifications container.

Default value is top

{{notification-container position="top-right" zindex="9999"}}

Inject the notifications service where required.

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  notifications: service(),
});

Or inject it everywhere with an initializer.

// app/initializers/inject-notifications.js
export function initialize(application) {
  ['controller', 'component', 'route'].forEach(injectionTarget => {
    application.inject(injectionTarget, 'notifications', 'notification-messages:service');
  });
};

export default {
  name: 'inject-notifications',
  initialize
};

There are four styles of notification available.

Default value is 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');

htmlContent

You can enable basic HTML markup for notification messages.

Warning: This introduces a potential security risk since the notification message will no longer be escaped by Ember.

this.notifications.info('You have <b>one</b> unread message', {
  htmlContent: true
});

Clearing notifications

autoClear

Set a notification to automatically clear. This will take precedence over the global default value.

If true, inherits the default clearDuration value unless specified.

Default value is false

this.notifications.success('Saved successfully!', {
  autoClear: true
});

clearDuration

Specify a duration (ms) before the notification clears. This will take precedence over the global default value.

Default value is 3200

this.notifications.success('Saved successfully!', {
  autoClear: true,
  clearDuration: 1200
});

clearAll

You can remove all present notifications before adding a new one.

this.notifications.clearAll().success('Saved successfully!', {
  autoClear: true
});

Notification with custom CSS

Pass a string of CSS classes to the notification component.

this.notifications.success('Saved successfully!', {
  autoClear: true,
  cssClasses: 'profile-saved-success-notification'
});

Notification with callback

Add the ability to click the notification for a callback.

this.notifications.error('Something went wrong. Click to try again', {
  onClick: (notification) => {
    this.get('model').save();
  }
});

Notification with callback on dismiss button

Add the ability to add a callback when dismiss button is clicked.

this.notifications.error('Something went wrong. Click to try again', {
  onDismiss: (notification) => {
    this.hasClickedDismissOnError = true
  }
});

Config

Globals

Set the global default values for autoClear and clearDuration.

// config/environment.js
var ENV = {
  'ember-cli-notifications': {
    autoClear: true,
    clearDuration: 2400
  }
}

Extend

The notifications service can be imported into the consuming app and extended.

// app/services/notifications.js
import NotificationsService from 'ember-cli-notifications/services/notifications';

export default NotificationsService.extend({
  // Extend the imported service
});

Be sure to inject the new service into your app.