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

Add divider reset on window resize #2053

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,
+			currentDividerPos : null,
-			isDragging : false
+			windowWidth       : 0,
+			isDragging        : false
 		};
 	},
+
 	componentDidMount : function() {
-		const paneSize = window.localStorage.getItem(this.props.storageKey);
+		const dividerPos = window.localStorage.getItem(this.props.storageKey);
-		if(paneSize){
+		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);
+			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 });
 	},
+
 	handleDown : function(){
 		this.setState({ isDragging: true });
 		//this.unFocus()
 	},
+
 	handleMove : function(e){
 		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({
-			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>;