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:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user