Responsive Join URL display

output/js/constants.js

@@ -6,7 +6,7 @@ export const dom = {
 	tbl_communities: () => document.getElementById("tbl_communities"),
 	last_checked: () => document.getElementById("last_checked_value"),
 	qr_modal: (communityID) => document.getElementById(`modal_${communityID}`),
-	join_urls: () => document.getElementsByClassName("td_join_url"),
+	join_urls: () => document.getElementsByClassName("join_url_container"),
 	servers_hidden: () => document.getElementById("servers_hidden"),
 	snackbar: () => document.getElementById("copy-snackbar")
 }
@@ -57,3 +57,29 @@ export function columnIsNumeric(column) {
 	].includes(column);
 }
 
+/**
+ * Creates an element, and adds attributes and elements to it.
+ * @param {string} tag - HTML Tag name.
+ * @param {Object|HTMLElement} args - Array of child elements, may start with props.
+ * @returns {HTMLElement}
+ */
+function createElement(tag, ...args) {
+  const element = document.createElement(tag);
+  if (args.length === 0) return element;
+  const propsCandidate = args[0];
+  if (typeof propsCandidate !== "string" && !(propsCandidate instanceof Element)) {
+    // args[0] is not child element or text node
+    // must be props object
+    Object.assign(element, propsCandidate);
+    args.shift();
+  }
+  element.append(...args);
+  return element;
+}
+
+export const element = new Proxy({}, {
+  get(_, key) {
+    return (...args) => createElement(key, ...args)
+  }
+});
+

output/main.js

@@ -17,7 +17,7 @@
 import {
 	dom, COLUMN, COLUMN_LITERAL, COMPARISON, ATTRIBUTES,
 	columnAscendingByDefault, columnIsSortable, columnNeedsCasefold,
-	columnIsNumeric
+	columnIsNumeric, element
 } from './js/constants.js';
 
 // Hidden communities for transparency.
@@ -50,12 +50,13 @@ const filteredCommunities = {
 
 // This can be achieved with `text-overflow: ellipsis` instead
 // and generated entirely server-side.
-const transformJoinURL = (join_link) =>
-	`${join_link.substring(0, 31)}...
-	<button class="copy_button" onclick="copyToClipboard('${join_link}')">
-		Copy
-	</button>
-	`.trim();
+const transformJoinURL = (join_link) => {
+  return element.button({
+    textContent: "Copy",
+    className: "copy_button",
+    onclick: () => copyToClipboard(join_link)
+  });
+}
 
 function onLoad(timestamp) {
 	setLastChecked(timestamp);
@@ -78,7 +79,7 @@ function createJoinLinkButtons() {
 	Array.from(join_URLs).forEach((td_url) => {
 		const a_href = td_url.querySelector('a'); // get first (only) <a> element
 		const join_link = a_href.getAttribute("href"); // get link
-		td_url.innerHTML = transformJoinURL(join_link); // add interactive content
+		td_url.append(transformJoinURL(join_link)); // add interactive content
 	});
 }
 
@@ -279,6 +280,9 @@ 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, {

output/styles2.css

@@ -37,7 +37,34 @@ header {
 	white-space: nowrap;
 }
 
-.copy_button     {  }
+.join_url.nojs_mobile {
+  display: none;
+}
+
+/* Apply margin against copy button. */
+html.js .join_url {
+  margin-right: 1em;
+}
+
+@media (max-width: 800px) {
+  .join_url {
+    display: none;
+  }
+
+  /* Show backup link only when button is not available. */
+  html:not(.js) .join_url.nojs_mobile {
+    display: inline;
+  }
+}
+
+.join_url_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.copy_button     { font-size: inherit }
 
 footer {
   display: flex;

php/utils/server-utils.php

@@ -18,6 +18,12 @@
 		return count($servers);
 	}
 	
+	function truncate($url, $len) {
+		return (strlen($url) > $len + 3)
+			? substr($url, 0, $len).'...'
+			: $string;
+	}
+	
 	/*
 	 * Helper function for reduce_servers
 	 */

sites/+components/tbl_communities.php

@@ -1,4 +1,6 @@
-<?php	
+<?php
+	require_once "$PROJECT_ROOT/php/utils/server-utils.php";
+
 	// Once handlers are attached in JS, this check ceases to be useful.
 	function column_sortable($id) {
 		return $id != "qr";
@@ -61,10 +63,13 @@
 			>
 		</td>
 		<td class="td_join_url">
-			<a href="<?=$room->join_link?>">
-				<?=$room->join_link?>
-
-			</a>
+			<div class="join_url_container">
+				<a class="join_url" href="<?=$room->join_link?>"
+					title="<?=$room->join_link?>"
+					><?=truncate($room->join_link, 32)?></a>
+				<a class="join_url nojs_mobile" href="<?=$room->join_link?>"
+					>Copy link</a>
+			</div>
 		</td>
 	</tr>
 <?php endforeach; ?>