ShrinkVertically v1.6.2: move config auto-adjust dim into external JS (CSP blocks inline script)

Asset/js/shrink-vertically.js

@@ -1,13 +1,17 @@
 /*
- * ShrinkVertically -- mark the two vertical-collapse menu items so it is obvious the
- * behaviour comes from this plugin and not from Kanboard core.
+ * ShrinkVertically page scripts (loaded on every page via template:layout:js). Each runs only where
+ * its elements exist, so both are no-ops elsewhere:
  *
- * 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"
+ *   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.
  *
- * We append a "+" to each so they read "Collapse vertically+" / "Expand vertically+".
- * This is locale-independent (it edits the rendered text, not the translation table).
+ *   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";
@@ -26,9 +30,31 @@
         }
     }
 
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", addPlus);
-    } else {
+    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();
     }
 })();