Allow regular users to unlink tags from photos.

controllers/ViewPhoto.php

@@ -98,8 +98,19 @@ class ViewPhoto extends HTMLController
 		}
 
 		// We are!
-		$photo->linkTags([(int) $_POST['id_tag']]);
+		if (!isset($_POST['delete']))
-		echo json_encode(['success' => true]);
+		{
-		exit;
+			$photo->linkTags([(int) $_POST['id_tag']]);
+			echo json_encode(['success' => true]);
+			exit;
+		}
+
+		// ... deleting, that is.
+		else
+		{
+			$photo->unlinkTags([(int) $_POST['id_tag']]);
+			echo json_encode(['success' => true]);
+			exit;
+		}
 	}
 }

public/css/default.css

@@ -588,14 +588,16 @@ a#previous_photo:hover, a#next_photo:hover {
 }
 #sub_photo #tag_list li {
 	display: inline;
+	padding-right: 0.75em;
 }
-#sub_photo #tag_list li:after {
+#tag_list .delete-tag {
-	content: ', ';
+	opacity: 0.25;
 }
-#sub_photo #tag_list li:last-child:after {
+#tag_list .delete-tag:hover {
-	content: '';
+	opacity: 1.0;
 }
 
+
 #photo_exif_box {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

templates/PhotoPage.php

@@ -148,8 +148,14 @@ class PhotoPage extends SubTemplate
 		foreach ($this->photo->getTags() as $tag)
 		{
 			echo '
-						<li>
+						<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>
+							<a rel="tag" title="View all posts tagged ', $tag->tag, '" href="', $tag->getUrl(), '" class="entry-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>';
+
+			echo '
 						</li>';
 		}
 
@@ -168,6 +174,28 @@ class PhotoPage extends SubTemplate
 				<script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script>
 				<script type="text/javascript">
 					setTimeout(function() {
+						var removeTag = function(event) {
+							event.preventDefault();
+							console.log(this);
+							console.log("Supposed to remove tag " + this.dataset["id"]);
+
+							var that = this;
+							var request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
+								"id_tag=" + this.dataset["id"] + "&delete", function(response) {
+									if (!response.success) {
+										return;
+									}
+
+									var tagNode = document.getElementById("tag-" + that.dataset["id"]);
+									tagNode.parentNode.removeChild(tagNode);
+								});
+						};
+
+						var tagRemovalTargets = document.getElementsByClassName("delete-tag");
+						Array.forEach(tagRemovalTargets, function(el) {
+							el.addEventListener("click", removeTag);
+						});
+
 						var tag_autosuggest = new TagAutoSuggest({
 							inputElement: "new_tag",
 							listElement: "tag_list",
@@ -181,8 +209,19 @@ class PhotoPage extends SubTemplate
 										var newLabel = document.createTextNode(item.label);
 										newLink.appendChild(newLabel);
 
+										var removeLink = document.createElement("a");
+										removeLink.className = "delete-tag";
+										removeLink.dataset["id"] = item.id_tag;
+										removeLink.href = "#";
+										removeLink.addEventListener("click", removeTag);
+
+										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);