Merge branch 'master' into Fill-Pane-Buttons

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -80,8 +80,6 @@ const BrewRenderer = (props)=>{
 		return ()=>{window.removeEventListener('resize', updateSize);};
 	}, []);
 
-
-
 	const updateSize = ()=>{
 		setState((prevState)=>({
 			...prevState,
@@ -89,14 +87,12 @@ const BrewRenderer = (props)=>{
 		}));
 	};
 
-	const getCurrentPage = (e) => {
+	const getCurrentPage = (e)=>{
-		const target = e.target;
+		const { scrollTop, clientHeight, scrollHeight } = e.target;
-		const { scrollTop, clientHeight, scrollHeight } = target;
 		const totalScrollableHeight = scrollHeight - clientHeight;
-
 		const currentPageNumber = Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length);
 
-		setState((prevState) => ({
+		setState((prevState)=>({
 			...prevState,
 			currentPageNumber : currentPageNumber || 1
 		}));
@@ -185,14 +181,13 @@ const BrewRenderer = (props)=>{
 	};
 
 	//Toolbar settings:
-	const handleZoom = (newZoom) => {
+	const handleZoom = (newZoom)=>{
 		setState((prevState)=>({
 			...prevState,
 			zoom : newZoom
 		}));
 	};
 
-
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
@@ -212,7 +207,6 @@ const BrewRenderer = (props)=>{
 
 			<ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber}  totalPages={rawPages.length}/>
 
-
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
 				style={{ width: '100%', height: '100%', visibility: state.visibility }}

client/homebrew/brewRenderer/brewRenderer.less

@@ -4,10 +4,8 @@
 	padding-top   : 30px;
 	overflow-y    : scroll;
 	will-change   : transform;
-
 	:where(.pages) {
 		margin : 30px 0px;
-
 		& > :where(.page) {
 			width         : 215.9mm;
 			height        : 279.4mm;
@@ -17,20 +15,16 @@
 			box-shadow    : 1px 4px 14px #000000;
 		}
 	}
-
 	&::-webkit-scrollbar {
 		width : 20px;
-
 		&:horizontal {
 			width  : auto;
 			height : 20px;
 		}
-
 		&-thumb {
 			background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
 			&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
 		}
-
 		&-corner { visibility : hidden; }
 	}
 }

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -11,7 +11,7 @@ const MIN_ZOOM = 10;
 const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 	const [zoomLevel, setZoomLevel] = useState(100);
-	const [pageNum, setPageNum] = useState(currentPage);
+	const [pageNum, setPageNum]     = useState(currentPage);
 
 	useEffect(()=>{
 		onZoomChange(zoomLevel);
@@ -22,30 +22,20 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	}, [currentPage]);
 
 	const handleZoomButton = (delta)=>{
-		const newZoomLevel = _.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM));
+		setZoomLevel(_.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM)));
-		setZoomLevel(newZoomLevel);
 	};
 
-	const handlePageChange = (page)=>{
+	const handlePageInput = (pageInput)=>{
-		const regex = /[0-9]/;
+		if(/[0-9]/.test(pageInput))
-		if(regex.test(page)){
+			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
-			const num = parseInt(page);  // input type is 'text', so `page` comes in as a string, not number.
-			setPageNum(num)
-		} else {
-			 return;
-		}
 	};
 
 	const scrollToPage = (pageNumber)=>{
 		pageNumber = _.clamp(pageNumber, 1, totalPages);
 		const iframe = document.getElementById('BrewRenderer');
-		if(iframe && iframe.contentWindow) {
+		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
-			const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer');
+		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
-			if(brewRenderer) {
+		page?.scrollIntoView({ block: 'start' });
-				const pages = brewRenderer.querySelectorAll('.page');
-				pages[pageNumber - 1]?.scrollIntoView({ block: 'start' });
-			}
-		}
 		setPageNum(pageNumber);
 	};
 
@@ -94,6 +84,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 	return (
 		<div className='toolBar'>
+			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
 			<div className='group'>
 				<button
 					id='zoom-to-fill'
@@ -127,7 +118,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					max={MAX_ZOOM}
 					step='1'
 					value={zoomLevel}
-					onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}}
+					onChange={(e)=>setZoomLevel(parseInt(e.target.value))}
 				/>
 				<datalist id='zoomLevels'>
 					<option value='100' />
@@ -143,6 +134,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				</button>
 			</div>
 
+			{/*v=====----------------------< Page Controls >---------------------=====v*/}
 			<div className='group'>
 				<button
 					id='previous-page'
@@ -162,15 +154,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						inputMode='numeric'
 						pattern='[0-9]'
 						value={pageNum}
-						onClick={(e)=>{e.target.select()}}
+						onClick={(e)=>e.target.select()}
-						onChange={(e)=>{handlePageChange(e.target.value);}}
+						onChange={(e)=>handlePageInput(e.target.value)}
 						onBlur={()=>scrollToPage(pageNum)}
-						onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageNum) : null;}}
+						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
 					/>
 					<span id='page-count'>/ {totalPages}</span>
 				</div>
 
-
 				<button
 					id='next-page'
 					className='tool'
@@ -181,7 +172,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				</button>
 			</div>
 		</div>
-
 	);
 };
 

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -38,7 +38,7 @@
 		border         : 1px solid gray;
 		&:focus { outline : 1px solid #D3D3D3; }
 
-		// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
+		// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
 		&.range-input {
 			padding      : 2px 0;
 			color        : #D3D3D3;
@@ -73,12 +73,9 @@
 			width        : 4ch;
 			margin-right : 1ch;
 			text-align   : center;
-
 		}
-
 	}
 
-
 	button {
 		box-sizing       : content-box;
 		display          : flex;
@@ -91,11 +88,8 @@
 		font-weight      : unset;
 		color            : inherit;
 		background-color : unset;
-
 		&:hover { background-color : #444444; }
-
 		&:focus { outline : 1px solid #D3D3D3; }
-
 		&:disabled {
 			color            : #777777;
 			background-color : unset !important;

shared/helpers.js

@@ -28,6 +28,7 @@ const printCurrentBrew = ()=>{
 		window.frames['BrewRenderer'].contentWindow.print();
 		//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
 		const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
+		node.style.display='none';
 		node.offsetHeight; // accessing this is enough to trigger a reflow
 		node.style.display='';
 	}