fix: skip empty articles

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

View file

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