PhotoPage: fade the tag delete buttons a little

Reviewed-on: #45
Reviewed-by: Bart Schuurmans <bart@minnozz.com>

controllers/ViewPhoto.php

@@ -8,6 +8,8 @@
 
 class ViewPhoto extends HTMLController
 {
+	private Image $photo;
+
 	public function __construct()
 	{
 		// Ensure we're logged in at this point.
@@ -19,44 +21,36 @@ class ViewPhoto extends HTMLController
 		if (empty($photo))
 			throw new NotFoundException();
 
+		$this->photo = $photo->getImage();
+
 		Session::resetSessionToken();
 
-		parent::__construct($photo->getTitle() . ' - ' . SITE_TITLE);
+		parent::__construct($this->photo->getTitle() . ' - ' . SITE_TITLE);
 
 		if (!empty($_POST))
-			$this->handleTagging($photo->getImage());
+			$this->handleTagging();
 		else
-			$this->handleViewPhoto($photo);
+			$this->handleViewPhoto();
 	}
 
-	private function handleViewPhoto(Asset $photo)
+	private function handleViewPhoto()
 	{
-		$page = new PhotoPage($photo->getImage());
+		$page = new PhotoPage($this->photo);
 
-		// Exif data?
+		// Any (EXIF) meta data?
-		$exif = EXIF::fromFile($photo->getFullPath());
+		$metaData = $this->prepareMetaData();
-		if ($exif)
+		$page->setMetaData($metaData);
-			$page->setExif($exif);
 
 		// What tag are we browsing?
 		$tag = isset($_GET['in']) ? Tag::fromId($_GET['in']) : null;
-		$id_tag = isset($tag) ? $tag->id_tag : null;
+		if (isset($tag))
-
+			$page->setTag($tag);
-		// Find previous photo in set.
-		$previous_url = $photo->getUrlForPreviousInSet($id_tag);
-		if ($previous_url)
-			$page->setPreviousPhotoUrl($previous_url);
-
-		// ... and the next photo, too.
-		$next_url = $photo->getUrlForNextInSet($id_tag);
-		if ($next_url)
-			$page->setNextPhotoUrl($next_url);
 
 		$this->page->adopt($page);
-		$this->page->setCanonicalUrl($photo->getPageUrl());
+		$this->page->setCanonicalUrl($this->photo->getPageUrl());
 	}
 
-	private function handleTagging(Image $photo)
+	private function handleTagging()
 	{
 		header('Content-Type: text/json; charset=utf-8');
 
@@ -70,7 +64,7 @@ class ViewPhoto extends HTMLController
 		// We are!
 		if (!isset($_POST['delete']))
 		{
-			$photo->linkTags([(int) $_POST['id_tag']]);
+			$this->photo->linkTags([(int) $_POST['id_tag']]);
 			echo json_encode(['success' => true]);
 			exit;
 		}
@@ -78,9 +72,43 @@ class ViewPhoto extends HTMLController
 		// ... deleting, that is.
 		else
 		{
-			$photo->unlinkTags([(int) $_POST['id_tag']]);
+			$this->photo->unlinkTags([(int) $_POST['id_tag']]);
 			echo json_encode(['success' => true]);
 			exit;
 		}
 	}
+
+	private function prepareMetaData()
+	{
+		if (!($exif = EXIF::fromFile($this->photo->getFullPath())))
+			throw new UnexpectedValueException('Photo file not found!');
+
+		$metaData = [];
+
+		if (!empty($exif->created_timestamp))
+			$metaData['Date Taken'] = date("j M Y, H:i:s", $exif->created_timestamp);
+
+		if ($author = $this->photo->getAuthor())
+			$metaData['Uploaded by'] = $author->getfullName();
+
+		if (!empty($exif->camera))
+			$metaData['Camera Model'] = $exif->camera;
+
+		if (!empty($exif->shutter_speed))
+			$metaData['Shutter Speed'] = $exif->shutterSpeedFraction();
+
+		if (!empty($exif->aperture))
+			$metaData['Aperture'] = 'f/' . number_format($exif->aperture, 1);
+
+		if (!empty($exif->focal_length))
+			$metaData['Focal Length'] = $exif->focal_length . ' mm';
+
+		if (!empty($exif->iso))
+			$metaData['ISO Speed'] = $exif->iso;
+
+		if (!empty($exif->software))
+			$metaData['Software'] = $exif->software;
+
+		return $metaData;
+	}
 }

models/Asset.php

@@ -697,11 +697,11 @@ class Asset
 			$params);
 	}
 
-	public function getUrlForPreviousInSet($id_tag = null)
+	public function getUrlForPreviousInSet(?Tag $tag)
 	{
 		$row = Registry::get('db')->queryAssoc('
 			SELECT a.*
-			' . (isset($id_tag) ? '
+			' . (isset($tag) ? '
 			FROM assets_tags AS t
 			INNER JOIN assets AS a ON a.id_asset = t.id_asset
 			WHERE t.id_tag = {int:id_tag} AND
@@ -715,24 +715,24 @@ class Asset
 			LIMIT 1',
 			[
 				'id_asset' => $this->id_asset,
-				'id_tag' => $id_tag,
+				'id_tag' => $tag->id_tag,
 				'date_captured' => $this->date_captured,
 			]);
 
 		if ($row)
 		{
 			$obj = self::byRow($row, 'object');
-			return $obj->getPageUrl() . ($id_tag ? '?in=' . $id_tag : '');
+			return $obj->getPageUrl() . ($tag ? '?in=' . $tag->id_tag : '');
 		}
 		else
 			return false;
 	}
 
-	public function getUrlForNextInSet($id_tag = null)
+	public function getUrlForNextInSet(?Tag $tag)
 	{
 		$row = Registry::get('db')->queryAssoc('
 			SELECT a.*
-			' . (isset($id_tag) ? '
+			' . (isset($tag) ? '
 			FROM assets_tags AS t
 			INNER JOIN assets AS a ON a.id_asset = t.id_asset
 			WHERE t.id_tag = {int:id_tag} AND
@@ -746,14 +746,14 @@ class Asset
 			LIMIT 1',
 			[
 				'id_asset' => $this->id_asset,
-				'id_tag' => $id_tag,
+				'id_tag' => $tag->id_tag,
 				'date_captured' => $this->date_captured,
 			]);
 
 		if ($row)
 		{
 			$obj = self::byRow($row, 'object');
-			return $obj->getPageUrl() . ($id_tag ? '?in=' . $id_tag : '');
+			return $obj->getPageUrl() . ($tag ? '?in=' . $tag->id_tag : '');
 		}
 		else
 			return false;

models/EXIF.php

@@ -90,7 +90,9 @@ class EXIF
 
 		if (!empty($exif['Model']))
 		{
-			if (!empty($exif['Make']) && strpos($exif['Model'], $exif['Make']) === false)
+			if (strpos($exif['Model'], 'PENTAX') !== false)
+				$meta['camera'] = trim($exif['Model']);
+			elseif (!empty($exif['Make']) && strpos($exif['Model'], $exif['Make']) === false)
 				$meta['camera'] = trim($exif['Make']) . ' ' . trim($exif['Model']);
 			else
 				$meta['camera'] = trim($exif['Model']);

public/css/default.css

@@ -523,38 +523,30 @@ a#previous_photo:hover, a#next_photo:hover {
 	right: 0;
 }
 
-#sub_photo h2, #sub_photo h3, #photo_exif_box h3, #user_actions_box h3 {
+#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 {
+#sub_photo .tag-list > li {
-	display: inline;
+	display: inline-block;
-	padding-right: 0.75em;
+	margin-bottom: 0.75em;
+	margin-right: 0.75em;
 }
-#tag_list .delete-tag {
+#sub_photo .tag-list .input-group-text {
-	opacity: 0.25;
+	color: inherit;
 }
-#tag_list .delete-tag:hover {
+[data-bs-theme=light] #sub_photo .tag-list .btn-danger {
-	opacity: 1.0;
+	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 {
-#photo_exif_box dt {
+	background-color: rgba(100, 0, 0, 0.5);
-	font-weight: bold;
+	border-color: rgb(100, 0, 0);
-	float: left;
-	clear: left;
-	width: 120px;
-}
-#photo_exif_box dt:after {
-	content: ':';
-}
-#photo_exif_box dd {
-	float: left;
-	margin: 0;
 }
 
 
@@ -583,13 +575,6 @@ a#previous_photo:hover, a#next_photo:hover {
 	#previous_photo, #next_photo {
 		display: none;
 	}
-
-	#sub_photo, #photo_exif_box {
-		float: none;
-		margin: 30px 0;
-		padding: 10px;
-		width: auto;
-	}
 }
 
 

templates/PhotoPage.php

@@ -8,26 +8,15 @@
 
 class PhotoPage extends Template
 {
-	protected $photo;
+	private $photo;
-	private $exif;
+	private $metaData;
-	private $previous_photo_url = '';
+	private $tag;
-	private $next_photo_url = '';
 
 	public function __construct(Image $photo)
 	{
 		$this->photo = $photo;
 	}
 
-	public function setPreviousPhotoUrl($url)
-	{
-		$this->previous_photo_url = $url;
-	}
-
-	public function setNextPhotoUrl($url)
-	{
-		$this->next_photo_url = $url;
-	}
-
 	public function html_main()
 	{
 		$this->photoNav();
@@ -35,20 +24,23 @@ class PhotoPage extends Template
 
 		echo '
 				<div class="row mt-5">
-					<div class="col-lg-8">
+					<div class="col-lg-9">
-						<div id="sub_photo" class="content-box">
+						<div id="sub_photo" class="content-box">';
+
+		$this->userActions();
+
+		echo '
 							<h2 class="entry-title">', $this->photo->getTitle(), '</h2>';
 
-		$this->taggedPeople();
+		$this->printTags('Album', 'Album', false);
-		$this->linkNewTags();
+		$this->printTags('Tagged People', 'Person', true);
 
 		echo '
 						</div>
 					</div>
-					<div class="col-lg-4">';
+					<div class="col-lg-3">';
 
 		$this->photoMeta();
-		$this->userActions();
 
 		echo '
 					</div>
@@ -86,18 +78,23 @@ class PhotoPage extends Template
 				</a>';
 	}
 
+	public function setTag(Tag $tag)
+	{
+		$this->tag = $tag;
+	}
+
 	private function photoNav()
 	{
-		if ($this->previous_photo_url)
+		if ($previousUrl = $this->photo->getUrlForPreviousInSet($this->tag))
 			echo '
-				<a href="', $this->previous_photo_url, '#photo_frame" id="previous_photo"><i class="bi bi-arrow-left"></i></a>';
+				<a href="', $previousUrl, '#photo_frame" id="previous_photo"><i class="bi bi-arrow-left"></i></a>';
 		else
 			echo '
 				<span id="previous_photo"><i class="bi bi-arrow-left"></i></span>';
 
-		if ($this->next_photo_url)
+		if ($nextUrl = $this->photo->getUrlForNextInSet($this->tag))
 			echo '
-				<a href="', $this->next_photo_url, '#photo_frame" id="next_photo"><i class="bi bi-arrow-right"></i></a>';
+				<a href="', $nextUrl, '#photo_frame" id="next_photo"><i class="bi bi-arrow-right"></i></a>';
 		else
 			echo '
 				<span id="next_photo"><i class="bi bi-arrow-right"></i></span>';
@@ -106,139 +103,126 @@ class PhotoPage extends Template
 	private function photoMeta()
 	{
 		echo '
-				<div id="photo_exif_box" class="content-box clearfix">
+				<ul class="list-group photo_meta">';
-					<h3>EXIF</h3>
-					<dl class="photo_meta">';
 
-		if (!empty($this->exif->created_timestamp))
+		foreach ($this->metaData as $header => $body)
+		{
 			echo '
-						<dt>Date Taken</dt>
+					<li class="list-group-item">
-						<dd>', date("j M Y, H:i:s", $this->exif->created_timestamp), '</dd>';
+						<h4>', $header, '</h4>
+						', $body, '
+					</li>';
+		}
 
 		echo '
-						<dt>Uploaded by</dt>
+				</ul>';
-						<dd>', $this->photo->getAuthor()->getfullName(), '</dd>';
-
-		if (!empty($this->exif->camera))
-			echo '
-						<dt>Camera Model</dt>
-						<dd>', $this->exif->camera, '</dd>';
-
-		if (!empty($this->exif->shutter_speed))
-			echo '
-						<dt>Shutter Speed</dt>
-						<dd>', $this->exif->shutterSpeedFraction(), '</dd>';
-
-		if (!empty($this->exif->aperture))
-			echo '
-						<dt>Aperture</dt>
-						<dd>f/', number_format($this->exif->aperture, 1), '</dd>';
-
-		if (!empty($this->exif->focal_length))
-			echo '
-						<dt>Focal Length</dt>
-						<dd>', $this->exif->focal_length, ' mm</dd>';
-
-		if (!empty($this->exif->iso))
-			echo '
-						<dt>ISO Speed</dt>
-						<dd>', $this->exif->iso, '</dd>';
-
-		if (!empty($this->exif->software))
-			echo '
-						<dt>Software</dt>
-						<dd>', $this->exif->software, '</dd>';
-
-		echo '
-					</dl>
-				</div>';
 	}
 
-	private function taggedPeople()
+	private function printTags($header, $tagKind, $allowLinkingNewTags)
 	{
+		static $nextTagListId = 1;
+		$tagListId = 'tagList' . ($nextTagListId++);
+
 		echo '
-					<h3>Tags</h3>
+					<h3>', $header, '</h3>
-					<ul id="tag_list">';
+					<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;
+							const request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
-							var request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
+								"id_tag=" + this.dataset["id"] + "&delete", (response) => {
-								"id_tag=" + this.dataset["id"] + "&delete", function(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");
+						let tagRemovalTargets = document.querySelectorAll(".delete-tag");
-						for (var i = 0; i < tagRemovalTargets.length; i++) {
+						tagRemovalTargets.forEach(el => el.addEventListener("click", removeTag));
-							tagRemovalTargets[i].addEventListener("click", removeTag);
-						}
 
-						var tag_autosuggest = new TagAutoSuggest({
+						let tag_autosuggest = new TagAutoSuggest({
-							inputElement: "new_tag",
+							inputElement: "', $newTagId, '",
-							listElement: "tag_list",
+							listElement: "', $tagListId, '",
 							baseUrl: "', BASEURL, '",
-							appendCallback: function(item) {
+							appendCallback: (item) => {
-								var request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
+								const request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
-									"id_tag=" + item.id_tag, function(response) {
+									"id_tag=" + item.id_tag, (response) => {
-										var newLink = document.createElement("a");
+										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);
+										const removeLink = document.createElement("a");
-										newLink.appendChild(newLabel);
+										removeLink.className = "delete-tag btn btn-danger px-1";
-
-										var removeLink = document.createElement("a");
-										removeLink.className = "delete-tag";
 										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("❌");
+										const list = document.getElementById("', $tagListId, '");
-										removeLink.appendChild(crossmark);
+										list.insertBefore(newListItem, list.querySelector("li:last-child"));
-
-										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);
 									}, this);
 							}
 						});
@@ -246,9 +230,9 @@ class PhotoPage extends Template
 				</script>';
 	}
 
-	public function setExif(EXIF $exif)
+	public function setMetaData(array $metaData)
 	{
-		$this->exif = $exif;
+		$this->metaData = $metaData;
 	}
 
 	public function userActions()
@@ -257,13 +241,13 @@ class PhotoPage extends Template
 			return;
 
 		echo '
-				<div id="user_actions_box" class="content-box">
+				<div class="float-end">
-					<h3>Actions</h3>
+					<a class="btn btn-primary" href="', $this->photo->getEditUrl(), '">
-					<a class="btn btn-primary" href="', $this->photo->getEditUrl(), '">Edit photo</a>
+						<i class="bi bi-pencil"></i> Edit</a>
 					<a class="btn btn-danger" href="', $this->photo->getDeleteUrl(), '&',
 						Session::getSessionTokenKey(), '=', Session::getSessionToken(),
 						'" onclick="return confirm(\'Are you sure you want to delete this photo?\');"',
-						'">Delete photo</a>
+						'"><i class="bi bi-pencil"></i> Delete</a></a>
 				</div>';
 	}
 }