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

linting and final pass

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-10-26 16:45:33 +02:00
parent 8ab9b842fc
commit 843aa6d769
2 changed files with 94 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,112 +3,90 @@ const React = require('react');
const { useState, useEffect, useRef } = React; const { useState, useEffect, useRef } = React;
const cx = require('classnames'); const cx = require('classnames');
const SplitPane = (props) => { const SplitPane = (props)=>{
props = { const {
storageKey : 'naturalcrit-pane-split', storageKey = 'naturalcrit-pane-split',
onDragFinish : function(){}, //fires when dragging onDragFinish = ()=>{},
showDividerButtons : true, showDividerButtons = true
...props } = props;
};
const pane1 = useRef(null);
const pane2 = useRef(null);
const [currentDividerPos, setCurrentDividerPos] = useState(null);
const [userSetDividerPos, setUserSetDividerPos] = useState(null);
const [windowWidth, setWindowWidth] = useState(null);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const [dividerPos, setDividerPos] = useState(null); // Initial divider position is set to `null`
const [moveSource, setMoveSource] = useState(false); const [moveSource, setMoveSource] = useState(false);
const [moveBrew, setMoveBrew] = useState(false); const [moveBrew, setMoveBrew] = useState(false);
const [showMoveArrows, setShowMoveArrows] = useState(true); const [showMoveArrows, setShowMoveArrows] = useState(true);
const [liveScroll, setLiveScroll] = useState(false); const [liveScroll, setLiveScroll] = useState(false);
const storageKey = props.storageKey || 'naturalcrit-pane-split'; const dividerRef = useRef(null);
const onDragFinish = props.onDragFinish || (() => {});
// Fetch saved divider position and scroll state on mount // Set initial divider position and liveScroll only after mounting
useEffect(() => { useEffect(()=>{
setWindowWidth(window.innerWidth); const savedPos = window.localStorage.getItem(storageKey);
const dividerPos = window.localStorage.getItem(storageKey); setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2);
const liveScrollSetting = window.localStorage.getItem('liveScroll') === 'true'; setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
setLiveScroll(liveScrollSetting);
if (dividerPos) { const handleResize = ()=>{
const limitedPos = limitPosition(dividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)); setDividerPos((pos)=>limitPosition(pos,0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))
setCurrentDividerPos(limitedPos); );
setUserSetDividerPos(dividerPos);
} else {
setCurrentDividerPos(window.innerWidth / 2);
setUserSetDividerPos(window.innerWidth / 2);
}
const handleResize = () => {
const newPos = limitPosition(userSetDividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13));
setCurrentDividerPos(newPos);
setWindowWidth(window.innerWidth);
}; };
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return ()=>window.removeEventListener('resize', handleResize);
}, [storageKey]);
return () => { const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{
window.removeEventListener('resize', handleResize);
};
}, []);
const limitPosition = (x, min = 1, max = window.innerWidth - 13) => {
return Math.round(Math.min(max, Math.max(min, x))); return Math.round(Math.min(max, Math.max(min, x)));
}; };
const handleUp = (e) => { const handleUp =(e)=>{
e.preventDefault(); e.preventDefault();
if (isDragging) { if(isDragging) {
onDragFinish(currentDividerPos); onDragFinish(dividerPos);
window.localStorage.setItem(storageKey, currentDividerPos); window.localStorage.setItem(storageKey, dividerPos);
} }
setIsDragging(false); setIsDragging(false);
}; };
const handleDown = (e) => { const handleDown = (e)=>{
e.preventDefault(); e.preventDefault();
setIsDragging(true); setIsDragging(true);
}; };
const handleMove = (e) => { const handleMove = (e)=>{
if (!isDragging) return; if(!isDragging) return;
e.preventDefault(); e.preventDefault();
const newSize = limitPosition(e.pageX); const newSize = limitPosition(e.pageX);
setCurrentDividerPos(newSize); setDividerPos(newSize);
setUserSetDividerPos(newSize);
}; };
const liveScrollToggle = () => { const liveScrollToggle = ()=>{
const newScrollState = !liveScroll; window.localStorage.setItem('liveScroll', String(!liveScroll));
window.localStorage.setItem('liveScroll', String(newScrollState)); setLiveScroll(!liveScroll);
setLiveScroll(newScrollState);
}; };
const renderMoveArrows = () => { const moveArrows = showMoveArrows && (
console.log('showMoveArrows: ', showMoveArrows); <>
if (showMoveArrows) { {['left', 'right'].map((direction, index) => (
return ( <div
<> key={direction}
<div className='arrow left' onClick={() => setMoveSource(!moveSource)}> className={`arrow ${direction}`}
<i className='fas fa-arrow-left' /> onClick={index === 0 ? () => setMoveSource(!moveSource) : () => setMoveBrew(!moveBrew)}
</div> >
<div className='arrow right' onClick={() => setMoveBrew(!moveBrew)}> <i className={`fas fa-arrow-${direction}`} />
<i className='fas fa-arrow-right' /> </div>
</div> ))}
<div <div
id='scrollToggleDiv' id='scrollToggleDiv'
className={liveScroll ? 'arrow lock' : 'arrow unlock'} className={`arrow ${liveScroll ? 'lock' : 'unlock'}`}
onClick={liveScrollToggle}> onClick={liveScrollToggle}
<i id='scrollToggle' className={liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} /> >
</div> <i id='scrollToggle' className={`fas fa-${liveScroll ? 'lock' : 'unlock'}`} />
</> </div>
); </>
} );
};
const renderDivider = () => ( const renderDivider = ()=>(
<div className='divider' onPointerDown={handleDown}> <div className='divider' onPointerDown={handleDown} ref={dividerRef}>
{props.showDividerButtons && renderMoveArrows()} {showDividerButtons && moveArrows}
<div className='dots'> <div className='dots'>
<i className='fas fa-circle' /> <i className='fas fa-circle' />
<i className='fas fa-circle' /> <i className='fas fa-circle' />
@@ -119,28 +97,25 @@ const SplitPane = (props) => {
return ( return (
<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}> <div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
<Pane ref={pane1} width={currentDividerPos}> <Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
{React.cloneElement(props.children[0], { {props.children[0]}
...(props.showDividerButtons && {
moveBrew,
moveSource,
liveScroll,
setMoveArrows: setShowMoveArrows,
}),
})}
</Pane> </Pane>
{renderDivider()} {renderDivider()}
<Pane ref={pane2} isDragging={isDragging}>{props.children[1]}</Pane> <Pane isDragging={isDragging}>{props.children[1]}</Pane>
</div> </div>
); );
}; };
const Pane = ({ width, children, isDragging, className }) => { const Pane = ({ width, children, isDragging, className, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
const styles = width const styles = width
? { flex: 'none', width: `${width}px` } ? { flex: 'none', width: `${width}px` }
: { pointerEvents: isDragging ? 'none' : 'auto' }; : { pointerEvents: isDragging ? 'none' : 'auto' };
return <div className={cx('pane', className)} style={styles}>{children}</div>; return (
<div className={cx('pane', className)} style={styles}>
{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
</div>
);
}; };
module.exports = SplitPane; module.exports = SplitPane;

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

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