From 394525e32994e605093c87d3a9fad2a4202f3401 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 10 Jan 2019 20:28:24 +0100 Subject: [Glitch] Postpone scroll-to-detailed status after react components are loaded Port 70801b850c78d7879182eeba4eae509af42fafeb to glitch-soc --- app/javascript/flavours/glitch/packs/public.js | 28 +++++++++++++++++--------- 1 file changed, 18 insertions(+), 10 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js index 996f8f3d1..342c5265e 100644 --- a/app/javascript/flavours/glitch/packs/public.js +++ b/app/javascript/flavours/glitch/packs/public.js @@ -12,6 +12,17 @@ function main() { const Rellax = require('rellax'); const createHistory = require('history').createBrowserHistory; + const scrollToDetailedStatus = () => { + 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 }); + } + }; + ready(() => { const locale = document.documentElement.lang; @@ -54,8 +65,14 @@ function main() { ReactDOM.render(, content); document.body.appendChild(content); + scrollToDetailedStatus(); }) - .catch(error => console.error(error)); + .catch(error => { + console.error(error); + scrollToDetailedStatus(); + }); + } else { + scrollToDetailedStatus(); } const parallaxComponents = document.querySelectorAll('.parallax'); @@ -63,15 +80,6 @@ function main() { if (parallaxComponents.length > 0 ) { 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 }); - } }); } -- cgit