bar from scratch VERSION v1.4

.gitignore

@@ -0,0 +1,2 @@
+PLAN-*
+

Asset/css/shrink-vertically.css

@@ -34,17 +34,40 @@
 }
 
 /*
- * Optional top horizontal scrollbar (added by Asset/js/top-scrollbar.js when the
+ * Optional custom top horizontal scrollbar (built by Asset/js/top-scrollbar.js when the
- * "Add a top horizontal scrollbar" setting is enabled). The inner element is given a
+ * "Add a top horizontal scrollbar" setting is enabled). It is a track + draggable thumb,
- * width equal to the board's scrollable width by the script; overflow-x: auto then
+ * not a native scrollbar, so it renders and can be sized identically in every browser
- * produces a scrollbar whose range mirrors the board's own bottom scrollbar. The 1px
+ * (Chrome, Firefox, Safari) and on touch. Thickness follows the --sv-bar-size variable
- * inner height keeps the bar to just the scrollbar itself.
+ * (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;
+    position: relative;
-    overflow-y: hidden;
+    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-inner {
+.sv-top-scroll-thumb {
-    height: 1px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.35);
+    border-radius: 4px;
+    cursor: grab;
+    touch-action: none;
+}
+
+.sv-top-scroll.sv-dragging .sv-top-scroll-thumb {
+    cursor: grabbing;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.sv-dragging {
+    user-select: none;
 }

Asset/js/top-scrollbar.js

@@ -1,16 +1,23 @@
 /*
- * 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),
+ * Kanboard's board scrolls horizontally inside #board-container (overflow-x: auto), so the
- * so the only horizontal scrollbar sits at the very bottom of the board. On a wide
+ * only native horizontal scrollbar sits at the very bottom of the board. On a wide board
- * board you have to scroll all the way down to reach it. This adds a second, mirrored
+ * you have to scroll all the way down to reach it. This adds a second scrollbar just above
- * scrollbar just above the columns and keeps the two scroll positions in sync.
+ * 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.
  *
  * 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;
+
     function init() {
         var container = document.getElementById("board-container");
 
@@ -19,45 +26,124 @@
             return;
         }
 
-        var bar = document.createElement("div");
+        var track = document.createElement("div");
-        bar.className = "sv-top-scroll";
+        track.className = "sv-top-scroll";
 
-        var inner = document.createElement("div");
+        var thumb = document.createElement("div");
-        inner.className = "sv-top-scroll-inner";
+        thumb.className = "sv-top-scroll-thumb";
-        bar.appendChild(inner);
+        track.appendChild(thumb);
 
-        container.parentNode.insertBefore(bar, container);
+        container.parentNode.insertBefore(track, container);
 
-        function sync() {
+        var dragging = false;
-            // Match the dummy bar's content width to the board's scrollable width
+        var dragStartX = 0;
-            // so its scrollbar has the same range as the board's own scrollbar.
+        var dragStartScrollLeft = 0;
-            inner.style.width = container.scrollWidth + "px";
+
+        function metrics() {
+            return {
+                viewport: container.clientWidth,
+                content: container.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 ? (container.scrollLeft / maxScroll) * maxThumb : 0;
+            thumb.style.transform = "translateX(" + Math.round(left) + "px)";
+        }
 
-        bar.addEventListener("scroll", function () {
+        // Recompute thumb width/position; hide the whole bar when nothing to scroll.
-            if (lock) { return; }
+        function layout() {
-            lock = true;
+            var m = metrics();
-            container.scrollLeft = bar.scrollLeft;
-            lock = false;
-        });
 
+            if (m.content <= m.viewport || m.trackW <= 0) {
+                track.style.display = "none";
+                return;
+            }
+
+            track.style.display = "";
+
+            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);
+        }
+
+        // Board scrolled by any other means -> keep the thumb in sync.
         container.addEventListener("scroll", function () {
-            if (lock) { return; }
+            if (dragging) { return; }
-            lock = true;
+            var m = metrics();
-            bar.scrollLeft = container.scrollLeft;
+            if (m.content <= m.viewport) { return; }
-            lock = false;
+            positionThumb(m, thumb.offsetWidth);
         });
 
-        window.addEventListener("resize", sync);
+        // Drag the thumb (mouse + touch via Pointer Events).
+        thumb.addEventListener("pointerdown", function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dragging = true;
+            dragStartX = e.clientX;
+            dragStartScrollLeft = container.scrollLeft;
+            track.classList.add("sv-dragging");
+            if (thumb.setPointerCapture) {
+                thumb.setPointerCapture(e.pointerId);
+            }
+        });
 
-        // The board can be redrawn by the AJAX polling/refresh; keep the width current.
+        thumb.addEventListener("pointermove", function (e) {
-        if (window.MutationObserver) {
+            if (!dragging) { return; }
-            new MutationObserver(sync).observe(container, { childList: true, subtree: true });
+            var m = metrics();
+            var maxThumb = m.trackW - thumb.offsetWidth;
+            var maxScroll = m.content - m.viewport;
+            if (maxThumb <= 0) { return; }
+            container.scrollLeft = dragStartScrollLeft + (e.clientX - dragStartX) * (maxScroll / maxThumb);
+            positionThumb(m, thumb.offsetWidth);
+        });
+
+        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 */ }
+            }
         }
 
-        sync();
+        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 (m.content <= m.viewport) { 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; }
+
+            container.scrollLeft = (targetLeft / maxThumb) * maxScroll;
+            positionThumb(m, thumbW);
+        });
+
+        window.addEventListener("resize", layout);
+
+        // The board can be redrawn by AJAX polling / drag-and-drop; keep sizes current.
+        if (window.MutationObserver) {
+            new MutationObserver(layout).observe(container, { childList: true, subtree: true });
+        }
+
+        layout();
     }
 
     if (document.readyState === "loading") {

Controller/ConfigController.php

@@ -14,15 +14,21 @@ class ConfigController extends BaseController
     const MIN_OFFSET = 0;
     const MAX_OFFSET = 2000;
 
+    const DEFAULT_BAR_SIZE = 25;
+    const MIN_BAR_SIZE = 0;
+    const MAX_BAR_SIZE = 200;
+
     public function show()
     {
         $offset = (int) $this->configModel->get('shrink_vertically_offset', self::DEFAULT_OFFSET);
-        $topScrollbar = (int) $this->configModel->get('shrink_vertically_top_scrollbar', 0);
+        $barSize = (int) $this->configModel->get('shrink_vertically_bar_size', self::DEFAULT_BAR_SIZE);
+        $topScrollbar = (int) $this->configModel->get('shrink_vertically_top_scrollbar', 1);
 
         $this->response->html($this->helper->layout->config('shrinkVertically:config/show', array(
             'title' => t('Settings').' > '.t('Shrink Vertically'),
             'values' => array(
                 'shrink_vertically_offset' => $offset,
+                'shrink_vertically_bar_size' => $barSize,
                 'shrink_vertically_top_scrollbar' => $topScrollbar,
             ),
             'errors' => array(),
@@ -36,10 +42,14 @@ class ConfigController extends BaseController
         $offset = isset($values['shrink_vertically_offset']) ? (int) $values['shrink_vertically_offset'] : self::DEFAULT_OFFSET;
         $offset = max(self::MIN_OFFSET, min(self::MAX_OFFSET, $offset));
 
+        $barSize = isset($values['shrink_vertically_bar_size']) ? (int) $values['shrink_vertically_bar_size'] : self::DEFAULT_BAR_SIZE;
+        $barSize = max(self::MIN_BAR_SIZE, min(self::MAX_BAR_SIZE, $barSize));
+
         $topScrollbar = isset($values['shrink_vertically_top_scrollbar']) ? 1 : 0;
 
         if ($this->configModel->save(array(
             'shrink_vertically_offset' => $offset,
+            'shrink_vertically_bar_size' => $barSize,
             'shrink_vertically_top_scrollbar' => $topScrollbar,
         ))) {
             $this->flash->success(t('Settings saved successfully.'));

Plugin.php

@@ -27,7 +27,7 @@ class Plugin extends Base
         $this->template->hook->attach('template:config:sidebar', 'shrinkVertically:config/sidebar');
 
         // Optional: a second, mirrored horizontal scrollbar above the board columns.
-        if ((int) $this->configModel->get('shrink_vertically_top_scrollbar', 0) === 1) {
+        if ((int) $this->configModel->get('shrink_vertically_top_scrollbar', 1) === 1) {
             $this->hook->on('template:layout:js', array(
                 'template' => 'plugins/ShrinkVertically/Asset/js/top-scrollbar.js',
             ));
@@ -51,7 +51,7 @@ class Plugin extends Base
 
     public function getPluginVersion()
     {
-        return '1.0.0';
+        return '1.4.0';
     }
 
     public function getPluginHomepage()

README.md

@@ -1,9 +1,12 @@
 # ShrinkVertically -- keep the board horizontal scrollbar visible
 
-A small Kanboard plugin focused on the board's horizontal scrollbar. It fixes the
+A small Kanboard plugin focused on the vertically-collapsed board view. It fixes the
-vertically-collapsed board view so the bottom scrollbar stays on screen, and can
+collapse so the bottom horizontal scrollbar stays on screen, and can optionally add a
-optionally add a second, mirrored horizontal scrollbar above the columns. Both are
+second mirrored scrollbar above the columns. Configurable under
-configurable under "Settings -> Shrink Vertically".
+"Settings -> Shrink Vertically".
+
+Board drag/touch and column-gap options that used to live here have moved to the separate
+`TweakDrag` plugin.
 
 ## The problem
 
@@ -66,21 +69,27 @@ 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
+a second scrollbar just above the columns.
-(`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
+It is a custom track + draggable thumb (`Asset/js/top-scrollbar.js`, loaded only when the
-ways.
+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
 
-Go to "Settings -> Shrink Vertically":
+These settings are global (per Kanboard instance) and admin-only. Go to
+"Settings -> Shrink Vertically":
 
-- **Vertical offset in pixels** -- pixels reserved around the collapsed columns. Stored in
+- **Vertical offset in pixels** -- pixels reserved around the collapsed columns. Injected
-  the Kanboard configuration and injected in the page head as the `--sv-shrink-offset` CSS
+  in the page head as the `--sv-shrink-offset` CSS variable. Increase it if the scrollbar
-  variable. Increase it if the scrollbar is still clipped (for example with a taller theme
+  is still clipped (for example with a taller theme header); decrease it to make the
-  header); decrease it to make the collapsed columns taller. Default: 240.
+  collapsed columns taller. Default: 240.
+- **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.
+  described above. Default: on.
 
 ## License
 

Template/config/show.php

@@ -13,6 +13,14 @@
         </p>
     </fieldset>
 
+    <fieldset>
+        <?= $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. Default: 25.') ?>
+        </p>
+    </fieldset>
+
     <fieldset>
         <?= $this->form->checkbox('shrink_vertically_top_scrollbar', t('Add a top horizontal scrollbar to the board'), 1, isset($values['shrink_vertically_top_scrollbar']) && $values['shrink_vertically_top_scrollbar'] == 1) ?>
         <p class="form-help">

Template/layout/variable.php

@@ -1,3 +1,6 @@
 <style type="text/css">
-    :root { --sv-shrink-offset: <?= (int) $this->app->config('shrink_vertically_offset', 240) ?>px; }
+    :root {
+        --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;
+    }
 </style>

VERSION

@@ -1 +1 @@
-ShrinkVertically v1.0
+ShrinkVertically v1.4