removed log for raw and tiff files found

files/global.css

@@ -202,6 +202,7 @@ input {
 .tooltip .infotext {
   padding: 12px;
   width: max-content;
+  pointer-events: none;
 }
 
 .tooltiptext.tagdropdown {
@@ -224,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 {

modules/generate_html.py

@@ -383,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

templates/functionality.js

@@ -6,30 +6,68 @@ class PhotoGallery {
     this.subfolders = [];
     this.tagDropdownShown = false;
 
+    this.darkMode = this.darkMode.bind(this);
+    this.darkModeToggle = this.darkModeToggle.bind(this);
     this.debounce = this.debounce.bind(this);
-    this.openSwipe = this.openSwipe.bind(this);
-    this.prefetch = this.prefetch.bind(this);
-    this.reset = this.reset.bind(this);
-    this.recursive = this.recursive.bind(this);
-    this.requestMetadata = this.requestMetadata.bind(this);
+    this.detectDarkMode = this.detectDarkMode.bind(this);
     this.filter = this.filter.bind(this);
-    this.updateImageList = this.updateImageList.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.toggleTag = this.toggleTag.bind(this);
+    this.setupClickHandlers = this.setupClickHandlers.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.showLoader = this.showLoader.bind(this);
+    this.toggleTag = this.toggleTag.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.detectDarkMode = this.detectDarkMode.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) => {
@@ -38,43 +76,168 @@ 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();
+    this.detectDarkMode();
+
+    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) {
     const prefetchDiv = document.getElementById("img-prefetch");
     if (!prefetchDiv) return;
 
     const img = document.createElement("img");
     img.src = this.shown[imgIndex]?.src || "";
-    prefetchDiv.removeChild(prefetchDiv.firstChild);
     prefetchDiv.appendChild(img);
   }
 
-  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);
+  prefetchCancel() {
+    const prefetchDiv = document.getElementById("img-prefetch");
+    if (!prefetchDiv) return;
+    if (prefetchDiv.firstChild) {
+      prefetchDiv.removeChild(prefetchDiv.firstChild);
     }
-
-    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() {
@@ -93,6 +256,7 @@ class PhotoGallery {
       return;
     }
 
+    this.showLoader();
     if (folders) folders.style.display = "none";
     loc.searchParams.delete("recursive");
     loc.searchParams.append("recursive", true);
@@ -142,11 +306,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;
@@ -175,130 +356,41 @@ 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);
+    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();
   }
+
+  resetHoverTimer(index) {
+    if (this.hoverTimer) {
+      clearTimeout(this.hoverTimer);
+    }
+    this.prefetchCancel();
+    this.hoverTimer = setTimeout(() => {
+      this.prefetch(index);
+    }, 500);
+  }
+
+  scrollFunction() {
+    const totopbutton = document.getElementById("totop");
+    if (!totopbutton) return;
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+      totopbutton.style.display = "block";
     } else {
-          this.shown.push(item);
+      totopbutton.style.display = "none";
     }
   }
-    }
-    this.updateImageList();
-    window.location.hash = urltags;
-
-    const pid = searchParams.get("pid") - 1;
-    if (pid != -1) {
-      this.openSwipe(pid);
-    }
-  }
-
-  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];
-      }
-    }
-  }
-
-  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 || [];
-  }
-
-  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) {
     document.querySelectorAll("#tagdropdown input.tagcheckbox").forEach((checkbox) => {
@@ -310,13 +402,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() {
@@ -359,129 +487,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("mousemove", (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.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");
-    localStorage.setItem("theme", "dark");
-    if (themeLink) themeLink.disabled = true;
-    if (darkThemeLink) darkThemeLink.disabled = false;
-  }
-
-  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;
-  }
-
-  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")) {
-      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");
-      }
-    }
-  }
-
-  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() {