diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 1b4cee5ae..4d138e30b 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -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