Add indeterminate markings to title checkoxes

patosai · Aug 29, 2015 · 1df51c1 · 1df51c1
1 parent 663d03b
commit 1df51c1
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 17 deletions.
diff --git a/jquery.tree-multiselect.min.css b/jquery.tree-multiselect.min.css
diff --git a/jquery.tree-multiselect.min.js b/jquery.tree-multiselect.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery.tree-multiselect.js",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "description": "jQuery multiple select with nested options",
   "main": "jquery.tree-multiselect.min.js",
   "scripts": {

diff --git a/src/jquery.tree-multiselect.css b/src/jquery.tree-multiselect.css
@@ -1,6 +1,6 @@
 /*
  * jQuery Tree Multiselect
- * v1.14.0
+ * v1.14.1
  *
  * (c) Patrick Tsai et al.
  * MIT Licensed

diff --git a/src/jquery.tree-multiselect.js b/src/jquery.tree-multiselect.js
@@ -1,6 +1,6 @@
 /*
  * jQuery Tree Multiselect
- * v1.14.0
+ * v1.14.1
  *
  * (c) Patrick Tsai et al.
  * MIT Licensed
@@ -30,6 +30,7 @@
         armTitleCheckboxes(selectionContainer);
         uncheckParentsOnUnselect(selectionContainer);
         checkParentsOnAllChildrenSelected(selectionContainer);
+        showSemifilledParents(selectionContainer);
       }
 
       if (options.collapsible) {
@@ -267,12 +268,27 @@
       });
     }
 
-    var checkboxes = $(selectionContainer).find("input[type=checkbox]");
-    checkboxes.change(function() {
-      check();
-    });
+    onCheckboxChange(selectionContainer, check);
+  }
+
+  function showSemifilledParents(selectionContainer) {
+    function check() {
+      var sections = $(selectionContainer).find("div.section");
+      sections.each(function() {
+        var section = $(this);
+        var items = section.find("div.item");
+        var numSelected = items.filter(function() {
+          var item = $(this);
+          return item.find("> input[type=checkbox]").prop('checked');
+        }).length;
+
+        var sectionCheckbox = $(this).find("> div.title > input[type=checkbox]");
+        var isIndeterminate = (numSelected !== 0 && numSelected !== items.length)
+        sectionCheckbox.prop('indeterminate', isIndeterminate);
+      });
+    }
 
-    check();
+    onCheckboxChange(selectionContainer, check);
   }
 
   function addCollapsibility(selectionContainer) {
@@ -408,12 +424,7 @@
       }
     }
 
-    var checkboxes = $(selectionContainer).find("input[type=checkbox]");
-    checkboxes.change(function() {
-      update();
-    });
-
-    update();
+    onCheckboxChange(selectionContainer, update);
   }
 
   function armRemoveSelectedOnClick(selectionContainer, selectedContainer) {
@@ -425,4 +436,12 @@
       matchingCheckbox.trigger('change');
     });
   }
+
+  function onCheckboxChange(selectionContainer, callback) {
+    var checkboxes = $(selectionContainer).find("input[type=checkbox]");
+    checkboxes.change(function() {
+      callback();
+    });
+    callback();
+  }
 })(jQuery);
diff --git a/test/integration/title-autochecking.js b/test/integration/title-autochecking.js
@@ -88,3 +88,49 @@ QUnit.test("nested titles should all be checked if a title is batch selected", f
 
   assert.equal($("input[type=checkbox]:checked").length, 4, "all checkboxes should be checked");
 });
+
+QUnit.test("title checkbox is indeterminate when some but not all options are selected", function(assert) {
+  $("select").append("<option value='one' data-section='top'>One</option>");
+  $("select").append("<option value='two' data-section='top' selected='selected'>Two</option>");
+  $("select").treeMultiselect();
+
+  var titleCheckbox = $("div.selections").find("div.title > input[type=checkbox]");
+  assert.equal(titleCheckbox.length, 1);
+  assert.ok(titleCheckbox.prop('indeterminate'));
+});
+
+QUnit.test("title checkbox turns indeterminate when some options are selected", function(assert) {
+  $("select").append("<option value='one' data-section='top'>One</option>");
+  $("select").append("<option value='two' data-section='top'>Two</option>");
+  $("select").treeMultiselect();
+
+  var lastCheckbox = $("div.selections").find("div.item > input[type=checkbox]").last();
+  lastCheckbox.prop('checked', true).trigger('change');
+
+  var titleCheckbox = $("div.selections").find("div.title > input[type=checkbox]");
+  assert.ok(titleCheckbox.prop('indeterminate'));
+});
+
+QUnit.test("title checkbox is not indeterminate when all options are selected", function(assert) {
+  $("select").append("<option value='one' data-section='top'>One</option>");
+  $("select").append("<option value='two' data-section='top'>Two</option>");
+  $("select").treeMultiselect();
+
+  var checkboxes = $("div.selections").find("input[type=checkbox]");
+  checkboxes.prop('checked', true).trigger('change');
+
+  var titleCheckbox = $("div.selections").find("div.title > input[type=checkbox]");
+  assert.ok(!(titleCheckbox.prop('indeterminate')));
+});
+
+QUnit.test("title checkbox is not indeterminate when no options are selected", function(assert) {
+  $("select").append("<option value='one' data-section='top'>One</option>");
+  $("select").append("<option value='two' data-section='top' selected='selected'>Two</option>");
+  $("select").treeMultiselect();
+
+  var checkedCheckboxes = $("div.selections").find("input[type=checkbox]:checked");
+  checkedCheckboxes.prop('checked', false).trigger('change');
+
+  var titleCheckbox = $("div.selections").find("div.title > input[type=checkbox]");
+  assert.ok(!(titleCheckbox.prop('indeterminate')));
+});