From 56158f681e2e087c6e0c0f195457e6ec73300df1 Mon Sep 17 00:00:00 2001
From: lzzfnc <luzzanafrancesco@gmail.com>
Date: Sun, 10 Oct 2021 02:22:54 +0200
Subject: [PATCH] tab index and final tags

---
 chat.css       | 21 +++++++++++++++++++++
 csv_to_chat.js | 13 +++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/chat.css b/chat.css
index bb8cab7..31768dc 100644
--- a/chat.css
+++ b/chat.css
@@ -46,6 +46,7 @@ input[type="submit"] {
 	transform: translate(0);
 	transition: transform 0.4s ease-out;
 	text-transform: capitalize;
+	user-select: none;
 }
 
 .tag:hover {
@@ -117,3 +118,23 @@ input[type="submit"] {
 .baloon .contents {
 	margin: 0;
 }
+
+.baloon .category {
+	color: #fcc;
+}
+
+.category::after {
+	content: ", ";
+}
+
+/* .category::before {
+	content: "#";
+} */
+
+.category:first-of-type::before {
+	content: " ";
+}
+
+.category:last-of-type::after {
+	content: "";
+}
diff --git a/csv_to_chat.js b/csv_to_chat.js
index 16e7216..5ec0347 100644
--- a/csv_to_chat.js
+++ b/csv_to_chat.js
@@ -189,15 +189,18 @@ function createBaloon(text, username, tags) {
 	let baloon = document.createElement("div");
 	baloon.classList.add("baloon");
 
+	let contents;
+	let author;
+
 	if (text) {
-		let contents = document.createElement("p");
+		contents = document.createElement("p");
 		contents.classList.add("contents");
 		contents.innerHTML = text;
 		baloon.appendChild(contents);
 	}
 
 	if (username) {
-		let author = document.createElement("span");
+		author = document.createElement("span");
 		author.classList.add("author");
 		author.innerHTML = username;
 		baloon.appendChild(author);
@@ -205,6 +208,11 @@ function createBaloon(text, username, tags) {
 
 	if (tags) {
 		tags.forEach((tag) => {
+			let category = document.createElement("span");
+			category.innerHTML = tag;
+			category.classList.add("category");
+			if (text) contents.appendChild(category);
+
 			tag = tag.replaceAll(" ", "-");
 			baloon.classList.add(tag);
 		});
@@ -219,6 +227,7 @@ function createTag(tag) {
 	let chip = document.createElement("li");
 	chip.classList.add("tag");
 	chip.setAttribute("data-tag", tag);
+	chip.setAttribute("tabindex", 0);
 	chip.innerHTML = tag;
 	return chip;
 }