f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 16:22:44 +00:00
Code Wiki Activity

Merge branch 'master' into issue_4201

Browse Source
This commit is contained in:
David Bolack
2025-08-23 12:02:11 -05:00
parent e2ed7b8600 a47a1a25a4
commit 6ac6eae863
12 changed files with 199 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
shared/naturalcrit/splitPane/splitPane.jsx
View File

@@ -1,110 +0,0 @@
require('./splitPane.less');
const React = require('react');
const { useState, useEffect } = React;
const storageKey = 'naturalcrit-pane-split';
const SplitPane = (props)=>{
const {
onDragFinish = ()=>{},
showDividerButtons = true
} = props;
const [isDragging, setIsDragging] = useState(false);
const [dividerPos, setDividerPos] = useState(null);
const [moveSource, setMoveSource] = useState(false);
const [moveBrew, setMoveBrew] = useState(false);
const [showMoveArrows, setShowMoveArrows] = useState(true);
const [liveScroll, setLiveScroll] = useState(false);
useEffect(()=>{
const savedPos = window.localStorage.getItem(storageKey);
setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
window.addEventListener('resize', handleResize);
return ()=>window.removeEventListener('resize', handleResize);
}, []);
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
const handleUp =(e)=>{
e.preventDefault();
if(isDragging) {
onDragFinish(dividerPos);
window.localStorage.setItem(storageKey, dividerPos);
}
setIsDragging(false);
};
const handleDown = (e)=>{
e.preventDefault();
setIsDragging(true);
};
const handleMove = (e)=>{
if(!isDragging) return;
e.preventDefault();
setDividerPos(limitPosition(e.pageX));
};
const liveScrollToggle = ()=>{
window.localStorage.setItem('liveScroll', String(!liveScroll));
setLiveScroll(!liveScroll);
};
const renderMoveArrows = (showMoveArrows &&
<>
<div className='arrow left'
onClick={()=>setMoveSource(!moveSource)} >
<i className='fas fa-arrow-left' />
</div>
<div className='arrow right'
onClick={()=>setMoveBrew(!moveBrew)} >
<i className='fas fa-arrow-right' />
</div>
<div id='scrollToggleDiv' className={liveScroll ? 'arrow lock' : 'arrow unlock'}
onClick={liveScrollToggle} >
<i id='scrollToggle' className={liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
</div>
</>
);
const renderDivider = (
<div className={`divider ${isDragging && 'dragging'}`} onPointerDown={handleDown}>
{showDividerButtons && renderMoveArrows}
<div className='dots'>
<i className='fas fa-circle' />
<i className='fas fa-circle' />
<i className='fas fa-circle' />
</div>
</div>
);
return (
<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
{props.children[0]}
</Pane>
{renderDivider}
<Pane isDragging={isDragging}>{props.children[1]}</Pane>
</div>
);
};
const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
const styles = width
? { flex: 'none', width: `${width}px` }
: { pointerEvents: isDragging ? 'none' : 'auto' }; //Disable mouse capture in the right pane; else dragging into the iframe drops the divider
return (
<div className='pane' style={styles}>
{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
</div>
);
};
module.exports = SplitPane;

68
shared/naturalcrit/splitPane/splitPane.less
View File

@@ -1,68 +0,0 @@
.splitPane {
position : relative;
display : flex;
flex-direction : row;
height : 100%;
outline : none;
.pane {
flex : 1;
overflow-x : hidden;
overflow-y : hidden;
}
.divider {
position : relative;
display : table;
width : 15px;
height : 100%;
text-align : center;
touch-action : none;
cursor : ew-resize;
background-color : #BBBBBB;
.dots {
display : table-cell;
vertical-align : middle;
text-align : center;
i {
display : block !important;
margin : 10px 0px;
font-size : 6px;
color : #666666;
}
}
&:hover,&.dragging { background-color : #999999; }
}
.arrow {
position : absolute;
left : 50%;
z-index : 999;
width : 25px;
height : 25px;
font-size : 1.2em;
text-align : center;
cursor : pointer;
background-color : #DDDDDD;
border : 2px solid #BBBBBB;
border-radius : 15px;
box-shadow : 0 4px 5px #0000007F;
translate : -50%;
&.left {
.tooltipLeft('Jump to location in Editor');
top : 30px;
}
&.right {
.tooltipRight('Jump to location in Preview');
top : 60px;
}
&.lock {
.tooltipRight('De-sync Editor and Preview locations.');
top : 90px;
background : #666666;
}
&.unlock {
.tooltipRight('Sync Editor and Preview locations');
top : 90px;
}
&:hover { background-color : #666666; }
}
}