f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 11:42:39 +00:00
Code Wiki Activity

useEffect hook to update view after mode select

Browse Source 
utilize useEffect hook to trigger render when the mode state is changed.

Move modes array to top level array, and change 'book-mode' to 'facing', and add 'flow' mode.

toggle modes as class names in .pages div, which are each styled as required.
This commit is contained in:
Gazook89
2024-08-23 14:29:02 -05:00
parent 375c54016c
commit 49a4daa8f6
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100);
const [pageInput, setPageInput] = useState(currentPage);
const [arrangement, setArrangement] = useState('single');
const modes = ['single', 'facing', 'flow'];
useEffect(()=>{
onZoomChange(zoomLevel);
@@ -20,7 +21,19 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
useEffect(()=>{
setPageInput(currentPage);
}, [currentPage])
}, [currentPage]);
// update display arrangement when arrangement state is changed.
useEffect(()=>{
const iframe = document.getElementById('BrewRenderer');
const pagesContainer = iframe?.contentWindow?.document.querySelector('.pages');
if(pagesContainer) {
modes.forEach((mode)=>pagesContainer.classList.remove(mode));
pagesContainer.classList.add(arrangement);
}
}, [arrangement]);
const handleZoomChange = (delta)=>{
const zoomChange = _.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM);
@@ -88,10 +101,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
};
const setBookMode = ()=>{
const iframe = document.getElementById('BrewRenderer');
const pagesContainer = iframe.contentWindow.document.getElementsByClassName('pages')[0];
pagesContainer.classList.toggle('book-mode');
pagesContainer.firstChild.style.gridColumnStart = '2' ;
const nextMode = modes[(modes.indexOf(arrangement) + 1) % modes.length];
setArrangement(nextMode);
};
return (