diff --git a/output/js/constants.js b/output/js/constants.js index 027fd7f..23bc0d1 100644 --- a/output/js/constants.js +++ b/output/js/constants.js @@ -14,7 +14,7 @@ export const dom = { export const COLUMN = { IDENTIFIER: 0, LANGUAGE: 1, NAME: 2, DESCRIPTION: 3, USERS: 4, PREVIEW: 5, - QR_CODE: 6, JOIN_URL: 7 + QR_CODE: 6, SERVER_ICON: 7, JOIN_URL: 8 }; // Reverse enum. @@ -50,18 +50,24 @@ export function columnIsSortable(column) { ].includes(column); } -export function columnNeedsCasefold(column) { - return [ - COLUMN.IDENTIFIER, - COLUMN.NAME, - COLUMN.DESCRIPTION - ].includes(column); +/** + * @type {Record any>} + */ +const TRANSFORMATION = { + numeric: (el) => parseInt(el.innerText), + casefold: (el) => el.innerText.toLowerCase().trim(), + tokenData: (el) => el.getAttribute("data-token") } -export function columnIsNumeric(column) { - return [ - COLUMN.USERS - ].includes(column); +/** + * @type {Dictionary any>} + */ +export const COLUMN_TRANSFORMATION = { + [COLUMN.USERS]: TRANSFORMATION.numeric, + [COLUMN.IDENTIFIER]: TRANSFORMATION.casefold, + [COLUMN.NAME]: TRANSFORMATION.casefold, + [COLUMN.DESCRIPTION]: TRANSFORMATION.casefold, + [COLUMN.SERVER_ICON]: TRANSFORMATION.tokenData } /** diff --git a/output/main.js b/output/main.js index 8f3fb01..0a0eb54 100644 --- a/output/main.js +++ b/output/main.js @@ -16,8 +16,7 @@ // Import magic numbers and data import { dom, COLUMN, COLUMN_LITERAL, COMPARISON, ATTRIBUTES, - columnAscendingByDefault, columnIsSortable, columnNeedsCasefold, - columnIsNumeric, element + columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION, element } from './js/constants.js'; // Hidden communities for transparency. @@ -192,21 +191,12 @@ function makeRowComparer(column, ascending) { } // Callback to obtain sortable content from cell text. - let contentToSortable = (text) => text.trim(); - - if (columnNeedsCasefold(column)) { - // Make certain columns sort regardless of casing. - contentToSortable = (text) => text.toLowerCase().trim(); - } - else if (columnIsNumeric(column)) { - // Make certain columns sort on parsed numeric value instead of text. - contentToSortable = (text) => parseInt(text); - } + const columnToSortable = COLUMN_TRANSFORMATION[column] ?? ((el) => el.innerText.trim()); // Construct comparer using derived property to determine sort order. const rowComparer = compareProp( ascending ? compareAscending : compareDescending, - row => contentToSortable(row.children[column].innerText) + row => columnToSortable(row.children[column]) ); return rowComparer; diff --git a/output/styles2.css b/output/styles2.css index da0de7c..1c5fd23 100644 --- a/output/styles2.css +++ b/output/styles2.css @@ -104,6 +104,27 @@ header { .td_users { text-align: right; } .td_preview { text-align: center; } +.td_server_icon { text-align: center; } + +.td_server_icon-circle { + display: flex; + align-items: center; + justify-content: center; + width: 2em; + height: 2em; + border-radius: 2em; + font-family: sans-serif; + margin: 0 auto; + color: white; + text-shadow: 0 0 0.5em #000; + box-shadow: 0 0 0.05em #777; +} + +.td_server_icon-circle span { + position: relative; + top: 0.05em; +} + .td_join_url { font-family: monospace; white-space: nowrap; diff --git a/sites/+components/tbl_communities.php b/sites/+components/tbl_communities.php index d6771ca..cc589d1 100644 --- a/sites/+components/tbl_communities.php +++ b/sites/+components/tbl_communities.php @@ -22,6 +22,7 @@ ['id' => "users", 'name' => "Users"], ['id' => "preview", 'name' => "Preview"], ['id' => "qr", 'name' => "QR"], + ['id' => "server_icon", 'name' => "Server"], ['id' => "join_url", 'name' => "Join URL"], ]; ?> @@ -36,6 +37,22 @@ $room): ?> + join_link)[1]; + $icon_hue = hexdec($token[2] . $token[2]); + $icon_color = "hsl($icon_hue, 80%, 50%)"; + + $hostname = explode("//", $room->join_link)[1]; + $hostname = explode("/", $hostname)[0]; + ?> + language?> @@ -61,6 +78,14 @@ alt="Pictogram of a QR code" > + +
+ +
+