f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 14:12:40 +00:00
Code Wiki Activity

Change var names, simplify resize logic, limit on page refresh

Browse Source
This commit is contained in:
Trevor Buckner
2022-03-23 16:21:37 -04:00
parent 2ec2239124
commit 8bab346cbb
1 changed files with 20 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,42 +15,36 @@ const SplitPane = createClass({
getInitialState : function() { getInitialState : function() {
return { return {
size : null, currentDividerPos : null,
screenWidth : 0, windowWidth : 0,
isDragging : false isDragging : false
}; };
}, },
componentDidMount : function() { componentDidMount : function() {
const paneSize = window.localStorage.getItem(this.props.storageKey); const dividerPos = window.localStorage.getItem(this.props.storageKey);
if(paneSize){ if(dividerPos){
this.setState({ this.setState({
size : paneSize, currentDividerPos : this.limitPosition(dividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)),
dividerSize : paneSize, userSetDividerPos : dividerPos,
screenWidth : window.innerWidth windowWidth : window.innerWidth
}); });
} }
window.addEventListener('resize', this.changeSize); window.addEventListener('resize', this.handleWindowResize);
}, },
componentWillUnmount : function() { componentWillUnmount : function() {
window.removeEventListener('resize', this.changeSize); window.removeEventListener('resize', this.handleWindowResize);
}, },
changeSize : function() { handleWindowResize : function() {
const oldLoc = this.state.size; // Allow divider to increase in size to last user-set position
const oldWidth = this.state.screenWidth;
let newLoc = oldLoc;
// Allow divider to increase in size to original position
if(window.innerWidth > oldWidth) {
newLoc = Math.min(oldLoc * (window.innerWidth / this.state.screenWidth), this.state.dividerSize);
}
// Limit current position to between 10% and 90% of visible space // Limit current position to between 10% and 90% of visible space
newLoc = this.limitPosition(newLoc, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)); const newLoc = this.limitPosition(this.state.userSetDividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13));
this.setState({ this.setState({
size : newLoc, currentDividerPos : newLoc,
screenWidth : window.innerWidth windowWidth : window.innerWidth
}); });
}, },
@@ -61,8 +55,8 @@ const SplitPane = createClass({
handleUp : function(){ handleUp : function(){
if(this.state.isDragging){ if(this.state.isDragging){
this.props.onDragFinish(this.state.size); this.props.onDragFinish(this.state.currentDividerPos);
window.localStorage.setItem(this.props.storageKey, this.state.size); window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos);
} }
this.setState({ isDragging: false }); this.setState({ isDragging: false });
}, },
@@ -77,8 +71,8 @@ const SplitPane = createClass({
const newSize = this.limitPosition(e.pageX); const newSize = this.limitPosition(e.pageX);
this.setState({ this.setState({
size : newSize, currentDividerPos : newSize,
dividerSize : newSize userSetDividerPos : newSize
}); });
}, },
/* /*
@@ -102,7 +96,7 @@ const SplitPane = createClass({
render : function(){ render : function(){
return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}> return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}>
<Pane ref='pane1' width={this.state.size}>{this.props.children[0]}</Pane> <Pane ref='pane1' width={this.state.currentDividerPos}>{this.props.children[0]}</Pane>
{this.renderDivider()} {this.renderDivider()}
<Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane> <Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
</div>; </div>;