89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
import Log from "../Log";
|
|
import IWHNotify from "../../interface/IWHNotify";
|
|
import NotificationUtils from "./NotificationUtils";
|
|
import WuhuBase from "../WuhuBase";
|
|
import MathUtils from "./MathUtils";
|
|
|
|
export default class Alert extends WuhuBase {
|
|
private static container: HTMLElement = null;
|
|
|
|
private notify: MyHTMLElement = null;
|
|
private intervalID = -1;
|
|
private readonly callback: Function;
|
|
|
|
public constructor(msg: string, options: IWHNotify = {}) {
|
|
super();
|
|
|
|
let { timeout, callback, sysNotify, } = options;
|
|
|
|
// 后台窗口、iframe内判断
|
|
if (!Alert.glob.isWindowActive.get() || (self !== top)) return null;
|
|
|
|
// 通知的容器
|
|
if (Alert.container === null) Alert.initContainer();
|
|
|
|
this.callback = callback || (() => null);
|
|
Alert.create(this, msg, timeout || 3);
|
|
Log.info('创建新通知：', this);
|
|
if (sysNotify) NotificationUtils.getInstance().push(msg, options);
|
|
}
|
|
|
|
private static create(that: Alert, msg, timeout): void {
|
|
let mathUtils: MathUtils = MathUtils.getInstance();
|
|
// 通知的唯一id
|
|
const uid = '' + mathUtils.getRandomInt(1000, 9999);
|
|
// const uid = '' + performance.now();
|
|
// 每条通知
|
|
const element: MyHTMLElement = document.createElement('div');
|
|
element.id = `wh-notify-${ uid }`;
|
|
element.classList.add('wh-notify-item');
|
|
element.innerHTML = `<div class="wh-notify-bar"></div>
|
|
<div class="wh-notify-cont">
|
|
<div class="wh-notify-close"></div>
|
|
<div class="wh-notify-msg"><p>${ msg }</p></div>
|
|
</div>`;
|
|
this.container.append(element);
|
|
// 进度条node
|
|
const progressBar: HTMLElement = element.querySelector('.wh-notify-bar');
|
|
// 是否hover
|
|
let mouse_enter = false;
|
|
element.addEventListener('mouseenter', () => mouse_enter = true, true);
|
|
element.addEventListener('mouseleave', () => mouse_enter = false);
|
|
// 通知进度条
|
|
let progressCount = 101;
|
|
// 计时器
|
|
that.intervalID = window.setInterval(() => {
|
|
if (mouse_enter) {
|
|
progressCount = 101;
|
|
progressBar.style.width = '100%';
|
|
return;
|
|
}
|
|
progressCount--;
|
|
progressBar.style.width = `${ progressCount }%`;
|
|
if (progressCount === 0) {
|
|
that.close();
|
|
}
|
|
}, timeout * 1000 / 100) as unknown as number;
|
|
element.querySelector('.wh-notify-close').addEventListener('click', that.close);
|
|
that.notify = element;
|
|
Log.info(that.notify)
|
|
}
|
|
|
|
private static initContainer() {
|
|
this.container = document.createElement('div');
|
|
this.container.id = 'wh-notify';
|
|
document.body.append(this.container);
|
|
}
|
|
|
|
public close() {
|
|
this.notify.remove();
|
|
this.notify = null;
|
|
this.callback();
|
|
let id = this.intervalID;
|
|
window.clearInterval(id);
|
|
}
|
|
|
|
public getElement() {
|
|
return this.notify;
|
|
}
|
|
} |