UX: Seitenbaum-Filter behaelt Eltern bei Treffer in Unterknoten sichtbar

contao/templates/be_dummy_copier.html5

@@ -212,6 +212,87 @@
       (function () {
         function byId(id) { return document.getElementById(id); }
 
+        function childCheckboxesOf(li) {
+          var nested = li.querySelector(':scope > ul');
+          return nested ? nested.querySelectorAll('input[type="checkbox"]') : [];
+        }
+
+        function parentLiOf(li) {
+          var parentUl = li.parentElement;
+          if (!parentUl || parentUl.classList.contains('dc-page-tree')) {
+            return null;
+          }
+
+          var candidate = parentUl.closest('li[data-tree-item="sourcePages"]');
+          return candidate || null;
+        }
+
+        function updateParentState(li) {
+          var children = childCheckboxesOf(li);
+          if (!children.length) {
+            return;
+          }
+
+          var own = li.querySelector(':scope > label input[type="checkbox"]');
+          if (!own) {
+            return;
+          }
+
+          var checkedCount = 0;
+          children.forEach(function (cb) {
+            if (cb.checked) {
+              checkedCount++;
+            }
+          });
+
+          if (checkedCount === 0) {
+            own.checked = false;
+            own.indeterminate = false;
+          } else if (checkedCount === children.length) {
+            own.checked = true;
+            own.indeterminate = false;
+          } else {
+            own.checked = false;
+            own.indeterminate = true;
+          }
+        }
+
+        function cascadeToChildren(li, checked) {
+          childCheckboxesOf(li).forEach(function (cb) {
+            cb.checked = checked;
+            cb.indeterminate = false;
+          });
+        }
+
+        function refreshAllParentStates() {
+          var nodes = Array.prototype.slice.call(document.querySelectorAll('li[data-tree-item="sourcePages"]'));
+          nodes.reverse();
+          nodes.forEach(function (li) {
+            updateParentState(li);
+          });
+        }
+
+        document.querySelectorAll('li[data-tree-item="sourcePages"] > label input[type="checkbox"]').forEach(function (checkbox) {
+          checkbox.addEventListener('change', function () {
+            var li = checkbox.closest('li[data-tree-item="sourcePages"]');
+            if (!li) {
+              return;
+            }
+
+            if (!checkbox.indeterminate) {
+              cascadeToChildren(li, checkbox.checked);
+            }
+
+            var parent = parentLiOf(li);
+            while (parent) {
+              updateParentState(parent);
+              parent = parentLiOf(parent);
+            }
+          });
+        });
+
+        refreshAllParentStates();
+
         document.querySelectorAll('[data-filter-for]').forEach(function (input) {
           input.addEventListener('input', function () {
             var select = byId(input.getAttribute('data-filter-for'));
@@ -227,10 +308,34 @@
           input.addEventListener('input', function () {
             var key = input.getAttribute('data-filter-for-tree');
             var query = (input.value || '').toLowerCase();
+            var items = Array.prototype.slice.call(document.querySelectorAll('[data-tree-item="' + key + '"]'));
 
-            document.querySelectorAll('[data-tree-item="' + key + '"]').forEach(function (item) {
+            if (query === '') {
+              items.forEach(function (item) {
+                item.hidden = false;
+                delete item.dataset.treeMatched;
+              });
+
+              return;
+            }
+
+            items.reverse().forEach(function (item) {
               var label = item.getAttribute('data-tree-label') || '';
-              item.hidden = query !== '' && label.indexOf(query) === -1;
+              var selfMatch = label.indexOf(query) !== -1;
+              var nested = item.querySelector(':scope > ul');
+              var childMatch = false;
+
+              if (nested) {
+                Array.prototype.forEach.call(nested.children, function (child) {
+                  if (child.matches('[data-tree-item="' + key + '"]') && child.dataset.treeMatched === '1') {
+                    childMatch = true;
+                  }
+                });
+              }
+
+              var match = selfMatch || childMatch;
+              item.hidden = !match;
+              item.dataset.treeMatched = match ? '1' : '0';
             });
           });
         });
@@ -262,8 +367,11 @@
             document.querySelectorAll('[data-tree-item="' + key + '"] input[type="checkbox"]').forEach(function (checkbox) {
               if (!checkbox.closest('li').hidden) {
                 checkbox.checked = true;
+                checkbox.indeterminate = false;
               }
             });
+
+            refreshAllParentStates();
           });
         });
 
@@ -273,7 +381,10 @@
 
             document.querySelectorAll('[data-tree-item="' + key + '"] input[type="checkbox"]').forEach(function (checkbox) {
               checkbox.checked = false;
+              checkbox.indeterminate = false;
             });
+
+            refreshAllParentStates();
           });
         });
       })();