mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-21 03:55:24 +00:00
Base: Navigate DOM tree with arrows
This commit is contained in:
parent
579a289d3d
commit
9d82e81124
Notes:
github-actions[bot]
2024-09-27 12:34:28 +00:00
Author: https://github.com/chaseWillden 🔰 Commit: https://github.com/LadybirdBrowser/ladybird/commit/9d82e811249 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1521 Reviewed-by: https://github.com/AtkinsSJ ✅ Reviewed-by: https://github.com/circl-lastname
1 changed files with 34 additions and 17 deletions
|
@ -767,31 +767,48 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
document.addEventListener("keydown", event => {
|
||||
const UP_ARROW_KEYCODE = 38;
|
||||
const DOWN_ARROW_KEYCODE = 40;
|
||||
const RIGHT_ARROW_KEYCODE = 39;
|
||||
const LEFT_ARROW_KEYCODE = 37;
|
||||
const RETURN_KEYCODE = 13;
|
||||
const SPACE_KEYCODE = 32;
|
||||
|
||||
const move = delta => {
|
||||
let selectedIndex = visibleDOMNodes.indexOf(selectedDOMNode);
|
||||
if (selectedIndex < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let newIndex = selectedIndex + delta;
|
||||
|
||||
if (visibleDOMNodes[newIndex]) {
|
||||
inspectDOMNode(visibleDOMNodes[newIndex]);
|
||||
}
|
||||
};
|
||||
|
||||
if (document.activeElement.tagName !== "INPUT") {
|
||||
if (event.keyCode == UP_ARROW_KEYCODE || event.keyCode == DOWN_ARROW_KEYCODE) {
|
||||
let selectedIndex = visibleDOMNodes.indexOf(selectedDOMNode);
|
||||
if (selectedIndex < 0) {
|
||||
return;
|
||||
}
|
||||
const isSummary = selectedDOMNode.parentNode.tagName === "SUMMARY";
|
||||
const isDiv = selectedDOMNode.parentNode.tagName === "DIV";
|
||||
|
||||
let newIndex;
|
||||
|
||||
if (event.keyCode == UP_ARROW_KEYCODE) {
|
||||
newIndex = selectedIndex - 1;
|
||||
} else if (event.keyCode == DOWN_ARROW_KEYCODE) {
|
||||
newIndex = selectedIndex + 1;
|
||||
}
|
||||
|
||||
if (visibleDOMNodes[newIndex]) {
|
||||
inspectDOMNode(visibleDOMNodes[newIndex]);
|
||||
}
|
||||
if (event.keyCode == UP_ARROW_KEYCODE) {
|
||||
move(-1);
|
||||
} else if (event.keyCode == DOWN_ARROW_KEYCODE) {
|
||||
move(1);
|
||||
} else if (event.keyCode == RETURN_KEYCODE || event.keyCode == SPACE_KEYCODE) {
|
||||
if (selectedDOMNode.parentNode.tagName === "SUMMARY") {
|
||||
if (isSummary) {
|
||||
selectedDOMNode.parentNode.click();
|
||||
}
|
||||
} else if (event.keyCode == RIGHT_ARROW_KEYCODE) {
|
||||
if (isSummary && selectedDOMNode.parentNode.parentNode.open === false) {
|
||||
selectedDOMNode.parentNode.click();
|
||||
} else if (selectedDOMNode.parentNode.parentNode.open === true && !isDiv) {
|
||||
move(1);
|
||||
}
|
||||
} else if (event.keyCode == LEFT_ARROW_KEYCODE) {
|
||||
if (isSummary && selectedDOMNode.parentNode.parentNode.open === true) {
|
||||
selectedDOMNode.parentNode.click();
|
||||
} else if (selectedDOMNode.parentNode.parentNode.open === false || isDiv) {
|
||||
move(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Add table
Reference in a new issue