Hide empty pinout columns (#2783)

* hide empty rows

* refactor

* fix generation error

* show all if not empty

* remove old code

misc/pinout-gen/gen.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
 
 DIR=$(cd -P -- "$(dirname -- "$0")" && pwd -P)"/"
-TEXT=$(sed -e "/###CSS###/{r ${DIR}style.css" -e 'd}' -e "/###JS###/{r ${DIR}script.js" -e 'd}' ${DIR}pinout.html | sed -e "s/\/\/\/DATA\/\/\//`$(echo ${1//\//\\/} | tr -d '\n')`,\n\/\/\/DATA\/\/\//")
+TEXT=$(sed -e "/###CSS###/{r ${DIR}style.css" -e 'd}' -e "/###JS###/{r ${DIR}script.js" -e 'd}' ${DIR}pinout.html | sed -e "s/\/\/\/DATA\/\/\//\`$(echo ${1//\//\\/} | tr -d '\n')\`,\n\/\/\/DATA\/\/\//")
 echo "$TEXT" > $2

misc/pinout-gen/pinout.html

@@ -6,7 +6,6 @@
 ###CSS###
 </style>
 
-<script type="text/javascript" src="yaml.min.js"></script>
 <script type="text/javascript">
 ###JS###
 </script>
@@ -19,11 +18,11 @@
 
 <template id="table-template">
   <tr class="data">
-    <td class="pin-data"></td>
-    <td class="ts-data"></td>
-    <td class="type-data"></td>
-    <td class="function-data"></td>
-    <td class="color-data"></td>
+    <td class="pin-data" data-field="pin"></td>
+    <td class="ts-data" data-field="ts_name"></td>
+    <td class="type-data" data-field="type"</td>
+    <td class="function-data" data-field="function"></td>
+    <td class="color-data" data-field="color"></td>
   </tr>
 </template>
 
@@ -37,11 +36,11 @@
     <table class="info-table">
       <thead>
         <tr>
-          <th class="pin-header">Pin Number</th>
-          <th class="ts-header">TS Name</th>
-          <th class="type-header">Type</th>
-          <th class="function-header">Typical Function</th>
-          <th class="color-header">Pigtail Color</th>
+          <th class="pin-header" data-field="pin">Pin Number</th>
+          <th class="ts-header" data-field="ts_name">TS Name</th>
+          <th class="type-header" data-field="type">Type</th>
+          <th class="function-header" data-field="function">Typical Function</th>
+          <th class="color-header" data-field="color">Pigtail Color</th>
         </tr>
       </thead>
       <tbody>
@@ -52,11 +51,11 @@
       <table class="pinout-table">
         <thead>
           <tr>
-            <th class="pin-header">Pin Number</th>
-            <th class="ts-header">TS Name</th>
-            <th class="type-header">Type</th>
-            <th class="function-header">Typical Function</th>
-            <th class="color-header">Pigtail Color</th>
+            <th class="pin-header" data-field="pin">Pin Number</th>
+            <th class="ts-header" data-field="ts_name">TS Name</th>
+            <th class="type-header" data-field="type">Type</th>
+            <th class="function-header" data-field="function">Typical Function</th>
+            <th class="color-header" data-field="color">Pigtail Color</th>
           </tr>
         </thead>
         <tbody>

misc/pinout-gen/script.js

@@ -2,21 +2,38 @@ var connectorData = [
 ///DATA///
 ];
 
+function hideEmptyColumns(table) {
+  var rows = table.querySelector('tbody').children;
+  var tableHead = table.querySelector("thead>tr")
+  var cols = tableHead.children
+  for (var i = 0; i < cols.length; i++) {
+    var empty = true;
+    for (var ii = 0; ii < rows.length; ii++) {
+      empty = rows[ii].children[i].textContent.length > 0 ? false : empty;
+    }
+    if (empty) {
+      tableHead.querySelectorAll('th')[i].style.display = 'none';
+      for (var ii = 0; ii < rows.length; ii++) {
+        rows[ii].children[i].style.display = 'none';
+      }
+    } else {
+      tableHead.querySelectorAll('th')[i].style.display = '';
+      for (var ii = 0; ii < rows.length; ii++) {
+        rows[ii].children[i].style.display = '';
+      }
+    }
+  }
+}
+
 function addRow(table, pin, pdiv) {
   var template = document.getElementById("table-template");
   var clone = template.content.cloneNode(true);
   var row = clone.querySelector(".data");
-  var pdata = clone.querySelector(".pin-data");
-  var idata = clone.querySelector(".ts-data");
-  var tdata = clone.querySelector(".type-data");
-  var fdata = clone.querySelector(".function-data");
-  var cdata = clone.querySelector(".color-data");
-  pdata.textContent = pin.pin;
-  pdata.dataset.type = pin.type;
-  idata.textContent = pin.ts_name;
-  tdata.textContent = pin.type
-  fdata.textContent = pin.function;
-  cdata.textContent = pin.color
+  var cells = row.children;
+  for (var i = 0; i < cells.length; i++) {
+    var cell = cells[i];
+    cell.textContent = pin[cell.dataset.field];
+  }
   if (pdiv) {
     row.addEventListener('click', function(table, pin, pdiv) {
       clickPin(table.parentElement.parentElement.parentElement.querySelector(".info-table tbody"), pin, pdiv);
@@ -25,7 +42,6 @@ function addRow(table, pin, pdiv) {
   }
   table.appendChild(clone);
 }
-
 function clickPin(table, pin, pdiv) {
   table.parentElement.style.display = "table";
   table.innerHTML = "";
@@ -40,6 +56,7 @@ function clickPin(table, pin, pdiv) {
     pins[i].classList.remove("selected");
   }
   pdiv.classList.add("selected");
+  hideEmptyColumns(table.parentElement);
 }
 
 window.addEventListener('load', function() {
@@ -109,6 +126,7 @@ window.addEventListener('load', function() {
         cdiv.appendChild(pdiv);
         addRow(fullTable, connector.pins[i], pdiv);
       }
+      hideEmptyColumns(sdiv.querySelector('.pinout-table'));
     }.bind(null, connector, sdiv, img));
     img.src = connector.info.image.file;
   }