69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
|
/*
|
||
|
|
* ShrinkVertically -- optional horizontal scrollbar above the board.
|
||
|
|
*
|
||
|
|
* Kanboard's board scrolls horizontally inside #board-container (overflow-x: auto),
|
||
|
|
* so the only horizontal scrollbar sits at the very bottom of the board. On a wide
|
||
|
|
* board you have to scroll all the way down to reach it. This adds a second, mirrored
|
||
|
|
* scrollbar just above the columns and keeps the two scroll positions in sync.
|
||
|
|
*
|
||
|
|
* Loaded only when the "Add a top horizontal scrollbar" setting is enabled.
|
||
|
|
*/
|
||
|
|
(function () {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
var container = document.getElementById("board-container");
|
||
|
|
|
||
|
|
// Only on the board, and never add it twice.
|
||
|
|
if (!container || document.querySelector(".sv-top-scroll")) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var bar = document.createElement("div");
|
||
|
|
bar.className = "sv-top-scroll";
|
||
|
|
|
||
|
|
var inner = document.createElement("div");
|
||
|
|
inner.className = "sv-top-scroll-inner";
|
||
|
|
bar.appendChild(inner);
|
||
|
|
|
||
|
|
container.parentNode.insertBefore(bar, container);
|
||
|
|
|
||
|
|
function sync() {
|
||
|
|
// Match the dummy bar's content width to the board's scrollable width
|
||
|
|
// so its scrollbar has the same range as the board's own scrollbar.
|
||
|
|
inner.style.width = container.scrollWidth + "px";
|
||
|
|
}
|
||
|
|
|
||
|
|
var lock = false;
|
||
|
|
|
||
|
|
bar.addEventListener("scroll", function () {
|
||
|
|
if (lock) { return; }
|
||
|
|
lock = true;
|
||
|
|
container.scrollLeft = bar.scrollLeft;
|
||
|
|
lock = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
container.addEventListener("scroll", function () {
|
||
|
|
if (lock) { return; }
|
||
|
|
lock = true;
|
||
|
|
bar.scrollLeft = container.scrollLeft;
|
||
|
|
lock = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener("resize", sync);
|
||
|
|
|
||
|
|
// The board can be redrawn by the AJAX polling/refresh; keep the width current.
|
||
|
|
if (window.MutationObserver) {
|
||
|
|
new MutationObserver(sync).observe(container, { childList: true, subtree: true });
|
||
|
|
}
|
||
|
|
|
||
|
|
sync();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (document.readyState === "loading") {
|
||
|
|
document.addEventListener("DOMContentLoaded", init);
|
||
|
|
} else {
|
||
|
|
init();
|
||
|
|
}
|
||
|
|
})();
|