this.type = elem.getAttribute('notification');
this.textElem = elem.querySelector('span');
this.autohide = this.elem.hasAttribute('data-autohide');
- window.Events.listen(this.type, text => {
- console.log('show', text);
+ window.$events.listen(this.type, text => {
this.show(text);
});
elem.addEventListener('click', this.hide.bind(this));
if (elem.hasAttribute('data-show')) this.show(this.textElem.textContent);
+
+ this.hideCleanup = this.hideCleanup.bind(this);
}
show(textToShow = '') {
+ this.elem.removeEventListener('transitionend', this.hideCleanup);
this.textElem.textContent = textToShow;
- this.elem.style.display = 'block';
+ this.elem.style.display = 'grid';
setTimeout(() => {
this.elem.classList.add('showing');
}, 1);
hide() {
this.elem.classList.remove('showing');
+ this.elem.addEventListener('transitionend', this.hideCleanup);
+ }
- function transitionEnd() {
- this.elem.style.display = 'none';
- this.elem.removeEventListener('transitionend', transitionEnd);
- }
-
- this.elem.addEventListener('transitionend', transitionEnd.bind(this));
+ hideCleanup() {
+ this.elem.style.display = 'none';
+ this.elem.removeEventListener('transitionend', this.hideCleanup);
}
}