Grotti 3.5.0: Pagination, Logging, Deb-Paket, Makro-Doku, PLA-Match-Fix.

web/templates/dateien.html

@@ -57,6 +57,7 @@
       <div class="skeleton" style="height:4rem"></div>
       <div class="skeleton" style="height:4rem"></div>
     </div>
+    <div class="pager" id="lib-pager" hidden></div>
     <p class="drop-hint">Dateien hierher ziehen zum Hochladen.</p>
   </section>
 
@@ -839,6 +840,39 @@ function infoPopupHtml(file) {
   </details>`;
 }
 
+function placeLibInfoPop(details) {
+  const pop = details.querySelector(".lib-info-pop");
+  const anchor = details.querySelector("summary");
+  if (!pop || !anchor) return;
+  const margin = 6;
+  const r = anchor.getBoundingClientRect();
+  pop.style.left = "0px";
+  pop.style.top = "0px";
+  const pw = pop.offsetWidth;
+  const ph = pop.offsetHeight;
+  let left = r.right - pw;
+  left = Math.max(margin, Math.min(left, window.innerWidth - pw - margin));
+  let top = r.bottom + margin;
+  if (top + ph > window.innerHeight - margin && r.top - margin - ph >= margin) {
+    top = r.top - margin - ph;
+  } else {
+    top = Math.min(top, Math.max(margin, window.innerHeight - ph - margin));
+  }
+  pop.style.left = left + "px";
+  pop.style.top = top + "px";
+}
+
+function closeOpenLibInfo(except) {
+  document.querySelectorAll("details.lib-info[open]").forEach((node) => {
+    if (node !== except) node.removeAttribute("open");
+  });
+}
+
+function repositionOpenLibInfo() {
+  const open = document.querySelector("details.lib-info[open]");
+  if (open) placeLibInfoPop(open);
+}
+
 function thumbHtml(file) {
   return file.preview
     ? `<img alt="" loading="lazy" src="${escapeHtml(withToken(file.preview))}" onerror="this.style.visibility='hidden'">`
@@ -856,6 +890,8 @@ function libItemHtml(file) {
   </div>`;
 }
 
+let libPage = 1;
+
 function renderLibrary() {
   const list = document.getElementById("lib-list");
   const shown = filteredFiles();
@@ -863,15 +899,19 @@ function renderLibrary() {
   document.getElementById("lib-count").textContent = shown.length === files.length ? String(files.length) : shown.length + "/" + files.length;
   if (!files.length) {
     list.innerHTML = '<div class="picked-empty">' + icon("file") + '<span>Noch keine Datei.</span><span class="tiny">Hochladen oder Slice-Ordner in den Einstellungen setzen.</span></div>';
+    renderPager(document.getElementById("lib-pager"), null, () => {});
     return;
   }
   if (!shown.length) {
     list.innerHTML = '<div class="picked-empty">' + icon("search") + '<span>Keine Datei passt.</span></div>';
+    renderPager(document.getElementById("lib-pager"), null, () => {});
     return;
   }
+  const paged = pageSlice(shown, libPage, DEFAULT_PAGE_SIZE);
+  libPage = paged.page;
   const parts = [];
   let lastGroup = null;
-  shown.forEach((file) => {
+  paged.items.forEach((file) => {
     let group = null;
     if (sort === "material") group = materialKey(file) || "Ohne Material";
     else if (sort === "folder") group = folderLabel(folderKey(file));
@@ -882,6 +922,10 @@ function renderLibrary() {
     parts.push(libItemHtml(file));
   });
   list.innerHTML = parts.join("");
+  renderPager(document.getElementById("lib-pager"), paged, (p) => {
+    libPage = p;
+    renderLibrary();
+  });
 }
 
 /* ---------- Flow rechts ---------- */
@@ -1546,6 +1590,23 @@ async function doAblauf() {
 
 /* ---------- Ereignisse ---------- */
 
+document.getElementById("lib-list").addEventListener("toggle", (event) => {
+  const details = event.target;
+  if (!(details instanceof HTMLDetailsElement) || !details.classList.contains("lib-info")) return;
+  if (details.open) {
+    closeOpenLibInfo(details);
+    placeLibInfoPop(details);
+  }
+}, true);
+
+document.getElementById("lib-list").addEventListener("scroll", repositionOpenLibInfo, { passive: true });
+window.addEventListener("resize", repositionOpenLibInfo);
+
+document.addEventListener("pointerdown", (event) => {
+  if (event.target.closest("details.lib-info")) return;
+  closeOpenLibInfo();
+});
+
 document.getElementById("lib-list").addEventListener("click", (event) => {
   if (event.target.closest(".lib-move")) {
     event.stopPropagation();
@@ -1628,6 +1689,7 @@ document.getElementById("lib-list").addEventListener("keydown", (event) => {
   const node = document.getElementById(id);
   if (!node) return;
   const onChange = () => {
+    libPage = 1;
     saveLibMemory();
     renderLibrary();
   };