0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 07:22:44 +00:00

Add some comments and cleanup

Little changes like removing console.logs and adding comments.
This commit is contained in:
Gazook89
2024-10-21 22:13:12 -05:00
parent b6bd7ccf67
commit de7b13bc15
2 changed files with 34 additions and 33 deletions

View File

@@ -30,30 +30,32 @@ const INITIAL_CONTENT = dedent`
</head><body style='overflow: hidden'><div></div></body></html>`;
//v=====----------------------< Brew Page Component >---------------------=====v//
const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageChange, ...props})=>{
const BrewPage = ({ contents = '', index = 0, onVisibilityChange, onCenterPageChange, ...props })=>{
const pageRef = useRef(null);
const cleanText = contents; //DOMPurify.sanitize(props.contents, purifyConfig);
useEffect(()=>{
if(!pageRef.current) return;
const observer = new IntersectionObserver(
// Observer for tracking pages within the `.pages` div
const visibleObserver = new IntersectionObserver(
(entries)=>{
entries.forEach((entry)=>{
if(entry.isIntersecting){
onVisibilityChange(index + 1, true);
onVisibilityChange(index + 1, true); // add page to array of visible pages.
} else {
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.
const centerObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
(entries)=>{
entries.forEach((entry)=>{
if(entry.isIntersecting) {
onCenterPageChange(index + 1); // Set this page as the center page
}
});
@@ -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
);
observer.observe(pageRef.current);
// attach observers to each `.page`
visibleObserver.observe(pageRef.current);
centerObserver.observe(pageRef.current);
return ()=>{
observer.disconnect();
visibleObserver.disconnect();
centerObserver.disconnect();
};
}, [index, onVisibilityChange, onCenterPageChange]);
@@ -113,17 +115,18 @@ const BrewRenderer = (props)=>{
rawPages = props.text.split(/^\\page$/gm);
}
useEffect(() => {
// update centerPage (aka "current page") and pass it up to parent components
useEffect(()=>{
props.onPageChange(state.centerPage);
}, [state.centerPage]);
const handlePageVisibilityChange = useCallback((pageNum, isVisible) => {
setState((prevState) => {
let updatedVisiblePages = new Set(prevState.visiblePages);
const handlePageVisibilityChange = useCallback((pageNum, isVisible)=>{
setState((prevState)=>{
const updatedVisiblePages = new Set(prevState.visiblePages);
if(isVisible){
updatedVisiblePages.add(pageNum)
updatedVisiblePages.add(pageNum);
} else {
updatedVisiblePages.delete(pageNum)
updatedVisiblePages.delete(pageNum);
}
const pages = Array.from(updatedVisiblePages);
@@ -134,16 +137,16 @@ const BrewRenderer = (props)=>{
});
}, []);
const formatVisiblePages = (pages) => {
if (pages.length === 0) return '';
const sortedPages = [...pages].sort((a, b) => a - b); // Copy and sort the array
let ranges = [];
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) {
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]}`
@@ -151,12 +154,12 @@ const BrewRenderer = (props)=>{
start = sortedPages[i]; // Start a new range
}
}
return ranges.join(', ');
};
const handleCenterPageChange = useCallback((pageNum) => {
setState((prevState) => ({
const handleCenterPageChange = useCallback((pageNum)=>{
setState((prevState)=>({
...prevState,
centerPage : pageNum,
}));
@@ -256,8 +259,8 @@ const BrewRenderer = (props)=>{
styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
}
const renderedStyle = useMemo(()=> renderStyle(), [props.style, props.themeBundle]);
renderedPages = useMemo(() => renderPages(), [props.text]);
const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
renderedPages = useMemo(()=>renderPages(), [props.text]);
return (
<>

View File

@@ -7,14 +7,14 @@ const _ = require('lodash');
const MAX_ZOOM = 300;
const MIN_ZOOM = 10;
const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, totalPages })=>{
const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(1);
const [toolsVisible, setToolsVisible] = useState(true);
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);
}
}, [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.
};
// scroll to a page, used in the Prev/Next Page buttons.
const scrollToPage = (pageNumber)=>{
console.log('visiblePages:', visiblePages);
console.log('centerPage:', centerPage);
console.log('pageNumber:', pageNumber);
if(typeof pageNumber !== 'number') return;
pageNumber = _.clamp(pageNumber, 1, totalPages);
const iframe = document.getElementById('BrewRenderer');