Scroll to linked status in public status view (fixes #7884) (#8130)

When there is a single detailed status on a public page, scroll to it and
replace the history state to not scroll back on refresh (simulates # anchors).

1 files changed, 9 insertions, 0 deletions

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 855e56ee6..6b47eecf9 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -31,6 +31,7 @@ function main() {
   const React = require('react');
   const ReactDOM = require('react-dom');
   const Rellax = require('rellax');
+  const createHistory = require('history').createBrowserHistory;
 
   ready(() => {
     const locale = document.documentElement.lang;
@@ -86,6 +87,14 @@ function main() {
     }
 
     new Rellax('.parallax', { speed: -1 });
+
+    const history = createHistory();
+    const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status');
+    const location = history.location;
+    if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) {
+      detailedStatuses[0].scrollIntoView();
+      history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true });
+    }
   });
 
   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {