From e9f4f29a87d0acf9aa9ef052400d6ae079107a67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Tue, 18 Jul 2017 20:37:52 +0200
Subject: [PATCH] Simplify tag form

---
 static/main.css      | 26 +++---------------
 static/main.js       | 64 +++++++++++++++++++++++++++++---------------
 templates/edit.html  |  8 +++---
 templates/index.html |  2 +-
 4 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/static/main.css b/static/main.css
index 37f47bf..5266282 100644
--- a/static/main.css
+++ b/static/main.css
@@ -39,17 +39,11 @@ input {
 	margin-right: auto;
 }
 
-.editform input, .tagcontainer {
+.editform input {
 	margin: 5px;
 }
 
-.tagcontainer {
-	background-color: #666;
-	border: 1px solid #999;
-	border-radius: 5px;
-}
-
-.tags span {
+.tags li {
 	background-color: #333;
 	border-radius: 2px;
 	font-size: 0.9em;
@@ -57,18 +51,6 @@ input {
 	padding: 2px 5px 2px 5px;
 }
 
-.tags, .taginput {
-	display: inline-block;
-}
-
-.taginput {
-	background: none;
-	border: none;
-	border-radius: 0;
-	margin: 0 !important;
-	padding: 5px 5px 5px 0px;
-}
-
 .youtube label {
 	vertical-align: middle;
 }
@@ -100,12 +82,12 @@ section {
 	width: 100%;
 }
 
-#reset {
+.reset {
 	font-size: 2em;
 	padding-left: 5px;
 }
 
-#reset:hover {
+.reset:hover {
 	cursor: pointer;
 }
 
diff --git a/static/main.js b/static/main.js
index ecf48b6..3542316 100644
--- a/static/main.js
+++ b/static/main.js
@@ -12,7 +12,8 @@ ready(function() {
 	var sections = document.querySelectorAll("section");
 	var nav = document.querySelectorAll("nav > a");
 
-	sections[0].style.display = "block";
+	if (sections.length > 0)
+		sections[0].style.display = "block";
 
 	nav.forEach(function(item) {
 		item.onclick = function(e) {
@@ -29,35 +30,54 @@ ready(function() {
 
 	var searchfield = document.querySelector("#search");
 
-	searchfield.addEventListener("keyup", function() {
-		console.log("Search!");
+	if (searchfield !== null) {
+		searchfield.addEventListener("keyup", function() {
+			console.log("Search!");
 
-		var buttons = document.querySelectorAll(".sound");
+			var buttons = document.querySelectorAll(".sound");
 
-		buttons.forEach(function(item) {
-			item.style.display = "inline-block";
+			buttons.forEach(function(item) {
+				item.style.display = "inline-block";
+			});
+
+			buttons.forEach(function(item) {
+				var name = item.firstChild.innerHTML;
+
+				if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
+					item.style.display = "none";
+				}
+			});
 		});
+	}
 
-		buttons.forEach(function(item) {
-			var name = item.firstChild.innerHTML;
-	
-			if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
-				item.style.display = "none";
-			}
+	var reset = document.querySelector("#sounds .reset");
+
+	if (reset !== null) {
+		reset.addEventListener("click", function() {
+			var buttons = document.querySelectorAll(".sound");
+
+			buttons.forEach(function(item) {
+				item.style.display = "inline-block";
+			});
+
+			searchfield.value = "";
 		});
-	});
+	}
 
-	var reset = document.querySelector("#reset");
+	var taginputs = document.querySelectorAll(".taginput");
 
-	reset.addEventListener("click", function() {
-		var buttons = document.querySelectorAll(".sound");
-
-		buttons.forEach(function(item) {
-			item.style.display = "inline-block";
+	if (taginputs.length > 0) {
+		taginputs.forEach(function(taginput) {
+			taginput.addEventListener("keydown", function(e) {
+				if (e.target == taginput && (e.which == 13 || e.keyCode == 13)) {
+					e.preventDefault();
+				} else if (e.which == 32 || e.keyCode == 13) {
+					console.log("Space");
+					addTag(e.target);
+				}
+			});
 		});
-
-		searchfield.value = "";
-	});
+	}
 });
 
 function hideSections() {
diff --git a/templates/edit.html b/templates/edit.html
index c8f5f88..e59ec17 100644
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -10,12 +10,12 @@
 							<label for="tags">Tags</label>
 						</div>
 						<div class="table-cell">
-							<div class="tagcontainer">
-								<div class="tags"><span>Test</span></div>
-								<input class="taginput" type="input" name="tags" id="tags" />
-							</div>
+							<input type="input" name="tags" id="tags" />
 						</div>
 					</div>
+					<ul class="tags">
+						<li>Test<span class="reset">⨯</span></li>
+					</ul>
 					<div class="table-row">
 						<div class="table-cell">
 						</div>
diff --git a/templates/index.html b/templates/index.html
index 4484fd0..84fb9ed 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
 			<section id="sounds">
-				<div><input type="text" id="search" /><span id="reset">⨯</span></div>
+				<div><input type="text" id="search" /><span class="reset">⨯</span></div>
 				{% for sound in sounds %}
 				<div class="sound{{ ' edit' if edit }}"><a href="{{ '/' + ('edit' if edit else 'play') + '/' + sound | urlencode }}">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}