f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-18 16:32:43 +00:00
Code Wiki Activity

Move scrollToPage to toolbar component

Browse Source 
Keeps toolbar functions within the toolbar component and reduces props that need to be sent down.
This commit is contained in:
Gazook89
2024-08-20 15:15:36 -05:00
parent f5ee55d0ca
commit 83244485ab
2 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -81,22 +81,7 @@ const BrewRenderer = (props)=>{
return ()=>{window.removeEventListener('resize', updateSize);}; return ()=>{window.removeEventListener('resize', updateSize);};
}, []); }, []);
const scrollToPage = (pageNumber) => {
pageNumber = _.clamp(pageNumber - 1, 0, rawPages.length - 1);
const iframe = document.getElementById('BrewRenderer');
if(iframe && iframe.contentWindow) {
const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer');
if(brewRenderer) {
const pages = brewRenderer.querySelectorAll('.page');
if(pageNumber + 1 > pages.length || pageNumber < 0) {
console.log('page not found');
} else {
pages[pageNumber].scrollIntoView({ block: 'start' });
}
}
}
};
const updateSize = ()=>{ const updateSize = ()=>{
setState((prevState)=>({ setState((prevState)=>({
@@ -247,7 +232,7 @@ const BrewRenderer = (props)=>{
<NotificationPopup /> <NotificationPopup />
</div> </div>
<ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber} onPageChange={scrollToPage} totalPages={rawPages.length}/> <ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber} totalPages={rawPages.length}/>
{/*render in iFrame so broken code doesn't crash the site.*/} {/*render in iFrame so broken code doesn't crash the site.*/}

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

@@ -29,6 +29,23 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
setPageInput(page); setPageInput(page);
}; };
const scrollToPage = (pageNumber) => {
pageNumber = _.clamp(pageNumber - 1, 0, totalPages - 1);
const iframe = document.getElementById('BrewRenderer');
if(iframe && iframe.contentWindow) {
const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer');
if(brewRenderer) {
const pages = brewRenderer.querySelectorAll('.page');
if(pageNumber + 1 > pages.length || pageNumber < 0) {
console.log('page not found');
} else {
pages[pageNumber].scrollIntoView({ block: 'start' });
}
}
}
};
return ( return (
<div className='toolBar'> <div className='toolBar'>
<div className='group'> <div className='group'>
@@ -71,7 +88,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<div className='tool'> <div className='tool'>
<button <button
className='previousPage' className='previousPage'
onClick={()=>onPageChange(pageInput - 1)} onClick={()=>scrollToPage(pageInput - 1)}
disabled={pageInput <= 1} disabled={pageInput <= 1}
> >
<i className='fas fa-arrow-left'></i> <i className='fas fa-arrow-left'></i>
@@ -87,8 +104,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
value={pageInput} value={pageInput}
onChange={(e)=>{ onChange={(e)=>{
handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}} handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
onBlur={()=>onPageChange(pageInput)} onBlur={()=>scrollToPage(pageInput)}
onKeyDown={(e)=>{e.key == 'Enter' ? onPageChange(pageInput) : null;}} onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageInput) : null;}}
/> />
<span id='page-count'>/ {totalPages}</span> <span id='page-count'>/ {totalPages}</span>
@@ -97,7 +114,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button <button
className='nextPage' className='nextPage'
// onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}} // onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}}
onClick={()=>onPageChange(pageInput + 1)} onClick={()=>scrollToPage(pageInput + 1)}
disabled={pageInput >= totalPages} disabled={pageInput >= totalPages}
> >
<i className='fas fa-arrow-right'></i> <i className='fas fa-arrow-right'></i>