Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-28 09:54:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ https://github.com/siyuan-note/siyuan/issues/5071

Browse source
This commit is contained in:
Vanessa 2022-06-05 00:48:29 +08:00
parent 64ae905921
commit ff3cd4d4e9
21 changed files with 117 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

81
app/src/dialog/message.ts
View file

@ -1,41 +1,56 @@
let timeoutId: number;
export const showMessage = (message: string, timeout = 6000, type = "info") => {
clearTimeout(timeoutId);
import {genUUID} from "../util/genID";
let messageElement = document.getElementById("message");
if (!messageElement) {
document.body.insertAdjacentHTML("beforeend", '<div class="b3-snackbar" id="message"></div>');
messageElement = document.getElementById("message");
}
if (type === "error") {
messageElement.classList.add("b3-snackbar--error");
} else {
messageElement.classList.remove("b3-snackbar--error");
}
if (timeout === 0) {
messageElement.innerHTML = `<div class="b3-snackbar__content">${message}
<svg class="b3-snackbar__close fn__a"><use xlink:href="#iconClose"></use></svg></div>`;
messageElement.querySelector(".b3-snackbar__close").addEventListener("click", () => {
hideMessage();
});
} else {
messageElement.innerHTML = `<div class="b3-snackbar__content">${message}</div>`;
if (timeout !== -1) {
timeoutId = window.setTimeout(() => {
hideMessage();
}, timeout);
export const initMessage = () => {
const messageElement = document.getElementById("message")
messageElement.innerHTML = `<div class="fn__flex-1"></div>
<div class="fn__hr fn__flex-shrink"></div>
<button class="fn__flex-center b3-button b3-button--cancel">
${window.siyuan.languages.close}
</button>`
messageElement.addEventListener("click", (event) => {
let target = event.target as HTMLElement
while (target && !target.isEqualNode(messageElement)) {
if (target.classList.contains("b3-snackbar__close")) {
hideMessage(target.parentElement.getAttribute("data-id"))
event.preventDefault();
break;
} else if (target.isSameNode(messageElement.lastElementChild)) {
target.parentElement.classList.add("fn__none");
target.parentElement.innerHTML = '';
event.preventDefault();
break;
}
target = target.parentElement;
}
})
}
export const showMessage = (message: string, timeout = 6000, type = "info") => {
const id = genUUID();
let messageHTML = `<div data-id="${id}" class="b3-snackbar${type === "error" ? " b3-snackbar--error" : ""}"><div class="b3-snackbar__content">${message}</div>`;
if (timeout === 0) {
messageHTML += '<svg class="b3-snackbar__close"><use xlink:href="#iconClose"></use></svg>';
} else if (timeout !== -1) { // -1 时需等待请求完成后手动关闭
window.setTimeout(() => {
hideMessage(id);
}, timeout);
}
setTimeout(() => {
messageElement.classList.add("b3-snackbar--show");
});
const messagesElement = document.getElementById("message").firstElementChild
if (messagesElement.childElementCount === 0) {
messagesElement.parentElement.classList.remove("fn__none")
}
messagesElement.insertAdjacentHTML("afterbegin", messageHTML + "</div>");
messagesElement.scrollTop = 0;
return id;
};
export const hideMessage = () => {
const messageElement = document.getElementById("message");
export const hideMessage = (id: string) => {
const messagesElement = document.getElementById("message").firstElementChild
const messageElement = messagesElement.querySelector(`[data-id="${id}"]`);
if (messageElement) {
messageElement.innerHTML = "";
messageElement.classList.remove("b3-snackbar--show");
messageElement.remove();
}
if (messagesElement.childElementCount === 0) {
messagesElement.parentElement.classList.add("fn__none")
}
};