diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 1e539495c..37b23e57d 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -15,8 +15,9 @@ const SplitPane = createClass({ getInitialState : function() { return { - size : null, - isDragging : false + size : null, + screenWidth : 0, + isDragging : false }; }, @@ -24,23 +25,34 @@ const SplitPane = createClass({ const paneSize = window.localStorage.getItem(this.props.storageKey); if(paneSize){ this.setState({ - size : paneSize + size : paneSize, + screenWidth : window.innerWidth }); } - window.addEventListener('resize', this.resetSize); + window.addEventListener('resize', this.changeSize); }, componentWillUnmount : function() { - window.removeEventListener('resize', this.resetSize); + window.removeEventListener('resize', this.changeSize); }, - resetSize : function() { - window.localStorage.removeItem(this.props.storageKey); + changeSize : function() { + const oldWidth = this.state.screenWidth; + const oldLoc = this.state.size; + const newLoc = this.limitPosition(window.innerWidth * (oldLoc / oldWidth)); 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(){ if(this.state.isDragging){ this.props.onDragFinish(this.state.size); @@ -48,16 +60,16 @@ const SplitPane = createClass({ } 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 });