erik/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-08-20 21:08:15 -07:00
Code Issues Projects Releases Wiki Activity

fix: get back to the article that appears above the one of interest

Browse source
This commit is contained in:
Your Autistic Life 2023-08-10 08:49:08 -04:00
parent a352821495
commit b581178e3c
1 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/javascript/mastodon/components/scrollable_list.jsx
View file

@ -87,7 +87,7 @@ class ScrollableList extends PureComponent {
};
intersectionObserverWrapper = new IntersectionObserverWrapper();
firstSeenArticle = null;
articleOfInterest = null;
scrollAdjustment = 0;
handleScroll = throttle(() => {
@ -232,7 +232,7 @@ class ScrollableList extends PureComponent {
};
preLoad = () => {
// Here we record the first visible article so that when we mouseUp on
// Here we record the article of interest so that when we mouseUp on
// the LoadX element, were able to scroll back to it.
// Note that it does not matter whether we are binding to the document, or
@ -242,27 +242,40 @@ class ScrollableList extends PureComponent {
for (const article of articles) {
const articleRect = article.getBoundingClientRect();
if (articleRect.top >= scrollableRect.top) {
this.firstSeenArticle = article;
this.articleOfInterest = article;
break;
}
}
}
returnToFirstArticle () {
const first = this.firstSeenArticle;
if (first === null) {
returnToArticleOfInterest () {
let article = this.articleOfInterest;
if (article === null) {
return;
}
// Scroll the firstSeenArticle back into view once we're done with
// Scroll the articleOfInterest back into view once we're done with
// everything else.
setTimeout(() => {
// We try to find the article previous to the article of interest in the
// list of articles. That's the article we finally want to focus on.
let prev = article.previousElementSibling;
while (prev !== null) {
if (prev.localName === "article") {
article = prev;
break;
}
prev = prev.previousElementSibling;
}
// We need to adjust with the scrollAdjustment. It is non-zero only when
// we bind to the document.
this.setScrollTop(this.getScrollTop() +
first.getBoundingClientRect().top -
article.getBoundingClientRect().top -
this.scrollAdjustment);
first.querySelector("div.status__wrapper").focus();
article.querySelector("div.status__wrapper").focus();
}, 0);
}
@ -270,13 +283,13 @@ class ScrollableList extends PureComponent {
handleLoadMore = e => {
e.preventDefault();
this.props.onLoadMore();
this.returnToFirstArticle();
this.returnToArticleOfInterest();
};
handleLoadPending = e => {
e.preventDefault();
this.props.onLoadPending();
this.returnToFirstArticle();
this.returnToArticleOfInterest();
};
render () {