nginx-interactive-index: Implement stripes in javascript

This shows stripes correctly even after a filter has been entered.
Previously the absolute position (before filtering) has been used to
determine the row colour, which looked weird.

modules/nginx-interactive-index/listing.css

@@ -4,7 +4,11 @@ body, html {
   font-family: "TeX Gyre Heros", "Roboto", "Helvetica", "Arial", sans-serif;
 }
 
-tr:nth-child(even) {
+tr.hidden {
+  display: none;
+}
+
+tr.zebra-stripe {
   background: #eee8d5;
 }
 

modules/nginx-interactive-index/listing.js

@@ -36,6 +36,18 @@ document.addEventListener('DOMContentLoaded', () => {
     return `<tr><td><a href="${meta.href}">${meta.filename}</a></td><td>${meta.size === '-' ? '-' : humanFileSize(meta.size)}</td></tr>`
   }
 
+  function addZebraStripes(rows) {
+    // this should be done in CSS, but AFAIU it does not support limiting
+    // :nth-child to elements matching a previous :not selector
+    rows.forEach((row, idx) => {
+      if (idx % 2 === 0) {
+        row.classList.add("zebra-stripe")
+      } else {
+        row.classList.remove("zebra-stripe")
+      }
+    })
+  }
+
   const collator = new Intl.Collator('kn', {numeric: true})
 
   // transform plain text to table
@@ -54,23 +66,26 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const rows = Array.from(document.querySelectorAll('tr:not(:first-child)'))
 
+  addZebraStripes(rows)
+
   document.querySelector('#search-field').addEventListener("input", e => {
     const searchValue = e.target.value.toLowerCase()
     rows.forEach(row => {
       const file = row.querySelector('td:nth-child(1) a').innerText
       if (!file.toLowerCase().includes(searchValue)) {
-        row.style.display = 'none'
+        row.classList.add("hidden")
       } else {
-        row.style.display = 'table-row'
+        row.classList.remove("hidden")
       }
     })
 
-    const visibleRows = rows.filter(row => row.style.display === 'table-row')
+    const visibleRows = rows.filter(row => !row.classList.contains("hidden"))
     if (visibleRows.length === 1) {
       const target = visibleRows[0].querySelector('td a').href
       if (target.substr(-1) === '/') {
         window.location = target
       }
     }
+    addZebraStripes(visibleRows)
   })
 })