diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 65258ee89..7ef6bec71 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -30,30 +30,32 @@ const INITIAL_CONTENT = dedent`
`; //v=====----------------------< Brew Page Component >---------------------=====v// -const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageChange, ...props})=>{ +const BrewPage = ({ contents = '', index = 0, onVisibilityChange, onCenterPageChange, ...props })=>{ const pageRef = useRef(null); const cleanText = contents; //DOMPurify.sanitize(props.contents, purifyConfig); useEffect(()=>{ if(!pageRef.current) return; - const observer = new IntersectionObserver( + + // Observer for tracking pages within the `.pages` div + const visibleObserver = new IntersectionObserver( (entries)=>{ entries.forEach((entry)=>{ if(entry.isIntersecting){ - onVisibilityChange(index + 1, true); + onVisibilityChange(index + 1, true); // add page to array of visible pages. } else { onVisibilityChange(index + 1, false); } }); }, - { threshold: .3, rootMargin: '0px 0px 0px 0px' } + { threshold: .3, rootMargin: '0px 0px 0px 0px' } // detect when >30% of page is within bounds. ); // Observer for tracking the page at the center of the iframe. const centerObserver = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { + (entries)=>{ + entries.forEach((entry)=>{ + if(entry.isIntersecting) { onCenterPageChange(index + 1); // Set this page as the center page } }); @@ -61,11 +63,11 @@ const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageCha { threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center ); - observer.observe(pageRef.current); + // attach observers to each `.page` + visibleObserver.observe(pageRef.current); centerObserver.observe(pageRef.current); - return ()=>{ - observer.disconnect(); + visibleObserver.disconnect(); centerObserver.disconnect(); }; }, [index, onVisibilityChange, onCenterPageChange]); @@ -113,17 +115,18 @@ const BrewRenderer = (props)=>{ rawPages = props.text.split(/^\\page$/gm); } - useEffect(() => { + // update centerPage (aka "current page") and pass it up to parent components + useEffect(()=>{ props.onPageChange(state.centerPage); }, [state.centerPage]); - const handlePageVisibilityChange = useCallback((pageNum, isVisible) => { - setState((prevState) => { - let updatedVisiblePages = new Set(prevState.visiblePages); + const handlePageVisibilityChange = useCallback((pageNum, isVisible)=>{ + setState((prevState)=>{ + const updatedVisiblePages = new Set(prevState.visiblePages); if(isVisible){ - updatedVisiblePages.add(pageNum) + updatedVisiblePages.add(pageNum); } else { - updatedVisiblePages.delete(pageNum) + updatedVisiblePages.delete(pageNum); } const pages = Array.from(updatedVisiblePages); @@ -134,16 +137,16 @@ const BrewRenderer = (props)=>{ }); }, []); - const formatVisiblePages = (pages) => { - if (pages.length === 0) return ''; - - const sortedPages = [...pages].sort((a, b) => a - b); // Copy and sort the array - let ranges = []; + const formatVisiblePages = (pages)=>{ + if(pages.length === 0) return ''; + + const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array + const ranges = []; let start = sortedPages[0]; - + for (let i = 1; i <= sortedPages.length; i++) { // If the current page is not consecutive or it's the end of the list - if (i === sortedPages.length || sortedPages[i] !== sortedPages[i - 1] + 1) { + if(i === sortedPages.length || sortedPages[i] !== sortedPages[i - 1] + 1) { // Push the range to the list ranges.push( start === sortedPages[i - 1] ? `${start}` : `${start} - ${sortedPages[i - 1]}` @@ -151,12 +154,12 @@ const BrewRenderer = (props)=>{ start = sortedPages[i]; // Start a new range } } - + return ranges.join(', '); }; - const handleCenterPageChange = useCallback((pageNum) => { - setState((prevState) => ({ + const handleCenterPageChange = useCallback((pageNum)=>{ + setState((prevState)=>({ ...prevState, centerPage : pageNum, })); @@ -256,8 +259,8 @@ const BrewRenderer = (props)=>{ styleObject.backgroundImage = `url("data:image/svg+xml;utf8,${global.config.deployment}")`; } - const renderedStyle = useMemo(()=> renderStyle(), [props.style, props.themeBundle]); - renderedPages = useMemo(() => renderPages(), [props.text]); + const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]); + renderedPages = useMemo(()=>renderPages(), [props.text]); return ( <> diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 06e179afa..135ac58f5 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -7,14 +7,14 @@ const _ = require('lodash'); const MAX_ZOOM = 300; const MIN_ZOOM = 10; -const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, totalPages })=>{ +const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{ const [zoomLevel, setZoomLevel] = useState(100); const [pageNum, setPageNum] = useState(1); const [toolsVisible, setToolsVisible] = useState(true); useEffect(()=>{ - if(visiblePages.length !== 0){ + if(visiblePages.length !== 0){ // If zoomed in enough, it's possible that no page fits the intersection criteria, so don't update. setPageNum(formattedPages); } }, [visiblePages]); @@ -33,10 +33,8 @@ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, total setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number. }; + // scroll to a page, used in the Prev/Next Page buttons. const scrollToPage = (pageNumber)=>{ - console.log('visiblePages:', visiblePages); - console.log('centerPage:', centerPage); - console.log('pageNumber:', pageNumber); if(typeof pageNumber !== 'number') return; pageNumber = _.clamp(pageNumber, 1, totalPages); const iframe = document.getElementById('BrewRenderer');