pics/templates/PhotoPage.php

<?php
/*****************************************************************************
 * PhotoPage.php
 * Contains the photo page template.
 *
 * Kabuki CMS (C) 2013-2016, Aaron van Geffen
 *****************************************************************************/

class PhotoPage extends Template
{
	private $photo;
	private $metaData;
	private $tag;

	public function __construct(Image $photo)
	{
		$this->photo = $photo;
	}

	public function html_main()
	{
		$this->photoNav();
		$this->photo();

		echo '
				<div class="row mt-5">
					<div class="col-lg-9">
						<div id="sub_photo" class="content-box">';

		$this->userActions();

		echo '
							<h2 class="entry-title">', $this->photo->getTitle(), '</h2>';

		$this->taggedPeople();
		$this->linkNewTags();

		echo '
						</div>
					</div>
					<div class="col-lg-3">';

		$this->photoMeta();

		echo '
					</div>
				</div>
				<script type="text/javascript" src="', BASEURL, '/js/photonav.js"></script>';
	}

	protected function photo()
	{
		echo '
				<a href="', $this->photo->getUrl(), '">
					<div id="photo_frame">';

		if ($this->photo->isPortrait())
		{
			echo '
						<figure id="photo-figure" class="portrait-figure">',
				$this->photo->getInlineImage(null, 960, 'normal-photo'),
				$this->photo->getInlineImage(null, 960, 'blur-photo'), '
						</figure>';
		}
		else
		{
			$className = $this->photo->isPanorama() ? 'panorama-figure' : 'landscape-figure';
			echo '
						<figure id="photo-figure" class="', $className, '">',
				$this->photo->getInlineImage(1280, null, 'normal-photo'),
				$this->photo->getInlineImage(1280, null, 'blur-photo'), '
						</figure>';
		}

		echo '
						</figure>
					</div>
				</a>';
	}

	public function setTag(Tag $tag)
	{
		$this->tag = $tag;
	}

	private function photoNav()
	{
		if ($previousUrl = $this->photo->getUrlForPreviousInSet($this->tag))
			echo '
				<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 ($nextUrl = $this->photo->getUrlForNextInSet($this->tag))
			echo '
				<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>';
	}

	private function photoMeta()
	{
		echo '
				<ul class="list-group photo_meta">';

		foreach ($this->metaData as $header => $body)
		{
			echo '
					<li class="list-group-item">
						<h4>', $header, '</h4>
						', $body, '
					</li>';
		}

		echo '
				</ul>';
	}

	private function taggedPeople()
	{
		echo '
					<h3>Tags</h3>
					<ul id="tag_list">';

		foreach ($this->photo->getTags() as $tag)
		{
			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>';

			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>';
		}

		echo '
					</ul>';
	}

	private function linkNewTags()
	{
		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) {
							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");
						for (var i = 0; i < tagRemovalTargets.length; i++) {
							tagRemovalTargets[i].addEventListener("click", removeTag);
						}

						var tag_autosuggest = new TagAutoSuggest({
							inputElement: "new_tag",
							listElement: "tag_list",
							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");
										newLink.href = item.url;

										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);
									}, this);
							}
						});
					}, 100);
				</script>';
	}

	public function setMetaData(array $metaData)
	{
		$this->metaData = $metaData;
	}

	public function userActions()
	{
		if (!$this->photo->isOwnedBy(Registry::get('user')))
			return;

		echo '
				<div class="float-end">
					<a class="btn btn-primary" href="', $this->photo->getEditUrl(), '">
						<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?\');"',
						'"><i class="bi bi-pencil"></i> Delete</a></a>
				</div>';
	}
}