f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-15 04:02:38 +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

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

@@ -4,53 +4,34 @@ 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 limitedPos = limitPosition(dividerPos, 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 handleResize = ()=>{
const newPos = limitPosition(userSetDividerPos, 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(newPos); );
setWindowWidth(window.innerWidth);
}; };
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return ()=>window.removeEventListener('resize', handleResize);
return () => { }, [storageKey]);
window.removeEventListener('resize', handleResize);
};
}, []);
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{ 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)));
@@ -59,8 +40,8 @@ const SplitPane = (props) => {
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);
}; };
@@ -74,41 +55,38 @@ const SplitPane = (props) => {
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) {
return (
<> <>
<div className='arrow left' onClick={() => setMoveSource(!moveSource)}> {['left', 'right'].map((direction, index) => (
<i className='fas fa-arrow-left' /> <div
</div> key={direction}
<div className='arrow right' onClick={() => setMoveBrew(!moveBrew)}> className={`arrow ${direction}`}
<i className='fas fa-arrow-right' /> onClick={index === 0 ? () => setMoveSource(!moveSource) : () => setMoveBrew(!moveBrew)}
>
<i className={`fas fa-arrow-${direction}`} />
</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'} /> >
<i id='scrollToggle' className={`fas fa-${liveScroll ? 'lock' : 'unlock'}`} />
</div> </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;

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

@@ -2,52 +2,50 @@
.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;
touch-action : none;
cursor : ew-resize;
background-color : #BBBBBB;
.dots { .dots {
display : table-cell; display : table-cell;
vertical-align : middle;
text-align : center; text-align : center;
vertical-align : middle;
i { 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;
box-shadow : 0 4px 5px #0000007F;
translate : -50%;
&.left { &.left {
.tooltipLeft('Jump to location in Editor'); .tooltipLeft('Jump to location in Editor');
top : 30px; top : 30px;
@@ -59,14 +57,12 @@
&.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;
}
} }
} }