56 lines
2.1 KiB
JavaScript
56 lines
2.1 KiB
JavaScript
/*
|
|
* 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();
|
|
}
|
|
})();
|