Fix class inferance when using colspans. (#114)

Author: kyle-wannacott

public/index.html

@@ -87,18 +87,20 @@ <h2>Testing table containing colspan and data-sort and multiple tbodies</h2>
           <th class="show_name">Show</th>
           <th colspan="2" class="data-sort">Overall</th>
           <th colspan="2" class="data-sort">On Our Dates</th>
+          <th >On Our Dates</th>
           <th>First Sold Out</th>
         </tr>
         <tr>
       </thead>
           <td class="tags"></td>
           <td class="category">Comedy</td>
-          <td class="show_name">Show 1</td>
+          <td class="show_name">1</td>
           <td class="ratio all" data-sort="72">18/25</td>
           <td class="pct all">72%</td>
           <td class="ratio ours" data-sort="75">3/4</td>
           <td class="pct ours">75%</td>
-          <td>1999-07-30</td>
+          <td class="pct ours">2</td>
+          <td>1999-7-30</td>
         </tr>
         <tr>
           <td class="tags"></td>
@@ -107,8 +109,9 @@ <h2>Testing table containing colspan and data-sort and multiple tbodies</h2>
           <td class="ratio all" data-sort="60">6/10</td>
           <td class="pct all">60%</td>
           <td class="ratio ours" data-sort="75">3/4</td>
+          <td class="pct ours">8</td>
           <td class="pct ours">75%</td>
-          <td>1999-08-04</td>
+          <td>1999-8-04</td>
         </tr>
         <tr>
           <td class="tags"></td>
@@ -118,47 +121,52 @@ <h2>Testing table containing colspan and data-sort and multiple tbodies</h2>
           <td class="pct all">47%</td>
           <td class="ratio ours" data-sort="75">3/4</td>
           <td class="pct ours">75%</td>
-          <td>1999-07-19</td>
+          <td class="pct ours">2.12</td>
+          <td>1999-7-19</td>
         </tr>
         <tr>
           <td class="tags"></td>
           <td class="category">Comedy</td>
-          <td class="show_name">Show 4</td>
+          <td class="show_name">4</td>
           <td class="ratio all" data-sort="67">10/15</td>
           <td class="pct all">67%</td>
           <td class="ratio ours" data-sort="67">2/3</td>
           <td class="pct ours">67%</td>
-          <td>1999-07-19</td>
+          <td class="pct ours">2.13</td>
+          <td>1999-7-19</td>
         </tr>
         <tr>
           <td class="tags"></td>
           <td class="category">Comedy</td>
-          <td class="show_name">Show 5</td>
+          <td class="show_name">5</td>
           <td class="ratio all" data-sort="75">9/12</td>
           <td class="pct all">75%</td>
           <td class="ratio ours" data-sort="50">1/2</td>
           <td class="pct ours">50%</td>
-          <td>1999-07-29</td>
+          <td class="pct ours">2.83</td>
+          <td>1999-7-29</td>
         </tr>
         <tr>
           <td class="tags"></td>
           <td class="category">Comedy</td>
-          <td class="show_name">Show 6</td>
+          <td class="show_name">6</td>
           <td class="ratio all" data-sort="67">16/24</td>
           <td class="pct all">67%</td>
           <td class="ratio ours" data-sort="50">2/4</td>
           <td class="pct ours">50%</td>
-          <td>1999-07-26</td>
+          <td class="pct ours">2.83</td>
+          <td>1999-7-26</td>
         </tr>
         <tr>
           <td class="tags"></td>
           <td class="category">Comedy</td>
-          <td class="show_name">Show 7</td>
+          <td class="show_name">7</td>
           <td class="ratio all" data-sort="62">16/26</td>
           <td class="pct all">62%</td>
           <td class="ratio ours" data-sort="50">2/4</td>
           <td class="pct ours">50%</td>
-          <td>2022-07-31</td>
+          <td class="pct ours">2.03</td>
+          <td>2022-7-31</td>
         </tr>
       <thead>
         <tr>

public/table-sort.js

@@ -54,7 +54,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     }
   }
 
-  function inferSortClasses(tableRows, columnIndex, th) {
+  function inferSortClasses(tableRows, columnIndex, column, th) {
     const runtimeRegex = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
     const fileSizeRegex = /^([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
     // Doesn't infer dates with delimiter "."; as could capture semantic version numbers.
@@ -75,7 +75,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       if (regexNotFoundCount >= threshold) {
         break;
       }
-      const tableColumn = tr.querySelectorAll("td").item(columnIndex);
+      const tableColumn = tr
+        .querySelectorAll("td")
+        .item(
+          column.span[columnIndex] === 1
+            ? column.spanSum[columnIndex] - 1
+            : column.spanSum[columnIndex] - column.span[columnIndex]
+        );
       let foundMatch = false;
       for (let key of Object.keys(inferableClasses)) {
         let classRegexp = inferableClasses[key].regexp;
@@ -129,11 +135,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       headerIndex++
     ) {
       let columnIndexesClicked = [];
+      const column = { span: {}, spanSum: {} };
+      getColSpanData(table.headers[headerIndex], column);
       for (let [columnIndex, th] of table.headers[headerIndex].entries()) {
         if (!th.classList.contains("disable-sort")) {
           th.style.cursor = "pointer";
           if (!table.hasClass.noClassInfer) {
-            inferSortClasses(table.rows[headerIndex], columnIndex, th);
+            inferSortClasses(table.rows[headerIndex], columnIndex, column, th);
           }
           makeEachColumnSortable(
             th,
@@ -416,13 +424,9 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       template.innerHTML = columnIndexAndTableRow[column.toBeSorted[i]];
       tr = template.content.firstChild;
     }
-    let getColumnTd = column.getColumn(
-      tr,
-      column.spanSum,
-      column.span
-    );
-    let fileSizeInBytesHTML = getColumnTd.outerHTML
-    const fileSizeInBytesText = getColumnTd.textContent
+    let getColumnTd = column.getColumn(tr, column.spanSum, column.span);
+    let fileSizeInBytesHTML = getColumnTd.outerHTML;
+    const fileSizeInBytesText = getColumnTd.textContent;
     const fileSize = column.toBeSorted[i].replace(/#[0-9]*/, "");
     let prefixes = ["", "Ki", "Mi", "Gi", "Ti", "Pi"];
     let replaced = false;