Wilson@思源

目 录

模拟官方showMessage函数

js
function showMessage(message, timeout = 6000, type = "info", messageId){ const messagesElement = document.getElementById("message").firstElementChild; if (!messagesElement) { alert(message); return ; } const genUUID = () => ([1e7].toString() + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (parseInt(c, 10) ^ (window.crypto.getRandomValues(new Uint32Array(1))[0] & (15 >> (parseInt(c, 10) / 4)))).toString(16) ); const id = messageId || genUUID(); const existElement = messagesElement.querySelector(`.b3-snackbar[data-id="${id}"]`); const messageVersion = message + (type === "error" ? " v" + Constants.SIYUAN_VERSION : ""); if (existElement) { window.clearTimeout(parseInt(existElement.getAttribute("data-timeoutid"))); existElement.innerHTML = `
${messageVersion}
${timeout === 0 ? '' : ""}`; if (type === "error") { existElement.classList.add("b3-snackbar--error"); } else { existElement.classList.remove("b3-snackbar--error"); } if (timeout > 0) { const timeoutId = window.setTimeout(() => { hideMessage(id); }, timeout); existElement.setAttribute("data-timeoutid", timeoutId.toString()); } return; } let messageHTML = `
${messageVersion}
`; if (timeout === 0) { messageHTML += ''; } else if (timeout !== -1) { // -1 时需等待请求完成后手动关闭 const timeoutId = window.setTimeout(() => { hideMessage(id); }, timeout); messageHTML = messageHTML.replace("
"); setTimeout(() => { messagesElement.querySelectorAll(".b3-snackbar--hide").forEach(item => { item.classList.remove("b3-snackbar--hide"); }); }); if (messagesElement.firstElementChild.nextElementSibling && messagesElement.firstElementChild.nextElementSibling.innerHTML === messagesElement.firstElementChild.innerHTML) { messagesElement.firstElementChild.nextElementSibling.remove(); } messagesElement.scrollTo({ top: 0, behavior: "smooth" }); return id; } function hideMessage(id) { const messagesElement = document.getElementById("message").firstElementChild; if (!messagesElement) { return; } if (id) { const messageElement = messagesElement.querySelector(`[data-id="${id}"]`); if (messageElement) { messageElement.classList.add("b3-snackbar--hide"); window.clearTimeout(parseInt(messageElement.getAttribute("data-timeoutid"))); setTimeout(() => { messageElement.remove(); if (messagesElement.childElementCount === 0) { messagesElement.parentElement.classList.remove("b3-snackbars--show"); messagesElement.innerHTML = ""; } }, 256); } let hasShowItem = false; Array.from(messagesElement.children).find(item => { if (!item.classList.contains("b3-snackbar--hide")) { hasShowItem = true; return true; } }); if (hasShowItem) { messagesElement.parentElement.classList.add("b3-snackbars--show"); } else { messagesElement.parentElement.classList.remove("b3-snackbars--show"); } } else { messagesElement.parentElement.classList.remove("b3-snackbars--show"); setTimeout(() => { messagesElement.innerHTML = ""; }, 256); } }