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