ShrinkVertically/Asset/js/shrink-vertically.js

/*
 * ShrinkVertically page scripts (loaded on every page via template:layout:js). Each runs only where
 * its elements exist, so both are no-ops elsewhere:
 *
 *   1. addPlus() -- mark the two vertical-collapse gear-menu items with a trailing "+" so it is
 *      obvious the behaviour comes from this plugin and not core. Core renders these labels in
 *      app/Template/project_header/dropdown.php:
 *        .filter-vert-collapse .filter-vert-toggle-collapse  ->  "Collapse vertically"
 *        .filter-vert-expand   .filter-vert-toggle-collapse  ->  "Expand vertically"
 *      Editing the rendered text (not the translation table) is locale-independent.
 *
 *   2. syncAutoAdjust() -- on Settings -> Shrink Vertically, dim + disable the pixel-offset input
 *      while "Auto adjust" is checked. This lives here (not an inline <script> on the config page)
 *      because Kanboard's CSP (default-src 'self') blocks inline scripts and event handlers.
 */
(function () {
    "use strict";

    function addPlus() {
        var links = document.querySelectorAll(
            ".filter-vert-collapse .filter-vert-toggle-collapse, " +
            ".filter-vert-expand .filter-vert-toggle-collapse"
        );

        for (var i = 0; i < links.length; i++) {
            var text = links[i].textContent;
            if (text.charAt(text.length - 1) !== "+") {
                links[i].textContent = text + "+";
            }
        }
    }

    function syncAutoAdjust() {
        var auto = document.getElementById("form-shrink_vertically_auto");
        var offset = document.getElementById("form-shrink_vertically_offset");

        if (! auto || ! offset) {
            return;
        }

        function sync() {
            offset.disabled = auto.checked;
            offset.style.opacity = auto.checked ? "0.4" : "";
        }

        auto.addEventListener("change", sync);
        sync();
    }

    function init() {
        addPlus();
        syncAutoAdjust();
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();