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

Merge branch 'master' into Fill-Pane-Buttons

Browse Source
This commit is contained in:
Trevor Buckner
2024-08-24 23:59:19 -04:00
committed by GitHub
parent 35a0a12f16 1803c89a23
commit d4d27aab6a
5 changed files with 20 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@ const MIN_ZOOM = 10;
const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(currentPage);
const [pageNum, setPageNum] = useState(currentPage);
useEffect(()=>{
onZoomChange(zoomLevel);
@@ -22,30 +22,20 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
}, [currentPage]);
const handleZoomButton = (delta)=>{
const newZoomLevel = _.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM));
setZoomLevel(newZoomLevel);
setZoomLevel(_.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM)));
};
const handlePageChange = (page)=>{
const regex = /[0-9]/;
if(regex.test(page)){
const num = parseInt(page); // input type is 'text', so `page` comes in as a string, not number.
setPageNum(num)
} else {
return;
}
const handlePageInput = (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)=>{
pageNumber = _.clamp(pageNumber, 1, totalPages);
const iframe = document.getElementById('BrewRenderer');
if(iframe && iframe.contentWindow) {
const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer');
if(brewRenderer) {
const pages = brewRenderer.querySelectorAll('.page');
pages[pageNumber - 1]?.scrollIntoView({ block: 'start' });
}
}
const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
const page = brewRenderer?.querySelector(`#p${pageNumber}`);
page?.scrollIntoView({ block: 'start' });
setPageNum(pageNumber);
};
@@ -94,6 +84,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
return (
<div className='toolBar'>
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
<div className='group'>
<button
id='zoom-to-fill'
@@ -127,7 +118,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
max={MAX_ZOOM}
step='1'
value={zoomLevel}
onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}}
onChange={(e)=>setZoomLevel(parseInt(e.target.value))}
/>
<datalist id='zoomLevels'>
<option value='100' />
@@ -143,6 +134,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
</button>
</div>
{/*v=====----------------------< Page Controls >---------------------=====v*/}
<div className='group'>
<button
id='previous-page'
@@ -162,15 +154,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
inputMode='numeric'
pattern='[0-9]'
value={pageNum}
onClick={(e)=>{e.target.select()}}
onChange={(e)=>{handlePageChange(e.target.value);}}
onClick={(e)=>e.target.select()}
onChange={(e)=>handlePageInput(e.target.value)}
onBlur={()=>scrollToPage(pageNum)}
onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageNum) : null;}}
onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
/>
<span id='page-count'>/ {totalPages}</span>
</div>
<button
id='next-page'
className='tool'
@@ -181,7 +172,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
</button>
</div>
</div>
);
};

8
client/homebrew/brewRenderer/toolBar/toolBar.less
View File

@@ -38,7 +38,7 @@
border : 1px solid gray;
&:focus { outline : 1px solid #D3D3D3; }
// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
&.range-input {
padding : 2px 0;
color : #D3D3D3;
@@ -73,12 +73,9 @@
width : 4ch;
margin-right : 1ch;
text-align : center;
}
}
button {
box-sizing : content-box;
display : flex;
@@ -91,11 +88,8 @@
font-weight : unset;
color : inherit;
background-color : unset;
&:hover { background-color : #444444; }
&:focus { outline : 1px solid #D3D3D3; }
&:disabled {
color : #777777;
background-color : unset !important;