From 8fe23767ebaf1d043e02c76977564efeb60a2a9e Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 11 Dec 2017 19:43:58 +0530
Subject: [PATCH] Add a modal to list all keyboard shortcuts. fixes #236

---
 src/index.html              |  17 +++++-
 src/keyboard-shortcuts.html | 106 ++++++++++++++++++++++++++++++++++++
 src/script.js               |   8 ++-
 src/style.css               |  13 +++++
 4 files changed, 141 insertions(+), 3 deletions(-)
 create mode 100644 src/keyboard-shortcuts.html

diff --git a/src/index.html b/src/index.html
index a3bc780..a1374b5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -226,13 +226,18 @@
 
 				<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
 				&copy; Web Maker &nbsp;&nbsp;
-				<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link  hint--rounded  hint--top-right" data-hint="Help">
+				<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link  hint--rounded  hint--top-right" aria-label="Help">
 					<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
 						<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
 					</svg>
 				</a>
+				<a d-open-modal="keyboardShortcutsModal" data-event-category="ui" data-event-action="keyboardShortcutButtonClick" class="footer__link  hint--rounded  hint--top-right" aria-label="Keyboard shortcuts">
+					<svg style="width:20px; height:20px; vertical-align:text-bottom">
+						<use xlink:href="#keyboard-icon"></use>
+					</svg>
+				</a>
 				<!-- #00ACED -->
-				<a class="footer__link  hint--rounded  hint--top-right" data-hint="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,playground,chrome,extension" target="_blank">
+				<a class="footer__link  hint--rounded  hint--top-right" aria-label="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,playground,chrome,extension" target="_blank">
 					<svg style="width:20px; height:20px; vertical-align:text-bottom">
 						<use xlink:href="#twitter-icon"></use>
 					</svg>
@@ -332,6 +337,11 @@
 			</div>
 		</div>
 
+		<div class="modal" id="keyboardShortcutsModal">
+			<div class="modal__content" d-html="keyboard-shortcuts.html">
+			</div>
+		</div>
+
 		<div class="modal" id="onboardModal">
 			<div class="modal__content">
 
@@ -614,6 +624,9 @@
 			<symbol id="cross-icon" viewBox="0 0 24 24">
 				<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
 			</symbol>
+			<symbol id="keyboard-icon" viewBox="0 0 24 24">
+				<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
+			</symbol>
 		</svg>
 
 		<script src="lib/codemirror/lib/codemirror.js"></script>
diff --git a/src/keyboard-shortcuts.html b/src/keyboard-shortcuts.html
new file mode 100644
index 0000000..51bba89
--- /dev/null
+++ b/src/keyboard-shortcuts.html
@@ -0,0 +1,106 @@
+<a d-click="onModalCloseBtnClick" href="" aria-label="Close keyboard shortcuts modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+    <svg>
+        <use xlink:href="#cross-icon"></use>
+    </svg>
+</a>
+
+<h1>Keyboard Shortcuts</h1>
+
+<div class="flex">
+    <div>
+        <h2>Global</h2>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + Shift + ?
+            </span>
+            <span class="kbd-shortcut__details">See keyboard shortcuts</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + Shift + 5
+            </span>
+            <span class="kbd-shortcut__details">Refresh preview</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + S
+            </span>
+            <span class="kbd-shortcut__details">Save current creations</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + O
+            </span>
+            <span class="kbd-shortcut__details">Open list of saved creations</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl + L
+            </span>
+            <span class="kbd-shortcut__details">Clear console (works when console input is focused)</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                    Esc
+            </span>
+            <span class="kbd-shortcut__details">Close saved creations panel & modals</span>
+        </p>
+    </div>
+    <div>
+        <h2>Editor</h2>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + F
+            </span>
+            <span class="kbd-shortcut__details">Find</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + G
+            </span>
+            <span class="kbd-shortcut__details">Select next match</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + Shift + G
+            </span>
+            <span class="kbd-shortcut__details">Select previous match</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + Opt/Alt + F
+            </span>
+            <span class="kbd-shortcut__details">Find & replace</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Shift + Tab
+            </span>
+            <span class="kbd-shortcut__details">Realign code</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + ]
+            </span>
+            <span class="kbd-shortcut__details">Indent code right</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + [
+            </span>
+            <span class="kbd-shortcut__details">Indent code left</span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Tab
+            </span>
+            <span class="kbd-shortcut__details">Emmet code completion <a href="https://emmet.io/" target="_blank">Read more</a></span>
+        </p>
+        <p>
+            <span class="kbd-shortcut__keys">
+                Ctrl/⌘ + /
+            </span>
+            <span class="kbd-shortcut__details">Single line comment</span>
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/script.js b/src/script.js
index ffb56f7..049d212 100644
--- a/src/script.js
+++ b/src/script.js
@@ -7,7 +7,7 @@ onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editor
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
 runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
 customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
-globalConsoleContainerEl, externalLibrarySearchInput
+globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
 */
 /* eslint-disable no-extra-semi */
 (function(alertsService) {
@@ -647,6 +647,7 @@ globalConsoleContainerEl, externalLibrarySearchInput
 		onboardModal.classList.remove('is-modal-visible');
 		settingsModal.classList.remove('is-modal-visible');
 		cssSettingsModal.classList.remove('is-modal-visible');
+		keyboardShortcutsModal.classList.remove('is-modal-visible');
 		toggleSavedItemsPane(false);
 		document.dispatchEvent(new Event('overlaysClosed'));
 	}
@@ -2139,6 +2140,11 @@ globalConsoleContainerEl, externalLibrarySearchInput
 				event.preventDefault();
 				openSavedItemsPane();
 				trackEvent('ui', 'openCreationKeyboardShortcut');
+			} else if ((event.ctrlKey || event.metaKey) && event.keyCode === 191) {
+				// Ctrl/⌘ + Shift + ?
+				event.preventDefault();
+				scope.toggleModal(keyboardShortcutsModal);
+				trackEvent('ui', 'showKeyboardShortcutsShortcut');
 			} else if (event.keyCode === 27) {
 				closeAllOverlays();
 			}
diff --git a/src/style.css b/src/style.css
index e4c8513..bfdf889 100644
--- a/src/style.css
+++ b/src/style.css
@@ -943,6 +943,19 @@ transition: 0.25s ease;
 	display: block;
 }
 
+.kbd-shortcut__keys {
+	background: rgba(0,0,0,0.1);
+	border-radius: 3px;
+	padding: 3px 8px;
+	margin-right: 5px;
+	display: inline-block;
+	font-size: 0.9rem;
+	font-weight: bold;
+}
+.kbd-shortcut__details {
+	display: inline-block;
+}
+
 /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
 while the theme CSS file is loading */
 .cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }