Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

PhotoPage: update and refactor tagging script slightly

Browse Source
This commit is contained in:
Aaron van Geffen 2024-01-11 20:47:41 +01:00
parent 0b010be0b4
commit 9922cd0833
2 changed files with 54 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/css/default.css
View File

@ -526,20 +526,15 @@ a#previous_photo:hover, a#next_photo:hover {
#sub_photo h2, #sub_photo h3, #photo_exif_box h3, #user_actions_box 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 {
display: inline;
padding-right: 0.75em;
}
#tag_list .delete-tag {
opacity: 0.25;
}
#tag_list .delete-tag:hover {
opacity: 1.0;
#sub_photo .tag-list > li {
display: inline-block;
margin-bottom: 0.75em;
margin-right: 0.75em;
}

86
templates/PhotoPage.php
View File

@ -156,9 +156,12 @@ class PhotoPage extends Template
private function printTags($header, $tagKind, $allowLinkingNewTags)
{
static $nextTagListId = 1;
$tagListId = 'tagList' . ($nextTagListId++);
echo '
<h3>', $header, '</h3>
<ul id="tag_list" class="d-flex">';
<ul id="', $tagListId, '" class="tag-list">';
foreach ($this->photo->getTags() as $tag)
{
@ -174,7 +177,7 @@ class PhotoPage extends Template
if ($tag->kind === 'Person')
{
echo '
<a class="btn btn-danger px-1" title="Unlink this tag from this photo" href="#" data-id="', $tag->id_tag, '">
<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>';
}
@ -185,71 +188,80 @@ class PhotoPage extends Template
</li>';
}
static $nextNewTagId = 1;
$newTagId = 'newTag' . ($nextNewTagId++);
if ($allowLinkingNewTags)
$this->linkNewTags();
{
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 '
<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">
setTimeout(function() {
var removeTag = function(event) {
const removeTag = function(event) {
event.preventDefault();
var that = this;
var request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
"id_tag=" + this.dataset["id"] + "&delete", function(response) {
const request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
"id_tag=" + this.dataset["id"] + "&delete", (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");
for (var i = 0; i < tagRemovalTargets.length; i++) {
tagRemovalTargets[i].addEventListener("click", removeTag);
}
let tagRemovalTargets = document.querySelectorAll(".delete-tag");
tagRemovalTargets.forEach(el => el.addEventListener("click", removeTag));
var tag_autosuggest = new TagAutoSuggest({
inputElement: "new_tag",
listElement: "tag_list",
let tag_autosuggest = new TagAutoSuggest({
inputElement: "', $newTagId, '",
listElement: "', $tagListId, '",
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");
appendCallback: (item) => {
const request = new HttpRequest("post", "', $this->photo->getPageUrl(), '",
"id_tag=" + item.id_tag, (response) => {
const newListItem = document.createElement("li");
newListItem.id = "tag-" + item.id_tag;
const newLink = document.createElement("a");
newLink.href = item.url;
newLink.title = "View all posts tagged " + item.label;
newListItem.appendChild(newLink);
var newLabel = document.createTextNode(item.label);
newLink.appendChild(newLabel);
const newInputGroup = document.createElement("div");
newInputGroup.className = "input-group";
newLink.appendChild(newInputGroup);
var removeLink = document.createElement("a");
removeLink.className = "delete-tag";
const newLabel = document.createElement("span");
newLabel.className = "input-group-text";
newLabel.textContent = item.label;
newInputGroup.appendChild(newLabel);
const removeLink = document.createElement("a");
removeLink.className = "delete-tag btn btn-danger px-1";
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("❌");
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);
const list = document.getElementById("', $tagListId, '");
list.insertBefore(newListItem, list.querySelector("li:last-child"));
}, this);
}
});