ember-notification (toastr style)

application:template.hbs

{{ember-notification}}

components.less

.status-notification {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
}

.notification-item {
  padding: 10px;
  margin: 7px 10px 0 0;
  color: #fff;

  &.error {
    background-color: #F46558;
  }

  &.success {
    background-color: #53B05A;
  }

  &:hover {
    .box-shadow(0 0 12px #000);
  }
}

ember-notification:component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['status-notification'],

  notificationService: Ember.inject.service('notification'),
  notifications: Ember.computed.alias('notificationService.notificationQueue'),

  actions: {
    removeNotification(notificationItem) {
      var self = this;
      notificationItem.$().fadeOut('slow', function() {
        self.get('notifications').removeObject(notificationItem.get('notification'));
      });
    }
  }
});

ember-notification:template.hbs

{{#each notifications as |notification|}}
  {{notification-item notification=notification on-close="removeNotification"}}
{{/each}}

notification-item:component.js

import Ember from 'ember';

const MESSAGEICONS = {
  success: 'icon-ok',
  error: 'icon-attention',
  warning: 'icon-attention'
};

let messageIconLookup = function(depKey) {
  return Ember.computed(depKey, function() {
    return MESSAGEICONS[this.get(depKey)];
  });
};

export default Ember.Component.extend({
  classNameBindings: [':notification-item', 'notification.type'],
  attributeBindings: ['style'],
  style: 'display:none;',

  notification: null,
  'on-close': null,
  showClose: true,
  closeTimeOut: 4000,

  _counter: 0,
  _countDownInProgress: true,

  messageIcon: messageIconLookup('notification.type'),
  fadeIn: function() {
    Ember.run.scheduleOnce('afterRender', this, function() {
      this.$().fadeIn('slow');
    });
  }.on('didInsertElement'),

  startCounter: function() {
    if(this.get('_countDownInProgress')) {
      if(this.get('_counter') <= this.get('closeTimeOut')) {
        Ember.run.later(this, function() {
          if(!this.get('isDestroyed')) {
            this.incrementProperty('_counter', 1000);
            this.startCounter();
          }
        }, 1000);
      } else {
        this.sendAction('on-close', this);
      }
    }
  }.on('didInsertElement'),

  pauseCounter: function() {
    this.set('_countDownInProgress', false);
  }.on('mouseEnter'),

  resumeCounter: function() {
    this.set('_countDownInProgress', true);
    this.startCounter();
  }.on('mouseLeave'),

  actions: {
    close() {
      this.sendAction('on-close', this);
    }
  }
});

notification-item:template.hbs

<div class="media">
  <div class="pull-left"><i class={{messageIcon}}></i></div>
  {{#if showClose}}
    <div class="pull-right" {{action "close"}}>
      <i class="icon-close font-small cursor-pointer" {{action "close"}}></i>
    </div>
  {{/if}}

  <div class="media-body">
    <span>{{notification.message}}</span>
  </div>
</div>

services:notification.js

//Currently uses bootstrap for css 
//TODO: 
// 1. Remove bootstrap dependency
// 2. Convert it into an ember addon

import Ember from 'ember';

export default Ember.Service.extend({
  notificationQueue: [],

  success(message) {
    this.get('notificationQueue').pushObject({
      message: message,
      type: 'success'
    });
  },

  error(message) {
    this.get('notificationQueue').pushObject({
      message: message,
      type: 'error'
    });
  },

  info(message) {
    this.get('notificationQueue').pushObject({
      message: message,
      type: 'info'
    });
  },
  
  warning(message) {
    this.get('notificationQueue').pushObject({
      message: message,
      type: 'warning'
    });
  }
});