You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
5 years ago
|
import tpl from 'vj/utils/tpl';
|
||
|
|
import zIndexManager from 'vj/utils/zIndexManager';
|
||
|
|
|
||
|
|
let lastNotification = null;
|
||
|
|
let autoHideTimer = null;
|
||
|
|
|
||
|
|
export default class Notification {
|
||
|
|
static success(message, duration) {
|
||
|
|
Notification.show({ type: 'success', message, duration });
|
||
|
|
}
|
||
|
|
|
||
|
|
static info(message, duration) {
|
||
|
|
Notification.show({ type: 'info', message, duration });
|
||
|
|
}
|
||
|
|
|
||
|
|
static warn(message, duration) {
|
||
|
|
Notification.show({ type: 'warn', message, duration });
|
||
|
|
}
|
||
|
|
|
||
|
|
static error(message, duration) {
|
||
|
|
Notification.show({ type: 'error', message, duration });
|
||
|
|
}
|
||
|
|
|
||
|
|
static show({ message, type = 'info', duration = 3000 }) {
|
||
|
|
if (lastNotification) {
|
||
|
|
Notification.hide();
|
||
|
|
}
|
||
|
|
const $n = $(tpl`<div class="notification ${type} hide">${message}</div>`)
|
||
|
|
.css('z-index', zIndexManager.getNext())
|
||
|
|
.appendTo('body');
|
||
|
|
$n.width(); // force reflow
|
||
|
|
$n.removeClass('hide');
|
||
|
|
lastNotification = $n;
|
||
|
|
autoHideTimer = setTimeout(Notification.hide, duration);
|
||
|
|
}
|
||
|
|
|
||
|
|
static hide() {
|
||
|
|
if (!lastNotification) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (autoHideTimer) {
|
||
|
|
clearTimeout(autoHideTimer);
|
||
|
|
autoHideTimer = null;
|
||
|
|
}
|
||
|
|
const $n = lastNotification;
|
||
|
|
$n.addClass('hide');
|
||
|
|
setTimeout(() => $n.remove(), 200);
|
||
|
|
lastNotification = null;
|
||
|
|
}
|
||
|
|
}
|