drive top-scrollbar layout() from a single ResizeObserver

Asset/css/shrink-vertically.css

@@ -26,77 +26,56 @@
  * (BoardDragAndDrop.js: css("min-height", parent().height())). In CSS, min-height
  * beats max-height, so that inline value keeps tall columns from shrinking and our
  * max-height alone does nothing. A stylesheet !important overrides the inline
- * (non-important) min-height, so we reset it to 0 and let max-height win.
+ * (non-important) min-height so max-height can win.
+ *
+ * We override it to a NON-ZERO value, not 0: Kanboard relies on that same inline
+ * min-height to keep EMPTY columns tall enough to be a drop target, so zeroing it makes
+ * you unable to drop a card into an empty collapsed column. 250px gives a comfortable drop
+ * target (well above Kanboard's 70px .draggable-placeholder) while staying below the
+ * collapsed max-height, so the board never overflows the viewport (which would re-hide the
+ * horizontal scrollbar). Non-empty columns are unaffected -- their content is taller -- and
+ * short columns simply get this min-height, which is only cosmetic (no scrollbar).
  */
 #board td .board-task-list.board-task-list-compact {
     max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
-    min-height: 0 !important;
+    min-height: 250px !important;
 }
 
 /*
- * Optional top horizontal scrollbar (added by Asset/js/top-scrollbar.js when the
- * "Add a top horizontal scrollbar" setting is enabled). The inner element is given a
- * width equal to the board's scrollable width by the script; overflow-x: auto then
- * produces a scrollbar whose range mirrors the board's own bottom scrollbar. The 1px
- * inner height keeps the bar to just the scrollbar itself.
+ * Optional custom top horizontal scrollbar (built by Asset/js/top-scrollbar.js when the
+ * "Add a top horizontal scrollbar" setting is enabled). It is a track + draggable thumb,
+ * not a native scrollbar, so it renders and can be sized identically in every browser
+ * (Chrome, Firefox, Safari) and on touch. Thickness follows the --sv-bar-size variable
+ * (Settings -> Shrink Vertically), injected in the page head; falls back to 25px.
+ * touch-action: none lets a finger drag the thumb without scrolling the page.
  */
 .sv-top-scroll {
-    overflow-x: auto;
-    overflow-y: hidden;
-}
-
-.sv-top-scroll-inner {
-    height: 1px;
-}
-
-/*
- * Make the top scrollbar thick enough to grab easily (touch / big fingers).
- * WebKit/Blink (most desktop browsers and mobile Chrome/Safari) let us size the
- * scrollbar; styling the thumb/track is needed for it to stay visible once customised.
- * Thickness comes from the --sv-bar-size variable (Settings -> Shrink Vertically),
- * injected in the page head; falls back to 25px. Chromium/WebKit only (Chrome/Edge/
- * Safari, mobile Chrome/Safari); Firefox ignores ::-webkit-scrollbar and keeps its
- * default thin bar -- accepted for now.
- */
-.sv-top-scroll::-webkit-scrollbar {
+    position: relative;
+    width: 100%;
     height: var(--sv-bar-size, 25px);
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    overflow: hidden;
+    touch-action: none;
 }
 
-.sv-top-scroll::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.05);
-}
-
-.sv-top-scroll::-webkit-scrollbar-thumb {
+.sv-top-scroll-thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
     background: rgba(0, 0, 0, 0.35);
-    border-radius: 6px;
-}
-
-/*
- * Click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the
- * "Drag the board background to scroll" setting is enabled). The .sv-drag-scroll class
- * is set on #board-container by the script, so these rules are inert when disabled.
- * A grab cursor advertises the empty background; cards keep the normal cursor since
- * pressing them does a card drag, not a pan.
- */
-#board-container.sv-drag-scroll {
+    border-radius: 4px;
     cursor: grab;
+    touch-action: none;
 }
 
-#board-container.sv-drag-scroll .task-board {
-    cursor: default;
+.sv-top-scroll.sv-dragging .sv-top-scroll-thumb {
+    cursor: grabbing;
+    background: rgba(0, 0, 0, 0.5);
 }
 
-.sv-grabbing,
-.sv-grabbing * {
-    cursor: grabbing !important;
-    user-select: none !important;
+.sv-dragging {
+    user-select: none;
 }
-
-/*
- * Wider gutter between board columns is applied conditionally from
- * Template/layout/variable.php (only when the "Widen the gap between columns" setting is
- * on), using border-spacing with the --sv-bar-size value. border-spacing is the natural
- * control for the gap between table columns: it spreads them without shrinking the cards
- * and keeps each column header aligned with its task list. It is not in this static
- * stylesheet so it can be toggled per the setting.
- */

Asset/js/drag-scroll.js

@@ -1,75 +0,0 @@
-/*
- * ShrinkVertically -- 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.
- *
- * 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() {
-        var container = document.getElementById("board-container");
-
-        if (!container || container.getAttribute("data-sv-drag") === "1") {
-            return;
-        }
-
-        container.setAttribute("data-sv-drag", "1");
-        container.classList.add("sv-drag-scroll");
-
-        var dragging = false;
-        var startX = 0;
-        var startScrollLeft = 0;
-
-        container.addEventListener("mousedown", function (e) {
-            // Left button only, and only on empty board background.
-            if (e.button !== 0 || isIgnored(e.target)) {
-                return;
-            }
-
-            dragging = true;
-            startX = e.clientX;
-            startScrollLeft = container.scrollLeft;
-            container.classList.add("sv-grabbing");
-            e.preventDefault();
-        });
-
-        document.addEventListener("mousemove", function (e) {
-            if (!dragging) {
-                return;
-            }
-            container.scrollLeft = startScrollLeft - (e.clientX - startX);
-            e.preventDefault();
-        });
-
-        function stop() {
-            if (!dragging) {
-                return;
-            }
-            dragging = false;
-            container.classList.remove("sv-grabbing");
-        }
-
-        document.addEventListener("mouseup", stop);
-        document.addEventListener("mouseleave", stop);
-    }
-
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", init);
-    } else {
-        init();
-    }
-})();

Asset/js/top-scrollbar.js

@@ -1,63 +1,233 @@
 /*
- * ShrinkVertically -- optional horizontal scrollbar above the board.
+ * ShrinkVertically -- optional custom 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.
+ * Kanboard's board scrolls horizontally inside #board-container (overflow-x: auto), so the
+ * only native 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 scrollbar just above
+ * the columns and keeps it in sync with the board.
+ *
+ * Unlike a native scrollbar (whose thickness cannot be sized in Firefox), this is a custom
+ * track + thumb widget: it renders and behaves the same in every browser (Chrome, Firefox,
+ * Safari) and on touch, and its thickness follows the --sv-bar-size setting.
+ *
+ * Resilience note: after a card drag Kanboard rebuilds the board with
+ * `$("#board-container").replaceWith(data)` (BoardDragAndDrop.refresh), so the element we
+ * started with is destroyed and replaced. We therefore never cache the container: we
+ * re-resolve it on every use, listen for its scroll on `document` in the capture phase (so
+ * the listener survives the swap), and observe the STABLE parent (which is not replaced) so
+ * the widget keeps working -- previously the observer and scroll listener died with the old
+ * element, which froze the bar and lost sync after each move.
  *
  * Loaded only when the "Add a top horizontal scrollbar" setting is enabled.
  */
 (function () {
     "use strict";
 
+    // 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");
+    }
+
     function init() {
-        var container = document.getElementById("board-container");
+        var container = getContainer();
 
         // 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";
+        // The parent survives the board refresh (only #board-container is replaced).
+        var boardParent = container.parentNode;
 
-        var inner = document.createElement("div");
-        inner.className = "sv-top-scroll-inner";
-        bar.appendChild(inner);
+        var track = document.createElement("div");
+        track.className = "sv-top-scroll";
 
-        container.parentNode.insertBefore(bar, container);
+        var thumb = document.createElement("div");
+        thumb.className = "sv-top-scroll-thumb";
+        track.appendChild(thumb);
 
-        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";
+        boardParent.insertBefore(track, container);
+
+        var dragging = false;
+        var dragStartX = 0;
+        var dragStartScrollLeft = 0;
+
+        function metrics() {
+            var c = getContainer();
+            if (!c) {
+                return null;
+            }
+            return {
+                c: c,
+                viewport: c.clientWidth,
+                content: c.scrollWidth,
+                trackW: track.clientWidth
+            };
         }
 
-        var lock = false;
+        function positionThumb(m, thumbW) {
+            var maxScroll = m.content - m.viewport;
+            var maxThumb = m.trackW - thumbW;
+            var left = maxScroll > 0 ? (m.c.scrollLeft / maxScroll) * maxThumb : 0;
+            thumb.style.transform = "translateX(" + Math.round(left) + "px)";
+        }
 
-        bar.addEventListener("scroll", function () {
-            if (lock) { return; }
-            lock = true;
-            container.scrollLeft = bar.scrollLeft;
-            lock = false;
+        // 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.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; }
+
+            thumb.style.width = thumbW + "px";
+            positionThumb(m, thumbW);
+        }
+
+        // Keep the track directly before the (current) container after a board refresh.
+        function reattachTrack() {
+            var c = getContainer();
+            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
+        // document catches #board-container's (non-bubbling) scroll and survives the swap.
+        document.addEventListener("scroll", function (e) {
+            if (dragging) { return; }
+            if (e.target !== getContainer()) { return; }
+            var m = metrics();
+            if (!needsScroll(m)) { return; }
+            positionThumb(m, thumb.offsetWidth);
+        }, true);
+
+        // Drag the thumb (mouse + touch via Pointer Events).
+        thumb.addEventListener("pointerdown", function (e) {
+            var c = getContainer();
+            if (!c) { return; }
+            e.preventDefault();
+            e.stopPropagation();
+            dragging = true;
+            dragStartX = e.clientX;
+            dragStartScrollLeft = c.scrollLeft;
+            track.classList.add("sv-dragging");
+            if (thumb.setPointerCapture) {
+                thumb.setPointerCapture(e.pointerId);
+            }
         });
 
-        container.addEventListener("scroll", function () {
-            if (lock) { return; }
-            lock = true;
-            bar.scrollLeft = container.scrollLeft;
-            lock = false;
+        thumb.addEventListener("pointermove", function (e) {
+            if (!dragging) { return; }
+            var m = metrics();
+            if (!m) { return; }
+            var maxThumb = m.trackW - thumb.offsetWidth;
+            var maxScroll = m.content - m.viewport;
+            if (maxThumb <= 0) { return; }
+            m.c.scrollLeft = dragStartScrollLeft + (e.clientX - dragStartX) * (maxScroll / maxThumb);
+            positionThumb(m, thumb.offsetWidth);
         });
 
-        window.addEventListener("resize", sync);
+        function endDrag(e) {
+            if (!dragging) { return; }
+            dragging = false;
+            track.classList.remove("sv-dragging");
+            if (thumb.releasePointerCapture && e && e.pointerId != null) {
+                try { thumb.releasePointerCapture(e.pointerId); } catch (err) { /* ignore */ }
+            }
+        }
 
-        // The board can be redrawn by the AJAX polling/refresh; keep the width current.
+        thumb.addEventListener("pointerup", endDrag);
+        thumb.addEventListener("pointercancel", endDrag);
+
+        // Click on the empty track -> jump so the thumb centers under the pointer.
+        track.addEventListener("pointerdown", function (e) {
+            if (e.target === thumb || dragging) { return; }
+            var m = metrics();
+            if (!needsScroll(m)) { return; }
+
+            var thumbW = thumb.offsetWidth;
+            var maxThumb = m.trackW - thumbW;
+            var maxScroll = m.content - m.viewport;
+            if (maxThumb <= 0) { return; }
+
+            var clickX = e.clientX - track.getBoundingClientRect().left;
+            var targetLeft = clickX - thumbW / 2;
+            if (targetLeft < 0) { targetLeft = 0; }
+            if (targetLeft > maxThumb) { targetLeft = maxThumb; }
+
+            m.c.scrollLeft = (targetLeft / maxThumb) * maxScroll;
+            positionThumb(m, thumbW);
+        });
+
+        // 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;
+
+        function observeSizes() {
+            if (!sizeObserver) {
+                layout();
+                return;
+            }
+
+            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(sync).observe(container, { childList: true, subtree: true });
+            new MutationObserver(reattachTrack).observe(boardParent, { childList: true, subtree: true });
         }
 
-        sync();
+        observeSizes();
     }
 
     if (document.readyState === "loading") {

Plugin.php

@@ -51,7 +51,7 @@ class Plugin extends Base
 
     public function getPluginVersion()
     {
-        return '1.3.0';
+        return '1.5.1';
     }
 
     public function getPluginHomepage()

README.md

@@ -1,11 +1,13 @@
 # ShrinkVertically -- keep the board horizontal scrollbar visible
 
-A small Kanboard plugin focused on getting around the board horizontally. It fixes the
-vertically-collapsed board view so the bottom scrollbar stays on screen, can optionally
-add a second mirrored scrollbar above the columns, and can optionally let you drag the
-board background to scroll (like Trello). Everything is configurable under
+A small Kanboard plugin focused on the vertically-collapsed board view. It fixes the
+collapse so the bottom horizontal scrollbar stays on screen, and can optionally add a
+second mirrored scrollbar above the columns. Configurable under
 "Settings -> Shrink Vertically".
 
+Board drag/touch and column-gap options that used to live here have moved to the separate
+`TweakDrag` plugin.
+
 ## The problem
 
 Kanboard's board gear menu has an "expand vertically / collapse vertically" toggle. When
@@ -67,20 +69,13 @@ from the folder name). Reload the board; no build step, no configuration.
 Kanboard's board scrolls horizontally inside `#board-container`, so its only horizontal
 scrollbar is at the very bottom of the board -- on a wide board you must scroll all the
 way down to move sideways. Enable "Add a top horizontal scrollbar" in the settings to get
-a second, mirrored scrollbar just above the columns. A small script
-(`Asset/js/top-scrollbar.js`, loaded only when the option is on) inserts a dummy scroll
-strip above `#board-container` and keeps its scroll position in sync with the board both
-ways.
+a second scrollbar just above the columns.
 
-## Drag to scroll on Desktop (optional)
-
-Kanboard has no way to pan the board by grabbing it; you must use the scrollbar. Enable
-"Drag the board background to scroll" to click and drag on the empty board background to
-scroll the columns sideways, like the Trello board canvas. A small script
-(`Asset/js/drag-scroll.js`, loaded only when the option is on) starts a horizontal pan on
-`#board-container` only when the press lands on empty background -- pressing a task card,
-a drag handle or any control is ignored, so Kanboard's own card and column drag-and-drop
-keep working unchanged.
+It is a custom track + draggable thumb (`Asset/js/top-scrollbar.js`, loaded only when the
+option is on), not a native scrollbar, so it renders and can be sized the same in every
+browser (Chrome, Firefox, Safari) and on touch. Drag the thumb or click the track to move
+the board; the thumb tracks the board when you scroll it by other means. Its thickness
+follows the "Top Horizontal Scrollbar thickness" setting.
 
 ## Settings
 
@@ -91,16 +86,10 @@ These settings are global (per Kanboard instance) and admin-only. Go to
   in the page head as the `--sv-shrink-offset` CSS variable. Increase it if the scrollbar
   is still clipped (for example with a taller theme header); decrease it to make the
   collapsed columns taller. Default: 240.
-- **Scrollbar thickness and column gap in pixels** -- a single value that sets both the
-  thickness of the top scrollbar (Chromium/WebKit only) and the width of the column gap.
-  Injected as the `--sv-bar-size` CSS variable. Default: 25.
+- **Top Horizontal Scrollbar thickness in pixels** -- thickness of the custom top
+  scrollbar (all browsers). Injected as the `--sv-bar-size` CSS variable. Default: 25.
 - **Add a top horizontal scrollbar to the board** -- toggles the mirrored top scrollbar
   described above. Default: on.
-- **Widen the gap between columns** -- toggles the wider gap between board columns (sized
-  by the value above). Also adds some spacing at the left and right edges of the board.
-  Default: on.
-- **Drag the board background to scroll horizontally** -- toggles the Trello-style
-  click-and-drag panning described above. Default: on.
 
 ## License
 

Template/config/show.php

@@ -14,10 +14,10 @@
     </fieldset>
 
     <fieldset>
-        <?= $this->form->label(t('Scrollbar thickness in pixels'), 'shrink_vertically_bar_size') ?>
+        <?= $this->form->label(t('Top Horizontal Scrollbar thickness in pixels'), 'shrink_vertically_bar_size') ?>
         <?= $this->form->number('shrink_vertically_bar_size', $values, $errors) ?>
         <p class="form-help">
-            <?= t('Thickness of the top horizontal scrollbar (Chromium/WebKit browsers only). Default: 25.') ?>
+            <?= t('Thickness of the top horizontal scrollbar. Default: 25.') ?>
         </p>
     </fieldset>
 

Template/layout/variable.php

@@ -3,7 +3,4 @@
         --sv-shrink-offset: <?= (int) $this->app->config('shrink_vertically_offset', 240) ?>px;
         --sv-bar-size: <?= (int) $this->app->config('shrink_vertically_bar_size', 25) ?>px;
     }
-<?php if ((int) $this->app->config('shrink_vertically_column_gap', 1) === 1): ?>
-    #board { border-collapse: separate !important; border-spacing: var(--sv-bar-size, 25px) 0 !important; }
-<?php endif ?>
 </style>

VERSION

@@ -1 +1 @@
-ShrinkVertically v1.2
+ShrinkVertically v1.5.1