mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-24 18:32:41 +00:00
initial commit
This commit is contained in:
Víctor Losada Hernández
@@ -1,200 +1,146 @@
|
||||
require('./splitPane.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
const { useState, useEffect, useRef } = React;
|
||||
const cx = require('classnames');
|
||||
|
||||
const SplitPane = createClass({
|
||||
displayName : 'SplitPane',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
storageKey : 'naturalcrit-pane-split',
|
||||
onDragFinish : function(){}, //fires when dragging
|
||||
showDividerButtons : true
|
||||
};
|
||||
},
|
||||
const SplitPane = (props) => {
|
||||
props = {
|
||||
storageKey : 'naturalcrit-pane-split',
|
||||
onDragFinish : function(){}, //fires when dragging
|
||||
showDividerButtons : true,
|
||||
...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 [moveSource, setMoveSource] = useState(false);
|
||||
const [moveBrew, setMoveBrew] = useState(false);
|
||||
const [showMoveArrows, setShowMoveArrows] = useState(true);
|
||||
const [liveScroll, setLiveScroll] = useState(false);
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
currentDividerPos : null,
|
||||
windowWidth : 0,
|
||||
isDragging : false,
|
||||
moveSource : false,
|
||||
moveBrew : false,
|
||||
showMoveArrows : true
|
||||
};
|
||||
},
|
||||
const storageKey = props.storageKey || 'naturalcrit-pane-split';
|
||||
const onDragFinish = props.onDragFinish || (() => {});
|
||||
|
||||
pane1 : React.createRef(null),
|
||||
pane2 : React.createRef(null),
|
||||
// Fetch saved divider position and scroll state on mount
|
||||
useEffect(() => {
|
||||
setWindowWidth(window.innerWidth);
|
||||
const dividerPos = window.localStorage.getItem(storageKey);
|
||||
const liveScrollSetting = window.localStorage.getItem('liveScroll') === 'true';
|
||||
setLiveScroll(liveScrollSetting);
|
||||
|
||||
componentDidMount : function() {
|
||||
const dividerPos = window.localStorage.getItem(this.props.storageKey);
|
||||
if(dividerPos){
|
||||
this.setState({
|
||||
currentDividerPos : this.limitPosition(dividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)),
|
||||
userSetDividerPos : dividerPos,
|
||||
windowWidth : window.innerWidth
|
||||
});
|
||||
if (dividerPos) {
|
||||
const limitedPos = limitPosition(dividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13));
|
||||
setCurrentDividerPos(limitedPos);
|
||||
setUserSetDividerPos(dividerPos);
|
||||
} else {
|
||||
this.setState({
|
||||
currentDividerPos : window.innerWidth / 2,
|
||||
userSetDividerPos : window.innerWidth / 2
|
||||
});
|
||||
setCurrentDividerPos(window.innerWidth / 2);
|
||||
setUserSetDividerPos(window.innerWidth / 2);
|
||||
}
|
||||
window.addEventListener('resize', this.handleWindowResize);
|
||||
|
||||
// This lives here instead of in the initial render because you cannot touch localStorage until the componant mounts.
|
||||
const loadLiveScroll = window.localStorage.getItem('liveScroll') === 'true';
|
||||
this.setState({ liveScroll: loadLiveScroll });
|
||||
},
|
||||
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);
|
||||
|
||||
componentWillUnmount : function() {
|
||||
window.removeEventListener('resize', this.handleWindowResize);
|
||||
},
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
handleWindowResize : function() {
|
||||
// Allow divider to increase in size to last user-set position
|
||||
// Limit current position to between 10% and 90% of visible space
|
||||
const newLoc = this.limitPosition(this.state.userSetDividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13));
|
||||
const limitPosition = (x, min = 1, max = window.innerWidth - 13) => {
|
||||
return Math.round(Math.min(max, Math.max(min, x)));
|
||||
};
|
||||
|
||||
this.setState({
|
||||
currentDividerPos : newLoc,
|
||||
windowWidth : window.innerWidth
|
||||
});
|
||||
},
|
||||
|
||||
limitPosition : function(x, min = 1, max = window.innerWidth - 13) {
|
||||
const result = Math.round(Math.min(max, Math.max(min, x)));
|
||||
return result;
|
||||
},
|
||||
|
||||
handleUp : function(e){
|
||||
const handleUp = (e) => {
|
||||
e.preventDefault();
|
||||
if(this.state.isDragging){
|
||||
this.props.onDragFinish(this.state.currentDividerPos);
|
||||
window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos);
|
||||
if (isDragging) {
|
||||
onDragFinish(currentDividerPos);
|
||||
window.localStorage.setItem(storageKey, currentDividerPos);
|
||||
}
|
||||
this.setState({ isDragging: false });
|
||||
},
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
handleDown : function(e){
|
||||
const handleDown = (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({ isDragging: true });
|
||||
//this.unFocus()
|
||||
},
|
||||
|
||||
handleMove : function(e){
|
||||
if(!this.state.isDragging) return;
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleMove = (e) => {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
const newSize = this.limitPosition(e.pageX);
|
||||
this.setState({
|
||||
currentDividerPos : newSize,
|
||||
userSetDividerPos : newSize
|
||||
});
|
||||
},
|
||||
const newSize = limitPosition(e.pageX);
|
||||
setCurrentDividerPos(newSize);
|
||||
setUserSetDividerPos(newSize);
|
||||
};
|
||||
|
||||
liveScrollToggle : function() {
|
||||
window.localStorage.setItem('liveScroll', String(!this.state.liveScroll));
|
||||
this.setState({ liveScroll: !this.state.liveScroll });
|
||||
},
|
||||
/*
|
||||
unFocus : function() {
|
||||
if(document.selection){
|
||||
document.selection.empty();
|
||||
}else{
|
||||
window.getSelection().removeAllRanges();
|
||||
const liveScrollToggle = () => {
|
||||
const newScrollState = !liveScroll;
|
||||
window.localStorage.setItem('liveScroll', String(newScrollState));
|
||||
setLiveScroll(newScrollState);
|
||||
};
|
||||
|
||||
const renderMoveArrows = () => {
|
||||
console.log('showMoveArrows: ', showMoveArrows);
|
||||
if (showMoveArrows) {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
},
|
||||
*/
|
||||
};
|
||||
|
||||
setMoveArrows : function(newState) {
|
||||
if(this.state.showMoveArrows != newState){
|
||||
this.setState({
|
||||
showMoveArrows : newState
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
renderMoveArrows : function(){
|
||||
if(this.state.showMoveArrows) {
|
||||
return <>
|
||||
<div className='arrow left'
|
||||
style={{ left: this.state.currentDividerPos-4 }}
|
||||
onClick={()=>this.setState({ moveSource: !this.state.moveSource })} >
|
||||
<i className='fas fa-arrow-left' />
|
||||
</div>
|
||||
<div className='arrow right'
|
||||
style={{ left: this.state.currentDividerPos-4 }}
|
||||
onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
|
||||
<i className='fas fa-arrow-right' />
|
||||
</div>
|
||||
<div id='scrollToggleDiv' className={this.state.liveScroll ? 'arrow lock' : 'arrow unlock'}
|
||||
style={{ left: this.state.currentDividerPos-4 }}
|
||||
onClick={this.liveScrollToggle} >
|
||||
<i id='scrollToggle' className={this.state.liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
},
|
||||
|
||||
renderDivider : function(){
|
||||
return <>
|
||||
{this.props.showDividerButtons && this.renderMoveArrows()}
|
||||
<div className='divider' onPointerDown={this.handleDown} >
|
||||
<div className='dots'>
|
||||
<i className='fas fa-circle' />
|
||||
<i className='fas fa-circle' />
|
||||
<i className='fas fa-circle' />
|
||||
</div>
|
||||
const renderDivider = () => (
|
||||
<div className='divider' onPointerDown={handleDown}>
|
||||
{props.showDividerButtons && renderMoveArrows()}
|
||||
<div className='dots'>
|
||||
<i className='fas fa-circle' />
|
||||
<i className='fas fa-circle' />
|
||||
<i className='fas fa-circle' />
|
||||
</div>
|
||||
</>;
|
||||
},
|
||||
</div>
|
||||
);
|
||||
|
||||
render : function(){
|
||||
return <div className='splitPane' onPointerMove={this.handleMove} onPointerUp={this.handleUp}>
|
||||
<Pane
|
||||
width={this.state.currentDividerPos}
|
||||
>
|
||||
{React.cloneElement(this.props.children[0], {
|
||||
...(this.props.showDividerButtons && {
|
||||
moveBrew : this.state.moveBrew,
|
||||
moveSource : this.state.moveSource,
|
||||
liveScroll : this.state.liveScroll,
|
||||
setMoveArrows : this.setMoveArrows,
|
||||
return (
|
||||
<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
|
||||
<Pane ref={pane1} width={currentDividerPos}>
|
||||
{React.cloneElement(props.children[0], {
|
||||
...(props.showDividerButtons && {
|
||||
moveBrew,
|
||||
moveSource,
|
||||
liveScroll,
|
||||
setMoveArrows: setShowMoveArrows,
|
||||
}),
|
||||
})}
|
||||
</Pane>
|
||||
{this.renderDivider()}
|
||||
<Pane isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
{renderDivider()}
|
||||
<Pane ref={pane2} isDragging={isDragging}>{props.children[1]}</Pane>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Pane = createClass({
|
||||
displayName : 'Pane',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
width : null
|
||||
};
|
||||
},
|
||||
render : function(){
|
||||
let styles = {};
|
||||
if(this.props.width){
|
||||
styles = {
|
||||
flex : 'none',
|
||||
width : `${this.props.width}px`
|
||||
};
|
||||
} else {
|
||||
styles = {
|
||||
pointerEvents : this.props.isDragging ? 'none' : 'auto' //Disable mouse capture in the rightmost pane; dragging into the iframe drops the divider otherwise
|
||||
};
|
||||
}
|
||||
const Pane = ({ width, children, isDragging, className }) => {
|
||||
const styles = width
|
||||
? { flex: 'none', width: `${width}px` }
|
||||
: { pointerEvents: isDragging ? 'none' : 'auto' };
|
||||
|
||||
return <div className={cx('pane', this.props.className)} style={styles}>
|
||||
{this.props.children}
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
return <div className={cx('pane', className)} style={styles}>{children}</div>;
|
||||
};
|
||||
|
||||
module.exports = SplitPane;
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
flex : 1;
|
||||
}
|
||||
.divider{
|
||||
position:relative;
|
||||
touch-action : none;
|
||||
display : table;
|
||||
height : 100%;
|
||||
@@ -35,6 +36,8 @@
|
||||
}
|
||||
.arrow{
|
||||
position : absolute;
|
||||
left:50%;
|
||||
translate:-50%;
|
||||
width : 25px;
|
||||
height : 25px;
|
||||
border : 2px solid #bbb;
|
||||
|
||||
Reference in New Issue
Block a user