mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-13 10:06:23 +02:00
Code Issues Releases Wiki Activity

Add a modal to list all keyboard shortcuts. fixes #236

Browse Source
This commit is contained in:
Kushagra Gour
2017-12-11 19:43:58 +05:30
parent 75e941f1e1
commit 8fe23767eb
4 changed files with 141 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/index.html
View File

@ -226,13 +226,18 @@
<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a> <a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
&copy; Web Maker &nbsp;&nbsp; &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"> <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" /> <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> </svg>
</a> </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 --> <!-- #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"> <svg style="width:20px; height:20px; vertical-align:text-bottom">
<use xlink:href="#twitter-icon"></use> <use xlink:href="#twitter-icon"></use>
</svg> </svg>
@ -332,6 +337,11 @@
</div> </div>
</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" id="onboardModal">
<div class="modal__content"> <div class="modal__content">
@ -614,6 +624,9 @@
<symbol id="cross-icon" viewBox="0 0 24 24"> <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" /> <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>
<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> </svg>
<script src="lib/codemirror/lib/codemirror.js"></script> <script src="lib/codemirror/lib/codemirror.js"></script>

106
src/keyboard-shortcuts.html Normal file
View File

@ -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>

8
src/script.js
View File

@ -7,7 +7,7 @@ onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editor
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl, onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate, runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea, customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
globalConsoleContainerEl, externalLibrarySearchInput globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
*/ */
/* eslint-disable no-extra-semi */ /* eslint-disable no-extra-semi */
(function(alertsService) { (function(alertsService) {
@ -647,6 +647,7 @@ globalConsoleContainerEl, externalLibrarySearchInput
onboardModal.classList.remove('is-modal-visible'); onboardModal.classList.remove('is-modal-visible');
settingsModal.classList.remove('is-modal-visible'); settingsModal.classList.remove('is-modal-visible');
cssSettingsModal.classList.remove('is-modal-visible'); cssSettingsModal.classList.remove('is-modal-visible');
keyboardShortcutsModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false); toggleSavedItemsPane(false);
document.dispatchEvent(new Event('overlaysClosed')); document.dispatchEvent(new Event('overlaysClosed'));
} }
@ -2139,6 +2140,11 @@ globalConsoleContainerEl, externalLibrarySearchInput
event.preventDefault(); event.preventDefault();
openSavedItemsPane(); openSavedItemsPane();
trackEvent('ui', 'openCreationKeyboardShortcut'); 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) { } else if (event.keyCode === 27) {
closeAllOverlays(); closeAllOverlays();
} }

13
src/style.css
View File

@ -943,6 +943,19 @@ transition: 0.25s ease;
display: block; 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 /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */ while the theme CSS file is loading */
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; } .cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }