getBoundingClientRect problem with autoload

Justoverclock

hi guys, i'm writing an extension that add the "reading %" with a progress bar to post stream, it works fine but i have some problem, let me show you

as you can see it works fine, but when there are lot of posts, getBoundingClientRect can't get the REAL height of the discussion...

any idea on how i can to that?

at moment, the progress bar update the % in real time, but can be better if it works withot auto-adjust the value

SKevo

Does it happen because the posts are loading in real time? Because at the same time, only (I think 20 posts) are rendered and when you scroll down, more are fetched from the API. The percentage is calculated from currently loaded posts only, that's why it jumps back when more are loaded, if I am correct.

You could fetch how many posts are there in a discussion and what post number you're currently reading, then make the percentage out of that every time you scroll down (there is attributes.commentCount in discussions API to determine full comment count). I don't know what logic are you using, so you might be already doing this - in that case, apologies if my post is a little out of the loop.

Justoverclock

SKevo no no you are absolutely right, i know that this is the problem, just asking some kind of logic to get this value, i will try but not sure how at moment XD

SKevo

Justoverclock well, I just noticed that the scrubber has a Scrubber-index and Scrubber-count values. You could do something like:

current_post = parseInt(globalThis.window.document.querySelector('.DiscussionPage-discussion .Scrubber-info .Scrubber-index').innerText);
max_posts = parseInt(globalThis.window.document.querySelector('.DiscussionPage-discussion .Scrubber-info .Scrubber-count').innerText);

console.log(`You have read ${current_post} out of ${max_posts} posts.`);

This logs current post out of max. posts to the console. You can extend this with your own login to update the progress when you scroll down a bit. No API calls needed.

However, this solution won't work for mobile (because the scrubber is not visible here). You will probably have to use an API call to obtain the max. comment count in this case, and then grab current post number from URL or somewhere else.

Note: I am not an extension developer, so there is probably a better way around this (eg.: passing the info from backend)

Justoverclock

the scrubber actually have this already (you can see here on the right shows "4 of 4 posts". i'm trying to convert this in "%" based on getBoundingClientRect value 🙂

matteocontrini

Justoverclock that value is based on what is rendered on the client, and if posts are not even loaded from the API they can't have a height. You can base your percentage only on the number of posts, I think

Justoverclock

actually i've noticed that can't work with a custom header...for some reason broke all the percentage

clarkwinkelmann

Flarum doesn't load all posts at once, only in groups of 20, so you won't be able to compute the "real" height of the page.

Looking through the logic for infinite scrolling and the scrubber you might be able to see how Flarum "guesses" the total length/height of the page, but you'll notice it does jump around a bit when new batches of posts are loaded.

My suggestion would be to copy-paste the exact same logic used to render the scrubber, and transform it into something horizontal rather than vertical.

If you don't already have access to the stream object in your current context, you can access it through app.current.get('stream'). That object will give you access to the same information as the scrubber, even if you hide the scrubber.