Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5560c42bcc | |||
| 86f40ff6ae | |||
| 89292492db |
@@ -26,6 +26,10 @@
|
||||
// Keep the thumb wide enough to grab, even on a very wide board.
|
||||
var MIN_THUMB = 24;
|
||||
|
||||
// Ignore a few px of residual overflow (padding / sub-pixel rounding) so a board that visually
|
||||
// fits is treated as "no horizontal scroll" instead of showing an immovable near-full thumb.
|
||||
var FIT_TOLERANCE = 4;
|
||||
|
||||
function getContainer() {
|
||||
return document.getElementById("board-container");
|
||||
}
|
||||
@@ -74,17 +78,29 @@
|
||||
thumb.style.transform = "translateX(" + Math.round(left) + "px)";
|
||||
}
|
||||
|
||||
// Recompute thumb width/position; hide the whole bar when nothing to scroll.
|
||||
// The board needs scrolling only if its content exceeds the viewport by more than the
|
||||
// tolerance (absorbs a residual px or two so a fitting board reads as "no scroll").
|
||||
function needsScroll(m) {
|
||||
return m && m.content - m.viewport > FIT_TOLERANCE;
|
||||
}
|
||||
|
||||
// Recompute the thumb. The (light) track stays visible for a STABLE height; when the board
|
||||
// fits, just drop the knob (thumb width 0) so it reads as "nothing to scroll" without the
|
||||
// layout jump that hiding the whole bar would cause.
|
||||
function layout() {
|
||||
var m = metrics();
|
||||
|
||||
if (!m || m.content <= m.viewport || m.trackW <= 0) {
|
||||
track.style.display = "none";
|
||||
if (!m || m.trackW <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
track.style.display = "";
|
||||
|
||||
if (!needsScroll(m)) {
|
||||
thumb.style.width = "0px";
|
||||
return;
|
||||
}
|
||||
|
||||
var thumbW = Math.round(m.trackW * m.viewport / m.content);
|
||||
if (thumbW < MIN_THUMB) { thumbW = MIN_THUMB; }
|
||||
if (thumbW > m.trackW) { thumbW = m.trackW; }
|
||||
@@ -99,6 +115,7 @@
|
||||
if (c && c.parentNode && track.nextSibling !== c) {
|
||||
c.parentNode.insertBefore(track, c);
|
||||
}
|
||||
observeSizes();
|
||||
}
|
||||
|
||||
// Board scrolled by any other means -> keep the thumb in sync. Capture-phase on
|
||||
@@ -107,7 +124,7 @@
|
||||
if (dragging) { return; }
|
||||
if (e.target !== getContainer()) { return; }
|
||||
var m = metrics();
|
||||
if (!m || m.content <= m.viewport) { return; }
|
||||
if (!needsScroll(m)) { return; }
|
||||
positionThumb(m, thumb.offsetWidth);
|
||||
}, true);
|
||||
|
||||
@@ -153,7 +170,7 @@
|
||||
track.addEventListener("pointerdown", function (e) {
|
||||
if (e.target === thumb || dragging) { return; }
|
||||
var m = metrics();
|
||||
if (!m || m.content <= m.viewport) { return; }
|
||||
if (!needsScroll(m)) { return; }
|
||||
|
||||
var thumbW = thumb.offsetWidth;
|
||||
var maxThumb = m.trackW - thumbW;
|
||||
@@ -169,18 +186,48 @@
|
||||
positionThumb(m, thumbW);
|
||||
});
|
||||
|
||||
window.addEventListener("resize", layout);
|
||||
// Single source of truth for recomputing the thumb: a ResizeObserver on the container
|
||||
// (viewport) and #board (content). It fires exactly when the width settles/changes -- the
|
||||
// right moment -- which also fixes the stale thumb from the first layout() running before the
|
||||
// board finished sizing. Both are replaced on a board refresh, so re-observe the current ones
|
||||
// (from reattachTrack). Without ResizeObserver, fall back to a window resize listener.
|
||||
var sizeObserver = window.ResizeObserver ? new ResizeObserver(function () { layout(); }) : null;
|
||||
var observedContainer = null;
|
||||
var observedBoard = null;
|
||||
|
||||
// Observe the STABLE parent so we keep working after #board-container is replaced by
|
||||
// a card move / AJAX polling; re-seat the track and recompute sizes on any change.
|
||||
if (window.MutationObserver) {
|
||||
new MutationObserver(function () {
|
||||
reattachTrack();
|
||||
function observeSizes() {
|
||||
if (!sizeObserver) {
|
||||
layout();
|
||||
}).observe(boardParent, { childList: true, subtree: true });
|
||||
return;
|
||||
}
|
||||
|
||||
layout();
|
||||
var c = getContainer();
|
||||
var b = document.getElementById("board");
|
||||
|
||||
if (c && c !== observedContainer) {
|
||||
if (observedContainer) { sizeObserver.unobserve(observedContainer); }
|
||||
sizeObserver.observe(c);
|
||||
observedContainer = c;
|
||||
}
|
||||
|
||||
if (b && b !== observedBoard) {
|
||||
if (observedBoard) { sizeObserver.unobserve(observedBoard); }
|
||||
sizeObserver.observe(b);
|
||||
observedBoard = b;
|
||||
}
|
||||
}
|
||||
|
||||
if (!sizeObserver) {
|
||||
window.addEventListener("resize", layout);
|
||||
}
|
||||
|
||||
// Re-seat the track and re-observe after #board-container is replaced by a card move / AJAX
|
||||
// polling (we watch the STABLE parent, since the container itself is swapped out).
|
||||
if (window.MutationObserver) {
|
||||
new MutationObserver(reattachTrack).observe(boardParent, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
observeSizes();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
|
||||
@@ -51,7 +51,7 @@ class Plugin extends Base
|
||||
|
||||
public function getPluginVersion()
|
||||
{
|
||||
return '1.5.0';
|
||||
return '1.5.2';
|
||||
}
|
||||
|
||||
public function getPluginHomepage()
|
||||
|
||||
16
README.md
16
README.md
@@ -94,3 +94,19 @@ These settings are global (per Kanboard instance) and admin-only. Go to
|
||||
## License
|
||||
|
||||
AGPL-3.0. See LICENSE.
|
||||
|
||||
## More Kanboard plugins by Ruben (drbeco)
|
||||
|
||||
All free and AGPL-3.0, at [code.beco.cc](https://code.beco.cc/beco):
|
||||
|
||||
- **[RecoReco](https://code.beco.cc/beco/RecoReco)** -- calendar-scheduled recurring cards (yearly,
|
||||
monthly, weekly, daily), driven by the card due date.
|
||||
- **[FinanceBuddy](https://code.beco.cc/beco/FinanceBuddy)** -- attach a money value (debit/credit
|
||||
and installments) to cards, shown on the card and totalled per column.
|
||||
- **[OrganonTweaks](https://code.beco.cc/beco/OrganonTweaks)** -- an umbrella of small
|
||||
quality-of-life board tweaks: remove an empty column, always show the comment icon, emphasize due
|
||||
dates, extra search keywords and shared board filters, and more.
|
||||
- **[BulkMoveTasks](https://code.beco.cc/beco/BulkMoveTasks)** -- move every task from one board
|
||||
column to another in a single action.
|
||||
- **[TweakDrag](https://code.beco.cc/beco/TweakDrag)** -- board drag and touch niceties:
|
||||
drag-to-scroll, a wider column gap, and smoother card dragging.
|
||||
|
||||
Reference in New Issue
Block a user