per-board "Emphasize due date" with global default (v1.4)

Asset/js/click-guard.js

@@ -0,0 +1,35 @@
+/*
+ * OrganonTweaks -- only open a card on a quick click.
+ *
+ * A real click is a quick press-release; a drag is a press, some movement, and a release
+ * much later. When you drop a card, jQuery UI can leak a trailing "click" on it, and
+ * Kanboard opens the card -- an unwanted side effect of the drag.
+ *
+ * We simply time the press on a card: record the moment of mousedown / touchstart, and on
+ * the click that follows, if more than THRESHOLD ms elapsed the press was a drag (held),
+ * not a click, so we swallow the click in the capture phase before Kanboard's open handler
+ * runs. A normal click is well under the threshold and opens the card as usual.
+ */
+(function () {
+    "use strict";
+
+    var THRESHOLD = 110; // ms; a press on a card held longer than this is a drag, not a click
+    var pressStart = 0;
+
+    function onDown(e) {
+        pressStart = (e.target && e.target.closest && e.target.closest(".task-board")) ? Date.now() : 0;
+    }
+
+    document.addEventListener("mousedown", onDown, true);
+    document.addEventListener("touchstart", onDown, true);
+
+    document.addEventListener("click", function (e) {
+        if (pressStart &&
+            e.target && e.target.closest && e.target.closest(".task-board") &&
+            (Date.now() - pressStart) > THRESHOLD) {
+            e.stopImmediatePropagation();
+            e.preventDefault();
+        }
+        pressStart = 0;
+    }, true);
+})();

Asset/js/enhance-recurrence.js

@@ -0,0 +1,105 @@
+/*
+ * OrganonTweaks -- enhance Kanboard's native "Edit recurrence" dialog.
+ *
+ * That template (task_recurrence/edit.php) has no hook, so we transform the form in JS when
+ * the modal opens:
+ *   1. Replace the "Generate recurrent task" Yes/No dropdown with two radio buttons (one
+ *      click instead of open + select). The original <select> is kept, hidden, and stays in
+ *      sync, so the form still submits recurrence_status normally.
+ *   2. Add a small [+7] button next to the "Factor" input that adds 7 (a week of days).
+ *
+ * Detection: the modal is injected into #modal-box dynamically, so we watch the document for
+ * an un-enhanced recurrence form appearing. Loaded only when the setting is enabled.
+ */
+(function () {
+    "use strict";
+
+    function enhanceStatus(select) {
+        var group = document.createElement("span");
+        group.className = "ot-recurrence-status";
+
+        var radios = [];
+
+        for (var i = 0; i < select.options.length; i++) {
+            var opt = select.options[i];
+
+            var label = document.createElement("label");
+            // Kanboard styles form labels as display:block; force inline so Yes/No sit
+            // side by side instead of stacked.
+            label.style.display = "inline-block";
+            label.style.marginRight = "14px";
+            label.style.cursor = "pointer";
+
+            var radio = document.createElement("input");
+            radio.type = "radio";
+            // No name attribute on purpose: a named radio would be SUBMITTED with the form,
+            // and Kanboard rejects the extra key ("invalid identifier"). These are display
+            // only -- the hidden <select> carries the value -- so we enforce the mutual
+            // exclusivity ourselves.
+            radio.value = opt.value;
+            radio.checked = opt.value === select.value;
+            radio.style.marginRight = "4px";
+            radios.push(radio);
+
+            radio.addEventListener("change", function () {
+                for (var k = 0; k < radios.length; k++) {
+                    radios[k].checked = (radios[k] === this);
+                }
+                select.value = this.value;
+                select.dispatchEvent(new Event("change", { bubbles: true }));
+            });
+
+            label.appendChild(radio);
+            label.appendChild(document.createTextNode(opt.text));
+            group.appendChild(label);
+        }
+
+        select.style.display = "none";
+        select.parentNode.insertBefore(group, select.nextSibling);
+    }
+
+    function enhanceFactor(input) {
+        var btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "btn";
+        btn.textContent = "+7";
+        btn.title = "Add 7 (one week of days)";
+        btn.style.marginLeft = "6px";
+        btn.addEventListener("click", function () {
+            input.value = (parseInt(input.value, 10) || 0) + 7;
+            input.dispatchEvent(new Event("change", { bubbles: true }));
+        });
+
+        input.parentNode.insertBefore(btn, input.nextSibling);
+    }
+
+    function enhance() {
+        var select = document.querySelector('select[name="recurrence_status"]:not([data-ot-recurrence])');
+        if (!select) {
+            return;
+        }
+
+        select.setAttribute("data-ot-recurrence", "1");
+        enhanceStatus(select);
+
+        var factor = document.querySelector('input[name="recurrence_factor"]:not([data-ot-recurrence])');
+        if (factor) {
+            factor.setAttribute("data-ot-recurrence", "1");
+            enhanceFactor(factor);
+        }
+    }
+
+    function init() {
+        enhance();
+
+        if (window.MutationObserver) {
+            new MutationObserver(enhance).observe(document.body, { childList: true, subtree: true });
+        }
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();

Asset/js/keep-scroll.js

@@ -0,0 +1,55 @@
+/*
+ * OrganonTweaks -- keep the board's horizontal scroll position across refreshes.
+ *
+ * When you drop a card (and on Kanboard's periodic AJAX polling) the board is rebuilt with
+ * `$("#board-container").replaceWith(data)` (BoardDragAndDrop.refresh). The brand-new
+ * element starts at scrollLeft 0, so the board snaps back to the first column -- a jarring
+ * jump. This remembers the last scroll position and restores it the moment a replacement
+ * container appears, so the view stays put.
+ *
+ * We observe the STABLE parent (the container itself is replaced) and read the scroll from
+ * whichever #board-container is current, so it keeps working after every rebuild.
+ */
+(function () {
+    "use strict";
+
+    function init() {
+        var container = document.getElementById("board-container");
+        if (!container) {
+            return;
+        }
+
+        var parent = container.parentNode;
+        var lastScrollLeft = container.scrollLeft;
+        var lastContainer = container;
+
+        // Remember the position whenever the board is scrolled (capture: scroll does not
+        // bubble, and this survives the container being replaced).
+        document.addEventListener("scroll", function (e) {
+            var c = document.getElementById("board-container");
+            if (c && e.target === c) {
+                lastScrollLeft = c.scrollLeft;
+            }
+        }, true);
+
+        // When the board is rebuilt, #board-container becomes a new element at scrollLeft 0;
+        // restore the remembered position before the browser paints it.
+        if (window.MutationObserver) {
+            new MutationObserver(function () {
+                var c = document.getElementById("board-container");
+                if (c && c !== lastContainer) {
+                    lastContainer = c;
+                    if (c.scrollLeft !== lastScrollLeft) {
+                        c.scrollLeft = lastScrollLeft;
+                    }
+                }
+            }).observe(parent, { childList: true });
+        }
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();

Asset/js/relocate.js

@@ -53,19 +53,18 @@
 
             // Native comment icon sits just before the description icon; if there is no
             // description, before the age / closed block. That is the slot we move into.
-            var anchor = null;
+            // NB: the description icon is wrapped in <span class="tooltip"> (Kanboard's
-            var descIcon = row.querySelector("i.fa-file-text-o");
+            // tooltipLink), not an <a>, so we walk up to whatever is the row's direct child.
+            var anchor = row.querySelector("i.fa-file-text-o") ||
+                row.querySelector(".task-icon-age") ||
+                row.querySelector(".task-board-closed");
 
-            if (descIcon) {
+            while (anchor && anchor.parentNode !== row) {
-                anchor = descIcon.closest("a");
+                anchor = anchor.parentNode;
-            }
-
-            if (!anchor) {
-                anchor = row.querySelector(".task-icon-age") || row.querySelector(".task-board-closed");
             }
 
             // Move only if needed (keeps the MutationObserver from looping).
-            if (anchor && anchor.parentNode === row && item.nextElementSibling !== anchor) {
+            if (anchor && anchor !== item && item.nextElementSibling !== anchor) {
                 row.insertBefore(item, anchor);
             }
         }
@@ -77,16 +76,21 @@
     }
 
     function init() {
-        if (!document.getElementById("board")) {
+        var container = document.getElementById("board-container");
+        if (!container) {
             return;
         }
 
         apply();
 
-        var container = document.getElementById("board-container");
+        // Observe the STABLE parent, not #board-container: Kanboard replaces the container
+        // on every card drop / AJAX poll (BoardDragAndDrop.refresh), which would kill an
+        // observer bound to the container itself and leave the items un-relocated after a
+        // move. The parent survives, so apply() keeps running on every rebuild.
+        var parent = container.parentNode;
 
-        if (container && window.MutationObserver) {
+        if (parent && window.MutationObserver) {
-            new MutationObserver(apply).observe(container, { childList: true, subtree: true });
+            new MutationObserver(apply).observe(parent, { childList: true, subtree: true });
         }
     }
 

Controller/ConfigController.php

@@ -15,6 +15,10 @@ class ConfigController extends BaseController
             'title' => t('Settings').' > '.t('Organon Tweaks'),
             'values' => array(
                 'organon_tweaks_always_comment_icon' => (int) $this->configModel->get('organon_tweaks_always_comment_icon', 1),
+                'organon_tweaks_keep_scroll' => (int) $this->configModel->get('organon_tweaks_keep_scroll', 1),
+                'organon_tweaks_quick_click_only' => (int) $this->configModel->get('organon_tweaks_quick_click_only', 1),
+                'organon_tweaks_enhance_recurrence' => (int) $this->configModel->get('organon_tweaks_enhance_recurrence', 1),
+                'organon_tweaks_emphasize_duedate_default' => (int) $this->configModel->get('organon_tweaks_emphasize_duedate_default', 0),
             ),
             'errors' => array(),
         )));
@@ -25,8 +29,16 @@ class ConfigController extends BaseController
         $values = $this->request->getValues();
 
         $alwaysCommentIcon = isset($values['organon_tweaks_always_comment_icon']) ? 1 : 0;
+        $keepScroll = isset($values['organon_tweaks_keep_scroll']) ? 1 : 0;
+        $quickClickOnly = isset($values['organon_tweaks_quick_click_only']) ? 1 : 0;
+        $emphasizeDueDateDefault = isset($values['organon_tweaks_emphasize_duedate_default']) ? 1 : 0;
 
-        if ($this->configModel->save(array('organon_tweaks_always_comment_icon' => $alwaysCommentIcon))) {
+        if ($this->configModel->save(array(
+            'organon_tweaks_always_comment_icon' => $alwaysCommentIcon,
+            'organon_tweaks_keep_scroll' => $keepScroll,
+            'organon_tweaks_quick_click_only' => $quickClickOnly,
+            'organon_tweaks_emphasize_duedate_default' => $emphasizeDueDateDefault,
+        ))) {
             $this->flash->success(t('Settings saved successfully.'));
         } else {
             $this->flash->failure(t('Unable to save your settings.'));

Helper/OrganonProjectHelper.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Kanboard\Plugin\OrganonTweaks\Helper;
+
+use Kanboard\Core\Base;
+
+/**
+ * Per-board helper for OrganonTweaks.
+ *
+ * Resolves the 3-state "emphasize due date" setting for the CURRENT board (read from the route
+ * project_id, which the router populates for pretty URLs before the layout renders):
+ *   per-board '1' -> on, '0' -> off, 'default'/absent -> follow the LIVE global default.
+ */
+class OrganonProjectHelper extends Base
+{
+    const EMPHASIZE_KEY = 'organon_tweaks_emphasize_duedate';
+    const EMPHASIZE_DEFAULT_KEY = 'organon_tweaks_emphasize_duedate_default';
+
+    /**
+     * Should the current board emphasize the due date? Board pages only (project_id in the route).
+     *
+     * @return bool
+     */
+    public function isEmphasizeDueDate()
+    {
+        $project_id = $this->request->getIntegerParam('project_id');
+
+        if ($project_id <= 0) {
+            return false;
+        }
+
+        $value = $this->projectMetadataModel->get($project_id, self::EMPHASIZE_KEY, 'default');
+
+        if ($value === '1') {
+            return true;
+        }
+
+        if ($value === '0') {
+            return false;
+        }
+
+        // 'default' (or absent) -> follow the live global default.
+        return (int) $this->configModel->get(self::EMPHASIZE_DEFAULT_KEY, 0) === 1;
+    }
+}

Plugin.php

@@ -20,18 +20,49 @@ class Plugin extends Base
         // Settings page for the plugin's tweaks.
         $this->template->hook->attach('template:config:sidebar', 'organonTweaks:config/sidebar');
 
+        // Per-board tweak: emphasize the due date on the board. Configured with 3-state radios on the
+        // board's Settings -> Integrations (Use default / Always on / Always off); the global default
+        // (for "Use default" boards) lives in the plugin settings above. The emphasis <style> is
+        // emitted into the head only on enabled board pages (gated by OrganonProjectHelper).
+        $this->template->hook->attach('template:project:integrations', 'organonTweaks:project/integration');
+        $this->template->hook->attach('template:layout:head', 'organonTweaks:layout/emphasize_duedate');
+
         // Tweak: always show a comment icon on board cards. When a card has no comments
         // yet, add a bubble "+" that opens the same comment modal (add the first comment
         // straight from the board). Cards with comments already show the native count.
         if ((int) $this->configModel->get('organon_tweaks_always_comment_icon', 1) === 1) {
             $this->template->hook->attach('template:board:task:icons', 'organonTweaks:board/task_comment_icon');
         }
+
+        // Tweak: keep the board horizontal scroll position across refreshes (Kanboard
+        // rebuilds #board-container on card drop / polling, resetting scrollLeft to 0).
+        if ((int) $this->configModel->get('organon_tweaks_keep_scroll', 1) === 1) {
+            $this->hook->on('template:layout:js', array(
+                'template' => 'plugins/OrganonTweaks/Asset/js/keep-scroll.js',
+            ));
+        }
+
+        // Tweak: only open a card on a quick click (a press held > 100ms is a drag, so the
+        // trailing click is swallowed and the card does not open).
+        if ((int) $this->configModel->get('organon_tweaks_quick_click_only', 1) === 1) {
+            $this->hook->on('template:layout:js', array(
+                'template' => 'plugins/OrganonTweaks/Asset/js/click-guard.js',
+            ));
+        }
+
+        // Tweak: enhance the native "Edit recurrence" dialog (Yes/No radios + a [+7] button
+        // on the factor). No template hook there, so it is done in JS.
+        if ((int) $this->configModel->get('organon_tweaks_enhance_recurrence', 1) === 1) {
+            $this->hook->on('template:layout:js', array(
+                'template' => 'plugins/OrganonTweaks/Asset/js/enhance-recurrence.js',
+            ));
+        }
     }
 
     public function getHelpers()
     {
         return array(
-            'Plugin\OrganonTweaks\Helper' => array('OrganonColumnHelper'),
+            'Plugin\OrganonTweaks\Helper' => array('OrganonColumnHelper', 'OrganonProjectHelper'),
         );
     }
 
@@ -52,7 +83,7 @@ class Plugin extends Base
 
     public function getPluginVersion()
     {
-        return '0.3.1';
+        return '1.4.0';
     }
 
     public function getPluginHomepage()

README.md

@@ -35,11 +35,50 @@ have comments keep showing the count as before.
   read-only viewers).
 - **On by default.** Toggle it under "Settings -> Organon Tweaks".
 
+### Keep the board scroll position across refreshes
+
+When you drop a card (or Kanboard auto-refreshes the board via polling), it rebuilds the
+board with `$("#board-container").replaceWith(...)`, and the new element starts scrolled to
+the far left -- so the view jumps back to the first column. This tweak remembers the
+horizontal scroll position and restores it as soon as the rebuilt board appears, so the
+board stays where you were.
+
+- Implemented in `Asset/js/keep-scroll.js`: it observes the stable parent (the container
+  itself is replaced), reads/writes `scrollLeft` on whichever `#board-container` is current.
+- **On by default.** Toggle it under "Settings -> Organon Tweaks".
+
+### Open a card only on a quick click
+
+Dropping a card sometimes leaks a trailing "click" that opens the card -- an unwanted side
+effect of the drag. A real click is a quick press-release; a drag is a press held much
+longer. So `Asset/js/click-guard.js` times the press on a card (`mousedown`/`touchstart` to
+the following `click`) and, if it was held longer than **100 ms**, swallows the click in the
+capture phase before Kanboard's open handler -- so a drag never opens the card. Normal
+clicks (well under 100 ms) still open cards as usual. The 100 ms threshold is fixed.
+
+- **On by default.** Toggle it under "Settings -> Organon Tweaks".
+
+### Enhance the recurrence dialog
+
+Kanboard's native "Edit recurrence" dialog is a plain form. This makes two small usability
+edits when it opens (there is no template hook, so it is done in JS,
+`Asset/js/enhance-recurrence.js`):
+
+- the "Generate recurrent task" **Yes/No dropdown** becomes two **radio buttons** (one click
+  to set, instead of open + select). The original select is kept hidden and stays in sync, so
+  the form submits exactly as before.
+- a small **[+7]** button next to the "Factor" input adds 7 to it (one week of days).
+
+- **On by default.** Toggle it under "Settings -> Organon Tweaks".
+
 ## Settings
 
 Global (per Kanboard instance) and admin-only, under "Settings -> Organon Tweaks":
 
 - **Always show the comment icon on board cards** -- default on.
+- **Keep the board scroll position across refreshes** -- default on.
+- **Open a card only on a quick click** -- default on.
+- **Enhance the recurrence dialog** -- default on.
 
 ## Requirements
 

Template/config/show.php

@@ -12,6 +12,34 @@
         </p>
     </fieldset>
 
+    <fieldset>
+        <?= $this->form->checkbox('organon_tweaks_keep_scroll', t('Keep the board scroll position across refreshes'), 1, isset($values['organon_tweaks_keep_scroll']) && $values['organon_tweaks_keep_scroll'] == 1) ?>
+        <p class="form-help">
+            <?= t('When a card is dropped (or the board auto-refreshes), Kanboard rebuilds the board and jumps back to the first column. This restores the horizontal scroll position so the board stays where you were.') ?>
+        </p>
+    </fieldset>
+
+    <fieldset>
+        <?= $this->form->checkbox('organon_tweaks_quick_click_only', t('Open a card only on a quick click'), 1, isset($values['organon_tweaks_quick_click_only']) && $values['organon_tweaks_quick_click_only'] == 1) ?>
+        <p class="form-help">
+            <?= t('A press on a card held longer than 100 ms is treated as a drag, so releasing it does not open the card. Fixes a drag sometimes opening the card on release. Normal clicks are well under 100 ms.') ?>
+        </p>
+    </fieldset>
+
+    <fieldset>
+        <?= $this->form->checkbox('organon_tweaks_enhance_recurrence', t('Enhance the recurrence dialog'), 1, isset($values['organon_tweaks_enhance_recurrence']) && $values['organon_tweaks_enhance_recurrence'] == 1) ?>
+        <p class="form-help">
+            <?= t('In the native "Edit recurrence" dialog, replace the Generate recurrent task dropdown with Yes/No radio buttons (one click), and add a [+7] button next to the factor that adds 7 (one week of days).') ?>
+        </p>
+    </fieldset>
+
+    <fieldset>
+        <?= $this->form->checkbox('organon_tweaks_emphasize_duedate_default', t('Emphasize due date by default'), 1, isset($values['organon_tweaks_emphasize_duedate_default']) && $values['organon_tweaks_emphasize_duedate_default'] == 1) ?>
+        <p class="form-help">
+            <?= t('Default for boards set to "Use default": enlarge and bold the due date on the board. Each board can override this under its own Settings -> Integrations.') ?>
+        </p>
+    </fieldset>
+
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
     </div>

Template/layout/emphasize_duedate.php

@@ -0,0 +1,3 @@
+<?php if ($this->OrganonProjectHelper->isEmphasizeDueDate()): ?>
+<style>.task-date { font-size: 1.25em; font-weight: bold; }</style>
+<?php endif ?>

Template/project/integration.php

@@ -0,0 +1,24 @@
+<?php $choice = isset($values['organon_tweaks_emphasize_duedate']) && in_array($values['organon_tweaks_emphasize_duedate'], array('1', '0'), true) ? $values['organon_tweaks_emphasize_duedate'] : 'default' ?>
+
+<h3><i class="fa fa-umbrella fa-fw" aria-hidden="true"></i> <?= t('OrganonTweaks') ?></h3>
+<div class="listing">
+    <p><strong><?= t('Emphasize due date on the board') ?></strong></p>
+
+    <label style="display:inline-block; margin-right:16px;">
+        <input type="radio" name="organon_tweaks_emphasize_duedate" value="default" <?= $choice === 'default' ? 'checked="checked"' : '' ?>> <?= t('Use default') ?>
+    </label>
+    <label style="display:inline-block; margin-right:16px;">
+        <input type="radio" name="organon_tweaks_emphasize_duedate" value="1" <?= $choice === '1' ? 'checked="checked"' : '' ?>> <?= t('Always on') ?>
+    </label>
+    <label style="display:inline-block; margin-right:16px;">
+        <input type="radio" name="organon_tweaks_emphasize_duedate" value="0" <?= $choice === '0' ? 'checked="checked"' : '' ?>> <?= t('Always off') ?>
+    </label>
+
+    <p class="form-help">
+        <?= t('Enlarge and bold the due date on this board. "Use default" follows the global OrganonTweaks setting.') ?>
+    </p>
+</div>
+
+<div class="form-actions">
+    <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
+</div>

VERSION

@@ -1 +1 @@
-OrganonTweaks v0.3.1
+OrganonTweaks v1.4