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.
This commit is contained in:
Simon Bruder 2021-08-29 14:14:07 +02:00
parent 77eab2497a
commit ccc0d60d71
Signed by: simon
GPG key ID: 8D3C82F9F309F8EC
2 changed files with 23 additions and 4 deletions

View file

@ -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;
}

View file

@ -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)
})
})