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.
86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
2 years ago
|
import { Intent, Position, Toaster } from '@blueprintjs/core';
|
||
|
import $ from 'jquery';
|
||
2 years ago
|
import { tpl, zIndexManager } from 'vj/utils/base';
|
||
4 years ago
|
|
||
3 years ago
|
const ToasterContainer = document.createElement('div');
|
||
|
ToasterContainer.style.position = 'fixed';
|
||
|
ToasterContainer.style.bottom = '0px';
|
||
|
ToasterContainer.style.zIndex = '9999';
|
||
|
document.body.append(ToasterContainer);
|
||
|
|
||
|
export const AppToaster = Toaster.create({
|
||
|
className: 'recipe-toaster',
|
||
|
position: Position.LEFT_BOTTOM,
|
||
|
usePortal: true,
|
||
2 years ago
|
} as any, ToasterContainer);
|
||
|
|
||
|
interface NotificationOptions {
|
||
|
avatar?: string;
|
||
|
title?: string;
|
||
|
message: string;
|
||
|
type?: string;
|
||
|
duration?: number;
|
||
|
action?: any;
|
||
|
}
|
||
3 years ago
|
|
||
4 years ago
|
export default class Notification {
|
||
2 years ago
|
type: string;
|
||
|
action: any;
|
||
|
$dom: JQuery<HTMLElement>;
|
||
|
$n: JQuery<HTMLElement>;
|
||
|
duration: number;
|
||
|
autoHideTimer?: NodeJS.Timeout;
|
||
|
|
||
4 years ago
|
constructor({
|
||
|
avatar, title, message, type = '', duration = 3000, action,
|
||
2 years ago
|
}: NotificationOptions) {
|
||
4 years ago
|
this.type = type;
|
||
|
if (avatar) this.type += ' avatar';
|
||
|
if (title) this.type += ' title';
|
||
4 years ago
|
this.action = action || (() => { });
|
||
4 years ago
|
this.$dom = $(tpl`<div class="notification ${type} hide"></div>`);
|
||
|
if (avatar) $(tpl`<img width="64" height="64" class="avatar" src="${avatar}"></img>`).appendTo(this.$dom);
|
||
4 years ago
|
if (title) {
|
||
|
$(tpl`<div class="notification-content"><h2>${title}</h2><p>${message}</p></div>`).appendTo(this.$dom);
|
||
|
} else $(tpl`<p>${message}</p>`).appendTo(this.$dom);
|
||
|
this.$dom.on('click', this.handleClick.bind(this));
|
||
4 years ago
|
this.$n = this.$dom
|
||
|
.css('z-index', zIndexManager.getNext())
|
||
4 years ago
|
.appendTo(document.body);
|
||
4 years ago
|
this.$n.width(); // force reflow
|
||
4 years ago
|
this.duration = duration;
|
||
4 years ago
|
}
|
||
|
|
||
|
handleClick() {
|
||
|
this.action();
|
||
|
}
|
||
|
|
||
4 years ago
|
show(autohide = true) {
|
||
|
this.$n.removeClass('hide');
|
||
|
if (this.duration && autohide) this.autoHideTimer = setTimeout(this.hide.bind(this), this.duration);
|
||
|
}
|
||
|
|
||
4 years ago
|
hide() {
|
||
|
this.$n.addClass('hide');
|
||
|
setTimeout(() => this.$n.remove(), 200);
|
||
|
}
|
||
|
|
||
2 years ago
|
static success(message: string, duration?: number) {
|
||
3 years ago
|
return AppToaster.show({ message, timeout: duration, intent: Intent.SUCCESS });
|
||
4 years ago
|
}
|
||
|
|
||
2 years ago
|
static info(message: string, duration?: number) {
|
||
3 years ago
|
return AppToaster.show({ message, timeout: duration, intent: Intent.PRIMARY });
|
||
4 years ago
|
}
|
||
|
|
||
2 years ago
|
static warn(message: string, duration?: number) {
|
||
3 years ago
|
return AppToaster.show({ message, timeout: duration, intent: Intent.WARNING });
|
||
4 years ago
|
}
|
||
|
|
||
2 years ago
|
static error(message: string, duration?: number) {
|
||
3 years ago
|
return AppToaster.show({ message, timeout: duration, intent: Intent.DANGER });
|
||
4 years ago
|
}
|
||
|
}
|
||
|
|
||
|
window.Hydro.components.Notification = Notification;
|