pics/templates/EditAssetForm.php
Dennis Brentjes 16ec547064 Changes the ConfirmDelete page and updates database code.
The ConfirmDelete page now uses parts of the photopage. The
Confirmation dialog is its own template which is based on Alert.

The database now updates the album thumb to the most recent
addition to the album, when the album thumb asset is being deleted.
When there are no pictures left in the album 0 will be set.
2018-07-13 23:00:36 +02:00

297 lines
8.2 KiB
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">';
foreach ($this->thumbs as $thumb)
{
if (!$thumb['status'])
continue;
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[0]['url'], '" target="_blank">
<img id="thumbnail" src="', $this->thumbs[0]['url'], '" alt="Thumbnail" style="width: 100%; height: auto;">
</a>
</div>
<script type="text/javascript">
setTimeout(function() {
document.getElementById("thumbnail_src").addEventListener("change", function(event) {
var selection = event.target.options[event.target.selectedIndex];
document.getElementById("thumbnail_link").href = selection.dataset.url;
document.getElementById("thumbnail").src = selection.dataset.url;
});
}, 100);
</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">
setTimeout(function() {
var 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: "drag_target",
asset_id: ', $this->asset->getId(), ',
after_save: function(data) {
// Update thumbnail
document.getElementById("thumbnail").src = data.url + "?" + (new Date()).getTime();
// Update select
var src = document.getElementById("thumbnail_src");
src.options[src.selectedIndex].dataset.crop_region = data.value;
// TODO: update meta
}
});
}, 100);
</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)
{
if (!$thumb['status'])
continue;
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>';
}
}