2015-02-12 21:22:32 -07:00
|
|
|
import Ember from 'ember';
|
|
|
|
|
2015-10-28 11:36:45 +00:00
|
|
|
const {Component, computed, inject} = Ember;
|
|
|
|
|
|
|
|
export default Component.extend({
|
2015-05-21 11:03:24 -06:00
|
|
|
tagName: 'article',
|
2015-06-18 22:56:18 +01:00
|
|
|
classNames: ['gh-notification', 'gh-notification-passive'],
|
2015-05-21 11:03:24 -06:00
|
|
|
classNameBindings: ['typeClass'],
|
2014-03-22 12:08:15 +00:00
|
|
|
|
2015-05-25 21:10:50 -05:00
|
|
|
message: null,
|
|
|
|
|
2015-10-28 11:36:45 +00:00
|
|
|
notifications: inject.service(),
|
2015-05-25 21:10:50 -05:00
|
|
|
|
2015-10-28 11:36:45 +00:00
|
|
|
typeClass: computed('message.type', function () {
|
|
|
|
let type = this.get('message.type');
|
|
|
|
let classes = '';
|
|
|
|
let typeMapping;
|
2014-07-09 04:17:30 +00:00
|
|
|
|
2015-06-18 22:56:18 +01:00
|
|
|
typeMapping = {
|
|
|
|
success: 'green',
|
|
|
|
error: 'red',
|
|
|
|
warn: 'yellow'
|
|
|
|
};
|
2014-07-09 04:17:30 +00:00
|
|
|
|
2015-06-18 22:56:18 +01:00
|
|
|
if (typeMapping[type] !== undefined) {
|
2015-10-28 11:36:45 +00:00
|
|
|
classes += `gh-notification-${typeMapping[type]}`;
|
2014-07-09 04:17:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return classes;
|
2014-07-29 19:57:19 -06:00
|
|
|
}),
|
2014-07-09 04:17:30 +00:00
|
|
|
|
2015-10-28 11:36:45 +00:00
|
|
|
didInsertElement() {
|
2015-11-15 11:06:49 +00:00
|
|
|
this._super(...arguments);
|
|
|
|
|
2015-10-28 11:36:45 +00:00
|
|
|
this.$().on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', (event) => {
|
2014-07-13 15:00:25 +01:00
|
|
|
if (event.originalEvent.animationName === 'fade-out') {
|
2015-10-28 11:36:45 +00:00
|
|
|
this.get('notifications').closeNotification(this.get('message'));
|
2014-07-13 15:00:25 +01:00
|
|
|
}
|
2014-03-22 12:08:15 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-10-28 11:36:45 +00:00
|
|
|
willDestroyElement() {
|
2015-11-15 11:06:49 +00:00
|
|
|
this._super(...arguments);
|
2015-06-18 22:56:18 +01:00
|
|
|
this.$().off('animationend webkitAnimationEnd oanimationend MSAnimationEnd');
|
|
|
|
},
|
|
|
|
|
2014-03-22 12:08:15 +00:00
|
|
|
actions: {
|
2015-10-28 11:36:45 +00:00
|
|
|
closeNotification() {
|
2015-05-25 21:10:50 -05:00
|
|
|
this.get('notifications').closeNotification(this.get('message'));
|
2014-03-22 12:08:15 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|