Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

inbox: Center focused element if off screen when using keyboard.

This commit is contained in:
Aman Agrawal 2023-09-15 05:25:21 +00:00 committed by Tim Abbott
parent 7bce78694e
commit a0e3f66dc1
1 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/inbox_ui.js
View File

@ -819,6 +819,26 @@ function get_focus_class_for_row() {
return focus_class;
}
function center_focus_if_offscreen($elt) {
if ($elt.length === 0) {
return;
}
const element_above = document.querySelector("#inbox-filters");
const element_down = document.querySelector("#compose");
const visible_top = element_above.getBoundingClientRect().bottom;
const visible_bottom = element_down.getBoundingClientRect().top;
const elt_pos = $elt[0].getBoundingClientRect();
if (elt_pos.top >= visible_top && elt_pos.bottom <= visible_bottom) {
// Element is visible.
return;
}
// Scroll element into center if offscreen.
$elt[0].scrollIntoView({block: "center"});
}
export function initialize() {
$("body").on(
"keyup",
@ -913,4 +933,9 @@ export function initialize() {
unread_ops.mark_stream_as_read(stream_id);
}
});
$("body").on("focus", ".inbox-row, .inbox-header", (e) => {
const $elt = $(e.currentTarget);
center_focus_if_offscreen($elt);
});
}