pics/templates/EditAssetForm.php

<?php
/*****************************************************************************
 * EditAssetForm.php
 * Contains the edit asset template.
 *
 * Kabuki CMS (C) 2013-2015, Aaron van Geffen
 *****************************************************************************/

class EditAssetForm extends SubTemplate
{
	private $asset;
	private $thumbs;

	public function __construct(Asset $asset, array $thumbs = [])
	{
		$this->asset = $asset;
		$this->thumbs = $thumbs;
	}

	protected function html_content()
	{
		echo '
			<form id="asset_form" action="" method="post" enctype="multipart/form-data">
				<div class="boxed_content" style="margin-bottom: 2%">
					<div style="float: right">
						<a class="btn btn-red" href="', BASEURL, '/', $this->asset->getSlug(), '?delete_confirmed">Delete asset</a>
						<input type="submit" value="Save asset data">
					</div>
					<h2>Edit asset \'', $this->asset->getTitle(), '\' (', $this->asset->getFilename(), ')</h2>
				</div>';

		$this->section_replace();

		echo '
				<div style="float: left; width: 60%; margin-right: 2%">';

		$this->section_key_info();
		$this->section_asset_meta();

		echo '
				</div>
				<div style="float: left; width: 38%;">';

		if (!empty($this->thumbs))
			$this->section_thumbnails();

		$this->section_linked_tags();

		echo '
				</div>';

		$this->section_crop_editor();

		echo '
			</form>';
	}

	protected function section_key_info()
	{
		$date_captured = $this->asset->getDateCaptured();
		echo '
				<div class="widget key_info">
					<h3>Key info</h3>
					<dl>
						<dt>Title</dt>
						<dd><input type="text" name="title" maxlength="255" size="70" value="', $this->asset->getTitle(), '">

						<dt>URL slug</dt>
						<dd><input type="text" name="slug" maxlength="255" size="70" value="', $this->asset->getSlug(), '">

						<dt>Date captured</dt>
						<dd><input type="text" name="date_captured" size="30" value="',
							$date_captured ? $date_captured->format('Y-m-d H:i:s') : '', '" placeholder="Y-m-d H:i:s">

						<dt>Display priority</dt>
						<dd><input type="number" name="priority" min="0" max="100" step="1" value="', $this->asset->getPriority(), '">
					</dl>
				</div>';
	}

	protected function section_linked_tags()
	{
		echo '
				<div class="widget linked_tags" style="margin-top: 2%">
					<h3>Linked tags</h3>
					<ul id="tag_list">';

		foreach ($this->asset->getTags() as $tag)
				echo '
						<li>
							<input class="tag_check" type="checkbox" name="tag[', $tag->id_tag, ']" id="linked_tag_', $tag->id_tag, '" title="Uncheck to delete" checked>
							', $tag->tag, '
						</li>';

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

	protected function section_thumbnails()
	{
		echo '
				<div class="widget linked_thumbs">
					<h3>Thumbnails</h3>
					View: <select id="thumbnail_src">';

		$first = INF;
		foreach ($this->thumbs as $i => $thumb)
		{
			$first = min($i, $first);

			echo '
						<option data-url="', $thumb['url'], '" data-crop_width="', $thumb['dimensions'][0], '" data-crop_height="', $thumb['dimensions'][1], '"',
							isset($thumb['crop_method']) ? ' data-crop_method="' . $thumb['crop_method'] . '"' : '',
							isset($thumb['crop_region']) ? ' data-crop_region="' . $thumb['crop_region'] . '"' : '', '>
							', implode('x', $thumb['dimensions']);

			if ($thumb['cropped'])
			{
				echo ' (';
				switch ($thumb['crop_method'])
				{
					case 'b': echo 'bottom'; break;
					case 'e': echo 'exact'; break;
					case 's': echo 'slice'; break;
					case 't': echo 'top'; break;
					default: echo 'centre'; break;
				}
				echo ' crop)';
			}
			elseif ($thumb['custom_image'])
				echo ' (custom)';

			echo '
						</option>';
		}

		echo '
					</select>
					<a id="thumbnail_link" href="', $this->thumbs[$first]['url'], '" target="_blank">
						<img id="thumbnail" src="', $this->thumbs[$first]['url'], '" alt="Thumbnail" style="width: 100%; height: auto;">
					</a>
				</div>
				<script type="text/javascript" defer="defer">
					document.getElementById("thumbnail_src").addEventListener("change", event => {
						let selection = event.target.options[event.target.selectedIndex];
						document.getElementById("thumbnail_link").href = selection.dataset.url;
						document.getElementById("thumbnail").src = selection.dataset.url;
					});
				</script>';
	}

	protected function section_crop_editor()
	{
		if (!$this->asset->isImage())
			return;

		echo '
				<script type="text/javascript" src="', BASEURL, '/js/crop_editor.js"></script>
				<script type="text/javascript" defer="defer">
					let editor = new CropEditor({
						submit_url: "', BASEURL, '/editasset/",
						original_image_src: "', $this->asset->getUrl(), '",
						editor_container_parent_id: "asset_form",
						thumbnail_select_id: "thumbnail_src",
						drag_target: ".crop_image_container",
						asset_id: ', $this->asset->getId(), ',
						after_save: function(data) {
							// Update thumbnail
							document.getElementById("thumbnail").src = data.url + "?" + (new Date()).getTime();

							// Update select
							let src = document.getElementById("thumbnail_src");
							let option = src.options[src.selectedIndex];
							option.dataset.crop_region = data.value;
							option.textContent = option.textContent.replace(/top|bottom|centre|slice/, "exact");

							// TODO: update meta
						}
					});
				</script>';
	}

	protected function section_asset_meta()
	{
		echo '
				<div class="widget asset_meta" style="margin-top: 2%">
					<h3>Asset meta data</h3>
					<ul>';

		$i = -1;
		foreach ($this->asset->getMeta() as $key => $meta)
		{
			$i++;
			echo '
						<li>
							<input type="text" name="meta_key[', $i, ']" value="', htmlentities($key), '">
							<input type="text" name="meta_value[', $i, ']" value="', htmlentities($meta), '">
						</li>';
		}

		echo '
						<li>
							<input type="text" name="meta_key[', $i + 1, ']" value="">
							<input type="text" name="meta_value[', $i + 1, ']" value="">
						</li>
					</ul>
					<p><input type="submit" value="Save metadata"></p>
				</div>';
	}

	protected function section_replace()
	{
		echo '
				<div class="widget replace_asset" style="margin-bottom: 2%; display: block">
					<h3>Replace asset</h3>
					File: <input type="file" name="replacement">
					Target: <select name="replacement_target">
						<option value="full">master file</option>';

		foreach ($this->thumbs as $thumb)
		{
			echo '
						<option value="thumb_', implode('x', $thumb['dimensions']);

			if ($thumb['cropped'])
				echo $thumb['crop_method'] === 'c' ? '_c' : '_c' . $thumb['crop_method'];

			echo '">
							thumbnail (', implode('x', $thumb['dimensions']);

			if ($thumb['cropped'])
			{
				echo ', ';
				switch ($thumb['crop_method'])
				{
					case 'b': echo 'bottom'; break;
					case 'e': echo 'exact'; break;
					case 's': echo 'slice'; break;
					case 't': echo 'top'; break;
					default: echo 'centre'; break;
				}
				echo ' crop';
			}
			elseif ($thumb['custom_image'])
				echo ', custom';

			echo ')
						</option>';
		}

		echo '
					</select>
					<input type="submit" value="Save asset">
				</div>';
	}
}