2022-05-26 15:18:53 +08:00
|
|
|
export const upDownHint = (listElement: Element, event: KeyboardEvent) => {
|
|
|
|
|
let currentHintElement: HTMLElement = listElement.querySelector(".b3-list-item--focus");
|
|
|
|
|
if (event.key === "ArrowDown") {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
currentHintElement.classList.remove("b3-list-item--focus");
|
|
|
|
|
if (!currentHintElement.nextElementSibling) {
|
|
|
|
|
listElement.children[0].classList.add("b3-list-item--focus");
|
|
|
|
|
} else {
|
|
|
|
|
if (currentHintElement.nextElementSibling.classList.contains("b3-list-item")) {
|
|
|
|
|
currentHintElement.nextElementSibling.classList.add("b3-list-item--focus");
|
|
|
|
|
} else {
|
|
|
|
|
currentHintElement.nextElementSibling.nextElementSibling.classList.add("b3-list-item--focus");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
currentHintElement = listElement.querySelector(".b3-list-item--focus");
|
|
|
|
|
if (listElement.scrollTop < currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight ||
|
|
|
|
|
listElement.scrollTop > currentHintElement.offsetTop) {
|
2022-12-10 14:18:51 +08:00
|
|
|
currentHintElement.scrollIntoView(listElement.scrollTop > currentHintElement.offsetTop)
|
2022-05-26 15:18:53 +08:00
|
|
|
}
|
2022-07-16 23:20:50 +08:00
|
|
|
return currentHintElement;
|
2022-05-26 15:18:53 +08:00
|
|
|
} else if (event.key === "ArrowUp") {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
currentHintElement.classList.remove("b3-list-item--focus");
|
|
|
|
|
if (!currentHintElement.previousElementSibling) {
|
|
|
|
|
const length = listElement.children.length;
|
|
|
|
|
listElement.children[length - 1].classList.add("b3-list-item--focus");
|
|
|
|
|
} else {
|
|
|
|
|
if (currentHintElement.previousElementSibling.classList.contains("b3-list-item")) {
|
|
|
|
|
currentHintElement.previousElementSibling.classList.add("b3-list-item--focus");
|
|
|
|
|
} else {
|
|
|
|
|
currentHintElement.previousElementSibling.previousElementSibling.classList.add("b3-list-item--focus");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
currentHintElement = listElement.querySelector(".b3-list-item--focus");
|
|
|
|
|
if (listElement.scrollTop < currentHintElement.offsetTop - listElement.clientHeight + currentHintElement.clientHeight ||
|
|
|
|
|
listElement.scrollTop > currentHintElement.offsetTop - currentHintElement.clientHeight * 2) {
|
2022-12-10 14:18:51 +08:00
|
|
|
currentHintElement.scrollIntoView(listElement.scrollTop > currentHintElement.offsetTop - currentHintElement.clientHeight * 2)
|
2022-05-26 15:18:53 +08:00
|
|
|
}
|
2022-07-16 23:20:50 +08:00
|
|
|
return currentHintElement;
|
2022-05-26 15:18:53 +08:00
|
|
|
}
|
|
|
|
|
};
|