0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-10 15:42:39 +00:00

fixed page error

This commit is contained in:
Víctor Losada Hernández
2024-05-31 20:14:41 +02:00
parent f23c0bccbc
commit 000c3db8cd
2 changed files with 22 additions and 9 deletions

View File

@@ -67,6 +67,7 @@ const BrewRenderer = (props)=>{
isMounted : false, isMounted : false,
visibility : 'hidden', visibility : 'hidden',
zoom : 100, zoom : 100,
currentPageNumber : 1,
}); });
const mainRef = useRef(null); const mainRef = useRef(null);
@@ -88,7 +89,8 @@ const BrewRenderer = (props)=>{
iframe.contentWindow.document.querySelector('.brewRenderer'); iframe.contentWindow.document.querySelector('.brewRenderer');
if (brewRenderer) { if (brewRenderer) {
const pages = brewRenderer.querySelectorAll('.page'); const pages = brewRenderer.querySelectorAll('.page');
if (pageNumber + 1 > pages.length) { console.log(pageNumber);
if (pageNumber + 1 > pages.length || pageNumber < 0) {
console.log(pageNumber, pages.length); console.log(pageNumber, pages.length);
console.log('page not found'); console.log('page not found');
} else { } else {
@@ -111,6 +113,18 @@ const BrewRenderer = (props)=>{
...prevState, ...prevState,
viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length) viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
})); }));
getCurrentPage(e);
};
const getCurrentPage = (e) => {
const target = e.target;
const currentPageNumber = Math.ceil(target.scrollTop / target.scrollHeight * rawPages.length);
setState((prevState) => ({
...prevState,
currentPageNumber: currentPageNumber || 1
}));
}; };
const isInView = (index)=>{ const isInView = (index)=>{
@@ -257,7 +271,7 @@ const BrewRenderer = (props)=>{
contentDidMount={frameDidMount} contentDidMount={frameDidMount}
onClick={()=>{emitClick();}} onClick={()=>{emitClick();}}
> >
<ToolBar updateZoom={updateZoom} currentPage={state.viewablePageNumber} onPageChange={handlePageChange} totalPages={rawPages.length}/> <ToolBar updateZoom={updateZoom} currentPage={state.currentPageNumber} onPageChange={handlePageChange} totalPages={rawPages.length}/>
<div className={'brewRenderer'} <div className={'brewRenderer'}
onScroll={handleScroll} onScroll={handleScroll}
onKeyDown={handleControlKeys} onKeyDown={handleControlKeys}

View File

@@ -11,7 +11,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
}); });
const [pageNumberInput, setPageNumberInput] = useState( const [pageNumberInput, setPageNumberInput] = useState(
state.currentPage + 1 state.currentPage
); );
const [zoomInput, setZoomInput] = useState(state.zoomLevel); const [zoomInput, setZoomInput] = useState(state.zoomLevel);
@@ -22,12 +22,11 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
// Update currentPage whenever page prop changes // Update currentPage whenever page prop changes
useEffect(() => { useEffect(() => {
console.log(`page number from props ${currentPage}`);
setState((prevState) => ({ setState((prevState) => ({
...prevState, ...prevState,
currentPage: currentPage, currentPage: currentPage,
})); }));
setPageNumberInput(currentPage + 1); setPageNumberInput(currentPage);
}, [currentPage]); }, [currentPage]);
const setZoomLevel = (direction) => { const setZoomLevel = (direction) => {
@@ -113,9 +112,9 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
className="previousPage" className="previousPage"
onClick={() => { onClick={() => {
console.log(`page is ${state.currentPage}`); console.log(`page is ${state.currentPage}`);
onPageChange(state.currentPage - 1); onPageChange(state.currentPage - 2);
}} }}
disabled={state.currentPage === 0} disabled={state.currentPage <= 1}
> >
<i className="fas fa-arrow-left"></i> <i className="fas fa-arrow-left"></i>
</button> </button>
@@ -130,7 +129,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
value={pageNumberInput} value={pageNumberInput}
onChange={(e) => handleInputChange(e.target.value, 'page')} onChange={(e) => handleInputChange(e.target.value, 'page')}
onBlur={(e) => { onBlur={(e) => {
parseInt(pageNumberInput) === state.currentPage + 1 || parseInt(pageNumberInput) === state.currentPage ||
onPageChange(parseInt(pageNumberInput) - 1); onPageChange(parseInt(pageNumberInput) - 1);
}} }}
onKeyPress={(e) => { onKeyPress={(e) => {
@@ -145,7 +144,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
className="nextPage" className="nextPage"
onClick={() => { onClick={() => {
console.log(`page is ${state.currentPage}`); console.log(`page is ${state.currentPage}`);
onPageChange(state.currentPage + 1); onPageChange(state.currentPage);
}} }}
disabled={state.currentPage + 1 === state.totalPages} disabled={state.currentPage + 1 === state.totalPages}
> >