New tweak JS for clickable gear subtasks bugfix v2.3.0

Asset/js/sortable-handle-fix.js

@@ -0,0 +1,57 @@
+/*
+ * OrganonTweaks -- fix a core Kanboard touch bug on reorder tables.
+ *
+ * Kanboard inits the subtask / board-column / swimlane reorder sortables with
+ * handle:"td:first i", which matches EVERY <i> in a row's first cell -- so the gear/caret menu
+ * icons and the subtask status checkbox become drag handles too. On touch devices the bundled
+ * jQuery UI Touch Punch then captures the press on those icons, preventDefault()s the native
+ * tap-click, and only re-fires a click if the finger did not move at all -- so almost every real
+ * tap is swallowed and the menu never opens (the gear "drags" instead of opening).
+ *
+ * Fix: re-scope the handle option to the real drag icon (.draggable-row-handle) on every such
+ * sortable, so only the arrows drag and the other first-cell icons are plain clicks again.
+ * jQuery UI reads options.handle at press time, so this takes effect immediately, no re-init.
+ * Kanboard re-inits the sortable whenever it re-renders a table (subtask add/edit, column
+ * reorder, and so on), which re-applies the bad handle -- so we re-apply the fix after every
+ * render via a debounced MutationObserver. Always on (no setting). Harmless on desktop, where
+ * the mouse never takes the Touch Punch path.
+ */
+(function () {
+    "use strict";
+
+    var $j = window.jQuery;
+    if (! $j) {
+        return;
+    }
+
+    function fixHandles() {
+        $j(".ui-sortable").each(function () {
+            try {
+                var $s = $j(this);
+                if ($s.sortable("option", "handle") === "td:first i") {
+                    $s.sortable("option", "handle", ".draggable-row-handle");
+                }
+            } catch (e) {
+                // element is not an initialized sortable -- skip it
+            }
+        });
+    }
+
+    var pending = false;
+    function schedule() {
+        if (pending) {
+            return;
+        }
+        pending = true;
+        window.setTimeout(function () {
+            pending = false;
+            fixHandles();
+        }, 0);
+    }
+
+    $j(fixHandles); // initial pass on DOM ready
+    new MutationObserver(schedule).observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+})();

Plugin.php

@@ -19,6 +19,15 @@ class Plugin extends Base
             'template' => 'plugins/OrganonTweaks/Asset/js/relocate.js',
         ));
 
+        // Fix a core Kanboard touch bug: the subtask / board-column / swimlane reorder sortables
+        // use handle:"td:first i", which makes the gear/caret menu icons and the subtask status
+        // checkbox (all <i> in the first cell) drag handles too, so on touch devices Touch Punch
+        // swallows their taps -- the gear "drags" instead of opening. Re-scope the handle to the
+        // real drag icon (.draggable-row-handle) in JS. Always on; harmless on desktop.
+        $this->hook->on('template:layout:js', array(
+            'template' => 'plugins/OrganonTweaks/Asset/js/sortable-handle-fix.js',
+        ));
+
         // Settings page for the plugin's tweaks.
         $this->template->hook->attach('template:config:sidebar', 'organonTweaks:config/sidebar');
 
@@ -198,7 +207,7 @@ class Plugin extends Base
 
     public function getPluginVersion()
     {
-        return '2.2.0';
+        return '2.3.0';
     }
 
     public function getPluginHomepage()

README.md

@@ -155,6 +155,23 @@ recolored -- only the badge.
   the same close-mode/marker-mode semantics as the badge.
 - **Off by default.** Toggle it under "Settings -> Organon Tweaks".
 
+### Fix the subtask / column / swimlane menus on touch devices
+
+On phones and tablets the little **gear menu** (edit / remove / convert) on a subtask row -- and the
+same gear on the board **Columns** and **Swimlanes** config tables -- was almost impossible to tap:
+roughly one tap in fifty opened it, while dragging to reorder worked fine. The cause is an upstream
+Kanboard bug: those reorder tables set the drag handle to *every* icon in the row's first cell
+(`handle: "td:first i"`), so the gear, its caret and the subtask status checkbox all count as drag
+handles. On touch, Kanboard's bundled jQuery UI Touch Punch then treats a tap on them as a drag and
+swallows the click. Desktop (mouse) is unaffected.
+
+- `Asset/js/sortable-handle-fix.js` re-scopes those sortables' `handle` to the real drag icon
+  (`.draggable-row-handle`), so only the four-arrows drag and the gear/caret/checkbox are plain taps
+  again -- reordering still works. It re-applies after Kanboard re-renders a table (a debounced
+  MutationObserver), and only touches sortables whose handle is the buggy `td:first i`, so it is inert
+  everywhere else.
+- **Always on** (no setting) -- it only corrects a broken interaction and does nothing on desktop.
+
 ## Settings
 
 Global (per Kanboard instance) and admin-only, under "Settings -> Organon Tweaks", grouped as on

VERSION

@@ -1 +1 @@
-OrganonTweaks v2.2.0
+OrganonTweaks v2.3.0