2017-08-22 10:53:26 +03:00
|
|
|
import Component from '@ember/component';
|
2022-02-01 12:34:03 +03:00
|
|
|
import classic from 'ember-classic-decorator';
|
|
|
|
import {action, computed} from '@ember/object';
|
|
|
|
import {classNameBindings, classNames, tagName} from '@ember-decorators/component';
|
2020-01-10 18:12:39 +03:00
|
|
|
import {run} from '@ember/runloop';
|
2017-10-30 12:38:01 +03:00
|
|
|
import {inject as service} from '@ember/service';
|
2015-10-28 14:36:45 +03:00
|
|
|
|
2022-02-01 12:34:03 +03:00
|
|
|
@classic
|
|
|
|
@tagName('article')
|
|
|
|
@classNames('gh-notification', 'gh-notification-passive')
|
|
|
|
@classNameBindings('typeClass')
|
|
|
|
export default class GhNotification extends Component {
|
|
|
|
@service
|
|
|
|
notifications;
|
2018-01-11 20:43:23 +03:00
|
|
|
|
2022-02-01 12:34:03 +03:00
|
|
|
message = null;
|
2014-03-22 16:08:15 +04:00
|
|
|
|
2022-02-01 12:34:03 +03:00
|
|
|
@computed('message.type')
|
|
|
|
get typeClass() {
|
2015-10-28 14:36:45 +03:00
|
|
|
let type = this.get('message.type');
|
|
|
|
let classes = '';
|
|
|
|
let typeMapping;
|
2014-07-09 08:17:30 +04:00
|
|
|
|
2015-06-19 00:56:18 +03:00
|
|
|
typeMapping = {
|
|
|
|
error: 'red',
|
|
|
|
warn: 'yellow'
|
|
|
|
};
|
2014-07-09 08:17:30 +04:00
|
|
|
|
2015-06-19 00:56:18 +03:00
|
|
|
if (typeMapping[type] !== undefined) {
|
2015-10-28 14:36:45 +03:00
|
|
|
classes += `gh-notification-${typeMapping[type]}`;
|
2014-07-09 08:17:30 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
return classes;
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2014-07-09 08:17:30 +04:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
didInsertElement() {
|
2022-02-01 12:34:03 +03:00
|
|
|
super.didInsertElement(...arguments);
|
2015-11-15 14:06:49 +03:00
|
|
|
|
2020-01-10 18:12:39 +03:00
|
|
|
this._animationEndHandler = run.bind(this, function () {
|
2020-01-20 18:30:24 +03:00
|
|
|
if (event.animationName === 'fade-out') {
|
2019-03-06 16:53:54 +03:00
|
|
|
this.notifications.closeNotification(this.message);
|
2014-07-13 18:00:25 +04:00
|
|
|
}
|
2014-03-22 16:08:15 +04:00
|
|
|
});
|
2020-01-10 18:12:39 +03:00
|
|
|
|
|
|
|
this.element.addEventListener('animationend', this._animationEndHandler);
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2014-03-22 16:08:15 +04:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
willDestroyElement() {
|
2022-02-01 12:34:03 +03:00
|
|
|
super.willDestroyElement(...arguments);
|
2020-01-10 18:12:39 +03:00
|
|
|
this.element.removeEventListener('animationend', this._animationEndHandler);
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|
2015-06-19 00:56:18 +03:00
|
|
|
|
2022-02-01 12:34:03 +03:00
|
|
|
@action
|
|
|
|
closeNotification() {
|
|
|
|
this.notifications.closeNotification(this.message);
|
2014-03-22 16:08:15 +04:00
|
|
|
}
|
2022-02-01 12:34:03 +03:00
|
|
|
}
|