Merge pull request #73 from chinchang/release-2.3.1

Release 2.3.1

src/index.html

@@ -200,7 +200,7 @@
 
 		<div class="modal" id="helpModal">
 			<div class="modal__content">
-				<h1>Web Maker<small style="font-size:14px;"> v2.3.0</small></h1>
+				<h1>Web Maker<small style="font-size:14px;"> v2.3.1</small></h1>
 				<div>
 					<p>Made by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
 					<p>Tweet out your feature requests, comments & suggestions to <a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p>
@@ -294,6 +294,15 @@
 		<div class="modal" id="notificationsModal">
 			<div class="modal__content">
 				<h1>Whats new?</h1>
+				<div class="notification">
+				  <span class="notification__version">2.3.1</span>
+				  <ul>
+					<li><strong>Bugfix</strong> - Splitting of code and preview panes is remembered by the editor.</li>
+					<li>Title of the creation is used for the file name when saving as HTML.</li>
+					<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest a feature.</a></li>
+					<li>Thank you for being a part of this awesome 4000+ developers community. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a> & <a href="http://twitter.com/share?url=https://kushagragour.in/lab/web-maker/&text=Web Maker - Convert your Chrome tabs into a blazing fast offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor" target="_blank" target="_blank" class="btn">share it</a>.</li>
+				  </ul>
+				</div>
 				<div class="notification">
 				  <span class="notification__version">2.3.0</span>
 				  <ul>
@@ -304,8 +313,6 @@
 					<li>Highlight active line in code panes.</li>
 					<li><strong>Bugfix</strong> - Fix in generated title of new creation.</li>
 					<li><strong>Bugfix</strong> - HTML autocompletion is manual triggered now with Ctrl+Space.</li>
-					<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest a feature.</a></li>
-					<li>Thank you for being a part of this awesome 4000+ developers community. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a> & <a href="http://twitter.com/share?url=https://kushagragour.in/lab/web-maker/&text=Web Maker - Convert your Chrome tabs into a blazing fast offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor" target="_blank" target="_blank" class="btn">share it</a>.</li>
 				  </ul>
 				</div>
 

src/script.js

@@ -10,7 +10,7 @@ TextareaAutoComplete */
 
 /* eslint-enable no-extra-semi */
 	var scope = scope || {};
-	var version = '2.3.0';
+	var version = '2.3.1';
 
 	if (window.DEBUG) {
 		window.scope = scope;
@@ -111,6 +111,18 @@ TextareaAutoComplete */
 			codeWrapEl.classList.add('is-minimized');
 		}
 	}
+	// Returns the sizes of main code & preview panes.
+	function getMainSplitSizesToApply() {
+		var mainSplitSizes;
+		if (currentItem && currentItem.mainSizes) {
+			// For layout mode 3, main panes are reversed using flex-direction.
+			// So we need to apply the saved sizes in reverse order.
+			mainSplitSizes = currentLayoutMode === 3 ? [ currentItem.mainSizes[1], currentItem.mainSizes[0] ] : currentItem.mainSizes;
+		} else {
+			mainSplitSizes = [ 50, 50];
+		}
+		return mainSplitSizes;
+	}
 
 	function resetSplitting() {
 		if (codeSplitInstance) {
@@ -137,12 +149,14 @@ TextareaAutoComplete */
 		} else {
 			options.sizes = [ 33.33, 33.33, 33.33 ];
 		}
-		// utils.log('reset spliiting', options.sizes)
+		utils.log('reset splitting', currentItem);
+
 		codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], options);
 		mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
 			direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
-			minSize: 34,
+			minSize: 150,
 			gutterSize: 6,
+			sizes: getMainSplitSizesToApply(),
 			onDragEnd: function () {
 				// Running preview updation in next call stack, so that error there
 				// doesn't affect this dragend listener.
@@ -154,7 +168,9 @@ TextareaAutoComplete */
 	}
 	function toggleLayout(mode) {
 		if (currentLayoutMode === mode) {
+			utils.log('setMainsize', currentItem.mainSizes || [ 50, 50 ]);
 			utils.log('setsize', currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
+			mainSplitInstance.setSizes(getMainSplitSizesToApply());
 			codeSplitInstance.setSizes(currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
 			currentLayoutMode = mode;
 			return;
@@ -219,6 +235,47 @@ TextareaAutoComplete */
 		}
 	}
 
+	// Calculates the sizes of html, css & js code panes.
+	function getCodePaneSizes() {
+		var sizes;
+		var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
+		try {
+			sizes = [
+				+htmlCode.style[dimensionProperty].match(/([\d.]+)%/)[1],
+				+cssCode.style[dimensionProperty].match(/([\d.]+)%/)[1],
+				+jsCode.style[dimensionProperty].match(/([\d.]+)%/)[1]
+			];
+		} catch (e) {
+			sizes = [ 33.33, 33.33, 33.33 ]
+		} finally {
+
+			/* eslint-disable no-unsafe-finally */
+			return sizes;
+
+			/* eslint-enable no-unsafe-finally */
+		}
+	}
+
+	// Calculates the current sizes of code & preview panes.
+	function getMainPaneSizes() {
+		var sizes;
+		var dimensionProperty = currentLayoutMode === 2 ? 'height' : 'width';
+		try {
+			sizes = [
+				+$('#js-code-side').style[dimensionProperty].match(/([\d.]+)%/)[1],
+				+$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1]
+			];
+		} catch (e) {
+			sizes = [ 50, 50 ]
+		} finally {
+
+			/* eslint-disable no-unsafe-finally */
+			return sizes;
+
+			/* eslint-enable no-unsafe-finally */
+		}
+	}
+
 	function saveCode(key) {
 		currentItem.title = titleInput.value;
 		currentItem.html = scope.cm.html.getValue();
@@ -231,27 +288,13 @@ TextareaAutoComplete */
 		currentItem.layoutMode = currentLayoutMode;
 		currentItem.externalLibs = { js: externalJsTextarea.value, css: externalCssTextarea.value };
 
-		// debugger;
-		var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
+		currentItem.sizes = getCodePaneSizes();
+		currentItem.mainSizes = getMainPaneSizes();
 
-		var sizes;
-		try {
-			sizes = [
-				+htmlCode.style[dimensionProperty].match(/([\d.]+)%/)[1],
-				+cssCode.style[dimensionProperty].match(/([\d.]+)%/)[1],
-				+jsCode.style[dimensionProperty].match(/([\d.]+)%/)[1]
-			];
-		} catch (e) {
-			sizes = [ 33.33, 33.33, 33.33 ]
-		} finally {
-
-			currentItem.sizes = sizes;
-
-			utils.log('saving key', key || currentItem.id, currentItem)
-			saveSetting(key || currentItem.id, currentItem, function () {
-				alertsService.add('Item saved.');
-			});
-		}
+		utils.log('saving key', key || currentItem.id, currentItem)
+		saveSetting(key || currentItem.id, currentItem, function () {
+			alertsService.add('Item saved.');
+		});
 	}
 
 	function populateItemsInSavedPane(items) {
@@ -267,7 +310,7 @@ TextareaAutoComplete */
 					+ '<h3 class="saved-item-tile__title">' + item.title + '</h3><span class="saved-item-tile__meta">Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>';
 			});
 		} else {
-			html += '<h2 class="opacity--30">Nothing saved here.</h2>'
+			html += '<h2 class="opacity--30">Nothing saved here.</h2>';
 		}
 		savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html;
 		toggleSavedItemsPane();
@@ -426,7 +469,6 @@ TextareaAutoComplete */
 		handleModeRequirements(value);
 		scope.cm.html.setOption('mode', modes[value].cmMode);
 		CodeMirror.autoLoadMode(scope.cm.html, modes[value].cmPath || modes[value].cmMode);
-		trackEvent('ui', 'updateCodeMode', 'html', value);
 	}
 	function updateCssMode(value) {
 		cssMode = value;
@@ -434,7 +476,6 @@ TextareaAutoComplete */
 		handleModeRequirements(value);
 		scope.cm.css.setOption('mode', modes[value].cmMode);
 		CodeMirror.autoLoadMode(scope.cm.css, modes[value].cmPath || modes[value].cmMode);
-		trackEvent('ui', 'updateCodeMode', 'css', value);
 	}
 	function updateJsMode(value) {
 		jsMode = value;
@@ -442,7 +483,6 @@ TextareaAutoComplete */
 		handleModeRequirements(value);
 		scope.cm.js.setOption('mode', modes[value].cmMode);
 		CodeMirror.autoLoadMode(scope.cm.js, modes[value].cmPath || modes[value].cmMode);
-		trackEvent('ui', 'updateCodeMode', 'js', value);
 		// FIXME: Will be saved as part of scope settings
 		/*
 		chrome.storage.sync.set({
@@ -734,6 +774,10 @@ TextareaAutoComplete */
 			var fileName = [ 'web-maker', d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds() ].join('-');
 			fileName += '.html';
 
+			if (currentItem.title) {
+				fileName = currentItem.title;
+			}
+
 			var a = document.createElement('a');
 			var blob = new Blob([ fileContent ], { type: "text/html;charset=UTF-8" });
 			a.href = window.URL.createObjectURL(blob);
@@ -999,6 +1043,9 @@ TextareaAutoComplete */
 
 				/* eslint-enable camelcase */
 			};
+			if (!currentItem.title.match(/Untitled\s\d\d*-\d/)) {
+				json.title = currentItem.title;
+			}
 			json = JSON.stringify(json)
 				.replace(/"/g, "&​quot;")
 				.replace(/'/g, "&apos;")
@@ -1060,6 +1107,7 @@ TextareaAutoComplete */
 					} else if (type === 'css') {
 						updateCssMode(mode);
 					}
+					trackEvent('ui', 'updateCodeMode', mode);
 				}
 			});
 		});
@@ -1226,7 +1274,6 @@ TextareaAutoComplete */
 					});
 				});
 			}
-			// console.utils.log(result, hasSeenNotifications, version);
 			if (!result.lastSeenVersion || utils.semverCompare(result.lastSeenVersion, version) === -1) {
 				notificationsBtn.classList.add('has-new');
 				hasSeenNotifications = false;