make auto preview a configurable setting. fixes #60

src/index.html

@@ -17,6 +17,12 @@
 		<div class="main-container">
 			<div class="main-header">
 				<div class="main-header__btn-wrap  fr flex  flex-v-center">
+					<a id="runBtn" class="hide flex flex-v-center hint--rounded hint--bottom-left" aria-label="Run preview (Ctrl/⌘ + Shift + 5)" d-click="setPreviewContent">
+						<svg style="width: 14px; height: 14px;">
+						  <use xlink:href="#play-icon"></use>
+						</svg>Run
+					</a>
+
 					<a id="js-add-library-btn" class="fleex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
 						Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
 					</a>
@@ -370,6 +376,9 @@
 					<label class="line">
 						<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
 					</label>
+					<label class="line">
+						<input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview
+					</label>
 					<label class="line">
 						<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
 					</label>
@@ -551,6 +560,11 @@
 			<symbol id="heart-icon" viewBox="0 0 24 24">
 				<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
 			</symbol>
+			<symbol id="play-icon" viewBox="0 0 24 24">
+				<svg>
+					<path d="M8,5.14V19.14L19,12.14L8,5.14Z" />
+				</svg>
+			</symbol>
 		</svg>
 
 		<script src="lib/codemirror/lib/codemirror.js"></script>

src/script.js

@@ -4,7 +4,9 @@ onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, helpBtn, onboardMo
 addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
 notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
-onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl */
+onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
+runBtn
+*/
 /* eslint-disable no-extra-semi */
 ;(function (alertsService) {
 
@@ -897,7 +899,9 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
 				// This is done so that multiple simultaneous setValue don't trigger too many preview refreshes
 				// and in turn too many file writes on a single file (eg. preview.html).
 				if (change.origin !== 'setValue') {
-					scope.setPreviewContent();
+					if (prefs.autoPreview !== false) {
+						scope.setPreviewContent();
+					}
 
 					saveBtn.classList.add('is-marked');
 					unsavedEditCount += 1;
@@ -1186,6 +1190,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
 		$('[data-setting=keymap][value=' + (prefs.keymap || 'sublime') + ']').checked = true;
 		$('[data-setting=fontSize]').value = prefs.fontSize || 16;
 		$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
+		$('[data-setting=autoPreview]').checked = prefs.autoPreview;
 	}
 
 	/**
@@ -1206,6 +1211,9 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
 			trackEvent('ui', 'updatePref-' + settingName, prefs[settingName]);
 		}
 
+		// Show/hide RUN button based on autoPreview setting.
+		runBtn.classList[prefs.autoPreview ? 'add' : 'remove']('hide');
+
 		htmlCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
 		cssCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
 		jsCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
@@ -1407,6 +1415,12 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
 				saveItem();
 				trackEvent('ui', 'saveItemKeyboardShortcut');
 			}
+			// Ctrl/⌘ + Shift + 5
+			if (!prefs.autoPreview && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.keyCode === 53)) {
+				event.preventDefault();
+				scope.setPreviewContent();
+				trackEvent('ui', 'previewKeyboardShortcut');
+			}
 			// Ctrl/⌘ + O
 			else if ((event.ctrlKey || event.metaKey) && (event.keyCode === 79)) {
 				event.preventDefault();
@@ -1507,7 +1521,8 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
 			editorTheme: 'monokai',
 			keymap: 'sublime',
 			fontSize: 16,
-			refreshOnResize: false
+			refreshOnResize: false,
+			autoPreview: true
 		}, function syncGetCallback(result) {
 			if (result.preserveLastCode && lastCode) {
 				unsavedEditCount = 0;
@@ -1537,6 +1552,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
 			prefs.keymap = result.keymap;
 			prefs.fontSize = result.fontSize;
 			prefs.refreshOnResize = result.refreshOnResize;
+			prefs.autoPreview = result.autoPreview;
 
 			updateSettingsInUi();
 			scope.updateSetting();

src/style.css

@@ -25,6 +25,7 @@ h1 {
 a { text-decoration: none; color: crimson; cursor: pointer; }
 /*a:hover { text-decoration: underline; }*/
 
+.hide { display: none!important; }
 .flex { display: flex; }
 .flex-grow { flex-grow: 1; }
 .flex-v-center { align-items: center; }