like this?

.version

@@ -1 +1 @@
-2.9.0
+2.9.1

StaticGalleryBuilder.code-workspace

@@ -129,8 +129,6 @@
     "[python]": {
       "editor.defaultFormatter": "charliermarsh.ruff"
     },
-    "black-formatter.args": ["-l 260"],
-    "black-formatter.interpreter": ["/usr/bin/python3"],
     "editor.formatOnSave": false,
     "emmet.includeLanguages": {
       "jinja-css": "css",
@@ -157,7 +155,9 @@
     "json.schemaDownload.enable": true,
     "json.schemas": [
       {
-        "fileMatch": ["manifest.json.j2"],
+        "fileMatch": [
+          "manifest.json.j2"
+        ],
         "url": "https://json.schemastore.org/web-manifest-combined.json"
       }
     ],
@@ -169,9 +169,10 @@
         "packageManager": "ms-python.python:pip"
       }
     ],
-    "python.analysis.inlayHints.callArgumentNames": "off",
-    "python.analysis.inlayHints.functionReturnTypes": false,
-    "python.analysis.inlayHints.variableTypes": false,
+    "python.analysis.inlayHints.callArgumentNames": "all",
+    "python.analysis.inlayHints.functionReturnTypes": true,
+    "python.analysis.inlayHints.variableTypes": true,
+    "python.analysis.typeCheckingMode": "standard",
     "yaml.schemas": {
       "https://raw.githubusercontent.com/pamburus/hl/master/schema/json/config.schema.json": "file:///home/user/git/github.com/greflm13/StaticGalleryBuilder/hl_config.yaml"
     },
@@ -228,7 +229,9 @@
           "kind": "build",
           "isDefault": true
         },
-        "dependsOn": ["Clean"]
+        "dependsOn": [
+          "Clean"
+        ]
       },
       {
         "command": "rm -rf build dist",

files/global.css

@@ -132,6 +132,8 @@ figure {
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
+  height: 1.222em;
+  box-sizing: content-box;
 }
 
 .navbar .navleft {
@@ -200,6 +202,7 @@ input {
 .tooltip .infotext {
   padding: 12px;
   width: max-content;
+  pointer-events: none;
 }
 
 .tooltiptext.tagdropdown {
@@ -222,11 +225,13 @@ input {
 .tooltip:hover .infotext {
   display: block;
   opacity: 1;
+  pointer-events: auto;
 }
 
 .tooltip:active .infotext {
   display: block;
   opacity: 1;
+  pointer-events: auto;
 }
 
 .tagentryparent {
@@ -302,12 +307,7 @@ input {
   border-style: none;
 }
 
-.darkmodeswitch {
-  font-size: smaller;
-  height: 100%;
-}
-
-#dark-mode-switch {
+.darkmodeswitch a {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -316,7 +316,7 @@ input {
   position: relative;
 }
 
-#dark-mode-switch .checkbox {
+.darkmodeswitch a input[type="checkbox"] {
   position: absolute;
   width: 100%;
   margin: 0;
@@ -325,36 +325,44 @@ input {
   z-index: 2;
 }
 
-#dark-mode-switch .knobs {
+.darkmodeswitch a .knobs {
   display: flex;
   align-items: center;
   justify-content: center;
-  column-gap: 1em;
+  column-gap: 1.25em;
   position: relative;
   width: 100%;
 }
 
-#dark-mode-switch .light,
-#dark-mode-switch .dark {
-  text-align: center;
+.darkmodeswitch a .light,
+.darkmodeswitch a .dark {
+  position: relative;
+  top: -0.111em;
 }
 
-#dark-mode-switch .slider {
+.darkmodeswitch a .slider {
   position: absolute;
   width: calc(2em - 2px);
   height: calc(2em - 2px);
   border: 1px solid currentColor;
   border-radius: 3px;
-  top: 50%;
+  top: calc(50% - 2px);
   transform: translate(-50%, -50%);
   transition: left 0.25s ease, transform 0.25s ease;
   left: calc(50% - 1em + 1px);
 }
 
-#dark-mode-switch .checkbox:checked+.knobs .slider {
+.darkmodeswitch a input[type="checkbox"]:checked+.knobs .slider {
   left: calc(50% + 1em - 1px);
 }
 
+.imgprefetch {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
 @media screen and (max-width: 1000px) {
   .column {
     -ms-flex: 25%;

modules/argumentparser.py

@@ -12,7 +12,7 @@ except ModuleNotFoundError:
     RICH = False
 
 
-SCRIPTDIR = os.path.dirname(os.path.realpath(__file__)).removesuffix(__package__)
+SCRIPTDIR = os.path.dirname(os.path.realpath(__file__)).removesuffix(__package__ if __package__ else "")
 DEFAULT_THEME_PATH = os.path.join(SCRIPTDIR, "templates", "default.css")
 DEFAULT_AUTHOR = "Author"
 
@@ -125,7 +125,7 @@ def parse_arguments(version: str) -> Args:
     """
     # fmt: off
     if RICH:
-        parser = configargparse.ArgumentParser(default_config_files=[CONFIGPATH], add_config_file_help=False, description="generate HTML files for a static image hosting website", formatter_class=RichHelpFormatter)
+        parser = configargparse.ArgumentParser(default_config_files=[CONFIGPATH], add_config_file_help=False, description="generate HTML files for a static image hosting website", formatter_class=RichHelpFormatter) # pyright: ignore[reportPossiblyUnboundVariable]
     else:
         parser = configargparse.ArgumentParser(default_config_files=[CONFIGPATH], add_config_file_help=False, description="generate HTML files for a static image hosting website")
     parser.add_argument("-a", "--author-name", help="name of the author of the images", default=DEFAULT_AUTHOR, type=str, dest="author_name", metavar="AUTHOR")
@@ -140,7 +140,7 @@ def parse_arguments(version: str) -> Args:
     parser.add_argument("--exclude-folder", help="folders to exclude from processing, globs supported (can be specified multiple times)", action="append", dest="exclude_folders", metavar="FOLDER")
     parser.add_argument("--folderthumbnails", help="generate subfolder thumbnails (first image in folder will be shown)", action="store_true", default=False, dest="folder_thumbs")
     if RICH:
-        parser.add_argument("--generate-help-preview", action=HelpPreviewAction, path="help.svg")
+        parser.add_argument("--generate-help-preview", action=HelpPreviewAction, path="help.svg") # pyright: ignore[reportPossiblyUnboundVariable]
     parser.add_argument("--ignore-other-files", help="ignore files that do not match the specified extensions", action="store_true", default=False, dest="ignore_other_files")
     parser.add_argument("--ignore-extension", help="file extensions to ignore (can be specified multiple times)", action="append", default=[], dest="ignore_extensions", metavar="EXTENSION")
     parser.add_argument("--regenerate-thumbnails", help="regenerate thumbnails even if they already exist", action="store_true", default=False, dest="regenerate_thumbnails")

modules/cclicense.py

@@ -128,4 +128,4 @@ def licensepicswitch(cclicense: str) -> list[str]:
         ],
     }
 
-    return switch.get(cclicense, "")
+    return switch.get(cclicense, [])

modules/generate_html.py

@@ -20,7 +20,7 @@ from modules.argumentparser import Args
 from modules.datatypes.metadata import Metadata, ImageMetadata, SubfolderMetadata
 
 # Constants for file paths and exclusions
-SCRIPTDIR = os.path.dirname(os.path.realpath(__file__)).removesuffix(__package__)
+SCRIPTDIR = os.path.dirname(os.path.realpath(__file__)).removesuffix(__package__ if __package__ else "")
 FAVICON_PATH = ".static/favicon.ico"
 GLOBAL_CSS_PATH = ".static/global.css"
 EXCLUDES = ["index.html", "manifest.json", "robots.txt"]
@@ -138,9 +138,14 @@ def update_metadata(metadata: Metadata, folder: str) -> None:
     """
     metadata_path = os.path.join(folder, ".metadata.json")
     if metadata:
-        with open(metadata_path, "w", encoding="utf-8") as metadatafile:
-            logger.info("writing metadata file", extra={"file": metadata_path})
-            metadatafile.write(json.dumps(metadata.to_dict(), indent=4))
+        if os.path.exists(metadata_path):
+            logger.info("updating metadata file", extra={"file": metadata_path})
+            with open(metadata_path, "w", encoding="utf-8") as metadatafile:
+                metadatafile.write(json.dumps(metadata.to_dict(), indent=4))
+        else:
+            logger.info("creating metadata file", extra={"file": metadata_path})
+            with open(metadata_path, "x", encoding="utf-8") as metadatafile:
+                metadatafile.write(json.dumps(metadata.to_dict(), indent=4))
     else:
         if os.path.exists(metadata_path):
             logger.info("deleting empty metadata file", extra={"file": metadata_path})
@@ -257,11 +262,11 @@ def get_image_info(item: str, folder: str) -> ImageMetadata:
     return ImageMetadata(w=width, h=height, tags=tags, exifdata=exifdata, xmp=xmp, src="", msrc="", name="", title="")
 
 
-def nested_dict():
+def nested_dict() -> defaultdict[Any, Any]:
     return defaultdict(nested_dict)
 
 
-def insert_path(d, path):
+def insert_path(d, path) -> None:
     for part in path[:-1]:
         d = d[part]
     last = path[-1]
@@ -378,10 +383,8 @@ def process_image(item: str, folder: str, _args: Args, baseurl: str, metadata: M
         if os.path.exists(file):
             url = f"{_args.web_root_url}{baseurl}{urllib.parse.quote(extsplit[0])}{_raw}"
             if _raw in (".tif", ".tiff"):
-                logger.info("tiff file found", extra={"file": file})
                 image.tiff = url
             else:
-                logger.info("raw file found", extra={"file": file, "extension": _raw})
                 image.raw = url
 
     metadata.images[item] = image

modules/logger.py

@@ -21,7 +21,7 @@ from datetime import datetime
 from pythonjsonlogger import jsonlogger
 
 # Constants for file paths and exclusions
-SCRIPTDIR = os.path.dirname(os.path.realpath(__file__)).removesuffix(__package__)
+SCRIPTDIR = os.path.dirname(os.path.realpath(__file__)).removesuffix(__package__ if __package__ else "")
 LOG_DIR = os.path.join(SCRIPTDIR, "logs")
 LATEST_LOG_FILE = os.path.join(LOG_DIR, "latest.jsonl")
 

modules/svg_handling.py

@@ -1,5 +1,6 @@
 import os
 import shutil
+from dataclasses import dataclass
 from subprocess import Popen, PIPE
 from PIL import Image
 from jinja2 import Environment, FileSystemLoader
@@ -15,10 +16,10 @@ except ImportError:
 
 from modules.logger import logger
 from modules.argumentparser import Args
-from modules.css_color import extract_theme_color, extract_colorscheme
+from modules.css_color import extract_colorscheme
 
 # Define constants for static files directory and icon sizes
-SCRIPTDIR = os.path.dirname(os.path.realpath(__file__)).removesuffix(__package__)
+SCRIPTDIR = os.path.dirname(os.path.realpath(__file__)).removesuffix(__package__ if __package__ else "")
 STATIC_FILES_DIR = os.path.join(SCRIPTDIR, "files")
 ICON_SIZES = ["36x36", "48x48", "72x72", "96x96", "144x144", "192x192", "512x512"]
 
@@ -26,6 +27,7 @@ ICON_SIZES = ["36x36", "48x48", "72x72", "96x96", "144x144", "192x192", "512x512
 env = Environment(loader=FileSystemLoader(os.path.join(SCRIPTDIR, "templates")))
 
 
+@dataclass
 class Icon:
     src: str
     type: str
@@ -68,11 +70,12 @@ def save_png_icon(content: str, iconspath: str) -> None:
     iconspath : str
         Path to the directory where the PNG icon will be saved.
     """
-    tmpimg = BytesIO()
-    cairosvg.svg2png(bytestring=content, write_to=tmpimg)
-    with Image.open(tmpimg) as iconfile:
-        logger.info("saving png icon", extra={"iconspath": iconspath})
-        iconfile.save(os.path.join(iconspath, "icon.png"))
+    if SVGSUPPORT:
+        tmpimg = BytesIO()  # pyright: ignore[reportPossiblyUnboundVariable]
+        cairosvg.svg2png(bytestring=content, write_to=tmpimg)  # pyright: ignore[reportPossiblyUnboundVariable]
+        with Image.open(tmpimg) as iconfile:
+            logger.info("saving png icon", extra={"iconspath": iconspath})
+            iconfile.save(os.path.join(iconspath, "icon.png"))
 
 
 def generate_favicon(iconspath: str, root_directory: str) -> None:
@@ -148,7 +151,7 @@ def render_manifest_json(_args: Args, icon_list: list[Icon], colors: dict[str, s
         short_name=_args.site_title,
         icons=icon_list,
         background_color=colors["bcolor1"],
-        theme_color=colors["theme_color"],
+        theme_color=colors["color1"],
     )
     with open(os.path.join(_args.root_directory, ".static", "manifest.webmanifest"), "w", encoding="utf-8") as f:
         logger.info("rendering manifest.webmanifest", extra={"path": os.path.join(_args.root_directory, ".static", "manifest.webmanifest")})
@@ -176,40 +179,20 @@ def create_icons_from_svg(files: list[str], iconspath: str, _args: Args) -> list
     svg = [file for file in files if file.endswith(".svg")][0]
     logger.info("creating icons for web application", extra={"iconspath": iconspath, "svg": svg})
     icon_list = [
-        {"src": f"{_args.web_root_url}.static/icons/{svg}", "type": "image/svg+xml", "sizes": "512x512", "purpose": "maskable"},
-        {"src": f"{_args.web_root_url}.static/icons/{svg}", "type": "image/svg+xml", "sizes": "512x512", "purpose": "any"},
+        Icon(src=f"{_args.web_root_url}.static/icons/{svg}", type="image/svg+xml", sizes="512x512", purpose="maskable"),
+        Icon(src=f"{_args.web_root_url}.static/icons/{svg}", type="image/svg+xml", sizes="512x512", purpose="any"),
     ]
     for size in ICON_SIZES:
-        tmpimg = BytesIO()
+        tmpimg = BytesIO()  # pyright: ignore[reportPossiblyUnboundVariable]
         sizes = size.split("x")
         iconpath = os.path.join(iconspath, os.path.splitext(svg)[0] + "-" + size + ".png")
         logger.info("converting svg to png", extra={"svg": svg, "size": size})
-        cairosvg.svg2png(
-            url=os.path.join(iconspath, svg),
-            write_to=tmpimg,
-            output_width=int(sizes[0]),
-            output_height=int(sizes[1]),
-            scale=1,
-        )
+        cairosvg.svg2png(url=os.path.join(iconspath, svg), write_to=tmpimg, output_width=int(sizes[0]), output_height=int(sizes[1]), scale=1)  # pyright: ignore[reportPossiblyUnboundVariable]
         with Image.open(tmpimg) as iconfile:
             logger.info("saving png file", extra={"iconpath": iconpath})
             iconfile.save(iconpath, format="PNG")
-        icon_list.append(
-            {
-                "src": f"{_args.web_root_url}.static/icons/{os.path.splitext(svg)[0]}-{size}.png",
-                "sizes": size,
-                "type": "image/png",
-                "purpose": "maskable",
-            }
-        )
-        icon_list.append(
-            {
-                "src": f"{_args.web_root_url}.static/icons/{os.path.splitext(svg)[0]}-{size}.png",
-                "sizes": size,
-                "type": "image/png",
-                "purpose": "any",
-            }
-        )
+        icon_list.append(Icon(src=f"{_args.web_root_url}.static/icons/{os.path.splitext(svg)[0]}-{size}.png", sizes=size, type="image/png", purpose="maskable"))
+        icon_list.append(Icon(src=f"{_args.web_root_url}.static/icons/{os.path.splitext(svg)[0]}-{size}.png", sizes=size, type="image/png", purpose="any"))
     return icon_list
 
 
@@ -236,8 +219,8 @@ def create_icons_from_png(iconspath: str, web_root_url: str) -> list[Icon]:
         with Image.open(os.path.join(iconspath, icon)) as iconfile:
             iconsize = f"{iconfile.size[0]}x{iconfile.size[1]}"
             logger.info("using icon", extra={"iconspath": iconspath, "icon": icon, "size": iconsize})
-        icon_list.append({"src": f"{web_root_url}.static/icons/{icon}", "sizes": iconsize, "type": "image/png", "purpose": "maskable"})
-        icon_list.append({"src": f"{web_root_url}.static/icons/{icon}", "sizes": iconsize, "type": "image/png", "purpose": "any"})
+        icon_list.append(Icon(src=f"{web_root_url}.static/icons/{icon}", sizes=iconsize, type="image/png", purpose="maskable"))
+        icon_list.append(Icon(src=f"{web_root_url}.static/icons/{icon}", sizes=iconsize, type="image/png", purpose="any"))
     return icon_list
 
 
@@ -254,7 +237,9 @@ def webmanifest(_args: Args) -> None:
 
     iconspath = os.path.join(_args.root_directory, ".static", "icons")
     files = os.listdir(iconspath)
-    icon_list = create_icons_from_svg(files, iconspath, _args) if SVGSUPPORT and any(file.endswith(".svg") for file in files) else create_icons_from_png(iconspath, _args.web_root_url)
+    icon_list = (
+        create_icons_from_svg(files, iconspath, _args) if SVGSUPPORT and any(file.endswith(".svg") for file in files) else create_icons_from_png(iconspath, _args.web_root_url)
+    )
 
     if not icon_list:
         print("No icons found in the static/icons folder!")
@@ -262,5 +247,4 @@ def webmanifest(_args: Args) -> None:
         return
 
     colorscheme = extract_colorscheme(os.path.join(_args.root_directory, ".static", "theme.css"))
-    colorscheme["theme_color"] = extract_theme_color(os.path.join(_args.root_directory, ".static", "theme.css"))
     render_manifest_json(_args, icon_list, colorscheme)

templates/functionality.js

@@ -4,34 +4,73 @@ class PhotoGallery {
     this.items = [];
     this.shown = [];
     this.subfolders = [];
-    this.controllers = {};
     this.tagDropdownShown = false;
 
-    this.debounce = this.debounce.bind(this);
-    this.openSwipe = this.openSwipe.bind(this);
-    this.prefetch = this.prefetch.bind(this);
-    this.cancel = this.cancel.bind(this);
-    this.reset = this.reset.bind(this);
-    this.recursive = this.recursive.bind(this);
-    this.requestMetadata = this.requestMetadata.bind(this);
-    this.filter = this.filter.bind(this);
-    this.updateImageList = this.updateImageList.bind(this);
-    this.setFilter = this.setFilter.bind(this);
-    this.toggleTag = this.toggleTag.bind(this);
-    this.setupDropdownToggle = this.setupDropdownToggle.bind(this);
-    this.setupTagHandlers = this.setupTagHandlers.bind(this);
-    this.setupClickHandlers = this.setupClickHandlers.bind(this);
-    this.scrollFunction = this.scrollFunction.bind(this);
-    this.topFunction = this.topFunction.bind(this);
-    this.onLoad = this.onLoad.bind(this);
     this.darkMode = this.darkMode.bind(this);
-    this.lightMode = this.lightMode.bind(this);
     this.darkModeToggle = this.darkModeToggle.bind(this);
+    this.debounce = this.debounce.bind(this);
     this.detectDarkMode = this.detectDarkMode.bind(this);
 
+    this.detectDarkMode();
+
+    this.filter = this.filter.bind(this);
+    this.finalize = this.finalize.bind(this);
+    this.insertPath = this.insertPath.bind(this);
+    this.lightMode = this.lightMode.bind(this);
+    this.onLoad = this.onLoad.bind(this);
+    this.openSwipe = this.openSwipe.bind(this);
+    this.parseHierarchicalTags = this.parseHierarchicalTags.bind(this);
+    this.prefetch = this.prefetch.bind(this);
+    this.prefetchCancel = this.prefetchCancel.bind(this);
+    this.recursive = this.recursive.bind(this);
+    this.renderTree = this.renderTree.bind(this);
+    this.requestMetadata = this.requestMetadata.bind(this);
+    this.reset = this.reset.bind(this);
+    this.resetHoverTimer = this.resetHoverTimer.bind(this);
+    this.scrollFunction = this.scrollFunction.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.setupClickHandlers = this.setupClickHandlers.bind(this);
+    this.setupDropdownToggle = this.setupDropdownToggle.bind(this);
+    this.setupTagHandlers = this.setupTagHandlers.bind(this);
+    this.showLoader = this.showLoader.bind(this);
+    this.toggleTag = this.toggleTag.bind(this);
+    this.topFunction = this.topFunction.bind(this);
+    this.updateImageList = this.updateImageList.bind(this);
+
     this.init();
   }
 
+  darkMode() {
+    const themeLink = document.getElementById("theme");
+    const darkThemeLink = document.getElementById("darktheme");
+    localStorage.setItem("theme", "dark");
+    if (themeLink) themeLink.disabled = true;
+    if (darkThemeLink) darkThemeLink.disabled = false;
+  }
+
+  darkModeToggle(mode) {
+    const switchState = document.getElementById("dark-mode-switch-check");
+    if (mode == "dark") {
+      this.darkMode();
+      if (switchState) {
+        switchState.checked = true;
+      }
+    } else if (mode == "light") {
+      this.lightMode();
+      if (switchState) {
+        switchState.checked = false;
+      }
+    } else {
+      if (switchState.checked) {
+        switchState.checked = false;
+        this.lightMode();
+      } else {
+        switchState.checked = true;
+        this.darkMode();
+      }
+    }
+  }
+
   debounce(fn, delay) {
     let timeoutId;
     return (...args) => {
@@ -40,55 +79,169 @@ class PhotoGallery {
     };
   }
 
+  detectDarkMode() {
+    if (document.getElementById("darktheme")) {
+      const switchState = document.getElementById("dark-mode-switch-check");
+      const localStorageTheme = localStorage.getItem("theme");
+      if (localStorageTheme === "dark") {
+        switchState.checked = true;
+        this.darkModeToggle("dark");
+        return;
+      } else if (localStorageTheme === "light") {
+        switchState.checked = true;
+        this.darkModeToggle("light");
+        return;
+      }
+      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        switchState.checked = true;
+        this.darkModeToggle("dark");
+      } else {
+        switchState.checked = false;
+        this.darkModeToggle("light");
+      }
+    }
+  }
+
+  filter() {
+    this.showLoader();
+    const searchParams = new URLSearchParams(window.location.search);
+    this.shown = [];
+    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) => {
+      let tag = checkbox.parentElement.id.trim().substring(1);
+      if (checkbox.parentElement.parentElement.children.length > 1) tag += "|";
+      selectedTags.push(tag);
+    });
+
+    const urltags = selectedTags.join(",");
+
+    let isRecursiveChecked = false;
+    try {
+      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);
+      });
+
+      if (include || selectedTags.length === 0) {
+        if (!isRecursiveChecked) {
+          if (decodeURIComponent(item.src).replace(item.name, "") === path) {
+            this.shown.push(item);
+          }
+        } else {
+          this.shown.push(item);
+        }
+      }
+    }
+    this.updateImageList();
+    window.location.hash = urltags;
+
+    const pid = searchParams.get("pid") - 1;
+    if (pid != -1) {
+      this.openSwipe(pid);
+    }
+  }
+
+  finalize(obj) {
+    if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
+      const result = {};
+      Object.keys(obj)
+        .sort()
+        .forEach((key) => {
+          if (obj[key] === null) {
+            result[key] = [];
+          } else {
+            result[key] = this.finalize(obj[key]);
+          }
+        });
+      return result;
+    }
+    return obj || [];
+  }
+
+  insertPath(obj, path) {
+    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];
+      }
+    }
+  }
+
+  lightMode() {
+    const themeLink = document.getElementById("theme");
+    const darkThemeLink = document.getElementById("darktheme");
+    localStorage.setItem("theme", "light");
+    if (themeLink) themeLink.disabled = false;
+    if (darkThemeLink) darkThemeLink.disabled = true;
+  }
+
+  onLoad() {
+    document.querySelectorAll(".tagtoggle").forEach((toggle) => {
+      toggle.addEventListener("mouseup", (event) => {
+        event.stopPropagation();
+        const tagid = toggle.getAttribute("data-tagid");
+        this.toggleTag(tagid);
+      });
+    });
+
+    this.requestMetadata();
+    this.setupDropdownToggle();
+    this.setupTagHandlers();
+    this.setupClickHandlers();
+
+    window.addEventListener("scroll", this.scrollFunction);
+  }
+
   openSwipe(imgIndex) {
     const options = { index: imgIndex };
     const gallery = new PhotoSwipe(this.pswpElement, PhotoSwipeUI_Default, this.shown, options);
     gallery.init();
   }
 
+  parseHierarchicalTags(tags, delimiter = "|") {
+    const tree = {};
+    for (const tag of tags) {
+      const parts = tag.split(delimiter);
+      this.insertPath(tree, parts);
+    }
+    return this.finalize(tree);
+  }
+
   prefetch(imgIndex) {
-    if (this.controllers[imgIndex]) {
-      this.cancel(imgIndex);
-    }
-    const controller = new AbortController();
-    const signal = controller.signal;
-    this.controllers[imgIndex] = controller;
-    const urlToFetch = this.shown[imgIndex]?.src;
-    if (urlToFetch) {
-      fetch(urlToFetch, { method: "GET", signal }).catch(() => {});
-    }
+    const prefetchDiv = document.getElementById("img-prefetch");
+    if (!prefetchDiv) return;
+
+    const img = document.createElement("img");
+    img.src = this.shown[imgIndex]?.src || "";
+    prefetchDiv.appendChild(img);
   }
 
-  cancel(imgIndex) {
-    if (this.controllers[imgIndex]) {
-      this.controllers[imgIndex].abort();
-      delete this.controllers[imgIndex];
+  prefetchCancel() {
+    const prefetchDiv = document.getElementById("img-prefetch");
+    if (!prefetchDiv) return;
+    if (prefetchDiv.firstChild) {
+      prefetchDiv.removeChild(prefetchDiv.firstChild);
     }
   }
 
-  reset() {
-    const content = document.documentElement.innerHTML;
-    const title = document.title;
-    const folders = document.querySelector(".folders");
-    let path = window.location.origin + window.location.pathname;
-    if (path.startsWith("null")) {
-      path = window.location.protocol + "//" + path.substring(4);
-    }
-
-    if (folders) folders.style.display = "";
-    document.getElementById("recursive").checked = false;
-    document.querySelectorAll("#tagdropdown input.tagcheckbox:checked").forEach((checkbox) => (checkbox.checked = false));
-    window.history.replaceState({ html: content, pageTitle: title }, "", path);
-    this.requestMetadata();
-  }
-
-  showLoader() {
-    const imagelist = document.getElementById("imagelist");
-    imagelist.innerHTML = '<span class="loader"></span>';
-    imagelist.classList.add("centerload");
-    imagelist.classList.remove("row");
-  }
-
   async recursive() {
     this.showLoader();
     const loc = new URL(window.location.href);
@@ -105,6 +258,7 @@ class PhotoGallery {
       return;
     }
 
+    this.showLoader();
     if (folders) folders.style.display = "none";
     loc.searchParams.delete("recursive");
     loc.searchParams.append("recursive", true);
@@ -154,11 +308,28 @@ class PhotoGallery {
       if (nextLevel.length > 0) await fetchFoldersRecursively(nextLevel);
     };
 
+    this.showLoader();
     await fetchFoldersRecursively(this.subfolders);
     this.items = [...newItems];
     this.filter();
   }
 
+  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");
+  };
+
   requestMetadata() {
     this.showLoader();
     const hash = window.location.hash;
@@ -187,129 +358,40 @@ class PhotoGallery {
       .catch(() => {});
   }
 
-  filter() {
-    const searchParams = new URLSearchParams(window.location.search);
-    this.shown = [];
-    let path = decodeURIComponent(window.location.origin + window.location.pathname.replace("index.html", ""));
+  reset() {
+    const content = document.documentElement.innerHTML;
+    const title = document.title;
+    const folders = document.querySelector(".folders");
+    let path = window.location.origin + window.location.pathname;
     if (path.startsWith("null")) {
       path = window.location.protocol + "//" + path.substring(4);
     }
-    const selectedTags = [];
 
-    document.querySelectorAll("#tagdropdown input.tagcheckbox:checked").forEach((checkbox) => {
-      let tag = checkbox.parentElement.id.trim().substring(1);
-      if (checkbox.parentElement.parentElement.children.length > 1) tag += "|";
-      selectedTags.push(tag);
-    });
-
-    const urltags = selectedTags.join(",");
-
-    let isRecursiveChecked = false;
-    try {
-      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);
-      });
-
-      if (include || selectedTags.length === 0) {
-        if (!isRecursiveChecked) {
-          if (decodeURIComponent(item.src).replace(item.name, "") === path) {
-            this.shown.push(item);
-          }
-        } else {
-          this.shown.push(item);
-        }
-      }
-    }
-    this.updateImageList();
-    window.location.hash = urltags;
-
-    const pid = searchParams.get("pid") - 1;
-    if (pid != -1) {
-      this.openSwipe(pid);
-    }
+    if (folders) folders.style.display = "";
+    document.getElementById("recursive").checked = false;
+    document.querySelectorAll("#tagdropdown input.tagcheckbox:checked").forEach((checkbox) => (checkbox.checked = false));
+    window.history.replaceState({ html: content, pageTitle: title }, "", path);
+    this.requestMetadata();
   }
 
-  insertPath(obj, path) {
-    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];
-      }
+  resetHoverTimer(index) {
+    if (this.hoverTimer) {
+      clearTimeout(this.hoverTimer);
     }
+    this.prefetchCancel();
+    this.hoverTimer = setTimeout(() => {
+      this.prefetch(index);
+    }, 500);
   }
 
-  finalize(obj) {
-    if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
-      const result = {};
-      Object.keys(obj)
-        .sort()
-        .forEach((key) => {
-          if (obj[key] === null) {
-            result[key] = [];
-          } else {
-            result[key] = this.finalize(obj[key]);
-          }
-        });
-      return result;
+  scrollFunction() {
+    const totopbutton = document.getElementById("totop");
+    if (!totopbutton) return;
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+      totopbutton.style.display = "block";
+    } else {
+      totopbutton.style.display = "none";
     }
-    return obj || [];
-  }
-
-  parseHierarchicalTags(tags, delimiter = "|") {
-    const tree = {};
-    for (const tag of tags) {
-      const parts = tag.split(delimiter);
-      this.insertPath(tree, parts);
-    }
-    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"><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>";
-    });
-    imagelist.classList.add("row");
-    imagelist.classList.remove("centerload");
-    imagelist.innerHTML = str;
   }
 
   setFilter(selected) {
@@ -322,13 +404,49 @@ class PhotoGallery {
     });
   }
 
-  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)";
+  setupClickHandlers() {
+    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));
+
+    const totop = document.getElementById("totop");
+    if (totop) totop.addEventListener("click", this.topFunction);
+
+    const darkModeSwitch = document.getElementById("dark-mode-switch");
+    if (darkModeSwitch) darkModeSwitch.addEventListener("click", this.darkModeToggle);
+
+    const imagelist = document.getElementById("imagelist");
+    if (imagelist) {
+      imagelist.addEventListener("click", (event) => {
+        const img = event.target.closest("img");
+        if (!img || !img.dataset.index) return;
+        const index = parseInt(img.dataset.index);
+        if (!isNaN(index)) this.openSwipe(index);
+      });
+
+      imagelist.addEventListener("mouseenter", (event) => {
+        const img = event.target;
+        if (!img || !img.dataset.index) return;
+        const index = parseInt(img.dataset.index);
+        if (!isNaN(index)) this.resetHoverTimer(index);
+      });
+
+      imagelist.addEventListener("mousemove", (event) => {
+        const img = event.target;
+        if (!img || !img.dataset.index) return;
+        const index = parseInt(img.dataset.index);
+        if (!isNaN(index)) this.resetHoverTimer(index);
+      });
+
+      imagelist.addEventListener("mouseleave", () => {
+        if (this.hoverTimer) {
+          clearTimeout(this.hoverTimer);
+        }
+        this.prefetchCancel();
+      });
+    }
   }
 
   setupDropdownToggle() {
@@ -371,121 +489,44 @@ class PhotoGallery {
     });
   }
 
-  setupClickHandlers() {
-    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));
-
-    const totop = document.getElementById("totop");
-    if (totop) totop.addEventListener("click", this.topFunction);
-
-    const darkModeSwitch = document.getElementById("dark-mode-switch");
-    if (darkModeSwitch) darkModeSwitch.addEventListener("click", this.darkModeToggle);
-
+  showLoader() {
     const imagelist = document.getElementById("imagelist");
-    if (imagelist) {
-      imagelist.addEventListener("click", (event) => {
-        const img = event.target.closest("img");
-        if (!img || !img.dataset.index) return;
-        const index = parseInt(img.dataset.index);
-        if (!isNaN(index)) this.openSwipe(index);
-      });
-
-      imagelist.addEventListener("mouseover", (event) => {
-        const img = event.target.closest("img");
-        if (!img || !img.dataset.index) return;
-        const index = parseInt(img.dataset.index);
-        if (!isNaN(index)) this.prefetch(index);
-      });
-
-      imagelist.addEventListener("mouseleave", (event) => {
-        const img = event.target.closest("img");
-        if (!img || !img.dataset.index) return;
-        const index = parseInt(img.dataset.index);
-        if (!isNaN(index)) this.cancel(index);
-      });
-    }
+    imagelist.innerHTML = '<span class="loader"></span>';
+    imagelist.classList.add("centerload");
+    imagelist.classList.remove("row");
   }
 
-  scrollFunction() {
-    const totopbutton = document.getElementById("totop");
-    if (!totopbutton) return;
-    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-      totopbutton.style.display = "block";
-    } else {
-      totopbutton.style.display = "none";
-    }
+  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)";
   }
 
   topFunction() {
     window.scrollTo({ top: 0, behavior: "smooth" });
   }
 
-  darkMode() {
-    const themeLink = document.getElementById("theme");
-    const darkThemeLink = document.getElementById("darktheme");
-    if (themeLink) themeLink.disabled = true;
-    if (darkThemeLink) darkThemeLink.disabled = false;
-  }
-
-  lightMode() {
-    const themeLink = document.getElementById("theme");
-    const darkThemeLink = document.getElementById("darktheme");
-    if (themeLink) themeLink.disabled = false;
-    if (darkThemeLink) darkThemeLink.disabled = true;
-  }
-
-  darkModeToggle(mode) {
-    const switchState = document.getElementById("dark-mode-switch-check");
-    if (mode == "dark") {
-      this.darkMode();
-      if (switchState) {
-        switchState.checked = true;
-      }
-    } else if (mode == "light") {
-      this.lightMode();
-      if (switchState) {
-        switchState.checked = false;
-      }
-    } else {
-      if (switchState.checked) {
-        switchState.checked = false;
-        this.lightMode();
-      } else {
-        switchState.checked = true;
-        this.darkMode();
-      }
-    }
-  }
-
-  detectDarkMode() {
-    if (document.getElementById("darktheme")) {
-      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        this.darkModeToggle("dark");
-      } else {
-        this.darkModeToggle("light");
-      }
-    }
-  }
-
-  onLoad() {
-    document.querySelectorAll(".tagtoggle").forEach((toggle) => {
-      toggle.addEventListener("mouseup", (event) => {
-        event.stopPropagation();
-        const tagid = toggle.getAttribute("data-tagid");
-        this.toggleTag(tagid);
-      });
+  updateImageList() {
+    this.showLoader();
+    const imagelist = document.getElementById("imagelist");
+    if (!imagelist) return;
+    let str = "";
+    this.shown.sort((a, b) => a.src.replace(a.name, "").localeCompare(b.src.replace(b.name, "")));
+    this.shown.forEach((item, index) => {
+      let tags = this.parseHierarchicalTags(item.tags || []);
+      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>";
     });
-
-    this.requestMetadata();
-    this.setupDropdownToggle();
-    this.setupTagHandlers();
-    this.setupClickHandlers();
-    this.detectDarkMode();
-
-    window.addEventListener("scroll", this.scrollFunction);
+    imagelist.classList.add("row");
+    imagelist.classList.remove("centerload");
+    imagelist.innerHTML = str;
   }
 
   init() {

templates/index.html.j2

@@ -101,8 +101,8 @@
         {%- endif %}
         {%- if darktheme %}
         <li class="darkmodeswitch">
-          <a class="button" id="dark-mode-switch">
-            <input type="checkbox" class="checkbox" id="dark-mode-switch-check" />
+          <a id="dark-mode-switch">
+            <input type="checkbox" id="dark-mode-switch-check" />
             <div class="knobs">
               <span class="light">☀︎</span>
               <span class="slider"></span>
@@ -197,6 +197,7 @@
       </div>
     </div>
   </div>
+  <div class="imgprefetch" id="img-prefetch" aria-hidden="true"></div>
 </body>
 <script>
   new PhotoGallery();