keyboard controls and visuals

closes #21

static/main.css

@@ -96,11 +96,20 @@ div #reset:hover {
 }
 
 .sound a:hover {
+	cursor: pointer;
+}
+
+.sound a:active {
         background-color: #ff4136;
         box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6);
 	cursor: pointer;
 }
 
+.sound-pressed {
+        background-color: #ff4136 !important;
+        box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6) !important;
+}
+
 .unselectable {
     -webkit-touch-callout: none;
     -webkit-user-select: none;

static/main.js

@@ -6,6 +6,10 @@ function ready(fn) {
 	}
 }
 
+function sleep(ms) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 ready(function() {
 	hideSections();
 
@@ -52,12 +56,29 @@ ready(function() {
 	reset.addEventListener("click", resetSearch, false);
 	sounds_nav.addEventListener("click", resetSearch, false);
 
+	// keyboard listener for esc button
 	document.onkeydown = function(evt) {
     		evt = evt || window.event;
 		if (evt.keyCode == 27) {
 			resetSearch();
 		}
 	};
+	
+	// keyboard listener for enter key
+	var all_a_s = document.getElementsByTagName("a"); 
+	for(i=0; i<all_a_s.length; i++) {	
+	    all_a_s[i].addEventListener('keypress', async function (e) {
+		    var key = e.keyCode;
+		    var source = e.target;
+		    if (key === 13) {
+			source.classList.add("sound-pressed")
+		    	source.onclick(); 
+			await sleep(300);
+			source.classList.remove("sound-pressed"); 
+		    }
+		});
+	}
+
 });
 
 
@@ -72,6 +93,7 @@ function resetSearch() {
         });
 
         searchfield.value = "";
+	searchfield.focus();
 }
 
 

templates/index.html

@@ -38,7 +38,7 @@
 			<section id="sounds">
 				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
-				<div class="sound"><a class="unselectable" onclick="ajaxRequest('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
+				<div class="sound"><a tabindex="0" class="unselectable" onclick="ajaxRequest('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
 			<section id="youtube">
@@ -67,4 +67,3 @@
 		<script src="/static/main.js"></script>
 	</body>
 </html>
-