Intersection Observers for getting "Current Page(s)"

client/components/Anchored.jsx

@@ -7,6 +7,11 @@ import './Anchored.less';
 // **The Anchor Positioning API is not available in Firefox yet**
 // So in Firefox the positioning isn't perfect but is likely sufficient, and FF team seems to be working on the API quickly.
 
+// When Anchor Positioning is added to Firefox, this can also be rewritten using the Popover API-- add the `popover` attribute
+// to the container div, which will render the container in the *top level* and give it better interactions like
+// click outside to dismiss.  **Do not** add without Anchor, though, because positioning is very limited with the `popover`
+// attribute.
+
 
 const Anchored = ({ children })=>{
 	const [visible, setVisible] = useState(false);

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,7 +1,7 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const { useState, useRef, useCallback, useMemo } = React;
+const { useState, useRef, useCallback, useMemo, useEffect } = React;
 const _ = require('lodash');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
@@ -32,12 +32,54 @@ const INITIAL_CONTENT = dedent`
 //v=====----------------------< Brew Page Component >---------------------=====v//
 const BrewPage = (props)=>{
 	props = {
-		contents : '',
-		index    : 0,
+		contents           : '',
+		index              : 0,
+		onVisibilityChange : ()=>{},
+		onCenterPageChange : ()=>{},
 		...props
 	};
+	const pageRef = useRef(null);
 	const cleanText = safeHTML(props.contents);
-	return <div className={props.className} id={`p${props.index + 1}`} style={props.style}>
+
+	useEffect(()=>{
+		if(!pageRef.current) return;
+
+		// Observer for tracking pages within the `.pages` div
+		const visibleObserver = new IntersectionObserver(
+			(entries)=>{
+				entries.forEach((entry)=>{
+					if(entry.isIntersecting){
+						props.onVisibilityChange(props.index + 1, true);    // add page to array of visible pages.
+					} else {
+						props.onVisibilityChange(props.index + 1, false);
+					}
+				});
+			},
+			{ 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) {
+						props.onCenterPageChange(props.index + 1); // Set this page as the center page
+					}
+				});
+			},
+			{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
+		);
+
+		// attach observers to each `.page`
+		visibleObserver.observe(pageRef.current);
+		centerObserver.observe(pageRef.current);
+		return ()=>{
+			visibleObserver.disconnect();
+			centerObserver.disconnect();
+		};
+	}, [props.index, props.onVisibilityChange, props.onCenterPageChange]);
+
+	return <div className={props.className} id={`p${props.index + 1}`} data-index={props.index} ref={pageRef} style={props.style}>
 	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
 	       </div>;
 };
@@ -64,8 +106,10 @@ const BrewRenderer = (props)=>{
 	};
 
 	const [state, setState] = useState({
-		isMounted  : false,
-		visibility : 'hidden'
+		isMounted    : false,
+		visibility   : 'hidden',
+		visiblePages : [],
+		centerPage   : 1
 	});
 
 	const [displayOptions, setDisplayOptions] = useState({
@@ -75,6 +119,7 @@ const BrewRenderer = (props)=>{
 		pageShadows  : true
 	});
 
+	const iframeRef = useRef(null);
 	const mainRef  = useRef(null);
 
 	if(props.renderer == 'legacy') {
@@ -83,33 +128,26 @@ const BrewRenderer = (props)=>{
 		rawPages = props.text.split(/^\\page$/gm);
 	}
 
-	const scrollToHash = (hash)=>{
-		if(!hash) return;
+	const handlePageVisibilityChange = useCallback((pageNum, isVisible)=>{
+		setState((prevState)=>{
+			const updatedVisiblePages = new Set(prevState.visiblePages);
+			isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum);
 
-		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
-		let anchor = iframeDoc.querySelector(hash);
-
-		if(anchor) {
-			anchor.scrollIntoView({ behavior: 'smooth' });
-		} else {
-			// Use MutationObserver to wait for the element if it's not immediately available
-			new MutationObserver((mutations, obs)=>{
-				anchor = iframeDoc.querySelector(hash);
-				if(anchor) {
-					anchor.scrollIntoView({ behavior: 'smooth' });
-					obs.disconnect();
-				}
-			}).observe(iframeDoc, { childList: true, subtree: true });
-		}
-	};
+			return {
+				...prevState,
+				visiblePages : [...updatedVisiblePages].sort((a, b)=>a - b)
+			};
+		});
+	}, []);
 
-	const updateCurrentPage = useCallback(_.throttle((e)=>{
-		const { scrollTop, clientHeight, scrollHeight } = e.target;
-		const totalScrollableHeight = scrollHeight - clientHeight;
-		const currentPageNumber = Math.max(Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length), 1);
+	const handleCenterPageChange = useCallback((pageNum)=>{
+		setState((prevState)=>({
+			...prevState,
+			centerPage : pageNum,
+		}));
 
-		props.onPageChange(currentPageNumber);
-	}, 200), []);
+		props.onPageChange(pageNum);
+	}, [props.onPageChange]);
 
 	const isInView = (index)=>{
 		if(!state.isMounted)
@@ -137,19 +175,21 @@ const BrewRenderer = (props)=>{
 	};
 
 	const renderPage = (pageText, index)=>{
+
+		const styles = {
+			...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
+			// Add more conditions as needed
+		};
+
 		if(props.renderer == 'legacy') {
 			const html = MarkdownLegacy.render(pageText);
-			return <BrewPage className='page phb' index={index} key={index} contents={html} />;
+
+			return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} onCenterPageChange={handleCenterPageChange}  />;
 		} else {
 			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 			const html = Markdown.render(pageText, index);
 
-			const styles = {
-				...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
-				// Add more conditions as needed
-			};
-
-			return <BrewPage className='page' index={index} key={index} contents={html} style={styles} />;
+			return <BrewPage className='page' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} onCenterPageChange={handleCenterPageChange}  />;
 		}
 	};
 
@@ -181,6 +221,26 @@ const BrewRenderer = (props)=>{
 		}
 	};
 
+	const scrollToHash = (hash)=>{
+		if(!hash) return;
+
+		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
+		let anchor = iframeDoc.querySelector(hash);
+
+		if(anchor) {
+			anchor.scrollIntoView({ behavior: 'smooth' });
+		} else {
+			// Use MutationObserver to wait for the element if it's not immediately available
+			new MutationObserver((mutations, obs)=>{
+				anchor = iframeDoc.querySelector(hash);
+				if(anchor) {
+					anchor.scrollIntoView({ behavior: 'smooth' });
+					obs.disconnect();
+				}
+			}).observe(iframeDoc, { childList: true, subtree: true });
+		}
+	};
+
 	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
 		scrollToHash(window.location.hash);
 
@@ -216,13 +276,13 @@ const BrewRenderer = (props)=>{
 	}
 
 	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
-	renderedPages = useMemo(()=>renderPages(), [props.text]);
+	renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
 
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
 			{!state.isMounted
-				? <div className='brewRenderer' onScroll={updateCurrentPage}>
+				? <div className='brewRenderer'>
 					<div className='pages'>
 						{renderDummyPage(1)}
 					</div>
@@ -235,7 +295,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>
 
-			<ToolBar displayOptions={displayOptions} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length} onDisplayOptionsChange={handleDisplayOptionsChange} />
+			<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} centerPage={state.centerPage} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length}/>
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
@@ -244,18 +304,17 @@ const BrewRenderer = (props)=>{
 				onClick={()=>{emitClick();}}
 			>
 				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
-					onScroll={updateCurrentPage}
 					onKeyDown={handleControlKeys}
 					tabIndex={-1}
-					style={ styleObject }>
+					style={ styleObject }
+				>
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}
 					{state.isMounted
 						&&
 						<>
 							{renderedStyle}
-							<div lang={`${props.lang || 'en'}`} style={pagesStyle} className={
-								`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}` } >
+							<div className={`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}`} lang={`${props.lang || 'en'}`} style={pagesStyle} ref={iframeRef}>
 								{renderedPages}
 							</div>
 						</>

client/homebrew/brewRenderer/brewRenderer.less

@@ -17,7 +17,7 @@
 			grid-template-columns: repeat(2, auto); 
 			grid-template-rows: repeat(3, auto); 
 			gap: 10px 10px; 
-			justify-content: center;
+			justify-content: safe center;
 			&.recto .page:first-child {
 				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
 				// todo: add a checkbox to toggle this setting
@@ -33,7 +33,7 @@
 			display: flex;
 			flex-wrap: wrap;
 			gap: 10px;
-			justify-content: flex-start;
+			justify-content: safe center;
 			& :where(.page) {
 				flex: 0 0 auto;
 				margin-left: unset !important;