f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-18 18:42:41 +00:00
Code Wiki Activity

Setup Intersection Observers & more...

Browse Source 
Bad commit here with too much stuff.  I apologize.

This sets up two Intersection Observers: the first captures every page that is at least 30% visible inside the `.pages` container, and the second captures every page that has at least one pixel on the horizontal center line of `.pages`.  Both can be arrays of integers (page index).

The "visiblePages" array is duplicated and formatted into a "formattedPages" state, which gets displayed in the toolbar.

The toolbar displays that, unless the user clicks into the page input and enters their own integer (only a single integer, no range), which can then jump the preview to that page on Enter or blur().

The Arrow 'change page' buttons jump the preview back and forth by a 'full set'.
 If one page is viewed at a time, this is moved on page a time, and if 10 pages are viewed at a time it jumps the pages by 10.

Left to do:  adapt the "jump editor to match preview" divider button to work with new "centerPage".
This commit is contained in:
Gazook89
2024-10-21 00:30:45 -05:00
parent f1af87ee7e
commit 41fdf48ad3
3 changed files with 126 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,12 +7,20 @@ const _ = require('lodash');
const MAX_ZOOM = 300;
const MIN_ZOOM = 10;
const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
const ToolBar = ({ onZoomChange, currentPage, visiblePages, formattedPages, centerPage, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(currentPage);
const [pageNum, setPageNum] = useState(null);
const [toolsVisible, setToolsVisible] = useState(true);
useEffect(()=>{
setPageNum(visiblePages[0]);
}, []);
useEffect(()=>{
setPageNum(formattedPages);
}, [visiblePages]);
useEffect(()=>{
onZoomChange(zoomLevel);
}, [zoomLevel]);
@@ -26,17 +34,21 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
};
const handlePageInput = (pageInput)=>{
console.log(pageInput);
if(/[0-9]/.test(pageInput))
setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
};
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');
const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
const page = brewRenderer?.querySelector(`#p${pageNumber}`);
page?.scrollIntoView({ block: 'start' });
setPageNum(pageNumber);
};
@@ -125,7 +137,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button
id='previous-page'
className='previousPage tool'
onClick={()=>scrollToPage(pageNum - 1)}
onClick={()=>scrollToPage(_.min(visiblePages) - visiblePages.length)}
disabled={pageNum <= 1}
>
<i className='fas fa-arrow-left'></i>
@@ -139,7 +151,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
name='page'
inputMode='numeric'
pattern='[0-9]'
value={pageNum}
value={`${pageNum}`}
onClick={(e)=>e.target.select()}
onChange={(e)=>handlePageInput(e.target.value)}
onBlur={()=>scrollToPage(pageNum)}
@@ -151,7 +163,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
<button
id='next-page'
className='tool'
onClick={()=>scrollToPage(pageNum + 1)}
onClick={()=>scrollToPage(_.max(visiblePages) + 1)}
disabled={pageNum >= totalPages}
>
<i className='fas fa-arrow-right'></i>