Merge branch 'tag-improvements' of Public/pics into master

controllers/ProvideAutoSuggest.php

@@ -41,8 +41,9 @@ class ProvideAutoSuggest extends JSONController
 			$results = Tag::matchPeople($data);
 			foreach ($results as $id_tag => $tag)
 				$this->payload['items'][] = [
-					'label' => $tag,
+					'label' => $tag['tag'],
 					'id_tag' => $id_tag,
+					'url' => BASEURL . '/' . $tag['slug'] . '/',
 				];
 		}
 	}

controllers/ViewPhoto.php

@@ -98,8 +98,19 @@ class ViewPhoto extends HTMLController
 		}
 
 		// We are!
-		$photo->linkTags([(int) $_POST['id_tag']]);
-		echo json_encode(['success' => true]);
-		exit;
+		if (!isset($_POST['delete']))
+		{
+			$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;
+		}
 	}
 }

models/Tag.php

@@ -335,8 +335,8 @@ class Tag
 		if (!is_array($tokens))
 			$tokens = explode(' ', $tokens);
 
-		return Registry::get('db')->queryPair('
-			SELECT id_tag, tag
+		return Registry::get('db')->queryPairs('
+			SELECT id_tag, tag, slug
 			FROM tags
 			WHERE LOWER(tag) LIKE {string:tokens} AND
 				kind = {string:person}

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 {
-	content: ', ';
+#tag_list .delete-tag {
+	opacity: 0.25;
 }
-#sub_photo #tag_list li:last-child:after {
-	content: '';
+#tag_list .delete-tag:hover {
+	opacity: 1.0;
 }
 
+
 #photo_exif_box {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

public/js/autosuggest.js

@@ -158,8 +158,6 @@ TagAutoSuggest.prototype.fillContainer = function(response) {
         var self = this;
         node.addEventListener('click', function(event) {
             self.createNewTag(function(response) {
-                console.log('Nieuwe tag!!');
-                console.log(response);
                 self.appendCallback(response);
             });
             self.closeContainer();

templates/PhotoPage.php

@@ -148,8 +148,14 @@ class PhotoPage extends SubTemplate
 		foreach ($this->photo->getTags() as $tag)
 		{
 			echo '
-						<li>
-							<a rel="tag" title="View all posts tagged ', $tag->tag, '" href="', $tag->getUrl(), '" class="entry-tag">', $tag->tag, '</a>
+						<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>';
+
+			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,25 @@ 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();
+							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",
@@ -175,9 +200,25 @@ class PhotoPage extends SubTemplate
 							appendCallback: function(item) {
 								var request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
 									"id_tag=" + item.id_tag, function(response) {
-										var newNode = document.createElement("li");
+										var newLink = document.createElement("a");
+										newLink.href = item.url;
+
 										var newLabel = document.createTextNode(item.label);
-										newNode.appendChild(newLabel);
+										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);