save and load prefs. fixes #65 #28

src/index.html

@@ -303,30 +303,55 @@
 
 				<h3>Indentation</h3>
 				<p>
-					<label>
+					<label class="line">
 						<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
 					</label>
-					<label>
+					<label class="line">
-						<input type="radio" name="indentation" value="tab" d-change="updateSetting" data-setting="indentWith"> Tabs
+						<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
 					</label>
-					<label>
+					<label class="line">
-						<input type="range" value="2" min="1" max="10" data-setting="indentSize" d-change="updateSetting"> Size
+						Indentation Size <input type="range" value="2" min="1" max="10" data-setting="indentSize" d-change="updateSetting">
 					</label>
 				</p>
+				<hr>
 
 				<h3>Editing</h3>
 				<p>
-					<label>
+					<label class="line">
-						<input type="checkbox" d-change="updateSetting"> Save on focus lost
+						Default Preprocessors
 					</label>
-					<label>
+					<div class="flex line">
-						<input type="checkbox" d-change="updateSetting"> Preserve last written code
+						<select style="flex:1;margin:0 20px" data-setting="htmlMode" d-change="updateSetting">
+							<option value="html">HTML</option>
+							<option value="markdown">Markdown</option>
+							<option value="jade">Pug</option>
+						</select>
+						<select style="flex:1;margin:0 20px" data-setting="cssMode" d-change="updateSetting">
+							<option value="css">CSS</option>
+							<option value="scss">SCSS</option>
+							<option value="sass">SASS</option>
+							<option value="less">LESS</option>
+							<option value="stylus">Stylus</option>
+						</select>
+						<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
+							<option value="js">JS</option>
+							<option value="coffee">CoffeeScript</option>
+							<option value="es6">ES6 (Babel)</option>
+							<option value="typescript">TypeScript</option>
+						</select>
+					</div>
+					<label class="line">
+						<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
+					</label>
+					<label class="line">
+						<input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page
 					</label>
 				</p>
+				<hr>
 
 				<h3>Fun</h3>
 				<p>
-					<label>
+					<label class="line">
 						<input type="checkbox" d-change="updateSetting" data-setting="isCodeBlastOn"> Code blast!
 					</label>
 				</p>

src/script.js

@@ -63,7 +63,6 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 		, minCodeWrapSize = 33
 		, mainSplitInstance
 		, codeSplitInstance
-		// TODO: for legacy reasons when. Will be refactored as global preferences.
 		, prefs = {}
 		, codeInPreview = { html: null, css: null, js: null }
 		, isSavedItemsPaneOpen = false
@@ -1134,18 +1133,33 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 		e.preventDefault();
 	}
 
+	function updateSettingsInUi() {
+		$('[data-setting=preserveLastCode]').checked = prefs.preserveLastCode;
+		$('[data-setting=replaceNewTab]').checked = prefs.replaceNewTab;
+		$('[data-setting=htmlMode]').value = prefs.htmlMode;
+		$('[data-setting=cssMode]').value = prefs.cssMode;
+		$('[data-setting=jsMode]').value = prefs.jsMode;
+		$('[data-setting=indentSize]').value = prefs.indentSize;
+		$('[data-setting=indentWith][value=' + (prefs.indentWith || 'spaces') + ']').checked = true;
+		$('[data-setting=isCodeBlastOn]').checked = prefs.isCodeBlastOn;
+	}
+
 	scope.updateSetting = function updateSetting(e) {
-		var settingName = e.target.dataset.setting;
+		// If this was triggered from user interaction, save the setting
-		console.log(e, settingName);
+		if (e) {
-		var obj = {};
+			var settingName = e.target.dataset.setting;
-		obj[settingName] = e.target.checked;
+			var obj = {};
-		chrome.storage.sync.set(obj, function() {
+			var el = e.target;
-			alertsService.add('setting saved');
+			console.log(e, settingName, (el.type === 'checkbox') ? el.checked : el.value);
-		});
+			obj[settingName] = el.type === 'checkbox' ? el.checked : el.value;
+			chrome.storage.sync.set(obj, function() {
+				alertsService.add('setting saved');
+			});
+		}
 
 		scope.cm.js.setOption(
 			'indentWithTabs',
-			$('[data-setting=indentWith]:checked').value === 'tab'
+			$('[data-setting=indentWith]:checked').value !== 'spaces'
 		);
 
 		scope.cm.js.setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2 } : false);
@@ -1410,9 +1424,13 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 		// Get synced `preserveLastCode` setting to get back last code (or not).
 		chrome.storage.sync.get({
 			preserveLastCode: true,
+			replaceNewTab: false,
 			htmlMode: 'html',
 			jsMode: 'js',
-			cssMode: 'css'
+			cssMode: 'css',
+			isCodeBlastOn: false,
+			indentWith: 'spaces',
+			indentSize: 2
 		}, function syncGetCallback(result) {
 			if (result.preserveLastCode && lastCode) {
 				unsavedEditCount = 0;
@@ -1430,9 +1448,17 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			} else {
 				createNewItem();
 			}
-			prefs.htmlMode = result.htmlmode;
+			prefs.preserveLastCode = result.preserveLastCode;
+			prefs.replaceNewTab = result.replaceNewTab;
+			prefs.htmlMode = result.htmlMode;
 			prefs.cssMode = result.cssMode;
 			prefs.jsMode = result.jsMode;
+			prefs.isCodeBlastOn = result.isCodeBlastOn;
+			prefs.indentSize = result.indentSize;
+			prefs.indentWith = result.indentWith;
+
+			updateSettingsInUi();
+			scope.updateSetting();
 		});
 
 		// Check for new version notifications
@@ -1462,6 +1488,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			}
 		});
 
+
 		requestAnimationFrame(compileNodes);
 	}
 

src/style.css

@@ -34,10 +34,17 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
 .full-width { width: 100%; }
 .opacity--30 { opacity: 0.3; }
 .pointer-none { pointer-events: none; }
-
+hr {
+	background: 0;
+	border: 0;
+	border-bottom: 1px solid #dedede;
+}
 [class*="hint--"]:after {
 	text-transform: none;
 }
+.line {
+	margin-bottom: 1em;
+}
 .caret {
 	display: inline-block;
 	width: 0;