mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
class Toast
|
|
{
|
|
constructor(message = "", title = "", type = "default")
|
|
{
|
|
this.type = type;
|
|
this.message = message;
|
|
this.title = title;
|
|
this.duration = 3000;
|
|
this.element = $(this.cardHtml)[0];
|
|
document.querySelector(".toast-card-container").insertAdjacentElement("beforeend", this.element);
|
|
}
|
|
show()
|
|
{
|
|
this.element.classList.add("visible");
|
|
this.element.querySelector(".toast-card-dismiss").addEventListener("click", () => this.dismiss());
|
|
if (this.duration)
|
|
{
|
|
setTimeout(() => this.dismiss(), this.duration);
|
|
}
|
|
}
|
|
dismiss()
|
|
{
|
|
if (this.element.classList.contains("visible"))
|
|
{
|
|
this.element.addEventListener("transitionend", () => this.element.remove());
|
|
this.element.classList.remove("visible");
|
|
}
|
|
}
|
|
get cardHtml()
|
|
{
|
|
return /*html*/`
|
|
<div class="toast-card icons-enabled toast-${this.type}">
|
|
<div class="toast-card-header">
|
|
<h1 class="toast-card-title">${this.title}</h1>
|
|
<div class="toast-card-dismiss">
|
|
<i class="icon-cancel"></i>
|
|
</div>
|
|
</div>
|
|
<div class="toast-card-message">${this.message}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
static get container()
|
|
{
|
|
return document.querySelector(".toast-card-container");
|
|
}
|
|
static createToastContainer()
|
|
{
|
|
if (!document.querySelector(".toast-card-container"))
|
|
{
|
|
document.body.insertAdjacentHTML("beforeend", /*html*/`<div class="toast-card-container"></div>`);
|
|
}
|
|
}
|
|
static internalShow(message, title, duration, type)
|
|
{
|
|
const toast = new Toast(message, title, type);
|
|
toast.duration = duration;
|
|
toast.show();
|
|
return toast;
|
|
}
|
|
static show(message, title, duration)
|
|
{
|
|
return this.internalShow(message, title, duration, "default");
|
|
}
|
|
static info(message, title, duration)
|
|
{
|
|
return this.internalShow(message, title, duration, "info");
|
|
}
|
|
static success(message, title, duration)
|
|
{
|
|
return this.internalShow(message, title, duration, "success");
|
|
}
|
|
static error(message, title, duration)
|
|
{
|
|
return this.internalShow(message, title, duration, "error");
|
|
}
|
|
}
|
|
|
|
resources.applyStyle("toastStyle");
|
|
Toast.createToastContainer();
|
|
|
|
export default {
|
|
export: Toast
|
|
}; |