46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
|
|
class Notification {
|
|
|
|
constructor(elem) {
|
|
this.elem = elem;
|
|
this.type = elem.getAttribute('notification');
|
|
this.textElem = elem.querySelector('span');
|
|
this.autohide = this.elem.hasAttribute('data-autohide');
|
|
this.elem.style.display = 'grid';
|
|
|
|
window.$events.listen(this.type, text => {
|
|
this.show(text);
|
|
});
|
|
elem.addEventListener('click', this.hide.bind(this));
|
|
|
|
if (elem.hasAttribute('data-show')) {
|
|
setTimeout(() => this.show(this.textElem.textContent), 100);
|
|
}
|
|
|
|
this.hideCleanup = this.hideCleanup.bind(this);
|
|
}
|
|
|
|
show(textToShow = '') {
|
|
this.elem.removeEventListener('transitionend', this.hideCleanup);
|
|
this.textElem.textContent = textToShow;
|
|
this.elem.style.display = 'grid';
|
|
setTimeout(() => {
|
|
this.elem.classList.add('showing');
|
|
}, 1);
|
|
|
|
if (this.autohide) setTimeout(this.hide.bind(this), 2000);
|
|
}
|
|
|
|
hide() {
|
|
this.elem.classList.remove('showing');
|
|
this.elem.addEventListener('transitionend', this.hideCleanup);
|
|
}
|
|
|
|
hideCleanup() {
|
|
this.elem.style.display = 'none';
|
|
this.elem.removeEventListener('transitionend', this.hideCleanup);
|
|
}
|
|
|
|
}
|
|
|
|
export default Notification; |