Setup Intersection Observers & more...

Bad commit here with too much stuff.  I apologize.

This sets up two Intersection Observers: the first captures every page that is at least 30% visible inside the `.pages` container, and the second captures every page that has at least one pixel on the horizontal center line of `.pages`.  Both can be arrays of integers (page index).

The "visiblePages" array is duplicated and formatted into a "formattedPages" state, which gets displayed in the toolbar.

The toolbar displays that, unless the user clicks into the page input and enters their own integer (only a single integer, no range), which can then jump the preview to that page on Enter or blur().

The Arrow 'change page' buttons jump the preview back and forth by a 'full set'.
 If one page is viewed at a time, this is moved on page a time, and if 10 pages are viewed at a time it jumps the pages by 10.

Left to do:  adapt the "jump editor to match preview" divider button to work with new "centerPage".

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -7,12 +7,20 @@ const _ = require('lodash');
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
-const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
+const ToolBar = ({ onZoomChange, currentPage, visiblePages, formattedPages, centerPage, totalPages })=>{
 
 	const [zoomLevel, setZoomLevel] = useState(100);
-	const [pageNum, setPageNum]     = useState(currentPage);
+	const [pageNum, setPageNum]     = useState(null);
 	const [toolsVisible, setToolsVisible] = useState(true);
 
+	useEffect(()=>{
+		setPageNum(visiblePages[0]);
+	}, []);
+
+	useEffect(()=>{
+		setPageNum(formattedPages);
+	}, [visiblePages]);
+
 	useEffect(()=>{
 		onZoomChange(zoomLevel);
 	}, [zoomLevel]);
@@ -26,17 +34,21 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	};
 
 	const handlePageInput = (pageInput)=>{
+		console.log(pageInput);
 		if(/[0-9]/.test(pageInput))
 			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
 	};
 
 	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');
 		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
 		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
 		page?.scrollIntoView({ block: 'start' });
-		setPageNum(pageNumber);
 	};
 
 
@@ -125,7 +137,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='previous-page'
 					className='previousPage tool'
-					onClick={()=>scrollToPage(pageNum - 1)}
+					onClick={()=>scrollToPage(_.min(visiblePages) - visiblePages.length)}
 					disabled={pageNum <= 1}
 				>
 					<i className='fas fa-arrow-left'></i>
@@ -139,7 +151,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						name='page'
 						inputMode='numeric'
 						pattern='[0-9]'
-						value={pageNum}
+						value={`${pageNum}`}
 						onClick={(e)=>e.target.select()}
 						onChange={(e)=>handlePageInput(e.target.value)}
 						onBlur={()=>scrollToPage(pageNum)}
@@ -151,7 +163,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='next-page'
 					className='tool'
-					onClick={()=>scrollToPage(pageNum + 1)}
+					onClick={()=>scrollToPage(_.max(visiblePages) + 1)}
 					disabled={pageNum >= totalPages}
 				>
 					<i className='fas fa-arrow-right'></i>

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -76,7 +76,7 @@
 
 		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
 		&#page-input {
-			width        : 4ch;
+			width        : 8ch;
 			margin-right : 1ch;
 			text-align   : center;
 		}