From 622801a77864e2f709a48519df320d8bba781a2b Mon Sep 17 00:00:00 2001
From: gravel <gravel@noreply.codeberg.org>
Date: Sat, 27 May 2023 15:52:05 +0200
Subject: [PATCH] Use hash in URL to open modal

---
 output/js/constants.js                |  2 +-
 output/main.js                        | 37 ++++++++++++++++++++++++---
 sites/+components/tbl_communities.php |  2 +-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/output/js/constants.js b/output/js/constants.js
index f715f86..3891348 100644
--- a/output/js/constants.js
+++ b/output/js/constants.js
@@ -7,7 +7,7 @@ export const dom = {
 	tbl_communities: () => document.getElementById("tbl_communities"),
 	tbl_communities_content_rows:
 		() => Array.from(dom.tbl_communities()?.rows)?.filter(row => !row.querySelector('th')),
-	community_row: (communityID) => document.getElementById(communityID),
+	community_row: (communityID) => document.querySelector(`.room-row[${ATTRIBUTES.ROW.IDENTIFIER}="${communityID}"]`),
 	row_info: (row) => {
 		const dateCreated = new Date(row.getAttribute(ATTRIBUTES.ROW.DATE_CREATED) * 1000);
 		/** @type {string[]} */
diff --git a/output/main.js b/output/main.js
index a9eeaa8..6b6b6d2 100644
--- a/output/main.js
+++ b/output/main.js
@@ -76,6 +76,26 @@ function getTimestamp() {
 	return timestamp;
 }
 
+/**
+ * Processes URL hash and parameter to trigger actions on the page.
+ */
+function reactToURLParameters() {
+	const hash = location.hash;
+	if (hash == "") return;
+	const communityID = hash.slice(1);
+	const row = dom.community_row(communityID);
+	if (row == null || !(row instanceof HTMLTableRowElement)) {
+		return;
+	}
+
+	try {
+		displayQRModal(communityID);
+	} catch (e) {
+		console.error("Could not navigate to community " + communityID);
+		console.error(e);
+	}
+}
+
 /**
  * Triggers all actions dependent on page load.
  */
@@ -92,6 +112,7 @@ function onLoad() {
 	addQRModalHandlers();
 	addServerIconInteractions();
 	preloadImages();
+	reactToURLParameters();
 }
 
 /**
@@ -160,6 +181,14 @@ function displayQRModal(communityID, pane = 0) {
 
 	document.getElementById('details-modal-panes').setAttribute('data-pane', pane);
 
+	location.hash=`#${communityID}`;
+
+	// manual scrolling to prevent jumping after every modal open
+
+	row.scrollIntoView({
+		behavior: "smooth"
+	});
+
 	modal.showModal();
 }
 
@@ -310,7 +339,7 @@ function hideBadCommunities() {
 	for (const category of ['tests', 'offensive']) {
 		numberOfHiddenCommunities +=
 		  filteredCommunities[category]
-		    .map(hideElementByID)
+		    .map(hideCommunity)
 		    .reduce((a, b) => a + b);
 	}
 
@@ -319,10 +348,10 @@ function hideBadCommunities() {
 }
 
 /**
- * Removes an element by its ID and returns the number of elements removed.
+ * Removes a Community by its ID and returns the number of elements removed.
  */
-function hideElementByID(id) {
-	const element = document.getElementById(id);
+function hideCommunity(communityID) {
+	const element = dom.community_row(communityID);
 	element?.remove();
 	return element ? 1 : 0;
 }
diff --git a/sites/+components/tbl_communities.php b/sites/+components/tbl_communities.php
index 436cd42..231f5bb 100644
--- a/sites/+components/tbl_communities.php
+++ b/sites/+components/tbl_communities.php
@@ -71,7 +71,7 @@
 		$tags_json = json_encode($room->get_room_tags());
 	?>
 
-	<tr id="<?=$id?>" class="room-row" itemscope itemtype="https://schema.org/EntryPoint"
+	<tr class="room-row" itemscope itemtype="https://schema.org/EntryPoint"
 		data-identifier="<?=$id?>"
 		data-pubkey="<?=$pubkey?>"
 		data-hostname="<?=$hostname?>"