Add an option to grey out (darken) a row when the selected checkbox is checked.

This makes it easier to see which parts haven't been sourced or
populated.

Author: ademuri

InteractiveHtmlBom/web/ibom.css

@@ -227,6 +227,14 @@ canvas:active {
   background-color: #313b40;
 }
 
+.bom tr.checked {
+  color: #aaa;
+}
+
+.dark .bom tr.checked {
+  color: #666;
+}
+
 .bom tr {
   transition: background-color 0.2s;
 }
@@ -567,6 +575,10 @@ mark.highlight {
   color: #eee;
 }
 
+.radio-container {
+  margin: 4px;
+}
+
 .topmostdiv {
   width: 100%;
   height: 100%;

InteractiveHtmlBom/web/ibom.html

@@ -111,6 +111,10 @@
             <input id="bomCheckboxes" class="menu-textbox" type=text
                    oninput="setBomCheckboxes(this.value)">
           </label>
+          <label class="menu-label">
+            <div style="margin-left: 5px">Darken when checked</div>
+            <div id="darkenWhenCheckedContainer"></div>
+          </label>
           <label class="menu-label">
             <span class="shameless-plug">
               <span>Created using</span>

InteractiveHtmlBom/web/ibom.js

@@ -150,18 +150,25 @@ function setBomCheckboxState(checkbox, element, references) {
 }
 
 function createCheckboxChangeHandler(checkbox, references) {
-  return function() {
+  return function(evt) {
     refsSet = getStoredCheckboxRefs(checkbox);
+    var darkenWhenChecked = settings.darkenWhenChecked == checkbox;
     if (this.checked) {
       // checkbox ticked
       for (var ref of references) {
         refsSet.add(ref[1]);
       }
+      if (darkenWhenChecked) {
+        evt.target.parentElement.parentElement.classList.add("checked");
+      }
     } else {
       // checkbox unticked
       for (var ref of references) {
         refsSet.delete(ref[1]);
       }
+      if (darkenWhenChecked) {
+        evt.target.parentElement.parentElement.classList.remove("checked");
+      }
     }
     settings.checkboxStoredRefs[checkbox] = [...refsSet].join(",");
     writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]);
@@ -469,6 +476,9 @@ function populateBomBody() {
           input.type = "checkbox";
           input.onchange = createCheckboxChangeHandler(checkbox, references);
           setBomCheckboxState(checkbox, input, references);
+          if (input.checked && settings.darkenWhenChecked == checkbox) {
+            tr.classList.add("checked");
+          }
           td.appendChild(input);
           tr.appendChild(td);
         }
@@ -813,6 +823,13 @@ function setBomCheckboxes(value) {
   settings.checkboxes = value.split(",").filter((e) => e);
   prepCheckboxes();
   populateBomTable();
+  populateDarkenWhenCheckedOptions();
+}
+
+function setDarkenWhenChecked(value) {
+  writeStorage("darkenWhenChecked", value);
+  settings.darkenWhenChecked = value;
+  populateBomTable();
 }
 
 function prepCheckboxes() {
@@ -844,6 +861,49 @@ function prepCheckboxes() {
   }
 }
 
+function populateDarkenWhenCheckedOptions() {
+  var container = document.getElementById("darkenWhenCheckedContainer");
+
+  if (settings.checkboxes.length == 0) {
+    container.parentElement.style.display = "none";
+    return;
+  }
+
+  container.innerHTML = '';
+  container.parentElement.style.display = "inline-block";
+  
+  function createOption(name, displayName) {
+    var id = "darkenWhenChecked-" + name;
+
+    var div = document.createElement("div");
+    div.classList.add("radio-container");
+
+    var input = document.createElement("input");
+    input.type = "radio";
+    input.name = "darkenWhenChecked";
+    input.value = name;
+    input.id = id;
+    input.onchange = () => setDarkenWhenChecked(name);
+    div.appendChild(input);
+
+    // Preserve the selected element when the checkboxes change
+    if (name == settings.darkenWhenChecked) {
+      input.checked = true;
+    }
+
+    var label = document.createElement("label");
+    label.innerHTML = displayName;
+    label.htmlFor = id;
+    div.appendChild(label);
+
+    container.appendChild(div);
+  }
+  createOption("", "None");
+  for (var checkbox of settings.checkboxes) {
+    createOption(checkbox, checkbox);
+  }
+}
+
 function updateCheckboxStats(checkbox) {
   var checked = getStoredCheckboxRefs(checkbox).size;
   var total = pcbdata.modules.length - pcbdata.bom.skipped.length;

InteractiveHtmlBom/web/util.js

@@ -384,6 +384,7 @@ function overwriteSettings(newSettings) {
   for (var checkbox of settings.checkboxes) {
     writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]);
   }
+  writeStorage("darkenWhenChecked", settings.darkenWhenChecked);
   padsVisible(settings.renderPads);
   document.getElementById("padsCheckbox").checked = settings.renderPads;
   fabricationVisible(settings.renderFabrication);
@@ -477,6 +478,9 @@ function initDefaults() {
   settings.checkboxes = bomCheckboxes.split(",").filter((e) => e);
   document.getElementById("bomCheckboxes").value = bomCheckboxes;
 
+  settings.darkenWhenChecked = readStorage("darkenWhenChecked") || "";
+  populateDarkenWhenCheckedOptions();
+
   function initBooleanSetting(storageString, def, elementId, func) {
     var b = readStorage(storageString);
     if (b === null) {