f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 02:52:38 +00:00
Code Wiki Activity

Merge branch 'Intersection-Observer' into Observer-Master-merge

Browse Source
This commit is contained in:
Gazook89
2024-11-05 14:03:09 -06:00
parent b868ba9406 5ab867f21e
commit 93b9f1d1da
3 changed files with 127 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,19 +4,20 @@ const { useState, useEffect } = React;
const _ = require('lodash');
import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
// import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
const MAX_ZOOM = 300;
const MIN_ZOOM = 10;
const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChange })=>{
const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages })=>{
const [pageNum, setPageNum] = useState(currentPage);
const [pageNum, setPageNum] = useState(1);
const [toolsVisible, setToolsVisible] = useState(true);
useEffect(()=>{
setPageNum(currentPage);
}, [currentPage]);
if(visiblePages.length !== 0){ // If zoomed in enough, it's possible that no page fits the intersection criteria, so don't update.
setPageNum(formatVisiblePages(visiblePages));
}
}, [visiblePages]);
const handleZoomButton = (zoom)=>{
handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
@@ -28,20 +29,21 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
};
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.
};
// scroll to a page, used in the Prev/Next Page buttons.
const scrollToPage = (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);
};
const calculateChange = (mode)=>{
const iframe = document.getElementById('BrewRenderer');
const iframeWidth = iframe.getBoundingClientRect().width;
@@ -69,6 +71,28 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
return deltaZoom;
};
// format the visible pages to work with ranges, including separate ranges ("2-7, 10-15")
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) {
// Push the range to the list
ranges.push(
start === sortedPages[i - 1] ? `${start}` : `${start} - ${sortedPages[i - 1]}`
);
start = sortedPages[i]; // Start a new range
}
}
return ranges.join(', ');
};
return (
<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
@@ -185,7 +209,10 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
className='previousPage tool'
type='button'
title='Previous Page(s)'
onClick={()=>scrollToPage(pageNum - 1)}
onClick={()=>{
const rangeOffset = visiblePages.length > 1 ? 1 : 0;
scrollToPage(_.min(visiblePages) - visiblePages.length + rangeOffset);
}}
disabled={pageNum <= 1}
>
<i className='fas fa-arrow-left'></i>
@@ -200,7 +227,7 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
title='Current page(s) in view'
inputMode='numeric'
pattern='[0-9]'
value={pageNum}
value={`${pageNum}`}
onClick={(e)=>e.target.select()}
onChange={(e)=>handlePageInput(e.target.value)}
onBlur={()=>scrollToPage(pageNum)}
@@ -214,7 +241,10 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
className='tool'
type='button'
title='Next Page(s)'
onClick={()=>scrollToPage(pageNum + 1)}
onClick={()=>{
const rangeOffset = visiblePages.length > 1 ? 0 : 1;
scrollToPage(_.max(visiblePages) + rangeOffset);
}}
disabled={pageNum >= totalPages}
>
<i className='fas fa-arrow-right'></i>