From f96ab144ef17abc3f5fd31dbbd45f6f699a1e595 Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Sun, 4 Sep 2016 11:23:08 +0200
Subject: [PATCH] WIP: adding tags to photos.

---
 templates/PhotoPage.php | 45 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/templates/PhotoPage.php b/templates/PhotoPage.php
index 9ee2a09..2499bcb 100644
--- a/templates/PhotoPage.php
+++ b/templates/PhotoPage.php
@@ -26,6 +26,7 @@ class PhotoPage extends SubTemplate
 					<h2 class="entry-title">', $this->photo->getTitle(), '</h2>';
 
 		$this->taggedPeople();
+		$this->linkNewTags();
 
 		echo '
 				</div>';
@@ -131,6 +132,50 @@ class PhotoPage extends SubTemplate
 					</ul>';
 	}
 
+	private function linkNewTags()
+	{
+		echo '
+				<div>
+					<h3>Link tags</h3>
+					<ul id="tag_list">
+						<li id="new_tag_container"><input type="text" id="new_tag" placeholder="Type to link a new tag"></li>
+					</ul>
+				</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 tag_autosuggest = new TagAutoSuggest({
+							inputElement: "new_tag",
+							listElement: "tag_list",
+							baseUrl: "', BASEURL, '",
+							appendCallback: function(item) {
+								if (document.getElementById("linked_tag_" + item.id_tag)) {
+									return;
+								}
+
+								var newCheck = document.createElement("input");
+								newCheck.type = "checkbox";
+								newCheck.name = "tag[" + item.id_tag + "]";
+								newCheck.id = "linked_tag_" + item.id_tag;
+								newCheck.title = "Uncheck to delete";
+								newCheck.checked = "checked";
+
+								var newNode = document.createElement("li");
+								newNode.appendChild(newCheck);
+
+								var newLabel = document.createTextNode(item.label);
+								newNode.appendChild(newLabel);
+
+								var list = document.getElementById("tag_list");
+								var input = document.getElementById("new_tag_container");
+								list.insertBefore(newNode, input);
+							}
+						});
+					}, 100);
+				</script>';
+	}
+
 	public function setExif(EXIF $exif)
 	{
 		$this->exif = $exif;