Merge pull request #258 from chinchang/iamandrewluca-keyboard-shortcuts

Iamandrewluca keyboard shortcuts

package-lock.json

@@ -1310,6 +1310,17 @@
 			"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
 			"dev": true
 		},
+		"string_decoder": {
+			"version": "1.0.3",
+			"resolved":
+				"https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+			"integrity":
+				"sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+			"dev": true,
+			"requires": {
+				"safe-buffer": "5.1.1"
+			}
+		},
 		"string-width": {
 			"version": "2.1.1",
 			"resolved":
@@ -1341,17 +1352,6 @@
 				}
 			}
 		},
-		"string_decoder": {
-			"version": "1.0.3",
-			"resolved":
-				"https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-			"integrity":
-				"sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-			"dev": true,
-			"requires": {
-				"safe-buffer": "5.1.1"
-			}
-		},
 		"strip-ansi": {
 			"version": "3.0.1",
 			"resolved":

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,7 +2135,6 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
 
 		// Editor keyboard shortucuts
 		window.addEventListener('keydown', function(event) {
-			var selectedItemElement;
 			// TODO: refactor common listener code
 			// Ctrl/⌘ + S
 			if ((event.ctrlKey || event.metaKey) && event.keyCode === 83) {
@@ -2166,40 +2168,37 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
 			} else if (event.keyCode === 27) {
 				closeAllOverlays();
 			}
-			if (event.keyCode === 40 && isSavedItemsPaneOpen) {
+		});
-				// Return if no items present.
+
-				if (!$all('.js-saved-item-tile').length) {
+		savedItemsPane.addEventListener('keydown', function(event) {
-					return;
+			if (!isSavedItemsPaneOpen) {
-				}
+				return;
-				selectedItemElement = $('.js-saved-item-tile.selected');
+			}
+
+			const isCtrlOrMetaPressed = event.ctrlKey || event.metaKey;
+			const isForkKeyPressed = isCtrlOrMetaPressed && event.keyCode === 70;
+			const isDownKeyPressed = event.keyCode === 40;
+			const isUpKeyPressed = event.keyCode === 38;
+			const isEnterKeyPressed = event.keyCode === 13;
+
+			const selectedItemElement = $('.js-saved-item-tile.selected');
+			const havePaneItems = $all('.js-saved-item-tile').length !== 0;
+
+			if ((isDownKeyPressed || isUpKeyPressed) && havePaneItems) {
+				const method = isDownKeyPressed ? 'nextUntil' : 'previousUntil';
+
 				if (selectedItemElement) {
 					selectedItemElement.classList.remove('selected');
-					selectedItemElement
+					selectedItemElement[method](
-						.nextUntil('.js-saved-item-tile:not(.hide)')
+						'.js-saved-item-tile:not(.hide)'
-						.classList.add('selected');
+					).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;
+			if (isEnterKeyPressed && selectedItemElement) {
-				}
-				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;
-				}
 				setTimeout(function() {
 					openItem(selectedItemElement.dataset.itemId);
 				}, 350);
@@ -2207,13 +2206,8 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
 			}
 
 			// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
-			if (
+			if (isForkKeyPressed) {
-				isSavedItemsPaneOpen &&
-				(event.ctrlKey || event.metaKey) &&
-				event.keyCode === 70
-			) {
 				event.preventDefault();
-				selectedItemElement = $('.js-saved-item-tile.selected');
 				setTimeout(function() {
 					forkItem(savedItems[selectedItemElement.dataset.itemId]);
 				}, 350);
@@ -2247,14 +2241,18 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
 		var libOptions = window.jsLibs.reduce(
 			(html, lib) =>
 				html +
-				`<option data-type="${lib.type}" value="${lib.url}">${lib.label}</option>`,
+				`<option data-type="${lib.type}" value="${lib.url}">${
+					lib.label
+				}</option>`,
 			''
 		);
 		addLibrarySelect.children[1].innerHTML = libOptions;
 		libOptions = window.cssLibs.reduce(
 			(html, lib) =>
 				html +
-				`<option data-type="${lib.type}" value="${lib.url}">${lib.label}</option>`,
+				`<option data-type="${lib.type}" value="${lib.url}">${
+					lib.label
+				}</option>`,
 			''
 		);
 		addLibrarySelect.children[2].innerHTML = libOptions;