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

Merge pull request #2055 from G-Ambatte/addDividerResetOnWindowResize-#2053

Browse Source 
Add divider reset on window resize #2053
This commit is contained in:
Trevor Buckner
2022-03-23 21:08:18 -04:00
committed by GitHub
parent 0a52cafefe 8bab346cbb
commit 9e5cc57441
1 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,43 +10,69 @@ const SplitPane = createClass({
return {
storageKey : 'naturalcrit-pane-split',
onDragFinish : function(){} //fires when dragging
};
},
getInitialState : function() {
return {
size : null,
isDragging : false
currentDividerPos : null,
windowWidth : 0,
isDragging : false
};
},
componentDidMount : function() {
const paneSize = window.localStorage.getItem(this.props.storageKey);
if(paneSize){
const dividerPos = window.localStorage.getItem(this.props.storageKey);
if(dividerPos){
this.setState({
size : paneSize
currentDividerPos : this.limitPosition(dividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)),
userSetDividerPos : dividerPos,
windowWidth : window.innerWidth
});
}
window.addEventListener('resize', this.handleWindowResize);
},
componentWillUnmount : function() {
window.removeEventListener('resize', this.handleWindowResize);
},
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));
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(){
if(this.state.isDragging){
this.props.onDragFinish(this.state.size);
window.localStorage.setItem(this.props.storageKey, this.state.size);
this.props.onDragFinish(this.state.currentDividerPos);
window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos);
}
this.setState({ isDragging: false });
},
handleDown : function(){
this.setState({ isDragging: true });
//this.unFocus()
},
handleMove : function(e){
if(!this.state.isDragging) return;
const minWidth = 1;
const maxWidth = window.innerWidth - 13;
const newSize = Math.min(maxWidth, Math.max(minWidth, e.pageX));
const newSize = this.limitPosition(e.pageX);
this.setState({
size : newSize
currentDividerPos : newSize,
userSetDividerPos : newSize
});
},
/*
@@ -70,7 +96,7 @@ const SplitPane = createClass({
render : function(){
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()}
<Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
</div>;