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;
}
.tooltip a object {
.tooltip a {
cursor: pointer;
}
.tagtoggle {
cursor: pointer;
float: right;
padding: 12px;
}
.tagflex {
display: flex;
}
.tag {
flex: 1;
}
input {
pointer-events: none;
}
.tooltiptext {
display: none;
cursor: default;
width: max-content;
position: absolute;
z-index: 100;
opacity: 0;
@@ -176,11 +193,24 @@ figure {
.tooltip .infotext {
padding: 12px;
width: max-content;
}
.tooltip .tagdropdown {
.tooltiptext.tagdropdown {
width: max-content;
right: 0;
padding: 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 {
@@ -193,12 +223,27 @@ figure {
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;
width: 100%;
cursor: pointer;
margin: 0;
padding: 0;
display: block;
}
.tooltip .tooltiptext ol {
@@ -208,7 +253,6 @@ figure {
.tooltip .tooltiptext .tagentry label {
cursor: pointer;
width: 100%;
height: 100%;
padding: 12px;
display: block;

6
templates/default.css
View File

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

117
templates/index.html.j2
View File

@@ -1,16 +1,24 @@
{%- macro render_tags(tag_tree, parent) -%}
<ol>
{%- for key, value in tag_tree.items() %}
<li class="tagentry">
<label onclick="filter()" title="{{ key }}" id="{{ parent }}|{{ key }}">
<input class="tag" type="checkbox" />{{ key }}{# {% if value %} <object data="{{ root }}.static/icons/arrow-down.svg" height="15em"></object>{% endif %} #}
</label>
{%- for key, value in tag_tree.items() %}
<li class="tagentry">
<div class="tagflex">
<label class="tag" title="{{ key }}" id="{{ parent }}|{{ key }}">
<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 %}
<ol class="tagentryparent">
{{ render_tags(value, parent + '|' + key) }}
</ol>
{%- endif %}
</li>
{%- endfor %}
</ol>
</li><br>
{%- endfor %}
{%- endmacro -%}
<!DOCTYPE html>
<html lang="en">
@@ -62,8 +70,13 @@
</div>
<div class="navright">
{% if tags %}
<li class="tooltip" onclick="tagdropdown()">
<a>Filter by Tags {#<object data="{{ root }}.static/icons/arrow-down.svg" height="15em"></object>#}</a>
<li class="tooltip">
<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">
<span class="tagentry">
<label onclick="recursive()">
@@ -175,7 +188,7 @@
let shown = [];
let subfolders = [];
let controllers = {};
{# let tagdropdownshown = false; #}
let tagdropdownshown = false;
function requestMetadata() {
fetch(".metadata.json").then(response => {
@@ -205,19 +218,39 @@
.catch(error => console.error('Failed to fetch data:', error));
}
{# function tagdropdown() {
if (tagdropdownshown) {
document.getElementById("tagdropdown").style.display = "none";
document.getElementById("tagdropdown").style.opacity = 0;
document.getElementById("tagdropdown").parentElement.getElementsByTagName("a")[0].getElementsByTagName("object")[0].style = "transform: rotate(0deg)";
tagdropdownshown = false;
} else {
document.getElementById("tagdropdown").style.display = "block";
document.getElementById("tagdropdown").style.opacity = 1;
document.getElementById("tagdropdown").parentElement.getElementsByTagName("a")[0].getElementsByTagName("object")[0].style = "transform: rotate(180deg)";
tagdropdownshown = true;
function setupTagHandlers() {
const tagContainer = document.getElementById("tagdropdown");
tagContainer.addEventListener("change", debounce(filter, 150));
tagContainer.addEventListener("click", function (event) {
const toggle = event.target.closest(".tagtoggle");
if (toggle) {
event.stopPropagation();
const tagid = toggle.dataset.toggleid;
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) {
const options = {
@@ -332,7 +365,7 @@
const path = decodeURIComponent(window.location.href.split("#")[0].replace("index.html", ""))
const selected_tags = [];
const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tag']:checked");
const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tagcheckbox']:checked");
tagcheckboxes.forEach((checkbox) => {
let tag = checkbox.parentElement.id.trim().substring(1);
@@ -373,7 +406,7 @@
}
function setFilter(selected) {
const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tag']");
const tagcheckboxes = document.querySelectorAll("#tagdropdown input[class='tagcheckbox']");
selected.forEach((tag) => {
tagcheckboxes.forEach((checkbox) => {
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() {
document.querySelectorAll('.tagtoggle').forEach(toggle => {
toggle.addEventListener('mouseup', function (event) {
event.stopPropagation();
const tagid = this.getAttribute('data-tagid');
toggleTag(tagid);
});
});
requestMetadata();
setupDropdownToggle();
setupTagHandlers();
document.getElementById("recursive").addEventListener("change", debounce(recursive, 150));
}
window.addEventListener ?

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

@@ -1,7 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<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: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">
<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>
</rdf:RDF>
<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">
<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>
</x:xmpmeta>

6
themes/alpenglow-dark.css
View File

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

6
themes/alpenglow.css
View File

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

6
themes/aritim-dark.css
View File

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

6
themes/aritim.css
View File

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

6
themes/autumn.css
View File

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

6
themes/carnation.css
View File

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

6
themes/catpuccin.css
View File

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

6
themes/cornflower.css
View File

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

6
themes/default-dark.css
View File

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

6
themes/default.css
View File

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

6
themes/ivy.css
View File

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

6
themes/kjoe.css
View File

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

6
themes/monokai-vibrant.css
View File

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

6
themes/rainbow.css
View File

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

6
themes/spring.css
View File

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

6
themes/steam.css
View File

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

6
themes/summer.css
View File

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

6
themes/sunflower.css
View File

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

6
themes/winter.css
View File

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