Sure. Most of it will be irrelevant here I believe, but here it is anyway. It works as expected, except that the select element appends the new view of the table instead of replacing it.
// Map of tags to icons
const categories = {
'#nixon': '📅',
'#usa': '🔺',
'#ussr': '🔹',
'#johnson': '🔸',
}
// Timeline sections (start and end years)
const sections = [
['0', '1900'],
['1900', '1930'],
['1930', '1940'],
['1940', '1950'],
['1950', '2025'],
]
const selectElement = dv.el('select')
// Return file link with icon if size is larger than threshold
const getEventLink = (e) =>
e.file.size > 150
? "<span class=\"more-text\">" + e.file.link + "</span>"
: e.file.link
// Return tags in event as string of icons
const getEventIcon = (e) => {
let output = ''
for (const [tag, icon] of Object.entries(categories)) {
if (e.file.tags.includes(tag)) {
output += icon
}
}
return output
}
// Render the table
const renderTable = () => {
// Loop over sections, returning header and table
for (const section of sections) {
// Don't print section header for "0" (zero)
section[0] == '0' ? null : dv.header(1, section[0])
// Return events table between the section dates
dv.table(['', 'Date', 'Event'],
dv.pages('"events"')
.where(e =>
String(e.date) >= section[0]
&& String(e.date) < section[1]
&& e.file.tags.includes(selectElement.value)
)
.sort(e => String(e.date))
.map(e => [
getEventIcon(e),
e.date,
getEventLink(e)
]
)
)
}
}
// Dropdown
for (const key of Object.keys(categories)) {
const option = dv.el('option', key)
selectElement.appendChild(option)
}
const dropdown = dv.el('span', 'Category:')
dropdown.appendChild(selectElement)
selectElement.onchange = renderTable
dropdown
renderTable()