zelo72
/
mastodon
mirror of https://github.com/mastodon/mastodon
2
2
Fork 1
Code Issues 9 Releases Wiki Activity

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

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(); intersectionObserverWrapper = new IntersectionObserverWrapper();
firstSeenArticle = null; articleOfInterest = null;
scrollAdjustment = 0; scrollAdjustment = 0;
handleScroll = throttle(() => { handleScroll = throttle(() => {
@ -232,7 +232,7 @@ class ScrollableList extends PureComponent {
}; };
preLoad = () => { 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. // the LoadX element, were able to scroll back to it.
// Note that it does not matter whether we are binding to the document, or // 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) { for (const article of articles) {
const articleRect = article.getBoundingClientRect(); const articleRect = article.getBoundingClientRect();
if (articleRect.top >= scrollableRect.top) { if (articleRect.top >= scrollableRect.top) {
this.firstSeenArticle = article; this.articleOfInterest = article;
break; break;
} }
} }
} }
returnToFirstArticle () { returnToArticleOfInterest () {
const first = this.firstSeenArticle; let article = this.articleOfInterest;
if (first === null) { if (article === null) {
return; 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. // everything else.
setTimeout(() => { 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 need to adjust with the scrollAdjustment. It is non-zero only when
// we bind to the document. // we bind to the document.
this.setScrollTop(this.getScrollTop() + this.setScrollTop(this.getScrollTop() +
first.getBoundingClientRect().top - article.getBoundingClientRect().top -
this.scrollAdjustment); this.scrollAdjustment);
first.querySelector("div.status__wrapper").focus(); article.querySelector("div.status__wrapper").focus();
}, 0); }, 0);
} }
@ -270,13 +283,13 @@ class ScrollableList extends PureComponent {
handleLoadMore = e => { handleLoadMore = e => {
e.preventDefault(); e.preventDefault();
this.props.onLoadMore(); this.props.onLoadMore();
this.returnToFirstArticle(); this.returnToArticleOfInterest();
}; };
handleLoadPending = e => { handleLoadPending = e => {
e.preventDefault(); e.preventDefault();
this.props.onLoadPending(); this.props.onLoadPending();
this.returnToFirstArticle(); this.returnToArticleOfInterest();
}; };
render () { render () {