f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-05 08:02:42 +00:00
Code Wiki Activity

Simplify some logic in Toolbar

Browse Source
This commit is contained in:
Trevor Buckner
2024-08-24 23:54:09 -04:00
parent 3377d6645d
commit bf6eae7b3c
1 changed files with 14 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -9,7 +9,7 @@ const MIN_ZOOM = 10;
const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100); const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(currentPage); const [pageNum, setPageNum] = useState(currentPage);
useEffect(()=>{ useEffect(()=>{
onZoomChange(zoomLevel); onZoomChange(zoomLevel);
@@ -20,35 +20,26 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
}, [currentPage]); }, [currentPage]);
const handleZoomButton = (delta)=>{ const handleZoomButton = (delta)=>{
const newZoomLevel = _.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM); setZoomLevel(_.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)=>{ const scrollToPage = (pageNumber)=>{
pageNumber = _.clamp(pageNumber, 1, totalPages); pageNumber = _.clamp(pageNumber, 1, totalPages);
const iframe = document.getElementById('BrewRenderer'); 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); setPageNum(pageNumber);
}; };
return ( return (
<div className='toolBar'> <div className='toolBar'>
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
<div className='group'> <div className='group'>
<button <button
id='zoom-out' id='zoom-out'
@@ -68,7 +59,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
max={MAX_ZOOM} max={MAX_ZOOM}
step='1' step='1'
value={zoomLevel} value={zoomLevel}
onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}} onChange={(e) => setZoomLevel(parseInt(e.target.value))}
/> />
<datalist id='zoomLevels'> <datalist id='zoomLevels'>
<option value='100' /> <option value='100' />
@@ -84,6 +75,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
</button> </button>
</div> </div>
{/*v=====----------------------< Page Controls >---------------------=====v*/}
<div className='group'> <div className='group'>
<button <button
id='previous-page' id='previous-page'
@@ -103,15 +95,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
inputMode='numeric' inputMode='numeric'
pattern='[0-9]' pattern='[0-9]'
value={pageNum} 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)} onBlur={()=>scrollToPage(pageNum)}
onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageNum) : null;}} onKeyDown={(e) => e.key == 'Enter' && scrollToPage(pageNum)}
/> />
<span id='page-count'>/ {totalPages}</span> <span id='page-count'>/ {totalPages}</span>
</div> </div>
<button <button
id='next-page' id='next-page'
className='tool' className='tool'
@@ -122,7 +113,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
</button> </button>
</div> </div>
</div> </div>
); );
}; };