mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-15 21:22:43 +00:00
Add some comments and cleanup
Little changes like removing console.logs and adding comments.
This commit is contained in:
@@ -36,17 +36,19 @@ const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageCha
|
|||||||
|
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
if(!pageRef.current) return;
|
if(!pageRef.current) return;
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
|
// Observer for tracking pages within the `.pages` div
|
||||||
|
const visibleObserver = new IntersectionObserver(
|
||||||
(entries)=>{
|
(entries)=>{
|
||||||
entries.forEach((entry)=>{
|
entries.forEach((entry)=>{
|
||||||
if(entry.isIntersecting){
|
if(entry.isIntersecting){
|
||||||
onVisibilityChange(index + 1, true);
|
onVisibilityChange(index + 1, true); // add page to array of visible pages.
|
||||||
} else {
|
} else {
|
||||||
onVisibilityChange(index + 1, false);
|
onVisibilityChange(index + 1, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
{ threshold: .3, rootMargin: '0px 0px 0px 0px' }
|
{ threshold: .3, rootMargin: '0px 0px 0px 0px' } // detect when >30% of page is within bounds.
|
||||||
);
|
);
|
||||||
|
|
||||||
// Observer for tracking the page at the center of the iframe.
|
// Observer for tracking the page at the center of the iframe.
|
||||||
@@ -61,11 +63,11 @@ const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageCha
|
|||||||
{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
|
{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
|
||||||
);
|
);
|
||||||
|
|
||||||
observer.observe(pageRef.current);
|
// attach observers to each `.page`
|
||||||
|
visibleObserver.observe(pageRef.current);
|
||||||
centerObserver.observe(pageRef.current);
|
centerObserver.observe(pageRef.current);
|
||||||
|
|
||||||
return ()=>{
|
return ()=>{
|
||||||
observer.disconnect();
|
visibleObserver.disconnect();
|
||||||
centerObserver.disconnect();
|
centerObserver.disconnect();
|
||||||
};
|
};
|
||||||
}, [index, onVisibilityChange, onCenterPageChange]);
|
}, [index, onVisibilityChange, onCenterPageChange]);
|
||||||
@@ -113,17 +115,18 @@ const BrewRenderer = (props)=>{
|
|||||||
rawPages = props.text.split(/^\\page$/gm);
|
rawPages = props.text.split(/^\\page$/gm);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// update centerPage (aka "current page") and pass it up to parent components
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
props.onPageChange(state.centerPage);
|
props.onPageChange(state.centerPage);
|
||||||
}, [state.centerPage]);
|
}, [state.centerPage]);
|
||||||
|
|
||||||
const handlePageVisibilityChange = useCallback((pageNum, isVisible)=>{
|
const handlePageVisibilityChange = useCallback((pageNum, isVisible)=>{
|
||||||
setState((prevState)=>{
|
setState((prevState)=>{
|
||||||
let updatedVisiblePages = new Set(prevState.visiblePages);
|
const updatedVisiblePages = new Set(prevState.visiblePages);
|
||||||
if(isVisible){
|
if(isVisible){
|
||||||
updatedVisiblePages.add(pageNum)
|
updatedVisiblePages.add(pageNum);
|
||||||
} else {
|
} else {
|
||||||
updatedVisiblePages.delete(pageNum)
|
updatedVisiblePages.delete(pageNum);
|
||||||
}
|
}
|
||||||
const pages = Array.from(updatedVisiblePages);
|
const pages = Array.from(updatedVisiblePages);
|
||||||
|
|
||||||
@@ -138,7 +141,7 @@ const BrewRenderer = (props)=>{
|
|||||||
if(pages.length === 0) return '';
|
if(pages.length === 0) return '';
|
||||||
|
|
||||||
const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array
|
const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array
|
||||||
let ranges = [];
|
const ranges = [];
|
||||||
let start = sortedPages[0];
|
let start = sortedPages[0];
|
||||||
|
|
||||||
for (let i = 1; i <= sortedPages.length; i++) {
|
for (let i = 1; i <= sortedPages.length; i++) {
|
||||||
|
|||||||
@@ -7,14 +7,14 @@ const _ = require('lodash');
|
|||||||
const MAX_ZOOM = 300;
|
const MAX_ZOOM = 300;
|
||||||
const MIN_ZOOM = 10;
|
const MIN_ZOOM = 10;
|
||||||
|
|
||||||
const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, totalPages })=>{
|
const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
|
||||||
|
|
||||||
const [zoomLevel, setZoomLevel] = useState(100);
|
const [zoomLevel, setZoomLevel] = useState(100);
|
||||||
const [pageNum, setPageNum] = useState(1);
|
const [pageNum, setPageNum] = useState(1);
|
||||||
const [toolsVisible, setToolsVisible] = useState(true);
|
const [toolsVisible, setToolsVisible] = useState(true);
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
if(visiblePages.length !== 0){
|
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(formattedPages);
|
||||||
}
|
}
|
||||||
}, [visiblePages]);
|
}, [visiblePages]);
|
||||||
@@ -33,10 +33,8 @@ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, total
|
|||||||
setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
|
setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// scroll to a page, used in the Prev/Next Page buttons.
|
||||||
const scrollToPage = (pageNumber)=>{
|
const scrollToPage = (pageNumber)=>{
|
||||||
console.log('visiblePages:', visiblePages);
|
|
||||||
console.log('centerPage:', centerPage);
|
|
||||||
console.log('pageNumber:', pageNumber);
|
|
||||||
if(typeof pageNumber !== 'number') return;
|
if(typeof pageNumber !== 'number') return;
|
||||||
pageNumber = _.clamp(pageNumber, 1, totalPages);
|
pageNumber = _.clamp(pageNumber, 1, totalPages);
|
||||||
const iframe = document.getElementById('BrewRenderer');
|
const iframe = document.getElementById('BrewRenderer');
|
||||||
|
|||||||
Reference in New Issue
Block a user