diff --git a/modules/nginx-interactive-index/listing.css b/modules/nginx-interactive-index/listing.css
index ce13f98..feea15b 100644
--- a/modules/nginx-interactive-index/listing.css
+++ b/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;
}
diff --git a/modules/nginx-interactive-index/listing.js b/modules/nginx-interactive-index/listing.js
index 0109341..ea7f8de 100644
--- a/modules/nginx-interactive-index/listing.js
+++ b/modules/nginx-interactive-index/listing.js
@@ -36,6 +36,18 @@ document.addEventListener('DOMContentLoaded', () => {
return `
${meta.filename} | ${meta.size === '-' ? '-' : humanFileSize(meta.size)} |
`
}
+ 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)
})
})