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; font-family: "TeX Gyre Heros", "Roboto", "Helvetica", "Arial", sans-serif;
} }
tr:nth-child(even) { tr.hidden {
display: none;
}
tr.zebra-stripe {
background: #eee8d5; 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>` 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}) const collator = new Intl.Collator('kn', {numeric: true})
// transform plain text to table // transform plain text to table
@ -54,23 +66,26 @@ document.addEventListener('DOMContentLoaded', () => {
const rows = Array.from(document.querySelectorAll('tr:not(:first-child)')) const rows = Array.from(document.querySelectorAll('tr:not(:first-child)'))
addZebraStripes(rows)
document.querySelector('#search-field').addEventListener("input", e => { document.querySelector('#search-field').addEventListener("input", e => {
const searchValue = e.target.value.toLowerCase() const searchValue = e.target.value.toLowerCase()
rows.forEach(row => { rows.forEach(row => {
const file = row.querySelector('td:nth-child(1) a').innerText const file = row.querySelector('td:nth-child(1) a').innerText
if (!file.toLowerCase().includes(searchValue)) { if (!file.toLowerCase().includes(searchValue)) {
row.style.display = 'none' row.classList.add("hidden")
} else { } 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) { if (visibleRows.length === 1) {
const target = visibleRows[0].querySelector('td a').href const target = visibleRows[0].querySelector('td a').href
if (target.substr(-1) === '/') { if (target.substr(-1) === '/') {
window.location = target window.location = target
} }
} }
addZebraStripes(visibleRows)
}) })
}) })