From fa409ef5dd6864f6cb07b6c8d6ead10979fab472 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Tue, 24 Jan 2017 12:03:32 +0530
Subject: [PATCH] add keyboard navigation in saved library pane. fixes #50

---
 src/script.js | 25 +++++++++++++++++++++++++
 src/style.css |  3 ++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/script.js b/src/script.js
index e8f1667..26818e0 100644
--- a/src/script.js
+++ b/src/script.js
@@ -988,6 +988,31 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 			else if (event.keyCode === 27) {
 				closeAllOverlays();
 			}
+			if (event.keyCode === 40 && savedItemsPane.classList.contains('is-open')) {
+				var selectedItemElement = $('.js-saved-item-tile.selected');
+				if (selectedItemElement) {
+					selectedItemElement.classList.remove('selected');
+					selectedItemElement.nextElementSibling.classList.add('selected');
+				} else {
+					$('.js-saved-item-tile:first-child').classList.add('selected');
+				}
+			} else if (event.keyCode === 38 && savedItemsPane.classList.contains('is-open')) {
+				var selectedItemElement = $('.js-saved-item-tile.selected');
+				if (selectedItemElement) {
+					selectedItemElement.classList.remove('selected');
+					selectedItemElement.previousElementSibling.classList.add('selected');
+				} else {
+					$('.js-saved-item-tile:first-child').classList.add('selected');
+				}
+			} else if (event.keyCode === 13 && savedItemsPane.classList.contains('is-open')) {
+				var selectedItemElement = $('.js-saved-item-tile.selected');
+				setTimeout(function () {
+					openItem(selectedItemElement.dataset.itemId);
+				}, 350);
+				toggleSavedItemsPane();
+			}
+
+			utils.log(event.keyCode)
 		});
 
 		window.addEventListener('click', function(e) {
diff --git a/src/style.css b/src/style.css
index 9f12bd2..6a0a702 100644
--- a/src/style.css
+++ b/src/style.css
@@ -466,7 +466,8 @@ li.CodeMirror-hint-active {
 		transform: translateX(0px);
 	}
 }
-.saved-item-tile:hover {
+.saved-item-tile:hover,
+.saved-item-tile.selected {
 	background: rgba(255,255,255,0.1);
 }
 .saved-item-tile__close-btn {