Use IntersectionObserver to detect current page #3682
Conversation
G-Ambatte
added
P3 - low priority
|
What problem is this fixing? |
|
If this works, it should solve an issue at #3694 |
|
|
||
| const pageRef = useRef(); | ||
|
|
||
| const rootMargin = '-50% 0px'; |
There was a problem hiding this comment.
Can you explain the behavior of how rootMargin works here? Any difference between this and threshold instead?
Maybe just add a brief comment explaining how this boundary determines the current page.
| useEffect(()=>{ | ||
| const observer = new IntersectionObserver( | ||
| ([entry])=>{ | ||
| const pageNo = parseInt(entry.target.getAttribute('id').slice(1)); |
There was a problem hiding this comment.
I wonder if we can just use the component's index prop directly instead of reading it from the DOM target?
| if(pageRef.current == null) return; | ||
| observer.unobserve(pageRef.current); | ||
| }; | ||
| }, [pageRef.current, rootMargin]); |
There was a problem hiding this comment.
Neither of these values trigger a redraw when changed, so they won't have any effect here in the useEffect dependency array. The effect will just fire once when the page component is mounted and then never again. In that case, this is equivalent to just an empty array [].
| @@ -50,8 +50,42 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{ | |||
| })); | |||
| }; | |||
|
|
|||
| let pageArray = []; | |||
There was a problem hiding this comment.
What is the purpose of the pageArray instead of simply setting the current page directly from the page that triggered the intersectionObserver event?
Seems we could get away with a simple getPage and setPage?
There was a problem hiding this comment.
My thinking was that - particularly with the new BrewRenderer toolbar - that there can be multiple pages visible in the view port, so an array of page numbers is more appropriate than a single value.
This PR uses the IntersectionObserver to detect which page elements are in the viewport and thus visible to the end user. This data is updated as the user scrolls, and is passed to a new function
updatePageArrayinhelpers.js.This PR also adds two further new functions to
helpers.js:getPageNumber: returns an integer, the average value of the content of thepageArraywhich should be the most central page in the range of visible pagesgetVisiblePageRange: returns a string, if the array length is 3 or less, joined by commas (e.g.1, 2, 3) and for lengths greater than 3, the first and last page separated by a dash (e.g.1 - 5).