f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-05 10:12:41 +00:00
Code Wiki Activity

Use percentage based positioning, not reset

Browse Source
This commit is contained in:
G.Ambatte
2022-03-09 17:55:24 +13:00
parent f8abca6053
commit e44bbae07a
1 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,8 +15,9 @@ const SplitPane = createClass({
getInitialState : function() { getInitialState : function() {
return { return {
size : null, size : null,
isDragging : false screenWidth : 0,
isDragging : false
}; };
}, },
@@ -24,23 +25,34 @@ const SplitPane = createClass({
const paneSize = window.localStorage.getItem(this.props.storageKey); const paneSize = window.localStorage.getItem(this.props.storageKey);
if(paneSize){ if(paneSize){
this.setState({ this.setState({
size : paneSize size : paneSize,
screenWidth : window.innerWidth
}); });
} }
window.addEventListener('resize', this.resetSize); window.addEventListener('resize', this.changeSize);
}, },
componentWillUnmount : function() { componentWillUnmount : function() {
window.removeEventListener('resize', this.resetSize); window.removeEventListener('resize', this.changeSize);
}, },
resetSize : function() { changeSize : function() {
window.localStorage.removeItem(this.props.storageKey); const oldWidth = this.state.screenWidth;
const oldLoc = this.state.size;
const newLoc = this.limitPosition(window.innerWidth * (oldLoc / oldWidth));
this.setState({ this.setState({
size : window.innerWidth / 2 size : newLoc,
screenWidth : window.innerWidth
}); });
}, },
limitPosition : function(x) {
const minWidth = 1;
const maxWidth = window.innerWidth - 13;
const result = Math.min(maxWidth, Math.max(minWidth, x));
return result;
},
handleUp : function(){ handleUp : function(){
if(this.state.isDragging){ if(this.state.isDragging){
this.props.onDragFinish(this.state.size); this.props.onDragFinish(this.state.size);
@@ -48,16 +60,16 @@ const SplitPane = createClass({
} }
this.setState({ isDragging: false }); this.setState({ isDragging: false });
}, },
handleDown : function(){ handleDown : function(){
this.setState({ isDragging: true }); this.setState({ isDragging: true });
//this.unFocus() //this.unFocus()
}, },
handleMove : function(e){ handleMove : function(e){
if(!this.state.isDragging) return; if(!this.state.isDragging) return;
const minWidth = 1; const newSize = this.limitPosition(e.pageX);
const maxWidth = window.innerWidth - 13;
const newSize = Math.min(maxWidth, Math.max(minWidth, e.pageX));
this.setState({ this.setState({
size : newSize size : newSize
}); });