tooltip 支持多个类名、添加警告提示 https://github.com/siyuan-note/siyuan/issues/13536
This commit is contained in:
parent
d9cd42a978
commit
cd63a049c8
5 changed files with 24 additions and 15 deletions
|
@ -40,6 +40,10 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.block__icon[data-type="remove"]:hover {
|
||||
color: var(--b3-theme-error);
|
||||
}
|
||||
}
|
||||
|
||||
.b3-label {
|
||||
|
|
|
@ -26,10 +26,13 @@ export const initBlockPopover = (app: App) => {
|
|||
hasClosestByClassName(event.target, "av__calc--ashow") ||
|
||||
hasClosestByClassName(event.target, "av__cell");
|
||||
if (aElement) {
|
||||
let tooltipClass = "";
|
||||
const tooltipClasses: string[] = [];
|
||||
let tip = aElement.getAttribute("aria-label");
|
||||
if (aElement.classList.contains("ariaLabel--warning")) {
|
||||
tooltipClasses.push("error");
|
||||
}
|
||||
if (aElement.getAttribute("data-type") === "tab-header") {
|
||||
tooltipClass = "tab_header";
|
||||
tooltipClasses.push("tab_header");
|
||||
} else if (aElement.classList.contains("av__cell")) {
|
||||
if (aElement.classList.contains("av__cell--header")) {
|
||||
const textElement = aElement.querySelector(".av__celltext");
|
||||
|
@ -45,7 +48,7 @@ export const initBlockPopover = (app: App) => {
|
|||
if (aElement.firstElementChild?.getAttribute("data-type") === "url") {
|
||||
if (aElement.firstElementChild.textContent.indexOf("...") > -1) {
|
||||
tip = Lute.EscapeHTMLStr(aElement.firstElementChild.getAttribute("data-href"));
|
||||
tooltipClass = "href";
|
||||
tooltipClasses.push("href");
|
||||
}
|
||||
}
|
||||
if (!tip && aElement.dataset.wrap !== "true" && event.target.dataset.type !== "block-more" && !hasClosestByClassName(event.target, "block__icon")) {
|
||||
|
@ -69,14 +72,14 @@ export const initBlockPopover = (app: App) => {
|
|||
} else if (aElement.classList.contains("av__celltext--url")) {
|
||||
const title = aElement.getAttribute("data-name") || "";
|
||||
tip = tip ? `<span style="word-break: break-all">${tip.substring(0, Constants.SIZE_TITLE)}</span>${title ? '<div class="fn__hr"></div><span>' + title + "</span>" : ""}` : title;
|
||||
tooltipClass = "href";
|
||||
tooltipClasses.push("href");
|
||||
} else if (aElement.classList.contains("av__calc--ashow") && aElement.clientWidth + 2 < aElement.scrollWidth) {
|
||||
tip = aElement.lastChild.textContent + " " + aElement.firstElementChild.textContent;
|
||||
}
|
||||
if (!tip) {
|
||||
tip = aElement.getAttribute("data-inline-memo-content");
|
||||
if (tip) {
|
||||
tooltipClass = "memo"; // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
|
||||
tooltipClasses.push("memo"); // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
|
||||
}
|
||||
}
|
||||
if (!tip) {
|
||||
|
@ -84,7 +87,7 @@ export const initBlockPopover = (app: App) => {
|
|||
// 链接地址强制换行 https://github.com/siyuan-note/siyuan/issues/11539
|
||||
if (href) {
|
||||
tip = `<span style="word-break: break-all">${href.substring(0, Constants.SIZE_TITLE)}</span>`;
|
||||
tooltipClass = "href"; // 为超链接添加 class https://github.com/siyuan-note/siyuan/issues/11440#issuecomment-2119080691
|
||||
tooltipClasses.push("href"); // 为超链接添加 class https://github.com/siyuan-note/siyuan/issues/11440#issuecomment-2119080691
|
||||
}
|
||||
const title = aElement.getAttribute("data-title");
|
||||
if (tip && isLocalPath(href) && !aElement.classList.contains("b3-tooltips")) {
|
||||
|
@ -97,7 +100,7 @@ export const initBlockPopover = (app: App) => {
|
|||
} else {
|
||||
assetTip += ` ${response.data.hSize}${title ? '<div class="fn__hr"></div><span>' + title + "</span>" : ""}<br>${window.siyuan.languages.modifiedAt} ${response.data.hUpdated}<br>${window.siyuan.languages.createdAt} ${response.data.hCreated}`;
|
||||
}
|
||||
showTooltip(assetTip, aElement, tooltipClass);
|
||||
showTooltip(assetTip, aElement, tooltipClasses);
|
||||
});
|
||||
tip = "";
|
||||
} else if (title) {
|
||||
|
@ -107,10 +110,10 @@ export const initBlockPopover = (app: App) => {
|
|||
if (tip && !aElement.classList.contains("b3-tooltips")) {
|
||||
// https://github.com/siyuan-note/siyuan/issues/11294
|
||||
try {
|
||||
showTooltip(decodeURIComponent(tip), aElement, tooltipClass);
|
||||
showTooltip(decodeURIComponent(tip), aElement, tooltipClasses);
|
||||
} catch (e) {
|
||||
// https://ld246.com/article/1718235737991
|
||||
showTooltip(tip, aElement, tooltipClass);
|
||||
showTooltip(tip, aElement, tooltipClasses);
|
||||
}
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import {isMobile} from "../util/functions";
|
||||
import {Constants} from "../constants";
|
||||
|
||||
export const showTooltip = (message: string, target: Element, tooltipClass?: string) => {
|
||||
export const showTooltip = (message: string, target: Element, tooltipClasses?: string[]) => {
|
||||
if (isMobile()) {
|
||||
return;
|
||||
}
|
||||
|
@ -11,7 +11,10 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
|
|||
return;
|
||||
}
|
||||
|
||||
const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
|
||||
// 合并默认类名和额外类名
|
||||
const additionalClasses = tooltipClasses ? tooltipClasses.map(cls => `tooltip--${cls}`).join(" ") : "";
|
||||
const className = ["tooltip ", additionalClasses].filter(Boolean).join("");
|
||||
|
||||
let messageElement = document.getElementById("tooltip");
|
||||
if (!messageElement) {
|
||||
document.body.insertAdjacentHTML("beforeend", `<div class="${className}" id="tooltip">${message}</div>`);
|
||||
|
|
|
@ -16,7 +16,7 @@ import {getAllEditor} from "../layout/getAll";
|
|||
export const validateName = (name: string, targetElement?: HTMLElement) => {
|
||||
if (/\r\n|\r|\n|\u2028|\u2029|\t|\//.test(name)) {
|
||||
if (targetElement) {
|
||||
showTooltip(window.siyuan.languages.fileNameRule, targetElement, "error");
|
||||
showTooltip(window.siyuan.languages.fileNameRule, targetElement, ["error"]);
|
||||
} else {
|
||||
showMessage(window.siyuan.languages.fileNameRule);
|
||||
}
|
||||
|
@ -24,7 +24,7 @@ export const validateName = (name: string, targetElement?: HTMLElement) => {
|
|||
}
|
||||
if (name.length > Constants.SIZE_TITLE) {
|
||||
if (targetElement) {
|
||||
showTooltip(window.siyuan.languages["_kernel"]["106"], targetElement, "error");
|
||||
showTooltip(window.siyuan.languages["_kernel"]["106"], targetElement, ["error"]);
|
||||
} else {
|
||||
showMessage(window.siyuan.languages["_kernel"]["106"]);
|
||||
}
|
||||
|
|
|
@ -62,8 +62,7 @@ export class Tab {
|
|||
id
|
||||
}, (response) => {
|
||||
if (!this.headElement.getAttribute("aria-label")) {
|
||||
const tooltipClass = "tab_header";
|
||||
showTooltip(escapeGreat(response.data), this.headElement, tooltipClass);
|
||||
showTooltip(escapeGreat(response.data), this.headElement, ["tab_header"]);
|
||||
}
|
||||
this.headElement.setAttribute("aria-label", escapeGreat(response.data));
|
||||
});
|
||||
|
|
Loading…
Add table
Reference in a new issue