mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-05-24 15:49:59 +08:00
Converted jQuery bits into raw JS components
This commit is contained in:
40
resources/assets/js/components/notification.js
Normal file
40
resources/assets/js/components/notification.js
Normal file
@ -0,0 +1,40 @@
|
||||
|
||||
class Notification {
|
||||
|
||||
constructor(elem) {
|
||||
this.elem = elem;
|
||||
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);
|
||||
this.show(text);
|
||||
});
|
||||
elem.addEventListener('click', this.hide.bind(this));
|
||||
if (elem.hasAttribute('data-show')) this.show(this.textElem.textContent);
|
||||
}
|
||||
|
||||
show(textToShow = '') {
|
||||
this.textElem.textContent = textToShow;
|
||||
this.elem.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
this.elem.classList.add('showing');
|
||||
}, 1);
|
||||
|
||||
if (this.autohide) setTimeout(this.hide.bind(this), 2000);
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.elem.classList.remove('showing');
|
||||
|
||||
function transitionEnd() {
|
||||
this.elem.style.display = 'none';
|
||||
this.elem.removeEventListener('transitionend', transitionEnd);
|
||||
}
|
||||
|
||||
this.elem.addEventListener('transitionend', transitionEnd.bind(this));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = Notification;
|
Reference in New Issue
Block a user