mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-02 04:12:47 +00:00
Merge branch 'master' into dependabot/npm_and_yarn/babel/core-7.26.0
This commit is contained in:
Trevor Buckner
@@ -1,200 +1,110 @@
|
|||||||
require('./splitPane.less');
|
require('./splitPane.less');
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const createClass = require('create-react-class');
|
const { useState, useEffect } = React;
|
||||||
const cx = require('classnames');
|
|
||||||
|
|
||||||
const SplitPane = createClass({
|
const storageKey = 'naturalcrit-pane-split';
|
||||||
displayName : 'SplitPane',
|
|
||||||
getDefaultProps : function() {
|
|
||||||
return {
|
|
||||||
storageKey : 'naturalcrit-pane-split',
|
|
||||||
onDragFinish : function(){}, //fires when dragging
|
|
||||||
showDividerButtons : true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState : function() {
|
const SplitPane = (props)=>{
|
||||||
return {
|
const {
|
||||||
currentDividerPos : null,
|
onDragFinish = ()=>{},
|
||||||
windowWidth : 0,
|
showDividerButtons = true
|
||||||
isDragging : false,
|
} = props;
|
||||||
moveSource : false,
|
|
||||||
moveBrew : false,
|
|
||||||
showMoveArrows : true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
pane1 : React.createRef(null),
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
pane2 : React.createRef(null),
|
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);
|
||||||
|
|
||||||
componentDidMount : function() {
|
useEffect(()=>{
|
||||||
const dividerPos = window.localStorage.getItem(this.props.storageKey);
|
const savedPos = window.localStorage.getItem(storageKey);
|
||||||
if(dividerPos){
|
setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
|
||||||
this.setState({
|
setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
|
||||||
currentDividerPos : this.limitPosition(dividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)),
|
|
||||||
userSetDividerPos : dividerPos,
|
|
||||||
windowWidth : window.innerWidth
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.setState({
|
|
||||||
currentDividerPos : 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.
|
window.addEventListener('resize', handleResize);
|
||||||
const loadLiveScroll = window.localStorage.getItem('liveScroll') === 'true';
|
return ()=>window.removeEventListener('resize', handleResize);
|
||||||
this.setState({ liveScroll: loadLiveScroll });
|
}, []);
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount : function() {
|
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
|
||||||
window.removeEventListener('resize', this.handleWindowResize);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleWindowResize : function() {
|
//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
|
||||||
// Allow divider to increase in size to last user-set position
|
const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
|
||||||
// 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(dividerPos);
|
||||||
window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos);
|
window.localStorage.setItem(storageKey, dividerPos);
|
||||||
}
|
}
|
||||||
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);
|
setDividerPos(limitPosition(e.pageX));
|
||||||
this.setState({
|
};
|
||||||
currentDividerPos : newSize,
|
|
||||||
userSetDividerPos : newSize
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
liveScrollToggle : function() {
|
const liveScrollToggle = ()=>{
|
||||||
window.localStorage.setItem('liveScroll', String(!this.state.liveScroll));
|
window.localStorage.setItem('liveScroll', String(!liveScroll));
|
||||||
this.setState({ liveScroll: !this.state.liveScroll });
|
setLiveScroll(!liveScroll);
|
||||||
},
|
};
|
||||||
/*
|
|
||||||
unFocus : function() {
|
|
||||||
if(document.selection){
|
|
||||||
document.selection.empty();
|
|
||||||
}else{
|
|
||||||
window.getSelection().removeAllRanges();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
*/
|
|
||||||
|
|
||||||
setMoveArrows : function(newState) {
|
const renderMoveArrows = (showMoveArrows &&
|
||||||
if(this.state.showMoveArrows != newState){
|
<>
|
||||||
this.setState({
|
<div className='arrow left'
|
||||||
showMoveArrows : newState
|
onClick={()=>setMoveSource(!moveSource)} >
|
||||||
});
|
<i className='fas fa-arrow-left' />
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
render : function(){
|
const renderDivider = (
|
||||||
return <div className='splitPane' onPointerMove={this.handleMove} onPointerUp={this.handleUp}>
|
<div className={`divider ${isDragging && 'dragging'}`} onPointerDown={handleDown}>
|
||||||
<Pane
|
{showDividerButtons && renderMoveArrows}
|
||||||
width={this.state.currentDividerPos}
|
<div className='dots'>
|
||||||
>
|
<i className='fas fa-circle' />
|
||||||
{React.cloneElement(this.props.children[0], {
|
<i className='fas fa-circle' />
|
||||||
...(this.props.showDividerButtons && {
|
<i className='fas fa-circle' />
|
||||||
moveBrew : this.state.moveBrew,
|
</div>
|
||||||
moveSource : this.state.moveSource,
|
</div>
|
||||||
liveScroll : this.state.liveScroll,
|
);
|
||||||
setMoveArrows : this.setMoveArrows,
|
|
||||||
}),
|
return (
|
||||||
})}
|
<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
|
||||||
|
<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
|
||||||
|
{props.children[0]}
|
||||||
</Pane>
|
</Pane>
|
||||||
{this.renderDivider()}
|
{renderDivider}
|
||||||
<Pane isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
|
<Pane isDragging={isDragging}>{props.children[1]}</Pane>
|
||||||
</div>;
|
</div>
|
||||||
}
|
);
|
||||||
});
|
};
|
||||||
|
|
||||||
const Pane = createClass({
|
const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
|
||||||
displayName : 'Pane',
|
const styles = width
|
||||||
getDefaultProps : function() {
|
? { flex: 'none', width: `${width}px` }
|
||||||
return {
|
: { pointerEvents: isDragging ? 'none' : 'auto' }; //Disable mouse capture in the right pane; else dragging into the iframe drops the divider
|
||||||
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 (
|
||||||
{this.props.children}
|
<div className='pane' style={styles}>
|
||||||
</div>;
|
{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
|
||||||
}
|
</div>
|
||||||
});
|
);
|
||||||
|
};
|
||||||
|
|
||||||
module.exports = SplitPane;
|
module.exports = SplitPane;
|
||||||
|
|||||||
@@ -1,69 +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 {
|
||||||
touch-action : none;
|
position : relative;
|
||||||
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,&.dragging { background-color : #999999; }
|
||||||
background-color: #999;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.arrow{
|
.arrow {
|
||||||
position : absolute;
|
position : absolute;
|
||||||
|
left : 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user