sorogon/StaticGalleryBuilder
1
0
Fork 0
mirror of https://github.com/greflm13/StaticGalleryBuilder.git synced 2026-02-05 02:59:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed tag render in title

Browse Source
This commit is contained in:
Flo Greistorfer
2025-09-29 17:33:56 +02:00
parent d094cd6683
commit a67968d222
1 changed files with 98 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
templates/functionality.js
View File

@@ -38,7 +38,12 @@ class PhotoGallery {
openSwipe(imgIndex) {
const options = { index: imgIndex };
const gallery = new PhotoSwipe(this.pswpElement, PhotoSwipeUI_Default, this.shown, options);
const gallery = new PhotoSwipe(
this.pswpElement,
PhotoSwipeUI_Default,
this.shown,
options
);
gallery.init();
}
@@ -73,7 +78,9 @@ class PhotoGallery {
if (folders) folders.style.display = "";
document.getElementById("recursive").checked = false;
document.querySelectorAll("#tagdropdown input.tagcheckbox:checked").forEach((checkbox) => (checkbox.checked = false));
document
.querySelectorAll("#tagdropdown input.tagcheckbox:checked")
.forEach((checkbox) => (checkbox.checked = false));
window.history.replaceState({ html: content, pageTitle: title }, "", path);
this.requestMetadata();
}
@@ -143,7 +150,8 @@ class PhotoGallery {
existingItems.add(image.src);
}
}
if (Array.isArray(data.subfolders)) nextLevel.push(...data.subfolders);
if (Array.isArray(data.subfolders))
nextLevel.push(...data.subfolders);
} catch {}
})
);
@@ -186,15 +194,21 @@ class PhotoGallery {
filter() {
const searchParams = new URLSearchParams(window.location.search);
this.shown = [];
let path = decodeURIComponent(window.location.origin + window.location.pathname.replace("index.html", ""));
let path = decodeURIComponent(
window.location.origin +
window.location.pathname.replace("index.html", "")
);
if (path.startsWith("null")) {
path = window.location.protocol + "//" + path.substring(4);
}
const selectedTags = [];
document.querySelectorAll("#tagdropdown input.tagcheckbox:checked").forEach((checkbox) => {
document
.querySelectorAll("#tagdropdown input.tagcheckbox:checked")
.forEach((checkbox) => {
let tag = checkbox.parentElement.id.trim().substring(1);
if (checkbox.parentElement.parentElement.children.length > 1) tag += "|";
if (checkbox.parentElement.parentElement.children.length > 1)
tag += "|";
selectedTags.push(tag);
});
@@ -202,14 +216,17 @@ class PhotoGallery {
let isRecursiveChecked = false;
try {
isRecursiveChecked = document.getElementById("recursive")?.checked || false;
isRecursiveChecked =
document.getElementById("recursive")?.checked || false;
} catch {}
for (const item of this.items) {
const tags = item.tags || [];
const include = selectedTags.every((selected) => {
const isParent = selected.endsWith("|");
return isParent ? tags.some((t) => t.startsWith(selected)) : tags.includes(selected);
return isParent
? tags.some((t) => t.startsWith(selected))
: tags.includes(selected);
});
if (include || selectedTags.length === 0) {
@@ -235,12 +252,18 @@ class PhotoGallery {
let current = obj;
for (let i = 0; i < path.length; i++) {
const part = path[i];
if (i === path.length - 1) {
if (!current[part]) {
current[part] = null;
}
} else {
if (!current[part] || typeof current[part] !== "object") {
current[part] = {};
}
current = current[part];
}
}
}
finalize(obj) {
if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
@@ -248,7 +271,11 @@ class PhotoGallery {
Object.keys(obj)
.sort()
.forEach((key) => {
result[key] = finalize(obj[key]);
if (obj[key] === null) {
result[key] = [];
} else {
result[key] = this.finalize(obj[key]);
}
});
return result;
}
@@ -259,18 +286,38 @@ class PhotoGallery {
const tree = {};
for (const tag of tags) {
const parts = tag.split(delimiter);
insertPath(tree, parts);
this.insertPath(tree, parts);
}
return finalize(tree);
return this.finalize(tree);
}
renderTree = (obj, depth = 0) => {
let lines = [];
const indent = "&nbsp;&nbsp;".repeat(depth);
for (const key of Object.keys(obj)) {
lines.push(indent + key);
if (Array.isArray(obj[key])) {
for (const val of obj[key]) {
lines.push("&nbsp;&nbsp;".repeat(depth + 1) + val);
}
} else if (typeof obj[key] === "object" && obj[key] !== null) {
lines = lines.concat(this.renderTree(obj[key], depth + 1));
}
}
return lines.join("\n");
};
updateImageList() {
const imagelist = document.getElementById("imagelist");
if (!imagelist) return;
let str = "";
this.shown.forEach((item, index) => {
let tags = this.parseHierarchicalTags(item.tags || []);
str += `<div class="column" title="${tags}"><figure><img src="${item.msrc}" data-index="${index}" /><figcaption class="caption">${item.name}`;
str += `<div class="column"><figure title="${this.renderTree(
tags
)}"><img src="${
item.msrc
}" data-index="${index}" /><figcaption class="caption">${item.name}`;
if (item.tiff) str += `&nbsp;<a href="${item.tiff}">TIFF</a>`;
if (item.raw) str += `&nbsp;<a href="${item.raw}">RAW</a>`;
str += "</figcaption></figure></div>";
@@ -281,9 +328,16 @@ class PhotoGallery {
}
setFilter(selected) {
document.querySelectorAll("#tagdropdown input.tagcheckbox").forEach((checkbox) => {
document
.querySelectorAll("#tagdropdown input.tagcheckbox")
.forEach((checkbox) => {
selected.forEach((tag) => {
if (checkbox.parentElement.id.trim().substring(1).replace(" ", "%20") === tag) {
if (
checkbox.parentElement.id
.trim()
.substring(1)
.replace(" ", "%20") === tag
) {
checkbox.checked = true;
}
});
@@ -296,7 +350,9 @@ class PhotoGallery {
const svg = tag?.parentElement.querySelector(".tagtoggle svg");
if (!ol || !svg) return;
ol.classList.toggle("show");
svg.style.transform = ol.classList.contains("show") ? "rotate(180deg)" : "rotate(0deg)";
svg.style.transform = ol.classList.contains("show")
? "rotate(180deg)"
: "rotate(0deg)";
}
setupDropdownToggle() {
@@ -308,12 +364,18 @@ class PhotoGallery {
event.stopPropagation();
const svg = toggleLink.querySelector("svg");
dropdown.classList.toggle("show");
if (svg) svg.style.transform = dropdown.classList.contains("show") ? "rotate(180deg)" : "rotate(0deg)";
if (svg)
svg.style.transform = dropdown.classList.contains("show")
? "rotate(180deg)"
: "rotate(0deg)";
this.tagDropdownShown = dropdown.classList.contains("show");
});
document.addEventListener("click", (event) => {
if (!dropdown.contains(event.target) && !toggleLink.contains(event.target)) {
if (
!dropdown.contains(event.target) &&
!toggleLink.contains(event.target)
) {
dropdown.classList.remove("show");
this.tagDropdownShown = false;
const svg = toggleLink.querySelector("svg");
@@ -340,11 +402,14 @@ class PhotoGallery {
}
setupClickHandlers() {
const resetEl = document.getElementById("reset-filter")?.querySelector("label");
const resetEl = document
.getElementById("reset-filter")
?.querySelector("label");
if (resetEl) resetEl.addEventListener("click", this.reset);
const recurseEl = document.getElementById("recursive");
if (recurseEl) recurseEl.addEventListener("change", this.debounce(this.recursive, 150));
if (recurseEl)
recurseEl.addEventListener("change", this.debounce(this.recursive, 150));
const totop = document.getElementById("totop");
if (totop) totop.addEventListener("click", this.topFunction);
@@ -377,7 +442,10 @@ class PhotoGallery {
scrollFunction() {
const totopbutton = document.getElementById("totop");
if (!totopbutton) return;
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
totopbutton.style.display = "block";
} else {
totopbutton.style.display = "none";