import {sleep} from "./utils.js";
import {$t} from "./i18n.js";
class Toast{
constructor() {
this.info_icon = ``
this.success_icon = ``
this.error_icon = ``
this.warn_icon = ``
this.loading_icon = ``
}
async showToast(data){
let container = document.querySelector(".easyuse-toast-container");
if (!container) {
container = document.createElement("div");
container.classList.add("easyuse-toast-container");
document.body.appendChild(container);
}
await this.hideToast(data.id);
const toastContainer = document.createElement("div");
const content = document.createElement("span");
content.innerHTML = data.content;
toastContainer.appendChild(content);
for (let a = 0; a < (data.actions || []).length; a++) {
const action = data.actions[a];
if (a > 0) {
const sep = document.createElement("span");
sep.innerHTML = " | ";
toastContainer.appendChild(sep);
}
const actionEl = document.createElement("a");
actionEl.innerText = action.label;
if (action.href) {
actionEl.target = "_blank";
actionEl.href = action.href;
}
if (action.callback) {
actionEl.onclick = (e) => {
return action.callback(e);
};
}
toastContainer.appendChild(actionEl);
}
const animContainer = document.createElement("div");
animContainer.setAttribute("toast-id", data.id);
animContainer.appendChild(toastContainer);
container.appendChild(animContainer);
await sleep(64);
animContainer.style.marginTop = `-${animContainer.offsetHeight}px`;
await sleep(64);
animContainer.classList.add("-show");
if (data.duration) {
await sleep(data.duration);
this.hideToast(data.id);
}
}
async hideToast(id) {
const msg = document.querySelector(`.easyuse-toast-container > [toast-id="${id}"]`);
if (msg === null || msg === void 0 ? void 0 : msg.classList.contains("-show")) {
msg.classList.remove("-show");
await sleep(750);
}
msg && msg.remove();
}
async clearAllMessages() {
let container = document.querySelector(".easyuse-toast-container");
container && (container.innerHTML = "");
}
async copyright(duration = 5000, actions = []) {
this.showToast({
id: `toast-info`,
content: `${this.info_icon} ${$t('Workflow created by')} Yolain , ${$t('Watch more video content')} B站乱乱呀`,
duration,
actions
});
}
async info(content, duration = 3000, actions = []) {
this.showToast({
id: `toast-info`,
content: `${this.info_icon} ${content}`,
duration,
actions
});
}
async success(content, duration = 3000, actions = []) {
this.showToast({
id: `toast-success`,
content: `${this.success_icon} ${content}`,
duration,
actions
});
}
async error(content, duration = 3000, actions = []) {
this.showToast({
id: `toast-error`,
content: `${this.error_icon} ${content}`,
duration,
actions
});
}
async warn(content, duration = 3000, actions = []) {
this.showToast({
id: `toast-warn`,
content: `${this.warn_icon} ${content}`,
duration,
actions
});
}
async showLoading(content, duration = 0, actions = []) {
this.showToast({
id: `toast-loading`,
content: `${this.loading_icon} ${content}`,
duration,
actions
});
}
async hideLoading() {
this.hideToast("toast-loading");
}
}
export const toast = new Toast();