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

ui improvements

Browse Source
This commit is contained in:
Flo Greistorfer
2025-06-30 00:18:51 +02:00
parent 9829a74f95
commit c732b49339
24 changed files with 272 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.version
View File

@@ -1 +1 @@
2.8.1 2.8.2

56
files/global.css
View File

@@ -157,14 +157,31 @@ figure {
cursor: pointer; cursor: pointer;
} }
.tooltip a object { .tooltip a {
cursor: pointer; cursor: pointer;
} }
.tagtoggle {
cursor: pointer;
float: right;
padding: 12px;
}
.tagflex {
display: flex;
}
.tag {
flex: 1;
}
input {
pointer-events: none;
}
.tooltiptext { .tooltiptext {
display: none;
cursor: default; cursor: default;
width: max-content;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
opacity: 0; opacity: 0;
@@ -176,11 +193,24 @@ figure {
.tooltip .infotext { .tooltip .infotext {
padding: 12px; padding: 12px;
width: max-content;
} }
.tooltip .tagdropdown { .tooltiptext.tagdropdown {
width: max-content;
right: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
max-height: 0;
opacity: 0;
}
.tooltiptext.tagdropdown.show {
max-height: 286px;
overflow-y: scroll;
opacity: 1;
} }
.tooltip:hover .infotext { .tooltip:hover .infotext {
@@ -193,12 +223,27 @@ figure {
opacity: 1; opacity: 1;
} }
.tooltip .tooltiptext .tagentry { .tagentryparent {
width: 100%;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
max-height: 0;
opacity: 0;
}
.tagentryparent.show {
max-height: 286px;
opacity: 1;
overflow-y: scroll;
}
.tagentry {
list-style: none; list-style: none;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: block;
} }
.tooltip .tooltiptext ol { .tooltip .tooltiptext ol {
@@ -208,7 +253,6 @@ figure {
.tooltip .tooltiptext .tagentry label { .tooltip .tooltiptext .tagentry label {
cursor: pointer; cursor: pointer;
width: 100%;
height: 100%; height: 100%;
padding: 12px; padding: 12px;
display: block; display: block;

6
templates/default.css
View File

@@ -52,7 +52,11 @@
background-color: var(--color2); background-color: var(--color2);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color7);
}
.tagentry .tagtoggle:hover {
background-color: var(--color4); background-color: var(--color4);
} }

113
templates/index.html.j2
View File

@@ -1,16 +1,24 @@
{%- macro render_tags(tag_tree, parent) -%} {%- macro render_tags(tag_tree, parent) -%}
<ol>
{%- for key, value in tag_tree.items() %} {%- for key, value in tag_tree.items() %}
<li class="tagentry"> <li class="tagentry">
<label onclick="filter()" title="{{ key }}" id="{{ parent }}|{{ key }}"> <div class="tagflex">
<input class="tag" type="checkbox" />{{ key }}{# {% if value %} <object data="{{ root }}.static/icons/arrow-down.svg" height="15em"></object>{% endif %} #} <label class="tag" title="{{ key }}" id="{{ parent }}|{{ key }}">
</label> <input type="checkbox" class="tagcheckbox" />{{ key }}
</label>{% if value %} <span class="tagtoggle" data-tagid="{{ parent }}|{{ key }}">
<svg width="1em" height="1em" viewBox="0 0 129.87601 129.87624">
<g id="layer1" transform="translate(-33.816833,-52.685642)">
<path stroke="currentColor" style="fill:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 54.476483,95.484647 98.754836,139.76308 143.03319,95.484647" id="path1" />
</g>
</svg></span>{% endif %}
</div>
{%- if value %} {%- if value %}
<ol class="tagentryparent">
{{ render_tags(value, parent + '|' + key) }} {{ render_tags(value, parent + '|' + key) }}
{%- endif %}
</li>
{%- endfor %}
</ol> </ol>
{%- endif %}
</li><br>
{%- endfor %}
{%- endmacro -%} {%- endmacro -%}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@@ -62,8 +70,13 @@
</div> </div>
<div class="navright"> <div class="navright">
{% if tags %} {% if tags %}
<li class="tooltip" onclick="tagdropdown()"> <li class="tooltip">
<a>Filter by Tags {#<object data="{{ root }}.static/icons/arrow-down.svg" height="15em"></object>#}</a> <a id="tagtogglelink">Filter by Tags <svg width="0.8em" height="0.8em" viewBox="0 0 129.87601 129.87624">
<g id="layer1" transform="translate(-33.816833,-52.685642)">
<path stroke="currentColor" style="fill:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 54.476483,95.484647 98.754836,139.76308 143.03319,95.484647" id="path1" />
</g>
</svg></a>
<ol class="tooltiptext tagdropdown" id="tagdropdown"> <ol class="tooltiptext tagdropdown" id="tagdropdown">
<span class="tagentry"> <span class="tagentry">
<label onclick="recursive()"> <label onclick="recursive()">
@@ -175,7 +188,7 @@
let shown = []; let shown = [];
let subfolders = []; let subfolders = [];
let controllers = {}; let controllers = {};
{# let tagdropdownshown = false; #} let tagdropdownshown = false;
function requestMetadata() { function requestMetadata() {
fetch(".metadata.json").then(response => { fetch(".metadata.json").then(response => {
@@ -205,19 +218,39 @@
.catch(error => console.error('Failed to fetch data:', error)); .catch(error => console.error('Failed to fetch data:', error));
} }
{# function tagdropdown() { function setupTagHandlers() {
if (tagdropdownshown) { const tagContainer = document.getElementById("tagdropdown");
document.getElementById("tagdropdown").style.display = "none";
document.getElementById("tagdropdown").style.opacity = 0; tagContainer.addEventListener("change", debounce(filter, 150));
document.getElementById("tagdropdown").parentElement.getElementsByTagName("a")[0].getElementsByTagName("object")[0].style = "transform: rotate(0deg)";
tagdropdownshown = false; tagContainer.addEventListener("click", function (event) {
} else { const toggle = event.target.closest(".tagtoggle");
document.getElementById("tagdropdown").style.display = "block"; if (toggle) {
document.getElementById("tagdropdown").style.opacity = 1; event.stopPropagation();
document.getElementById("tagdropdown").parentElement.getElementsByTagName("a")[0].getElementsByTagName("object")[0].style = "transform: rotate(180deg)"; const tagid = toggle.dataset.toggleid;
tagdropdownshown = true; toggleTag(tagid);
}
});
}
function toggleTag(tagid) {
const tag = document.getElementById(tagid);
const ol = tag?.closest(".tagentry")?.querySelector(".tagentryparent");
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)";
}
function debounce(fn, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), delay);
};
} }
} #}
function openSwipe(img) { function openSwipe(img) {
const options = { const options = {
@@ -332,7 +365,7 @@
const path = decodeURIComponent(window.location.href.split("#")[0].replace("index.html", "")) const path = decodeURIComponent(window.location.href.split("#")[0].replace("index.html", ""))
const selected_tags = []; const selected_tags = [];
const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tag']:checked"); const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tagcheckbox']:checked");
tagcheckboxes.forEach((checkbox) => { tagcheckboxes.forEach((checkbox) => {
let tag = checkbox.parentElement.id.trim().substring(1); let tag = checkbox.parentElement.id.trim().substring(1);
@@ -373,7 +406,7 @@
} }
function setFilter(selected) { function setFilter(selected) {
const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tag']"); const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tagcheckbox']");
selected.forEach((tag) => { selected.forEach((tag) => {
tagcheckboxes.forEach((checkbox) => { tagcheckboxes.forEach((checkbox) => {
if (checkbox.parentElement.id.trim().substring(1).replace(" ", "%20") == tag) { if (checkbox.parentElement.id.trim().substring(1).replace(" ", "%20") == tag) {
@@ -383,8 +416,40 @@
}); });
} }
function setupDropdownToggle() {
const toggleLink = document.getElementById("tagtogglelink");
const dropdown = document.getElementById("tagdropdown");
toggleLink.addEventListener("click", function (event) {
event.stopPropagation();
const svg = this.querySelector("svg");
dropdown.classList.toggle("show");
if (svg) svg.style.transform = dropdown.classList.contains("show") ? "rotate(180deg)" : "rotate(0deg)";
tagdropdownshown = dropdown.classList.contains("show");
});
document.addEventListener("click", function (event) {
if (!dropdown.contains(event.target) && !toggleLink.contains(event.target)) {
dropdown.classList.remove("show");
tagdropdownshown = false;
const svg = toggleLink.querySelector("svg");
if (svg) svg.style.transform = "rotate(0deg)";
}
});
}
function onLoad() { function onLoad() {
document.querySelectorAll('.tagtoggle').forEach(toggle => {
toggle.addEventListener('mouseup', function (event) {
event.stopPropagation();
const tagid = this.getAttribute('data-tagid');
toggleTag(tagid);
});
});
requestMetadata(); requestMetadata();
setupDropdownToggle();
setupTagHandlers();
document.getElementById("recursive").addEventListener("change", debounce(recursive, 150));
} }
window.addEventListener ? window.addEventListener ?

27
test/example/subfolder/DSC01106.jpg.xmp
View File

@@ -1,7 +1,30 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<x:xmpmeta x:xmptk="XMP Core 4.4.0-Exiv2" xmlns:x="adobe:ns:meta/"> <x:xmpmeta x:xmptk="XMP Core 4.4.0-Exiv2" xmlns:x="adobe:ns:meta/">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmpMM:DerivedFrom="DSC01106.jpg"> <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"
<dc:subject><rdf:Bag><rdf:li>st</rdf:li><rdf:li>clear</rdf:li><rdf:li>dark</rdf:li><rdf:li>moon</rdf:li><rdf:li>night</rdf:li><rdf:li>night sky</rdf:li><rdf:li>sky</rdf:li></rdf:Bag></dc:subject><lr:hierarchicalSubject><rdf:Bag><rdf:li>st|clear</rdf:li><rdf:li>st|dark</rdf:li><rdf:li>st|moon</rdf:li><rdf:li>st|night</rdf:li><rdf:li>st|night sky</rdf:li><rdf:li>st|sky</rdf:li></rdf:Bag></lr:hierarchicalSubject></rdf:Description> xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:lr="http://ns.adobe.com/lightroom/1.0/"
xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
xmpMM:DerivedFrom="DSC01106.jpg">
<dc:subject>
<rdf:Bag>
<rdf:li>st</rdf:li>
<rdf:li>clear</rdf:li>
<rdf:li>dark</rdf:li>
<rdf:li>moon</rdf:li>
<rdf:li>night</rdf:li>
<rdf:li>night sky</rdf:li>
<rdf:li>sky</rdf:li>
</rdf:Bag>
</dc:subject>
<lr:hierarchicalSubject>
<rdf:Bag>
<rdf:li>st|clear</rdf:li>
<rdf:li>st|dark</rdf:li>
<rdf:li>st|moon</rdf:li>
<rdf:li>st|night</rdf:li>
<rdf:li>st|sky|night sky</rdf:li>
</rdf:Bag>
</lr:hierarchicalSubject>
</rdf:Description>
</rdf:RDF> </rdf:RDF>
</x:xmpmeta> </x:xmpmeta>

6
themes/alpenglow-dark.css
View File

@@ -97,7 +97,11 @@ body {
background-color: var(--color6); background-color: var(--color6);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color3);
}
.tagentry .tagtoggle:hover {
background-color: var(--color3); background-color: var(--color3);
} }

6
themes/alpenglow.css
View File

@@ -96,7 +96,11 @@ body {
background-color: var(--color3); background-color: var(--color3);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color7);
}
.tagentry .tagtoggle:hover {
background-color: var(--color7); background-color: var(--color7);
} }

6
themes/aritim-dark.css
View File

@@ -74,7 +74,11 @@
background-color: var(--bcolor1); background-color: var(--bcolor1);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor3);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor3); background-color: var(--bcolor3);
} }

6
themes/aritim.css
View File

@@ -74,7 +74,11 @@
background-color: var(--bcolor1); background-color: var(--bcolor1);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor3);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor3); background-color: var(--bcolor3);
} }

6
themes/autumn.css
View File

@@ -79,7 +79,11 @@
font-family: "Playfair Display", serif; font-family: "Playfair Display", serif;
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color3);
}
.tagentry .tagtoggle:hover {
background-color: var(--color3); background-color: var(--color3);
} }

6
themes/carnation.css
View File

@@ -73,7 +73,11 @@
background-color: var(--bcolor2); background-color: var(--bcolor2);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor4);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor4); background-color: var(--bcolor4);
} }

6
themes/catpuccin.css
View File

@@ -79,7 +79,11 @@
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color4);
}
.tagentry .tagtoggle:hover {
background-color: var(--color4); background-color: var(--color4);
} }

6
themes/cornflower.css
View File

@@ -73,7 +73,11 @@
background-color: var(--bcolor2); background-color: var(--bcolor2);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor4);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor4); background-color: var(--bcolor4);
} }

6
themes/default-dark.css
View File

@@ -52,7 +52,11 @@
background-color: var(--color3); background-color: var(--color3);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color4);
}
.tagentry .tagtoggle:hover {
background-color: var(--color4); background-color: var(--color4);
} }

6
themes/default.css
View File

@@ -52,7 +52,11 @@
background-color: var(--color2); background-color: var(--color2);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color4);
}
.tagentry .tagtoggle:hover {
background-color: var(--color4); background-color: var(--color4);
} }

6
themes/ivy.css
View File

@@ -73,7 +73,11 @@
background-color: var(--bcolor2); background-color: var(--bcolor2);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor4);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor4); background-color: var(--bcolor4);
} }

6
themes/kjoe.css
View File

@@ -72,7 +72,11 @@
background-color: var(--color3); background-color: var(--color3);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color2);
}
.tagentry .tagtoggle:hover {
background-color: var(--color2); background-color: var(--color2);
} }

6
themes/monokai-vibrant.css
View File

@@ -55,7 +55,11 @@
background-color: var(--bcolor2); background-color: var(--bcolor2);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor3);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor3); background-color: var(--bcolor3);
} }

6
themes/rainbow.css
View File

@@ -76,7 +76,11 @@
background-color: var(--bcolor2); background-color: var(--bcolor2);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor4);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor4); background-color: var(--bcolor4);
} }

6
themes/spring.css
View File

@@ -79,7 +79,11 @@
font-family: "Lora", serif; font-family: "Lora", serif;
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor3);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor3); background-color: var(--bcolor3);
} }

6
themes/steam.css
View File

@@ -80,7 +80,11 @@
background-color: var(--color4); background-color: var(--color4);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color3);
}
.tagentry .tagtoggle:hover {
background-color: var(--color3); background-color: var(--color3);
} }

6
themes/summer.css
View File

@@ -80,7 +80,11 @@
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor3);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor3); background-color: var(--bcolor3);
color: var(--bcolor2); color: var(--bcolor2);
} }

6
themes/sunflower.css
View File

@@ -74,7 +74,11 @@
background-color: var(--bcolor2); background-color: var(--bcolor2);
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--bcolor4);
}
.tagentry .tagtoggle:hover {
background-color: var(--bcolor4); background-color: var(--bcolor4);
} }

6
themes/winter.css
View File

@@ -88,7 +88,11 @@
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
} }
.tagentry > label:hover { .tagentry label:hover {
background-color: var(--color2);
}
.tagentry .tagtoggle:hover {
background-color: var(--color2); background-color: var(--color2);
} }