Lock explorer scroll during selection

build-plugin.sh

@@ -2,7 +2,7 @@
 set -eu
 
 PLUGIN="u-navigator"
-VERSION="0.2.6"
+VERSION="0.2.7"
 PKG_DIR="packages"
 WORK_DIR=".plugin-build"
 PKG_NAME="${PLUGIN}-${VERSION}.tgz"

server/public/app.js

@@ -152,6 +152,11 @@ function renderWindow(win) {
   if (win.kind === 'properties') renderProperties(body);
   if (win.kind === 'queue') renderQueue(body);
   body.addEventListener('scroll', () => {
+    if (win.data.lockScroll) {
+      body.scrollTop = win.data.lockScrollTop || 0;
+      body.scrollLeft = win.data.lockScrollLeft || 0;
+      return;
+    }
     win.data.scrollTop = body.scrollTop;
     win.data.scrollLeft = body.scrollLeft;
   });
@@ -214,7 +219,8 @@ function renderExplorer(body, win) {
 
   for (const row of body.querySelectorAll('.file-row')) {
     const entry = data.entries.find((item) => item.path === row.dataset.path);
-    row.addEventListener('click', () => selectEntry(win, entry));
+    row.addEventListener('pointerdown', () => lockExplorerScroll(win, body));
+    row.addEventListener('click', () => selectEntry(win, entry, body));
     row.addEventListener('dblclick', () => {
       if (entry.type === 'directory') {
         loadExplorer(win, entry.path);
@@ -460,12 +466,13 @@ async function pollJob(id) {
   }
 }
 
-function selectEntry(win, entry) {
+function selectEntry(win, entry, scrollBody = null) {
   win.data.selectedPath = entry.path;
   state.selectedEntry = entry;
   focusWindow(win);
   updateSelectedRows();
   updatePropertiesWindows();
+  restoreExplorerScroll(win, scrollBody);
 }
 
 function focusWindow(win) {
@@ -495,6 +502,36 @@ function updatePropertiesWindows() {
   }
 }
 
+function lockExplorerScroll(win, body) {
+  win.data.lockScroll = true;
+  win.data.lockScrollTop = body.scrollTop;
+  win.data.lockScrollLeft = body.scrollLeft;
+}
+
+function restoreExplorerScroll(win, body) {
+  if (!body) {
+    body = workspace.querySelector(`.window[data-window-id="${win.id}"] .window-body`);
+  }
+  if (!body) return;
+
+  const top = win.data.lockScrollTop ?? win.data.scrollTop ?? 0;
+  const left = win.data.lockScrollLeft ?? win.data.scrollLeft ?? 0;
+  const restore = () => {
+    body.scrollTop = top;
+    body.scrollLeft = left;
+  };
+
+  restore();
+  requestAnimationFrame(restore);
+  setTimeout(restore, 0);
+  setTimeout(() => {
+    restore();
+    win.data.lockScroll = false;
+    win.data.scrollTop = body.scrollTop;
+    win.data.scrollLeft = body.scrollLeft;
+  }, 120);
+}
+
 function startDragWindow(event, win) {
   if (event.target.closest('button') || win.maximized) return;
   event.preventDefault();

u-navigator.plg

@@ -1,7 +1,7 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "u-navigator">
 <!ENTITY author "michael">
-<!ENTITY version "0.2.6">
+<!ENTITY version "0.2.7">
 <!ENTITY package "&name;-&version;.tgz">
 ]>
 <PLUGIN name="&name;" author="&author;" version="&version;" pluginURL="https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/u-navigator.plg">
@@ -14,7 +14,7 @@
 
 <FILE Name="/boot/config/plugins/&name;/&package;">
 <URL>https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package;</URL>
-<MD5>56421a769bd45a076d4d38f3e70aa90e</MD5>
+<MD5>c22b248a40a369a93ef58126e72fe823</MD5>
 </FILE>
 
 <FILE Run="/bin/bash">