From e3d481caa18a229c6792f903fef3cf07b0e56a2f Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Thu, 11 Jan 2024 20:47:41 +0100
Subject: [PATCH] PhotoPage: update and refactor tagging script slightly

---
 public/css/default.css  | 15 +++----
 templates/PhotoPage.php | 86 +++++++++++++++++++++++------------------
 2 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/public/css/default.css b/public/css/default.css
index 84e02f1..b8b7105 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -526,20 +526,15 @@ a#previous_photo:hover, a#next_photo:hover {
 #sub_photo h2, #sub_photo h3 {
 	margin-bottom: 1rem;
 }
-#sub_photo #tag_list {
+#sub_photo .tag-list {
 	list-style: none;
 	margin: 1em 0;
 	padding: 0;
 }
-#sub_photo #tag_list li {
-	display: inline;
-	padding-right: 0.75em;
-}
-#tag_list .delete-tag {
-	opacity: 0.25;
-}
-#tag_list .delete-tag:hover {
-	opacity: 1.0;
+#sub_photo .tag-list > li {
+	display: inline-block;
+	margin-bottom: 0.75em;
+	margin-right: 0.75em;
 }
 
 .photo_meta {
diff --git a/templates/PhotoPage.php b/templates/PhotoPage.php
index f68acf5..83c9ebe 100644
--- a/templates/PhotoPage.php
+++ b/templates/PhotoPage.php
@@ -120,9 +120,12 @@ class PhotoPage extends Template
 
 	private function printTags($header, $tagKind, $allowLinkingNewTags)
 	{
+		static $nextTagListId = 1;
+		$tagListId = 'tagList' . ($nextTagListId++);
+
 		echo '
 					<h3>', $header, '</h3>
-					<ul id="tag_list" class="d-flex">';
+					<ul id="', $tagListId, '" class="tag-list">';
 
 		foreach ($this->photo->getTags() as $tag)
 		{
@@ -138,7 +141,7 @@ class PhotoPage extends Template
 			if ($tag->kind === 'Person')
 			{
 				echo '
-									<a class="btn btn-danger px-1" title="Unlink this tag from this photo" href="#" data-id="', $tag->id_tag, '">
+									<a class="delete-tag btn btn-danger px-1" title="Unlink this tag from this photo" href="#" data-id="', $tag->id_tag, '">
 										<i class="bi bi-x"></i>
 									</a>';
 			}
@@ -149,71 +152,80 @@ class PhotoPage extends Template
 						</li>';
 		}
 
+		static $nextNewTagId = 1;
+		$newTagId = 'newTag' . ($nextNewTagId++);
+
 		if ($allowLinkingNewTags)
-			$this->linkNewTags();
+		{
+			echo '
+						<li style="position: relative">
+							<input class="form-control w-auto" type="text" id="', $newTagId, '" placeholder="Type to link a new tag">
+						</li>';
+		}
 
 		echo '
 					</ul>';
+
+		$this->printNewTagScript($tagKind, $tagListId, $newTagId);
 	}
 
-	private function linkNewTags()
+	private function printNewTagScript($tagKind, $tagListId, $newTagId)
 	{
 		echo '
-						<li style="position: relative">
-							<input class="form-control w-auto" type="text" id="new_tag" placeholder="Type to link a new tag">
-						</li>
 				<script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script>
 				<script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script>
 				<script type="text/javascript">
 					setTimeout(function() {
-						var removeTag = function(event) {
+						const removeTag = function(event) {
 							event.preventDefault();
-							var that = this;
-							var request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
-								"id_tag=" + this.dataset["id"] + "&delete", function(response) {
+							const request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
+								"id_tag=" + this.dataset["id"] + "&delete", (response) => {
 									if (!response.success) {
 										return;
 									}
 
-									var tagNode = document.getElementById("tag-" + that.dataset["id"]);
+									const tagNode = document.getElementById("tag-" + this.dataset["id"]);
 									tagNode.parentNode.removeChild(tagNode);
 								});
 						};
 
-						var tagRemovalTargets = document.getElementsByClassName("delete-tag");
-						for (var i = 0; i < tagRemovalTargets.length; i++) {
-							tagRemovalTargets[i].addEventListener("click", removeTag);
-						}
+						let tagRemovalTargets = document.querySelectorAll(".delete-tag");
+						tagRemovalTargets.forEach(el => el.addEventListener("click", removeTag));
 
-						var tag_autosuggest = new TagAutoSuggest({
-							inputElement: "new_tag",
-							listElement: "tag_list",
+						let tag_autosuggest = new TagAutoSuggest({
+							inputElement: "', $newTagId, '",
+							listElement: "', $tagListId, '",
 							baseUrl: "', BASEURL, '",
-							appendCallback: function(item) {
-								var request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
-									"id_tag=" + item.id_tag, function(response) {
-										var newLink = document.createElement("a");
+							appendCallback: (item) => {
+								const request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
+									"id_tag=" + item.id_tag, (response) => {
+										const newListItem = document.createElement("li");
+										newListItem.id = "tag-" + item.id_tag;
+
+										const newLink = document.createElement("a");
 										newLink.href = item.url;
+										newLink.title = "View all posts tagged " + item.label;
+										newListItem.appendChild(newLink);
 
-										var newLabel = document.createTextNode(item.label);
-										newLink.appendChild(newLabel);
+										const newInputGroup = document.createElement("div");
+										newInputGroup.className = "input-group";
+										newLink.appendChild(newInputGroup);
 
-										var removeLink = document.createElement("a");
-										removeLink.className = "delete-tag";
+										const newLabel = document.createElement("span");
+										newLabel.className = "input-group-text";
+										newLabel.textContent = item.label;
+										newInputGroup.appendChild(newLabel);
+
+										const removeLink = document.createElement("a");
+										removeLink.className = "delete-tag btn btn-danger px-1";
 										removeLink.dataset["id"] = item.id_tag;
 										removeLink.href = "#";
+										removeLink.innerHTML = \'<i class="bi bi-x"></i>\';
 										removeLink.addEventListener("click", removeTag);
+										newInputGroup.appendChild(removeLink);
 
-										var crossmark = document.createTextNode("❌");
-										removeLink.appendChild(crossmark);
-
-										var newNode = document.createElement("li");
-										newNode.id = "tag-" + item.id_tag;
-										newNode.appendChild(newLink);
-										newNode.appendChild(removeLink);
-
-										var list = document.getElementById("tag_list");
-										list.appendChild(newNode);
+										const list = document.getElementById("', $tagListId, '");
+										list.insertBefore(newListItem, list.querySelector("li:last-child"));
 									}, this);
 							}
 						});