Add modal arrow navigation

output/index.css

@@ -541,7 +541,7 @@ footer nav :is(a, span) {
 	text-align: center;
 }
 
-#details-modal-close-hint {
+#details-modal-navigation-hint {
 	position: absolute;
 	bottom: 1rem;
 	right: 1rem;

output/main.js

@@ -46,6 +46,11 @@ const filteredCommunities = {
  */
 let preloadedImages = [];
 
+/**
+ * Community ID currently displayed by modal.
+ */
+let shownCommunityId = "";
+
 /**
  * Create an interactive version of the Community join link.
  * @param {string} join_link
@@ -188,6 +193,8 @@ function displayQRModal(communityID, pane = 0) {
 		throw new DOMException("Community row not found.");
 	}
 
+	shownCommunityId = communityID;
+
 	const rowInfo = dom.row_info(row);
 
 	for (const element of modal.querySelectorAll(`[${ATTRIBUTES.HYDRATION.CONTENT}]`)) {
@@ -231,6 +238,7 @@ function displayQRModal(communityID, pane = 0) {
  */
 function hideQRModal() {
 	dom.details_modal().close();
+	shownCommunityId = "";
 }
 
 /**
@@ -239,6 +247,9 @@ function hideQRModal() {
 function addQRModalHandlers() {
 	const rows = dom.tbl_communities_content_rows();
 	if (!rows) throw new Error("Rows not found");
+
+	// Ways to open the QR Modal
+
 	for (const row of rows) {
 		const communityID = row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER);
 		for (const cell of ['.td_qr_code', '.td_description', '.td_language', '.td_users']) {
@@ -263,6 +274,7 @@ function addQRModalHandlers() {
 		);
 
 	}
+
 	const closeButton =
 		dom.details_modal().querySelector('#details-modal-close');
 	closeButton.addEventListener(
@@ -331,6 +343,20 @@ function addQRModalHandlers() {
 		anchor.addEventListener('click', (e) => { e.preventDefault(); return false });
 	}
 
+	// Arrow-key navigation
+	document.documentElement.addEventListener("keyup", function (event) {
+		if (!dom.details_modal()?.open) return;
+		const isLeftArrowKey = event.key === "ArrowLeft";
+		const isRightArrowKey = event.key === "ArrowRight";
+		if (!isLeftArrowKey && !isRightArrowKey) return;
+		const communityRows = dom.tbl_communities_content_rows().map(dom.row_info);
+		const shownRowIndex = communityRows.findIndex(row => row.identifier == shownCommunityId);
+		const increment = isLeftArrowKey ? -1 : 1;
+		const newRowIndex = (shownRowIndex + increment + communityRows.length) % communityRows.length;
+		const newRowIdentifier = communityRows[newRowIndex].identifier;
+		displayQRModal(newRowIdentifier);
+	})
+
 }
 
 /**

sites/+components/qr-modals.php

@@ -6,8 +6,8 @@
 		<div id="details-modal-close">
 				&times;
 		</div>
-		<div id="details-modal-close-hint">
-			(Esc to close.)
+		<div id="details-modal-navigation-hint">
+			(Esc to close, ← → to navigate)
 		</div>
 		<div id="details-modal-flow">
 			<div id="details-modal-panes" data-pane="0">