PhotoPage: fade the tag delete buttons a little

public/css/default.css

@@ -526,22 +526,28 @@ a#previous_photo:hover, a#next_photo:hover {
 #sub_photo h2, #sub_photo h3, #photo_exif_box h3, #user_actions_box 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;
+#sub_photo .tag-list > li {
+	display: inline-block;
+	margin-bottom: 0.75em;
+	margin-right: 0.75em;
 }
-#tag_list .delete-tag {
-	opacity: 0.25;
+#sub_photo .tag-list .input-group-text {
+	color: inherit;
 }
-#tag_list .delete-tag:hover {
-	opacity: 1.0;
+[data-bs-theme=light] #sub_photo .tag-list .btn-danger {
+	background-color: rgba(175, 0, 0, 0.5);
+	border-color: rgba(175, 0, 0, 0.5);
 }
 
+[data-bs-theme=dark] #sub_photo .tag-list .btn-danger {
+	background-color: rgba(100, 0, 0, 0.5);
+	border-color: rgb(100, 0, 0);
+}
 
 #photo_exif_box dt {
 	font-weight: bold;

templates/PhotoPage.php

@@ -39,8 +39,8 @@ class PhotoPage extends Template
 						<div id="sub_photo" class="content-box">
 							<h2 class="entry-title">', $this->photo->getTitle(), '</h2>';
 
-		$this->taggedPeople();
-		$this->linkNewTags();
+		$this->printTags('Album', 'Album', false);
+		$this->printTags('Tagged People', 'Person', true);
 
 		echo '
 						</div>
@@ -154,91 +154,111 @@ class PhotoPage extends Template
 				</div>';
 	}
 
-	private function taggedPeople()
+	private function printTags($header, $tagKind, $allowLinkingNewTags)
 	{
+		static $nextTagListId = 1;
+		$tagListId = 'tagList' . ($nextTagListId++);
+
 		echo '
-					<h3>Tags</h3>
-					<ul id="tag_list">';
+					<h3>', $header, '</h3>
+					<ul id="', $tagListId, '" class="tag-list">';
 
 		foreach ($this->photo->getTags() as $tag)
 		{
+			if ($tag->kind !== $tagKind)
+				continue;
+
 			echo '
 						<li id="tag-', $tag->id_tag, '">
-							<a rel="tag" title="View all posts tagged ', $tag->tag, '" href="', $tag->getUrl(), '" class="entry-tag">', $tag->tag, '</a>';
+							<div class="input-group">
+								<a class="input-group-text" href="', $tag->getUrl(), '" title="View all posts tagged ', $tag->tag, '">
+									', $tag->tag, '
+								</a>';
 
 			if ($tag->kind === 'Person')
+			{
 				echo '
-							<a class="delete-tag" title="Unlink this tag from this photo" href="#" data-id="', $tag->id_tag, '">❌</a>';
+								<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>';
+			}
 
 			echo '
+							</div>
+						</li>';
+		}
+
+		static $nextNewTagId = 1;
+		$newTagId = 'newTag' . ($nextNewTagId++);
+
+		if ($allowLinkingNewTags)
+		{
+			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 '
-				<div>
-					<h3>Link tags</h3>
-					<p style="position: relative">
-						<input class="form-control w-auto" type="text" id="new_tag" placeholder="Type to link a new tag">
-					</p>
-				</div>
 				<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 newInputGroup = document.createElement("div");
+										newInputGroup.className = "input-group";
+										newListItem.appendChild(newInputGroup);
+
+										const newLink = document.createElement("a");
+										newLink.className = "input-group-text";
 										newLink.href = item.url;
+										newLink.title = "View all posts tagged " + item.label;
+										newLink.textContent = item.label;
+										newInputGroup.appendChild(newLink);
 
-										var newLabel = document.createTextNode(item.label);
-										newLink.appendChild(newLabel);
-
-										var removeLink = document.createElement("a");
-										removeLink.className = "delete-tag";
+										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);
 							}
 						});