2026-07-01 09:51:15 -03:00
|
|
|
/*
|
|
|
|
|
* TweakDrag -- optional click-and-drag horizontal scrolling of the board.
|
|
|
|
|
*
|
|
|
|
|
* Like the Trello board canvas: press the empty board background and drag left/right
|
|
|
|
|
* to scroll #board-container horizontally. The pan only starts on empty background --
|
|
|
|
|
* pressing a task card, a drag handle, or any interactive control is ignored, so this
|
|
|
|
|
* never interferes with Kanboard's own card and column drag-and-drop.
|
|
|
|
|
*
|
2026-07-06 07:52:21 -03:00
|
|
|
* Resilience note: after a card drag Kanboard rebuilds the board with
|
|
|
|
|
* `$("#board-container").replaceWith(data)` (BoardDragAndDrop.refresh), destroying the
|
|
|
|
|
* element. So we must NOT bind to #board-container directly: we listen on `document` and
|
|
|
|
|
* re-resolve the container on each press, and the grab-cursor marker lives on <body>
|
|
|
|
|
* (which is never replaced). Previously the mousedown listener and the cursor class were
|
|
|
|
|
* on the container, so background dragging stopped working after every card move.
|
|
|
|
|
*
|
2026-07-01 09:51:15 -03:00
|
|
|
* Loaded only when the "Drag the board background to scroll" setting is enabled.
|
|
|
|
|
*/
|
|
|
|
|
(function () {
|
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
// Pressing any of these (or their descendants) must NOT start a background pan.
|
|
|
|
|
var IGNORE = "a, button, input, textarea, select, label, " +
|
|
|
|
|
".task-board, [data-task-id], .task-board-sort-handle, " +
|
|
|
|
|
".draggable-row-handle, .dropdown, .ui-sortable-handle";
|
|
|
|
|
|
|
|
|
|
function isIgnored(el) {
|
|
|
|
|
return !!(el && el.closest && el.closest(IGNORE));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function init() {
|
2026-07-06 07:52:21 -03:00
|
|
|
if (!document.getElementById("board-container") || document.body.getAttribute("data-td-drag") === "1") {
|
2026-07-01 09:51:15 -03:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2026-07-06 07:52:21 -03:00
|
|
|
// Marker on <body> (stable) enables the grab cursor via CSS, surviving board rebuilds.
|
|
|
|
|
document.body.setAttribute("data-td-drag", "1");
|
|
|
|
|
document.body.classList.add("td-drag-scroll");
|
2026-07-01 09:51:15 -03:00
|
|
|
|
|
|
|
|
var dragging = false;
|
2026-07-06 07:52:21 -03:00
|
|
|
var container = null;
|
2026-07-01 09:51:15 -03:00
|
|
|
var startX = 0;
|
|
|
|
|
var startScrollLeft = 0;
|
|
|
|
|
|
2026-07-06 07:52:21 -03:00
|
|
|
document.addEventListener("mousedown", function (e) {
|
|
|
|
|
if (e.button !== 0) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Re-resolve the current container and only act on its empty background.
|
|
|
|
|
var c = document.getElementById("board-container");
|
|
|
|
|
if (!c || !c.contains(e.target) || isIgnored(e.target)) {
|
2026-07-01 09:51:15 -03:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2026-07-06 07:52:21 -03:00
|
|
|
container = c;
|
2026-07-01 09:51:15 -03:00
|
|
|
dragging = true;
|
|
|
|
|
startX = e.clientX;
|
2026-07-06 07:52:21 -03:00
|
|
|
startScrollLeft = c.scrollLeft;
|
|
|
|
|
document.body.classList.add("td-grabbing");
|
2026-07-01 09:51:15 -03:00
|
|
|
e.preventDefault();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.addEventListener("mousemove", function (e) {
|
2026-07-06 07:52:21 -03:00
|
|
|
if (!dragging || !container) {
|
2026-07-01 09:51:15 -03:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
container.scrollLeft = startScrollLeft - (e.clientX - startX);
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function stop() {
|
|
|
|
|
if (!dragging) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
dragging = false;
|
2026-07-06 07:52:21 -03:00
|
|
|
container = null;
|
|
|
|
|
document.body.classList.remove("td-grabbing");
|
2026-07-01 09:51:15 -03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.addEventListener("mouseup", stop);
|
|
|
|
|
document.addEventListener("mouseleave", stop);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (document.readyState === "loading") {
|
|
|
|
|
document.addEventListener("DOMContentLoaded", init);
|
|
|
|
|
} else {
|
|
|
|
|
init();
|
|
|
|
|
}
|
|
|
|
|
})();
|
