Change how tags are displayed on photo page #46

Merged
minnozz merged 4 commits from tag-list into master 2024-01-13 17:28:10 +01:00
Showing only changes of commit b13701f7c0 - Show all commits

View File

@ -32,8 +32,8 @@ class PhotoPage extends Template
echo '
<h2 class="entry-title">', $this->photo->getTitle(), '</h2>';
$this->taggedPeople();
$this->linkNewTags();
$this->printTags('Album', 'Album', false);
$this->printTags('Tagged People', 'Person', true);
echo '
</div>
@ -118,26 +118,40 @@ class PhotoPage extends Template
</ul>';
}
private function taggedPeople()
private function printTags($header, $tagKind, $allowLinkingNewTags)
{
echo '
<h3>Tags</h3>
<ul id="tag_list">';
<h3>', $header, '</h3>
<ul id="tag_list" class="d-flex">';
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>';
<a href="', $tag->getUrl(), '" title="View all posts tagged ', $tag->tag, '">
<div class="input-group">
<span class="input-group-text">', $tag->tag, '</span>';
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="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>
</a>
</li>';
}
if ($allowLinkingNewTags)
$this->linkNewTags();
echo '
</ul>';
}
@ -145,12 +159,9 @@ class PhotoPage extends Template
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>
<li style="position: relative">
<input class="form-control w-auto" type="text" id="new_tag" placeholder="Type to link a new tag">
</li>
<script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script>
<script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script>
<script type="text/javascript">