update split.js and fix shrink bugs. fixes #333

package-lock.json

@@ -25625,9 +25625,9 @@
 			}
 		},
 		"split.js": {
-			"version": "1.3.4",
+			"version": "1.5.11",
-			"resolved": "https://registry.npmjs.org/split.js/-/split.js-1.3.4.tgz",
+			"resolved": "https://registry.npmjs.org/split.js/-/split.js-1.5.11.tgz",
-			"integrity": "sha1-63jiBpBCloQjZ1YwSqkl/LjsAAo="
+			"integrity": "sha512-ec0sAbWnaMGpNHWo1ZgIlF3Mx7GzSyaO0GlcEBZGIFZQwYPPkbDV6JRpDmpzIshVig7USREuEPudy0ygQaskXg=="
 		},
 		"sprintf-js": {
 			"version": "1.0.3",

package.json

@@ -80,7 +80,7 @@
 		"preact-router": "^2.5.7",
 		"prettier": "^1.18.2",
 		"react-inspector": "^2.3.0",
-		"split.js": "1.3.4"
+		"split.js": "^1.5.11"
 	},
 	"jest": {
 		"verbose": true,

src/components/ContentWrap.jsx

@@ -6,7 +6,8 @@ import {
 	log,
 	writeFile,
 	getCompleteHtml,
-	handleModeRequirements
+	handleModeRequirements,
+	sanitizeSplitSizes
 } from '../utils';
 import { SplitPane } from './SplitPane.jsx';
 import { trackEvent } from '../analytics';
@@ -392,12 +393,18 @@ export default class ContentWrap extends Component {
 
 	resetSplitting() {
 		this.setState({
-			codeSplitSizes: this.getCodeSplitSizes(),
+			codeSplitSizes: sanitizeSplitSizes(this.getCodeSplitSizes()),
-			mainSplitSizes: this.getMainSplitSizesToApply()
+			mainSplitSizes: sanitizeSplitSizes(this.getMainSplitSizesToApply())
 		});
 	}
-	updateSplits() {
+	updateSplits(sizes) {
-		this.props.onSplitUpdate();
+		// HACK: This is weird thing happening. We call `onSplitUpdate` on parent. That calculates
+		// and sets sizes from the DOM on the currentItem. And then we read that size to update
+		// this component's state (codeSplitSizes and mainSPlitSizes).
+		// If we don't update, then some re-render will reset the pane sizes as ultimately the state
+		// variables here govern the split.
+		this.props.onSplitUpdate(sizes);
+
 		// Not using setState to avoid re-render
 		this.state.codeSplitSizes = this.props.currentItem.sizes;
 		this.state.mainSplitSizes = this.props.currentItem.mainSizes;
@@ -427,7 +434,7 @@ export default class ContentWrap extends Component {
 		return [33.33, 33.33, 33.33];
 	}
 
-	mainSplitDragEndHandler() {
+	mainSplitDragEndHandler(sizes) {
 		if (this.props.prefs.refreshOnResize) {
 			// Running preview updation in next call stack, so that error there
 			// doesn't affect this dragend listener.
@@ -435,7 +442,7 @@ export default class ContentWrap extends Component {
 				this.setPreviewContent(true);
 			}, 1);
 		}
-		this.updateSplits();
+		this.updateSplits(sizes);
 	}
 	mainSplitDragHandler() {
 		this.previewDimension.update({
@@ -446,10 +453,10 @@ export default class ContentWrap extends Component {
 	codeSplitDragStart() {
 		document.body.classList.add('is-dragging');
 	}
-	codeSplitDragEnd() {
+	codeSplitDragEnd(sizes) {
 		this.updateCodeWrapCollapseStates();
 		document.body.classList.remove('is-dragging');
-		this.updateSplits();
+		this.updateSplits(sizes);
 	}
 
 	updateHtmlMode(value) {

src/components/ContentWrapFiles.jsx

@@ -1,7 +1,12 @@
 import { h, Component } from 'preact';
 import CodeEditor from './CodeEditor';
 import { modes, HtmlModes } from '../codeModes';
-import { log, handleModeRequirements, BASE_PATH } from '../utils';
+import {
+	log,
+	handleModeRequirements,
+	BASE_PATH,
+	sanitizeSplitSizes
+} from '../utils';
 
 import {
 	linearizeFiles,
@@ -390,11 +395,11 @@ export default class ContentWrapFiles extends Component {
 
 	resetSplitting() {
 		this.setState({
-			mainSplitSizes: this.getMainSplitSizesToApply()
+			mainSplitSizes: sanitizeSplitSizes(this.getMainSplitSizesToApply())
 		});
 	}
-	updateSplits() {
+	updateSplits(sizes) {
-		this.props.onSplitUpdate();
+		this.props.onSplitUpdate(sizes);
 		// Not using setState to avoid re-render
 		this.state.mainSplitSizes = this.props.currentItem.mainSizes;
 	}
@@ -416,7 +421,7 @@ export default class ContentWrapFiles extends Component {
 		return mainSplitSizes;
 	}
 
-	mainSplitDragEndHandler() {
+	mainSplitDragEndHandler(sizes) {
 		if (this.props.prefs.refreshOnResize) {
 			// Running preview updation in next call stack, so that error there
 			// doesn't affect this dragend listener.
@@ -424,7 +429,7 @@ export default class ContentWrapFiles extends Component {
 				this.setPreviewContent(true);
 			}, 1);
 		}
-		this.updateSplits();
+		this.updateSplits(sizes);
 	}
 	mainSplitDragHandler() {
 		this.previewDimension.update({

src/components/SplitPane.jsx

@@ -40,6 +40,10 @@ export class SplitPane extends Component {
 		/* eslint-disable new-cap */
 		this.splitInstance = Split(Array.from(this.parent.children), options);
 
+		if (this.parent.children.length >= 5) {
+			window.splitInstance = this.splitInstance;
+		}
+
 		/* eslint-enable new-cap */
 
 		if (this.props.onSplit) {

src/components/app.jsx

@@ -21,7 +21,8 @@ import {
 	downloadFile,
 	getCompleteHtml,
 	getFilenameFromUrl,
-	prettify
+	prettify,
+	sanitizeSplitSizes
 } from '../utils';
 import {
 	linearizeFiles,
@@ -755,7 +756,7 @@ export default class App extends Component {
 			sizes = [33.33, 33.33, 33.33];
 		} finally {
 			/* eslint-disable no-unsafe-finally */
-			return sizes;
+			return sanitizeSplitSizes(sizes);
 
 			/* eslint-enable no-unsafe-finally */
 		}
@@ -791,7 +792,7 @@ export default class App extends Component {
 					`calc(50% - ${sidebarWidth / 2}px)`
 				];
 			}
-			return sizes;
+			return sanitizeSplitSizes(sizes);
 		}
 
 		const currentLayoutMode = this.state.currentLayoutMode;
@@ -804,7 +805,7 @@ export default class App extends Component {
 		if (sizes.filter(s => s).length !== 2) {
 			sizes = [50, 50];
 		}
-		return sizes;
+		return sanitizeSplitSizes(sizes);
 	}
 	saveSetting(setting, value) {
 		const d = deferred();
@@ -928,7 +929,9 @@ export default class App extends Component {
 	}
 
 	titleInputBlurHandler(e) {
-		this.state.currentItem.title = e.target.value;
+		this.setState({
+			currentItem: { ...this.state.currentItem, title: e.target.value }
+		});
 
 		if (this.state.currentItem.id) {
 			this.saveItem();
@@ -1193,7 +1196,7 @@ export default class App extends Component {
 				// Item already exists
 				existingItemIds.push(item.id);
 			} else {
-				log('merging', item.id);
+				// log('merging', item.id);
 				toMergeItems[item.id] = item;
 			}
 		});
@@ -1243,10 +1246,23 @@ export default class App extends Component {
 		this.closeAllOverlays();
 	}
 
-	splitUpdateHandler(mainSplitInstance, codeSplitInstance) {
+	splitUpdateHandler(sizes) {
+		const { currentItem } = this.state;
+		if (!sizes) {
+			currentItem.mainSizes = this.getMainPaneSizes();
+			currentItem.sizes = this.getCodePaneSizes();
+			return;
+		}
 		// Not using setState to avoid re-render
-		this.state.currentItem.sizes = this.getCodePaneSizes();
+		if (sizes.length === 3) {
-		this.state.currentItem.mainSizes = this.getMainPaneSizes();
+			if (currentItem.files) {
+				currentItem.mainSizes = sizes;
+			} else {
+				currentItem.sizes = sizes;
+			}
+		} else {
+			currentItem.mainSizes = sizes;
+		}
 	}
 
 	/**

src/utils.js

@@ -556,6 +556,35 @@ export function handleModeRequirements(mode) {
 	return d.promise;
 }
 
+export function sanitizeSplitSizes(sizes) {
+	// console.log('got', sizes);
+	let hasAllNumbers = !sizes.some(size => !Number(size));
+	if (hasAllNumbers) return sizes;
+
+	// Get just the perentage values from expressions like calc(93.34% - 3px)
+	const newSizes = sizes.map(size => {
+		if (typeof size.match !== 'function') return size;
+		const match = size.match(/([\d.]*)%/);
+		if (match) return parseInt(match[1], 10);
+
+		return size;
+	});
+	// console.log('percents ', newSizes);
+
+	// Do we still have any non-number?
+	hasAllNumbers = !newSizes.some(size => !Number(size));
+	// console.log('hasAllnumbers? ', hasAllNumbers);
+
+	// Make the sum 100
+	if (hasAllNumbers) {
+		const sum = newSizes.reduce((sum, val) => sum + val, 0);
+		// console.log('sum ', sum);
+		newSizes[newSizes.length - 1] += 100 - sum;
+	}
+
+	return newSizes;
+}
+
 if (window.IS_EXTENSION) {
 	document.body.classList.add('is-extension');
 } else {