Page Progress

[Shackelford-Arden]

Desired Feature

This is a nice to have, really not something that is a deal breaker.

As we add headers and whatnot to a page, BookStack adds page links on the right. I'd think it would be cool to have the page "follow" the user through the page. So, if I'm head section 3, the link on the right is highlighted in some way (arrow, color change, underline, whatever).

Would just be nice so I can keep track of my progress while I read :).

Note: I'm not worried about the page remembering where I left off.

[ssddanbrown]

@Shackelford-Arden Yeah, I agree. Think it should be fairly subtle so maybe text color change or font weight change to avoid it being distracting.

[Shackelford-Arden]

I agree, it really shouldn't distract. Best used as a reference.

[ssddanbrown]

Just for reference, Would be nice to do this efficiently using IntersectionObservers:
https://developers.google.com/web/updates/2016/04/intersectionobserver

[Abijeet]

@ssddanbrown - If we use IntersectionObservers the supported browsers will be slightly narrow - https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility

If you are ok with that...I can take a crack at it.

[ssddanbrown]

@Abijeet Ahh, Don't really care about IE but shame about safari. Since this is a non-essential feature I'd say lets not worry about safari for now, It'll catch up at some point soon. As long as no errors are thrown.

Yeah, That would be great, Feel free to take a crack at it.

[Abijeet]

I'll not be able to work on this over the next week either, so if you wanted to implement this for the next release, please go ahead. Otherwise, I'd still like to take a crack at it after my vacation.

[ssddanbrown]

Thanks for letting me know @Abijeet.

If I feel like writing some JS at the weekend I might sneak it into the next bugfix release otherwise it'll likely remain up for grabs.

Enjoy your vacation!

[Abijeet]

Started working on this.

[Abijeet]

I've had a chance to work on this, I'll try to give an update by end of the week.

[Abijeet]

Created pull request here - #580

There's an issue that I'm not sure how to solve -

The current header is decided based on the proximity of a heading to the top of the viewport. To be precise, if a heading is 100px within the top corner of the viewport it is marked as the current heading. Problem is with this heading at the bottom, it never gets close to 100px of the top of the viewport.

[Shackelford-Arden]

Woohoo! haha :D