keep board horizontal scroll across refresh: restore scrollLeft after #board-container rebuild; v1.0

Asset/js/keep-scroll.js

@@ -0,0 +1,55 @@
+/*
+ * OrganonTweaks -- keep the board's horizontal scroll position across refreshes.
+ *
+ * When you drop a card (and on Kanboard's periodic AJAX polling) the board is rebuilt with
+ * `$("#board-container").replaceWith(data)` (BoardDragAndDrop.refresh). The brand-new
+ * element starts at scrollLeft 0, so the board snaps back to the first column -- a jarring
+ * jump. This remembers the last scroll position and restores it the moment a replacement
+ * container appears, so the view stays put.
+ *
+ * We observe the STABLE parent (the container itself is replaced) and read the scroll from
+ * whichever #board-container is current, so it keeps working after every rebuild.
+ */
+(function () {
+    "use strict";
+
+    function init() {
+        var container = document.getElementById("board-container");
+        if (!container) {
+            return;
+        }
+
+        var parent = container.parentNode;
+        var lastScrollLeft = container.scrollLeft;
+        var lastContainer = container;
+
+        // Remember the position whenever the board is scrolled (capture: scroll does not
+        // bubble, and this survives the container being replaced).
+        document.addEventListener("scroll", function (e) {
+            var c = document.getElementById("board-container");
+            if (c && e.target === c) {
+                lastScrollLeft = c.scrollLeft;
+            }
+        }, true);
+
+        // When the board is rebuilt, #board-container becomes a new element at scrollLeft 0;
+        // restore the remembered position before the browser paints it.
+        if (window.MutationObserver) {
+            new MutationObserver(function () {
+                var c = document.getElementById("board-container");
+                if (c && c !== lastContainer) {
+                    lastContainer = c;
+                    if (c.scrollLeft !== lastScrollLeft) {
+                        c.scrollLeft = lastScrollLeft;
+                    }
+                }
+            }).observe(parent, { childList: true });
+        }
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();