Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8760377927 |
@@ -6,16 +6,17 @@
|
|||||||
* --td-column-gap value, so it is not in this static stylesheet.
|
* --td-column-gap value, so it is not in this static stylesheet.
|
||||||
*
|
*
|
||||||
* Below: click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the
|
* Below: click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the
|
||||||
* "Drag the board background to scroll" setting is enabled). The .td-drag-scroll class is
|
* "Drag the board background to scroll" setting is enabled). The .td-drag-scroll marker is
|
||||||
* set on #board-container by the script, so these rules are inert when disabled. A grab
|
* set on <body> by the script (not on #board-container, which Kanboard replaces on every
|
||||||
|
* card move), so these rules are inert when disabled and survive board rebuilds. A grab
|
||||||
* cursor advertises the empty background; cards keep the normal cursor since pressing them
|
* cursor advertises the empty background; cards keep the normal cursor since pressing them
|
||||||
* does a card drag, not a pan.
|
* does a card drag, not a pan.
|
||||||
*/
|
*/
|
||||||
#board-container.td-drag-scroll {
|
body.td-drag-scroll #board-container {
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
#board-container.td-drag-scroll .task-board {
|
body.td-drag-scroll #board-container .task-board {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,13 @@
|
|||||||
* pressing a task card, a drag handle, or any interactive control is ignored, so this
|
* 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.
|
* never interferes with Kanboard's own card and column drag-and-drop.
|
||||||
*
|
*
|
||||||
|
* 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.
|
||||||
|
*
|
||||||
* Loaded only when the "Drag the board background to scroll" setting is enabled.
|
* Loaded only when the "Drag the board background to scroll" setting is enabled.
|
||||||
*/
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
@@ -21,34 +28,40 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
var container = document.getElementById("board-container");
|
if (!document.getElementById("board-container") || document.body.getAttribute("data-td-drag") === "1") {
|
||||||
|
|
||||||
if (!container || container.getAttribute("data-td-drag") === "1") {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
container.setAttribute("data-td-drag", "1");
|
// Marker on <body> (stable) enables the grab cursor via CSS, surviving board rebuilds.
|
||||||
container.classList.add("td-drag-scroll");
|
document.body.setAttribute("data-td-drag", "1");
|
||||||
|
document.body.classList.add("td-drag-scroll");
|
||||||
|
|
||||||
var dragging = false;
|
var dragging = false;
|
||||||
|
var container = null;
|
||||||
var startX = 0;
|
var startX = 0;
|
||||||
var startScrollLeft = 0;
|
var startScrollLeft = 0;
|
||||||
|
|
||||||
container.addEventListener("mousedown", function (e) {
|
document.addEventListener("mousedown", function (e) {
|
||||||
// Left button only, and only on empty board background.
|
if (e.button !== 0) {
|
||||||
if (e.button !== 0 || isIgnored(e.target)) {
|
|
||||||
return;
|
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)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container = c;
|
||||||
dragging = true;
|
dragging = true;
|
||||||
startX = e.clientX;
|
startX = e.clientX;
|
||||||
startScrollLeft = container.scrollLeft;
|
startScrollLeft = c.scrollLeft;
|
||||||
container.classList.add("td-grabbing");
|
document.body.classList.add("td-grabbing");
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener("mousemove", function (e) {
|
document.addEventListener("mousemove", function (e) {
|
||||||
if (!dragging) {
|
if (!dragging || !container) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
container.scrollLeft = startScrollLeft - (e.clientX - startX);
|
container.scrollLeft = startScrollLeft - (e.clientX - startX);
|
||||||
@@ -60,7 +73,8 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
dragging = false;
|
dragging = false;
|
||||||
container.classList.remove("td-grabbing");
|
container = null;
|
||||||
|
document.body.classList.remove("td-grabbing");
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("mouseup", stop);
|
document.addEventListener("mouseup", stop);
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ class Plugin extends Base
|
|||||||
|
|
||||||
public function getPluginVersion()
|
public function getPluginVersion()
|
||||||
{
|
{
|
||||||
return '1.0.0';
|
return '1.1.0';
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPluginHomepage()
|
public function getPluginHomepage()
|
||||||
|
|||||||
Reference in New Issue
Block a user