Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-09-22 00:20:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/10659

Browse source
This commit is contained in:
Vanessa 2025-08-26 00:36:07 +08:00
parent 2535a64ff1
commit e775d0b5f8
2 changed files with 137 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/src/protyle/render/av/relation.ts
View file

@ -1,6 +1,6 @@
import {Menu} from "../../../plugin/Menu";
import {hasClosestByClassName, hasTopClosestByClassName} from "../../util/hasClosest";
import {upDownHint} from "../../../util/upDownHint";
import {UDLRHint, upDownHint} from "../../../util/upDownHint";
import {fetchPost} from "../../../util/fetch";
import {escapeGreat, escapeHtml} from "../../../util/escape";
import {transaction} from "../../wysiwyg/transaction";
@ -92,10 +92,7 @@ export const openSearchAV = (avId: string, target: HTMLElement, cb?: (element: H
if (event.isComposing) {
return;
}
const currentElement = upDownHint(listElement, event);
if (currentElement) {
event.stopPropagation();
}
UDLRHint(listElement, event);
if (event.key === "Enter") {
event.preventDefault();
event.stopPropagation();

135
app/src/util/upDownHint.ts
View file

@ -95,3 +95,138 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi
return currentHintElement;
}
};
export const UDLRHint = (listElement: Element, event: KeyboardEvent, classActiveName = "b3-list-item--focus", defaultElement?: Element) => {
let currentHintElement: HTMLElement = listElement.querySelector("." + classActiveName);
if (!currentHintElement && defaultElement) {
defaultElement.classList.add(classActiveName);
defaultElement.scrollIntoView(true);
return;
}
if (!currentHintElement) {
return;
}
const className = classActiveName.split("--")[0];
if (event.key === "ArrowLeft") {
event.preventDefault();
event.stopPropagation();
currentHintElement.classList.remove(classActiveName);
if (currentHintElement.parentElement.classList.contains("b3-list")) {
if (currentHintElement.querySelector(".b3-list-item__arrow--open")) {
currentHintElement.querySelector(".b3-list-item__arrow--open").classList.remove("b3-list-item__arrow--open");
currentHintElement.nextElementSibling.classList.add("fn__none");
} else {
currentHintElement = listElement.firstElementChild as HTMLElement;
}
} else {
currentHintElement = currentHintElement.parentElement.previousElementSibling as HTMLElement;
}
currentHintElement.classList.add(classActiveName);
const overTop = listElement.scrollTop > currentHintElement.offsetTop - (currentHintElement.previousElementSibling?.clientHeight || 0);
if (listElement.scrollTop < currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight || overTop) {
currentHintElement.scrollIntoView(overTop);
}
return currentHintElement;
} else if (event.key === "ArrowRight") {
event.preventDefault();
event.stopPropagation();
currentHintElement.classList.remove(classActiveName);
if (currentHintElement.parentElement.classList.contains("b3-list")) {
if (currentHintElement.querySelector(".b3-list-item__arrow--open")) {
currentHintElement = currentHintElement.nextElementSibling.firstElementChild as HTMLElement;
} else {
currentHintElement.querySelector(".b3-list-item__arrow").classList.add("b3-list-item__arrow--open");
currentHintElement.nextElementSibling.classList.remove("fn__none");
}
} else {
if (!currentHintElement.nextElementSibling) {
if (currentHintElement.parentElement.nextElementSibling) {
currentHintElement = currentHintElement.parentElement.nextElementSibling as HTMLElement;
}
} else {
currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
}
}
currentHintElement.classList.add(classActiveName);
if (listElement.scrollTop < currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight ||
listElement.scrollTop > currentHintElement.offsetTop) {
currentHintElement.scrollIntoView(listElement.scrollTop > currentHintElement.offsetTop);
}
return currentHintElement;
} else if (event.key === "ArrowDown") {
event.preventDefault();
event.stopPropagation();
currentHintElement.classList.remove(classActiveName);
if (!currentHintElement.nextElementSibling) {
currentHintElement = currentHintElement.parentElement.nextElementSibling as HTMLElement || listElement.firstElementChild as HTMLElement;
} else {
currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
if (!currentHintElement.classList.contains(className)) {
if (currentHintElement.classList.contains("fn__none")) {
currentHintElement = currentHintElement.nextElementSibling as HTMLElement;
if (!currentHintElement) {
currentHintElement = listElement.firstElementChild as HTMLElement;
}
} else {
currentHintElement = currentHintElement.firstElementChild as HTMLElement;
}
}
}
currentHintElement.classList.add(classActiveName);
if (listElement.scrollTop < currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight ||
listElement.scrollTop > currentHintElement.offsetTop) {
currentHintElement.scrollIntoView(listElement.scrollTop > currentHintElement.offsetTop);
}
return currentHintElement;
} else if (event.key === "ArrowUp") {
event.preventDefault();
event.stopPropagation();
currentHintElement.classList.remove(classActiveName);
if (!currentHintElement.previousElementSibling) {
if (currentHintElement.parentElement.classList.contains("b3-list")) {
if (listElement.lastElementChild.classList.contains("fn__none")) {
currentHintElement = listElement.lastElementChild.previousElementSibling as HTMLElement;
} else {
currentHintElement = listElement.lastElementChild.lastElementChild as HTMLElement;
}
} else {
currentHintElement = currentHintElement.parentElement.previousElementSibling as HTMLElement;
}
} else {
currentHintElement = currentHintElement.previousElementSibling as HTMLElement;
if (!currentHintElement.classList.contains(className)) {
if (currentHintElement.classList.contains("fn__none")) {
currentHintElement = currentHintElement.previousElementSibling as HTMLElement;
} else {
currentHintElement = currentHintElement.lastElementChild as HTMLElement;
}
}
}
currentHintElement.classList.add(classActiveName);
const overTop = listElement.scrollTop > currentHintElement.offsetTop - (currentHintElement.previousElementSibling?.clientHeight || 0);
if (listElement.scrollTop < currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight || overTop) {
currentHintElement.scrollIntoView(overTop);
}
return currentHintElement;
} else if (event.key === "Home") {
event.preventDefault();
event.stopPropagation();
currentHintElement.classList.remove(classActiveName);
currentHintElement = listElement.children[0] as HTMLElement;
currentHintElement.classList.add(classActiveName);
currentHintElement.scrollIntoView();
return currentHintElement;
} else if (event.key === "End") {
event.preventDefault();
event.stopPropagation();
currentHintElement.classList.remove(classActiveName);
if (listElement.lastElementChild.classList.contains("fn__none")) {
currentHintElement = listElement.lastElementChild.previousElementSibling as HTMLElement;
} else {
currentHintElement = listElement.lastElementChild.lastElementChild as HTMLElement;
}
currentHintElement.classList.add(classActiveName);
currentHintElement.scrollIntoView(false);
return currentHintElement;
}
};