webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Updated a batch of JS components

Browse Source
This commit is contained in:
Dan Brown
2022-11-15 11:24:31 +00:00
parent 09c6a3c240
commit 4310d34135
19 changed files with 124 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/components/notification.js
View File

@ -1,19 +1,21 @@
import {Component} from "./component";
class Notification {
export class Notification extends Component {
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';
setup() {
this.container = this.$el;
this.type = this.$opts.type;
this.textElem = this.container.querySelector('span');
this.autoHide = this.$opts.autoHide === 'true';
this.initialShow = this.$opts.show === 'true'
this.container.style.display = 'grid';
window.$events.listen(this.type, text => {
this.show(text);
});
elem.addEventListener('click', this.hide.bind(this));
this.container.addEventListener('click', this.hide.bind(this));
if (elem.hasAttribute('data-show')) {
if (this.initialShow) {
setTimeout(() => this.show(this.textElem.textContent), 100);
}
@ -21,14 +23,14 @@ class Notification {
}
show(textToShow = '') {
this.elem.removeEventListener('transitionend', this.hideCleanup);
this.container.removeEventListener('transitionend', this.hideCleanup);
this.textElem.textContent = textToShow;
this.elem.style.display = 'grid';
this.container.style.display = 'grid';
setTimeout(() => {
this.elem.classList.add('showing');
this.container.classList.add('showing');
}, 1);
if (this.autohide) {
if (this.autoHide) {
const words = textToShow.split(' ').length;
const timeToShow = Math.max(2000, 1000 + (250 * words));
setTimeout(this.hide.bind(this), timeToShow);
@ -36,15 +38,13 @@ class Notification {
}
hide() {
this.elem.classList.remove('showing');
this.elem.addEventListener('transitionend', this.hideCleanup);
this.container.classList.remove('showing');
this.container.addEventListener('transitionend', this.hideCleanup);
}
hideCleanup() {
this.elem.style.display = 'none';
this.elem.removeEventListener('transitionend', this.hideCleanup);
this.container.style.display = 'none';
this.container.removeEventListener('transitionend', this.hideCleanup);
}
}
export default Notification;
}