treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Fix scrolling to detailed status not always working 

Port d0fd14f851 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
th-new
Claire 2024-01-04 15:17:38 +01:00
parent 0b2c7cdb02
commit 7cd88ae2f4
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -610,7 +610,7 @@ class Status extends ImmutablePureComponent {
this.setState({ isExpanded: value }); this.setState({ isExpanded: value });
}; };
setRef = c => { setContainerRef = c => {
this.node = c; this.node = c;
}; };
@ -618,12 +618,16 @@ class Status extends ImmutablePureComponent {
this.column = c; this.column = c;
}; };
setStatusRef = c => {
this.statusNode = c;
};
_scrollStatusIntoView () { _scrollStatusIntoView () {
const { status, multiColumn } = this.props; const { status, multiColumn } = this.props;
if (status) { if (status) {
window.requestAnimationFrame(() => { requestIdleCallback(() => {
this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true); this.statusNode?.scrollIntoView(true);
// In the single-column interface, `scrollIntoView` will put the post behind the header, // In the single-column interface, `scrollIntoView` will put the post behind the header,
// so compensate for that. // so compensate for that.
@ -661,9 +665,8 @@ class Status extends ImmutablePureComponent {
} }
// Scroll to focused post if it is loaded // Scroll to focused post if it is loaded
const child = this.node?.querySelector('.detailed-status__wrapper'); if (this.statusNode) {
if (child) { return [0, this.statusNode.offsetTop];
return [0, child.offsetTop];
} }
// Do not scroll otherwise, `componentDidUpdate` will take care of that // Do not scroll otherwise, `componentDidUpdate` will take care of that
@ -730,11 +733,11 @@ class Status extends ImmutablePureComponent {
/> />
<ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className={classNames('scrollable', { fullscreen })} ref={this.setRef}> <div className={classNames('scrollable', { fullscreen })} ref={this.setContainerRef}>
{ancestors} {ancestors}
<HotKeys handlers={handlers}> <HotKeys handlers={handlers}>
<div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)}> <div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)} ref={this.setStatusRef}>
<DetailedStatus <DetailedStatus
key={`details-${status.get('id')}`} key={`details-${status.get('id')}`}
status={status} status={status}