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