0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-28 15:42:38 +00:00

move formatting of visible pages to toolbar

Doesn't need to be set in brewRenderer state and passed as a prop, when it can just do it's work directly in the toolbar.
This commit is contained in:
Gazook89
2024-10-21 22:18:25 -05:00
parent de7b13bc15
commit 5c0d6e6012
2 changed files with 25 additions and 27 deletions

View File

@@ -103,7 +103,6 @@ const BrewRenderer = (props)=>{
visibility : 'hidden',
zoom : 100,
visiblePages : [],
formattedPages : '',
centerPage : 1
});
const iframeRef = useRef(null);
@@ -131,33 +130,11 @@ const BrewRenderer = (props)=>{
const pages = Array.from(updatedVisiblePages);
return { ...prevState,
visiblePages : _.sortBy(pages),
formattedPages : formatVisiblePages(pages)
visiblePages : _.sortBy(pages)
};
});
}, []);
const formatVisiblePages = (pages)=>{
if(pages.length === 0) return '';
const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array
const ranges = [];
let start = sortedPages[0];
for (let i = 1; i <= sortedPages.length; i++) {
// If the current page is not consecutive or it's the end of the list
if(i === sortedPages.length || sortedPages[i] !== sortedPages[i - 1] + 1) {
// Push the range to the list
ranges.push(
start === sortedPages[i - 1] ? `${start}` : `${start} - ${sortedPages[i - 1]}`
);
start = sortedPages[i]; // Start a new range
}
}
return ranges.join(', ');
};
const handleCenterPageChange = useCallback((pageNum)=>{
setState((prevState)=>({
...prevState,
@@ -279,7 +256,7 @@ const BrewRenderer = (props)=>{
<NotificationPopup />
</div>
<ToolBar onZoomChange={handleZoom} centerPage={state.centerPage} visiblePages={state.visiblePages} formattedPages={state.formattedPages} totalPages={rawPages.length}/>
<ToolBar onZoomChange={handleZoom} centerPage={state.centerPage} visiblePages={state.visiblePages} totalPages={rawPages.length}/>
{/*render in iFrame so broken code doesn't crash the site.*/}
<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}

View File

@@ -7,7 +7,7 @@ const _ = require('lodash');
const MAX_ZOOM = 300;
const MIN_ZOOM = 10;
const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
const ToolBar = ({ onZoomChange, visiblePages, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(1);
@@ -15,7 +15,7 @@ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
useEffect(()=>{
if(visiblePages.length !== 0){ // If zoomed in enough, it's possible that no page fits the intersection criteria, so don't update.
setPageNum(formattedPages);
setPageNum(formatVisiblePages(visiblePages));
}
}, [visiblePages]);
@@ -71,6 +71,27 @@ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
return deltaZoom;
};
const formatVisiblePages = (pages)=>{
if(pages.length === 0) return '';
const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array
const ranges = [];
let start = sortedPages[0];
for (let i = 1; i <= sortedPages.length; i++) {
// If the current page is not consecutive or it's the end of the list
if(i === sortedPages.length || sortedPages[i] !== sortedPages[i - 1] + 1) {
// Push the range to the list
ranges.push(
start === sortedPages[i - 1] ? `${start}` : `${start} - ${sortedPages[i - 1]}`
);
start = sortedPages[i]; // Start a new range
}
}
return ranges.join(', ');
};
return (
<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>