f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +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

14
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -80,8 +80,6 @@ const BrewRenderer = (props)=>{
return ()=>{window.removeEventListener('resize', updateSize);};
}, []);
const updateSize = ()=>{
setState((prevState)=>({
...prevState,
@@ -89,14 +87,12 @@ const BrewRenderer = (props)=>{
}));
};
const getCurrentPage = (e) => {
const target = e.target;
const { scrollTop, clientHeight, scrollHeight } = target;
const getCurrentPage = (e)=>{
const { scrollTop, clientHeight, scrollHeight } = e.target;
const totalScrollableHeight = scrollHeight - clientHeight;
const currentPageNumber = Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length);
setState((prevState) => ({
setState((prevState)=>({
...prevState,
currentPageNumber : currentPageNumber || 1
}));
@@ -185,14 +181,13 @@ const BrewRenderer = (props)=>{
};
//Toolbar settings:
const handleZoom = (newZoom) => {
const handleZoom = (newZoom)=>{
setState((prevState)=>({
...prevState,
zoom : newZoom
}));
};
return (
<>
{/*render dummy page while iFrame is mounting.*/}
@@ -212,7 +207,6 @@ const BrewRenderer = (props)=>{
<ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber} totalPages={rawPages.length}/>
{/*render in iFrame so broken code doesn't crash the site.*/}
<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
style={{ width: '100%', height: '100%', visibility: state.visibility }}

6
client/homebrew/brewRenderer/brewRenderer.less
View File

@@ -4,10 +4,8 @@
padding-top : 30px;
overflow-y : scroll;
will-change : transform;
:where(.pages) {
margin : 30px 0px;
& > :where(.page) {
width : 215.9mm;
height : 279.4mm;
@@ -17,20 +15,16 @@
box-shadow : 1px 4px 14px #000000;
}
}
&::-webkit-scrollbar {
width : 20px;
&:horizontal {
width : auto;
height : 20px;
}
&-thumb {
background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
}
&-corner { visibility : hidden; }
}
}

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;

1
shared/helpers.js
View File

@@ -28,6 +28,7 @@ const printCurrentBrew = ()=>{
window.frames['BrewRenderer'].contentWindow.print();
//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
node.style.display='none';
node.offsetHeight; // accessing this is enough to trigger a reflow
node.style.display='';
}