New Component: Reading Position Indicator

[timwright12]

Like this but no jquery https://css-tricks.com/reading-position-indicator/

[timwright12]

https://codepen.io/timwright12/pen/zYxPqzE?editors=0010

[fabiankaegy]

Initial Thoughts

requirements

• recalculate max value on window resize
• debouncing the update loop

questions

• should it always use the full page or should it have the option to input start and end elements? So for example only the article itself gets the indicator. So comments and footer things beneath don't get factored in?
• optional output of percentage?
• optional title above percentage?
• hooks / callbacks / events?
• multiple scroll indicators per page possible?
• should the progress element be added manually on the html site by the user or generated using js?

Regarding the last questions there are, I believe, two main considerations. If we allow the user / developer to place the markup for the progress element on the page somewhere it makes it more flexible for them. On the other hand the progress element will be useless when js is disabled and therefore it would make sense to add it form the js. Maybe passing in a container or sibling selector would be an idea how to meet both considerations.

@timwright12 would love to hear your thoughts on these questions

[timwright12]

@fabiankaegy

1. Having start and end elements would be great, we can default to full page
2. sure
3. sure
4. callbacks can generally follow the same format we normally use, maybe "scrollstart" "scrolling" and "scrollend"? Each reporting the percentage
5. we should allow for multiple, but just from a programmatic standpoint (anti-breaking) as the use case it pretty slim
6. that's a great question. Since we can't really control the HTML used let's check to see if it's a progress element, if not add role="progressbar" to it.

We should also confirm that the bar will move based when using anchor links

[fabiankaegy]

Good catch with the anchor links 👍