diff --git a/output/js/constants.js b/output/js/constants.js index 23bc0d1b..49c040a0 100644 --- a/output/js/constants.js +++ b/output/js/constants.js @@ -3,6 +3,7 @@ // change in the foreseeable future. export const dom = { + /** @return {HTMLTableElement | null} */ tbl_communities: () => document.getElementById("tbl_communities"), last_checked: () => document.getElementById("last_checked_value"), qr_modal: (communityID) => document.getElementById(`modal_${communityID}`), diff --git a/output/main.js b/output/main.js index 24196437..e0b36597 100644 --- a/output/main.js +++ b/output/main.js @@ -61,12 +61,26 @@ const transformJoinURL = (join_link) => { }); } -function onLoad(timestamp) { - setLastChecked(timestamp); +function getTimestamp() { + const timestampRaw = + document.querySelector('meta[name=timestamp]') + ?.getAttribute('content'); + if (!timestampRaw) return null; + const timestamp = parseInt(timestampRaw); + if (Number.isNaN(timestamp)) return null; + return timestamp; +} + +function onLoad() { + const timestamp = getTimestamp(); + if (timestamp !== null) { + setLastChecked(timestamp); + } hideBadCommunities(); sortTable(COLUMN.NAME); createJoinLinkButtons(); markSortableColumns(); + addQRModalHandlers(); } function displayQRModal(communityID) { @@ -77,6 +91,25 @@ function hideQRModal(communityID) { dom.qr_modal(communityID).style.display = "none"; } +function addQRModalHandlers() { + const rows = dom.tbl_communities()?.rows; + if (!rows) throw new Error("Rows not found"); + for (const row of rows) { + if (row.querySelector('th')) continue; + const communityID = row.getAttribute('--data-identifier'); + row.querySelector('.td_qr_code').addEventListener( + 'click', + () => displayQRModal(communityID) + ); + const closeButton = + dom.qr_modal(communityID).querySelector('.qr-code-modal-close'); + closeButton.addEventListener( + 'click', + () => hideQRModal(communityID) + ); + } +} + function createJoinLinkButtons() { const join_URLs = dom.join_urls(); Array.from(join_URLs).forEach((td_url) => { @@ -253,9 +286,13 @@ function markSortableColumns() { const table = dom.tbl_communities(); const header_cells = table.querySelectorAll('th'); for (let colno = 0; colno < header_cells.length; colno++) { - if (!columnIsSortable(colno)) continue; + if (!columnIsSortable(colno)) continue; header_cells[colno].classList.add('sortable'); - } + header_cells[colno].addEventListener( + 'click', + () => sortTable(colno) + ) + }; } /** @@ -279,13 +316,7 @@ function sortTable(column) { setSortState(table, { ascending, column }); } -// html.js for styling purposes -window.document.documentElement.classList.add("js"); - -// Crude way to export from module script due to inline event handlers. -// Ideally, all handlers would be attached from JS via addEventListener. -Object.assign(window, { - onLoad, sortTable, displayQRModal, - hideQRModal, copyToClipboard -}); +// `html.js` selector for styling purposes +document.documentElement.classList.add("js"); +document.addEventListener('DOMContentLoaded', () => onLoad()); diff --git a/sites/+components/page-head.php b/sites/+components/page-head.php index 730c42fe..08537b40 100644 --- a/sites/+components/page-head.php +++ b/sites/+components/page-head.php @@ -1,3 +1,11 @@ - \ No newline at end of file + + + diff --git a/sites/+components/qr_modals.php b/sites/+components/qr_modals.php index adf6e2d8..1a4f31cb 100644 --- a/sites/+components/qr_modals.php +++ b/sites/+components/qr_modals.php @@ -34,7 +34,7 @@ $room): ?>