gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-02-06 15:05:07 +00:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

fix: skip empty articles

Browse Source 
When using keyboard navigation, the current code will be stumped by HTML
article elements that are empty. We now skip over them.
This commit is contained in:
Your Autistic Life 2023-10-25 12:36:08 -04:00
parent cc3ff66246
commit 3919319863
1 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/javascript/mastodon/components/status_list.jsx
View File

@ -50,13 +50,11 @@ export default class StatusList extends ImmutablePureComponent {
}; };
handleMoveUp = (id, featured) => { handleMoveUp = (id, featured) => {
const elementIndex = this.getCurrentStatusIndex(id, featured) - 1; this._selectChild(id, featured, true);
this._selectChild(elementIndex, true);
}; };
handleMoveDown = (id, featured) => { handleMoveDown = (id, featured) => {
const elementIndex = this.getCurrentStatusIndex(id, featured) + 1; this._selectChild(id, featured, false);
this._selectChild(elementIndex, false);
}; };
handleLoadOlder = debounce(() => { handleLoadOlder = debounce(() => {
@ -64,18 +62,29 @@ export default class StatusList extends ImmutablePureComponent {
onLoadMore(lastId || (statusIds.size > 0 ? statusIds.last() : undefined)); onLoadMore(lastId || (statusIds.size > 0 ? statusIds.last() : undefined));
}, 300, { leading: true }); }, 300, { leading: true });
_selectChild (index, align_top) { _selectChild (id, featured, up) {
const align_top = up;
const container = this.node.node; const container = this.node.node;
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`); const elementIndex = this.getCurrentStatusIndex(id, featured);
const increment = up ? -1 : 1
let index = elementIndex;
if (element) { let element = null;
if (align_top && container.scrollTop > element.offsetTop) { while (element === null) {
element.scrollIntoView(true); index += increment;
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) { const article = container.querySelector(`article:nth-of-type(${index + 1})`);
element.scrollIntoView(false); if (article === null) {
return;
} }
element.focus(); element = article.querySelector(".focusable");
} }
if (align_top && container.scrollTop > element.offsetTop) {
element.scrollIntoView(true);
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
element.scrollIntoView(false);
}
element.focus();
} }
setRef = c => { setRef = c => {