Merge branch 'master' into View-Modes

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -3,7 +3,6 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _ = require('lodash');
 
-import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
 
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
@@ -13,6 +12,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	const [zoomLevel, setZoomLevel] = useState(100);
 	const [pageNum, setPageNum] = useState(currentPage);
 	const [arrangement, setArrangement] = useState('single');
+	const [toolsVisible, setToolsVisible] = useState(true);
 	const modes = ['single', 'facing', 'flow'];
 
 	useEffect(()=>{
@@ -35,36 +35,26 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	}, [arrangement]);
 
 
-	const handleZoomButton = (delta)=>{
-		const newZoomLevel = _.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM));
-		setZoomLevel(newZoomLevel);
+	const handleZoomButton = (zoom)=>{
+		setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
 	};
 
-	const handlePageChange = (page)=>{
-		const regex = /[0-9]/;
-		if(regex.test(page)){
-			const num = parseInt(page);  // input type is 'text', so `page` comes in as a string, not number.
-			setPageNum(num)
-		} else {
-			 return;
-		}
+	const handlePageInput = (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)=>{
 		pageNumber = _.clamp(pageNumber, 1, totalPages);
 		const iframe = document.getElementById('BrewRenderer');
-		if(iframe && iframe.contentWindow) {
-			const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer');
-			if(brewRenderer) {
-				const pages = brewRenderer.querySelectorAll('.page');
-				pages[pageNumber - 1]?.scrollIntoView({ block: 'start' });
-			}
-		}
+		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
+		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
+		page?.scrollIntoView({ block: 'start' });
 		setPageNum(pageNumber);
 	};
 
 
-	const calculateZoom = (mode)=>{
+	const calculateChange = (mode)=>{
 		const iframe = document.getElementById('BrewRenderer');
 		const iframeWidth = iframe.getBoundingClientRect().width;
 		const iframeHeight = iframe.getBoundingClientRect().height;
@@ -74,30 +64,15 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 		if(mode == 'fill'){
 			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
-			let widestPage = 0;
-			[...pages].forEach((page)=>{
-				const width = page.offsetWidth;
-				if(width > widestPage)
-					widestPage = width;
-			});
+			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
 
 			desiredZoom = (iframeWidth / widestPage) * 100;
 
 		} else if(mode == 'fit'){
 			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			let maxDimRatio = 0;
-
-			[...pages].forEach((page)=>{
-				const widthRatio = iframeWidth / page.offsetWidth;
-				const heightRatio = iframeHeight / page.offsetHeight;
-				const dimensionRatio = Math.min(widthRatio, heightRatio);
-				if(dimensionRatio < maxDimRatio || maxDimRatio == 0){
-					maxDimRatio = dimensionRatio;
-				}
-			});
-
-			desiredZoom = maxDimRatio * 100;
+			const minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
 
+			desiredZoom = minDimRatio * 100;
 		}
 
 		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
@@ -112,26 +87,28 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	};
 
 	return (
-		<div className='toolBar'>
+		<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
+			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
+			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
 			<div className='group'>
 				<button
-					id='zoom-to-fill'
+					id='fill-width'
 					className='tool'
-					onClick={()=>handleZoomButton(calculateZoom('fill'))}
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
 				>
-					<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
+					<i className='fac fit-width' />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
-					onClick={()=>handleZoomButton(calculateZoom('fit'))}
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
 				>
-					<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
+					<i className='fac zoom-to-fit' />
 				</button>
 				<button
 					id='zoom-out'
 					className='tool'
-					onClick={()=>handleZoomButton(-20)}
+					onClick={()=>handleZoomButton(zoomLevel - 20)}
 					disabled={zoomLevel <= MIN_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-minus' />
@@ -146,7 +123,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					max={MAX_ZOOM}
 					step='1'
 					value={zoomLevel}
-					onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}}
+					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
 				/>
 				<datalist id='zoomLevels'>
 					<option value='100' />
@@ -155,13 +132,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-in'
 					className='tool'
-					onClick={()=>handleZoomButton(20)}
+					onClick={()=>handleZoomButton(zoomLevel + 20)}
 					disabled={zoomLevel >= MAX_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-plus' />
 				</button>
 			</div>
 
+			{/*v=====----------------------< Page Controls >---------------------=====v*/}
 			<div className='group'>
 				<button
 					id='book-mode'
@@ -191,15 +169,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						inputMode='numeric'
 						pattern='[0-9]'
 						value={pageNum}
-						onClick={(e)=>{e.target.select()}}
-						onChange={(e)=>{handlePageChange(e.target.value);}}
+						onClick={(e)=>e.target.select()}
+						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'
@@ -210,7 +187,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				</button>
 			</div>
 		</div>
-
 	);
 };