[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UX] Checkboxes: implement bi-directional sync and indeterminate state

Victor Emanouilov pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
b1e48e08 by MAGENE Sem Joel at 2026-03-17T13:41:06+00:00
[FIX][UX] Checkboxes: implement bi-directional sync and indeterminate state
---
* [FIX][UX] Checkboxes: implement bi-directional sync and indeterminate state

See merge request tikiwiki/tiki!9592

- - - - -


3 changed files:

- lib/jquery_tiki/tiki-jquery.js
- lib/smarty_tiki/FunctionHandler/SelectAll.php
- templates/tiki-admin_calendars.tpl


Changes:

=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -2948,30 +2948,62 @@ $.curCSS = function (element, property) {
 $(document).ready(function () {
     const allDays = $("#select-all-days");
     const workingDays = $("#select-working-days");
-    const viewdays = $('input[name="viewdays[]"]');
+    const viewDays = $(".js-viewday");
+    const workingViewDays = $(".js-viewday-working");
 
     allDays.on("change", function () {
+        viewDays.prop("checked", this.checked).trigger("change");
+    });
+
+    workingDays.on("change", function () {
         if (this.checked) {
-            viewdays.prop("checked", true);
-            workingDays.prop("checked", false);
+            workingViewDays.prop("checked", true).trigger("change");
+            viewDays.not(".js-viewday-working").prop("checked", false).trigger("change");
         } else {
-            viewdays.prop("checked", false);
+            workingViewDays.prop("checked", false).trigger("change");
         }
     });
 
-    workingDays.on("change", function () {
-        if (this.checked) {
-            viewdays.each(function (index) {
-                $(this).prop("checked", index >= 1 && index <= 5);
-            });
-            allDays.prop("checked", false);
+    // --- The "Global Sync" Logic ---
+    const updateSelectAllState = function (controller, changedInput = null) {
+        const target = controller.data("select-all-target");
+        if (!target) return;
+
+        let $targets;
+        if (target.startsWith(".") || target.startsWith("#")) {
+            $targets = $(target);
         } else {
-            viewdays.each(function (index) {
-                if (index >= 1 && index <= 5) {
-                    $(this).prop("checked", false);
-                }
-            });
+            const selector = target
+                .split(",")
+                .map((name) => `input[name="${name.trim()}"]`)
+                .join(",");
+            $targets = $(selector);
         }
+
+        if ($targets && $targets.length > 0) {
+            // If triggered by a change event, ensure the changed input is a target
+            if (changedInput && !changedInput.is($targets)) return;
+
+            const total = $targets.length;
+            const checkedCount = $targets.filter(":checked").length;
+
+            controller.prop("checked", checkedCount === total && total > 0);
+            controller.prop("indeterminate", checkedCount > 0 && checkedCount < total);
+        }
+    };
+
+    // 1. Initialize indeterminate/checked states on page load
+    $(".js-select-all").each(function () {
+        updateSelectAllState($(this));
+    });
+
+    // The "Global Sync" Logic
+    $(document).on('change', 'input[type="checkbox"]:not(.js-select-all)', function () {
+        const changed = $(this);
+
+        $(".js-select-all").each(function () {
+            updateSelectAllState($(this), changed);
+        });
     });
 });
 


=====================================
lib/smarty_tiki/FunctionHandler/SelectAll.php
=====================================
@@ -58,8 +58,8 @@ class SelectAll extends Base
             }
             $onclick = ' onclick="' . $onclick . '"';
         }
-
-        return '<input name="switcher' . $id . '" id="clickall' . $id . '" class="form-check-input position-static" type="checkbox"' . $onclick .
+        $names_list = is_array($checkbox_names) ? implode(',', $checkbox_names) : (string)$checkbox_names;
+        return '<input name="switcher' . $id . '" id="clickall' . $id . '" class="form-check-input position-static js-select-all" type="checkbox" data-select-all-target="' . htmlspecialchars($names_list) . '" ' . $onclick .
             (empty($params['label']) ? ' aria-label="' . tra('Select All') . '"' : '') .
             '/>' . "\n" .
             (! empty($params['label']) ? '<label class="form-check-label" for="clickall' . $id . '">' . $params['label'] . "</label>\n" : '');


=====================================
templates/tiki-admin_calendars.tpl
=====================================
@@ -436,18 +436,18 @@
             </label>
             <div class="col-sm-8">
                 <div>
-                    <input type="checkbox" class="form-check-input" id="select-all-days">
+                    <input type="checkbox" class="form-check-input js-select-all" id="select-all-days" data-select-all-target="viewdays[]">
                     <label class="form-check-label me-3" for="select-all-days">
                         {tr}Select all{/tr}
                     </label>
-                    <input type="checkbox" id="select-working-days" class="form-check-input">
+                    <input type="checkbox" id="select-working-days" class="form-check-input js-select-all" data-select-all-target=".js-viewday-working">
                     <label class="form-check-label" for="select-working-days">
                         {tr}Select working days{/tr}
                     </label>
                 </div>
                 {section name="viewdays" start=0 loop=7}
                 <div class="form-check">
-                    <input type="checkbox" class="form-check-input" name="viewdays[]" value="{$smarty.section.viewdays.index}" {if !empty($info.viewdays) && in_array($smarty.section.viewdays.index,$info.viewdays)} checked="checked" {/if}>
+                    <input type="checkbox" class="form-check-input js-viewday {if $smarty.section.viewdays.index > 0 && $smarty.section.viewdays.index < 6}js-viewday-working{/if}" name="viewdays[]" value="{$smarty.section.viewdays.index}" {if !empty($info.viewdays) && in_array($smarty.section.viewdays.index,$info.viewdays)} checked="checked" {/if}>
                     <label class="form-check-label">
                         {$days_names[$smarty.section.viewdays.index]}
                     </label>



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/b1e48e089421fa4638b7310a963d31392ab62e3a

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/b1e48e089421fa4638b7310a963d31392ab62e3a
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs