diff --git a/src/script.js b/src/script.js
index 50797c9..24a002b 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1501,7 +1501,10 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
- var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+ var mimeString = dataURI
+ .split(',')[0]
+ .split(':')[1]
+ .split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
@@ -2132,74 +2135,74 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
// Editor keyboard shortucuts
window.addEventListener('keydown', function(event) {
- var selectedItemElement;
+ const CTRL_META = event.ctrlKey || event.metaKey;
+ const CTRL_META_SHIFT = CTRL_META && event.shiftKey;
+ const CTRL_META_S = CTRL_META && event.code === 'KeyS';
+ const CTRL_META_O = CTRL_META && event.code === 'KeyO';
+ const CTRL_META_SHIFT_5 = CTRL_META_SHIFT && event.code === 'Digit5';
+ const CTRL_META_SHIFT_SLASH = CTRL_META_SHIFT && event.code === 'Slash';
+ const ESCAPE = event.code === 'Escape';
+
// TODO: refactor common listener code
- // Ctrl/⌘ + S
- if ((event.ctrlKey || event.metaKey) && event.keyCode === 83) {
+
+ if (CTRL_META_S) {
event.preventDefault();
saveItem();
trackEvent('ui', 'saveItemKeyboardShortcut');
}
- // Ctrl/⌘ + Shift + 5
- if (
- (event.ctrlKey || event.metaKey) &&
- event.shiftKey &&
- event.keyCode === 53
- ) {
+
+ if (CTRL_META_SHIFT_5) {
event.preventDefault();
scope.setPreviewContent(true);
trackEvent('ui', 'previewKeyboardShortcut');
- } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 79) {
- // Ctrl/⌘ + O
+ }
+
+ if (CTRL_META_O) {
event.preventDefault();
openSavedItemsPane();
trackEvent('ui', 'openCreationKeyboardShortcut');
- } else if (
- (event.ctrlKey || event.metaKey) &&
- event.shiftKey &&
- event.keyCode === 191
- ) {
- // Ctrl/⌘ + Shift + ?
+ }
+
+ if (CTRL_META_SHIFT_SLASH) {
event.preventDefault();
scope.toggleModal(keyboardShortcutsModal);
trackEvent('ui', 'showKeyboardShortcutsShortcut');
- } else if (event.keyCode === 27) {
+ }
+
+ if (ESCAPE) {
closeAllOverlays();
}
- if (event.keyCode === 40 && isSavedItemsPaneOpen) {
- // Return if no items present.
- if (!$all('.js-saved-item-tile').length) {
- return;
- }
- selectedItemElement = $('.js-saved-item-tile.selected');
+ });
+
+ savedItemsPane.addEventListener('keydown', function(event) {
+ if (!isSavedItemsPaneOpen) {
+ return;
+ }
+
+ const CTRL_META = event.ctrlKey || event.metaKey;
+ const CTRL_META_F = CTRL_META && event.code === 'KeyF';
+ const ARROW_DOWN = event.code === 'ArrowDown';
+ const ARROW_UP = event.code === 'ArrowUp';
+ const ENTER = event.code === 'Enter';
+
+ const selectedItemElement = $('.js-saved-item-tile.selected');
+ const HAVE_PANE_ITEMS = $all('.js-saved-item-tile').length !== 0;
+
+ if ((ARROW_DOWN || ARROW_UP) && HAVE_PANE_ITEMS) {
+ const method = ARROW_DOWN ? 'nextUntil' : 'previousUntil';
+
if (selectedItemElement) {
selectedItemElement.classList.remove('selected');
- selectedItemElement
- .nextUntil('.js-saved-item-tile:not(.hide)')
- .classList.add('selected');
+ selectedItemElement[method](
+ '.js-saved-item-tile:not(.hide)'
+ ).classList.add('selected');
} else {
$('.js-saved-item-tile:not(.hide)').classList.add('selected');
}
$('.js-saved-item-tile.selected').scrollIntoView(false);
- } else if (event.keyCode === 38 && isSavedItemsPaneOpen) {
- if (!$all('.js-saved-item-tile').length) {
- return;
- }
- selectedItemElement = $('.js-saved-item-tile.selected');
- if (selectedItemElement) {
- selectedItemElement.classList.remove('selected');
- selectedItemElement
- .previousUntil('.js-saved-item-tile:not(.hide)')
- .classList.add('selected');
- } else {
- $('.js-saved-item-tile:not(.hide)').classList.add('selected');
- }
- $('.js-saved-item-tile.selected').scrollIntoView(false);
- } else if (event.keyCode === 13 && isSavedItemsPaneOpen) {
- selectedItemElement = $('.js-saved-item-tile.selected');
- if (!selectedItemElement) {
- return;
- }
+ }
+
+ if (ENTER && selectedItemElement) {
setTimeout(function() {
openItem(selectedItemElement.dataset.itemId);
}, 350);
@@ -2207,13 +2210,8 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
}
// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
- if (
- isSavedItemsPaneOpen &&
- (event.ctrlKey || event.metaKey) &&
- event.keyCode === 70
- ) {
+ if (CTRL_META_F) {
event.preventDefault();
- selectedItemElement = $('.js-saved-item-tile.selected');
setTimeout(function() {
forkItem(savedItems[selectedItemElement.dataset.itemId]);
}, 350);
@@ -2247,14 +2245,18 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
var libOptions = window.jsLibs.reduce(
(html, lib) =>
html +
- ``,
+ ``,
''
);
addLibrarySelect.children[1].innerHTML = libOptions;
libOptions = window.cssLibs.reduce(
(html, lib) =>
html +
- ``,
+ ``,
''
);
addLibrarySelect.children[2].innerHTML = libOptions;