Skip to content

Commit 8fe2376

Browse files
chinchangchinchang
committed
Add a modal to list all keyboard shortcuts. fixes #236 
1 parent 75e941f commit 8fe2376

File tree

4 files changed

+141
-3
lines changed

4 files changed

+141
-3
lines changed

‎src/index.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,13 +226,18 @@
226226

227227
<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
228228
&copy; Web Maker &nbsp;&nbsp;
229-
<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right" data-hint="Help">
229+
<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right" aria-label="Help">
230230
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
231231
<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" />
232232
</svg>
233233
</a>
234+
<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">
235+
<svg style="width:20px; height:20px; vertical-align:text-bottom">
236+
<use xlink:href="#keyboard-icon"></use>
237+
</svg>
238+
</a>
234239
<!-- #00ACED -->
235-
<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">
240+
<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">
236241
<svg style="width:20px; height:20px; vertical-align:text-bottom">
237242
<use xlink:href="#twitter-icon"></use>
238243
</svg>
@@ -332,6 +337,11 @@ <h3>License</h3>
332337
</div>
333338
</div>
334339

340+
<div class="modal" id="keyboardShortcutsModal">
341+
<div class="modal__content" d-html="keyboard-shortcuts.html">
342+
</div>
343+
</div>
344+
335345
<div class="modal" id="onboardModal">
336346
<div class="modal__content">
337347

@@ -614,6 +624,9 @@ <h3>My Library <span id="savedItemCountEl"></span></h3>
614624
<symbol id="cross-icon" viewBox="0 0 24 24">
615625
<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" />
616626
</symbol>
627+
<symbol id="keyboard-icon" viewBox="0 0 24 24">
628+
<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" />
629+
</symbol>
617630
</svg>
618631

619632
<script src="lib/codemirror/lib/codemirror.js"></script>

‎src/keyboard-shortcuts.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<a d-click="onModalCloseBtnClick" href="" aria-label="Close keyboard shortcuts modal" title="Close" class="js-modal__close-btn modal__close-btn">
2+
<svg>
3+
<use xlink:href="#cross-icon"></use>
4+
</svg>
5+
</a>
6+
7+
<h1>Keyboard Shortcuts</h1>
8+
9+
<div class="flex">
10+
<div>
11+
<h2>Global</h2>
12+
<p>
13+
<span class="kbd-shortcut__keys">
14+
Ctrl/⌘ + Shift + ?
15+
</span>
16+
<span class="kbd-shortcut__details">See keyboard shortcuts</span>
17+
</p>
18+
<p>
19+
<span class="kbd-shortcut__keys">
20+
Ctrl/⌘ + Shift + 5
21+
</span>
22+
<span class="kbd-shortcut__details">Refresh preview</span>
23+
</p>
24+
<p>
25+
<span class="kbd-shortcut__keys">
26+
Ctrl/⌘ + S
27+
</span>
28+
<span class="kbd-shortcut__details">Save current creations</span>
29+
</p>
30+
<p>
31+
<span class="kbd-shortcut__keys">
32+
Ctrl/⌘ + O
33+
</span>
34+
<span class="kbd-shortcut__details">Open list of saved creations</span>
35+
</p>
36+
<p>
37+
<span class="kbd-shortcut__keys">
38+
Ctrl + L
39+
</span>
40+
<span class="kbd-shortcut__details">Clear console (works when console input is focused)</span>
41+
</p>
42+
<p>
43+
<span class="kbd-shortcut__keys">
44+
Esc
45+
</span>
46+
<span class="kbd-shortcut__details">Close saved creations panel & modals</span>
47+
</p>
48+
</div>
49+
<div>
50+
<h2>Editor</h2>
51+
<p>
52+
<span class="kbd-shortcut__keys">
53+
Ctrl/⌘ + F
54+
</span>
55+
<span class="kbd-shortcut__details">Find</span>
56+
</p>
57+
<p>
58+
<span class="kbd-shortcut__keys">
59+
Ctrl/⌘ + G
60+
</span>
61+
<span class="kbd-shortcut__details">Select next match</span>
62+
</p>
63+
<p>
64+
<span class="kbd-shortcut__keys">
65+
Ctrl/⌘ + Shift + G
66+
</span>
67+
<span class="kbd-shortcut__details">Select previous match</span>
68+
</p>
69+
<p>
70+
<span class="kbd-shortcut__keys">
71+
Ctrl/⌘ + Opt/Alt + F
72+
</span>
73+
<span class="kbd-shortcut__details">Find & replace</span>
74+
</p>
75+
<p>
76+
<span class="kbd-shortcut__keys">
77+
Shift + Tab
78+
</span>
79+
<span class="kbd-shortcut__details">Realign code</span>
80+
</p>
81+
<p>
82+
<span class="kbd-shortcut__keys">
83+
Ctrl/⌘ + ]
84+
</span>
85+
<span class="kbd-shortcut__details">Indent code right</span>
86+
</p>
87+
<p>
88+
<span class="kbd-shortcut__keys">
89+
Ctrl/⌘ + [
90+
</span>
91+
<span class="kbd-shortcut__details">Indent code left</span>
92+
</p>
93+
<p>
94+
<span class="kbd-shortcut__keys">
95+
Tab
96+
</span>
97+
<span class="kbd-shortcut__details">Emmet code completion <a href="https://emmet.io/" target="_blank">Read more</a></span>
98+
</p>
99+
<p>
100+
<span class="kbd-shortcut__keys">
101+
Ctrl/⌘ + /
102+
</span>
103+
<span class="kbd-shortcut__details">Single line comment</span>
104+
</p>
105+
</div>
106+
</div>

‎src/script.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editor
77
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
88
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
99
customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
10-
globalConsoleContainerEl, externalLibrarySearchInput
10+
globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
1111
*/
1212
/* eslint-disable no-extra-semi */
1313
(function(alertsService) {
@@ -647,6 +647,7 @@ globalConsoleContainerEl, externalLibrarySearchInput
647647
onboardModal.classList.remove('is-modal-visible');
648648
settingsModal.classList.remove('is-modal-visible');
649649
cssSettingsModal.classList.remove('is-modal-visible');
650+
keyboardShortcutsModal.classList.remove('is-modal-visible');
650651
toggleSavedItemsPane(false);
651652
document.dispatchEvent(new Event('overlaysClosed'));
652653
}
@@ -2139,6 +2140,11 @@ globalConsoleContainerEl, externalLibrarySearchInput
21392140
event.preventDefault();
21402141
openSavedItemsPane();
21412142
trackEvent('ui', 'openCreationKeyboardShortcut');
2143+
} else if ((event.ctrlKey || event.metaKey) && event.keyCode === 191) {
2144+
// Ctrl/⌘ + Shift + ?
2145+
event.preventDefault();
2146+
scope.toggleModal(keyboardShortcutsModal);
2147+
trackEvent('ui', 'showKeyboardShortcutsShortcut');
21422148
} else if (event.keyCode === 27) {
21432149
closeAllOverlays();
21442150
}

‎src/style.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -943,6 +943,19 @@ transition: 0.25s ease;
943943
display: block;
944944
}
945945

946+
.kbd-shortcut__keys {
947+
background: rgba(0,0,0,0.1);
948+
border-radius: 3px;
949+
padding: 3px 8px;
950+
margin-right: 5px;
951+
display: inline-block;
952+
font-size: 0.9rem;
953+
font-weight: bold;
954+
}
955+
.kbd-shortcut__details {
956+
display: inline-block;
957+
}
958+
946959
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC
947960
while the theme CSS file is loading */
948961
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }

0 commit comments

Comments
 (0)