drag-scroll checkbox

Asset/css/shrink-vertically.css

@@ -48,3 +48,24 @@
 .sv-top-scroll-inner {
     height: 1px;
 }
+
+/*
+ * 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 {
+    cursor: grab;
+}
+
+#board-container.sv-drag-scroll .task-board {
+    cursor: default;
+}
+
+.sv-grabbing,
+.sv-grabbing * {
+    cursor: grabbing !important;
+    user-select: none !important;
+}

Controller/ConfigController.php

@@ -18,12 +18,14 @@ class ConfigController extends BaseController
     {
         $offset = (int) $this->configModel->get('shrink_vertically_offset', self::DEFAULT_OFFSET);
         $topScrollbar = (int) $this->configModel->get('shrink_vertically_top_scrollbar', 0);
+        $dragScroll = (int) $this->configModel->get('shrink_vertically_drag_scroll', 0);
 
         $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_top_scrollbar' => $topScrollbar,
+                'shrink_vertically_drag_scroll' => $dragScroll,
             ),
             'errors' => array(),
         )));
@@ -37,10 +39,12 @@ class ConfigController extends BaseController
         $offset = max(self::MIN_OFFSET, min(self::MAX_OFFSET, $offset));
 
         $topScrollbar = isset($values['shrink_vertically_top_scrollbar']) ? 1 : 0;
+        $dragScroll = isset($values['shrink_vertically_drag_scroll']) ? 1 : 0;
 
         if ($this->configModel->save(array(
             'shrink_vertically_offset' => $offset,
             'shrink_vertically_top_scrollbar' => $topScrollbar,
+            'shrink_vertically_drag_scroll' => $dragScroll,
         ))) {
             $this->flash->success(t('Settings saved successfully.'));
         } else {

Plugin.php

@@ -32,6 +32,13 @@ class Plugin extends Base
                 'template' => 'plugins/ShrinkVertically/Asset/js/top-scrollbar.js',
             ));
         }
+
+        // Optional: click-and-drag the board background to scroll horizontally.
+        if ((int) $this->configModel->get('shrink_vertically_drag_scroll', 0) === 1) {
+            $this->hook->on('template:layout:js', array(
+                'template' => 'plugins/ShrinkVertically/Asset/js/drag-scroll.js',
+            ));
+        }
     }
 
     public function getPluginName()
@@ -51,7 +58,7 @@ class Plugin extends Base
 
     public function getPluginVersion()
     {
-        return '1.0.0';
+        return '1.1.0';
     }
 
     public function getPluginHomepage()

README.md

@@ -1,9 +1,10 @@
 # ShrinkVertically -- keep the board horizontal scrollbar visible
 
-A small Kanboard plugin focused on the board's horizontal scrollbar. It fixes the
-vertically-collapsed board view so the bottom scrollbar stays on screen, and can
-optionally add a second, mirrored horizontal scrollbar above the columns. Both are
-configurable under "Settings -> Shrink Vertically".
+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
+"Settings -> Shrink Vertically".
 
 ## The problem
 

Template/config/show.php

@@ -20,6 +20,13 @@
         </p>
     </fieldset>
 
+    <fieldset>
+        <?= $this->form->checkbox('shrink_vertically_drag_scroll', t('Drag the board background to scroll horizontally'), 1, isset($values['shrink_vertically_drag_scroll']) && $values['shrink_vertically_drag_scroll'] == 1) ?>
+        <p class="form-help">
+            <?= t('Like Trello: click and drag on the empty board background to scroll the columns sideways. Dragging a task card or a handle still works as usual.') ?>
+        </p>
+    </fieldset>
+
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
     </div>