nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Replace scrollIntoViewIfNeeded with scrollIntoView

Browse source 
Because non-standard and not supported on Firefox
This commit is contained in:
Lim Chee Aun 2023-10-04 21:24:48 +08:00
parent ddd1ec5819
commit 5faf911b17
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/timeline.jsx
View file

@ -17,6 +17,12 @@ import Link from './link';
import NavMenu from './nav-menu'; import NavMenu from './nav-menu';
import Status from './status'; import Status from './status';
const scrollIntoViewOptions = {
block: 'nearest',
inline: 'center',
behavior: 'smooth',
};
function Timeline({ function Timeline({
title, title,
titleComponent, titleComponent,
@ -111,7 +117,7 @@ function Timeline({
} }
if (nextItem) { if (nextItem) {
nextItem.focus(); nextItem.focus();
nextItem.scrollIntoViewIfNeeded?.(); nextItem.scrollIntoView(scrollIntoViewOptions);
} }
} else { } else {
// If active status is not in viewport, get the topmost status-link in viewport // If active status is not in viewport, get the topmost status-link in viewport
@ -121,7 +127,7 @@ function Timeline({
}); });
if (topmostItem) { if (topmostItem) {
topmostItem.focus(); topmostItem.focus();
topmostItem.scrollIntoViewIfNeeded?.(); topmostItem.scrollIntoView(scrollIntoViewOptions);
} }
} }
}); });
@ -150,7 +156,7 @@ function Timeline({
} }
if (prevItem) { if (prevItem) {
prevItem.focus(); prevItem.focus();
prevItem.scrollIntoViewIfNeeded?.(); prevItem.scrollIntoView(scrollIntoViewOptions);
} }
} else { } else {
// If active status is not in viewport, get the topmost status-link in viewport // If active status is not in viewport, get the topmost status-link in viewport
@ -160,7 +166,7 @@ function Timeline({
}); });
if (topmostItem) { if (topmostItem) {
topmostItem.focus(); topmostItem.focus();
topmostItem.scrollIntoViewIfNeeded?.(); topmostItem.scrollIntoView(scrollIntoViewOptions);
} }
} }
}); });

14
src/pages/status.jsx
View file

@ -54,6 +54,12 @@ function resetScrollPosition(id) {
delete scrollPositions[id]; delete scrollPositions[id];
} }
const scrollIntoViewOptions = {
block: 'nearest',
inline: 'center',
behavior: 'smooth',
};
function StatusPage(params) { function StatusPage(params) {
const { id } = params; const { id } = params;
const { masto, instance } = api({ instance: params.instance }); const { masto, instance } = api({ instance: params.instance });
@ -555,7 +561,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
let nextStatus = allStatusLinks[activeStatusIndex + 1]; let nextStatus = allStatusLinks[activeStatusIndex + 1];
if (nextStatus) { if (nextStatus) {
nextStatus.focus(); nextStatus.focus();
nextStatus.scrollIntoViewIfNeeded?.(); nextStatus.scrollIntoView(scrollIntoViewOptions);
} }
} else { } else {
// If active status is not in viewport, get the topmost status-link in viewport // If active status is not in viewport, get the topmost status-link in viewport
@ -565,7 +571,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
}); });
if (topmostStatusLink) { if (topmostStatusLink) {
topmostStatusLink.focus(); topmostStatusLink.focus();
topmostStatusLink.scrollIntoViewIfNeeded?.(); topmostStatusLink.scrollIntoView(scrollIntoViewOptions);
} }
} }
}); });
@ -589,7 +595,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
let prevStatus = allStatusLinks[activeStatusIndex - 1]; let prevStatus = allStatusLinks[activeStatusIndex - 1];
if (prevStatus) { if (prevStatus) {
prevStatus.focus(); prevStatus.focus();
prevStatus.scrollIntoViewIfNeeded?.(); prevStatus.scrollIntoView(scrollIntoViewOptions);
} }
} else { } else {
// If active status is not in viewport, get the topmost status-link in viewport // If active status is not in viewport, get the topmost status-link in viewport
@ -599,7 +605,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
}); });
if (topmostStatusLink) { if (topmostStatusLink) {
topmostStatusLink.focus(); topmostStatusLink.focus();
topmostStatusLink.scrollIntoViewIfNeeded?.(); topmostStatusLink.scrollIntoView(scrollIntoViewOptions);
} }
} }
}); });