Merge pull request 'Implement Community modals' from dynamic-modals into main

Reviewed-on: https://codeberg.org/gravel/sessioncommunities.online/pulls/1
dev
gravel 1 year ago
commit 51d5685af2
Signed by: gravel
GPG Key ID: C0538F3C906B308F

4
.gitignore vendored

@ -1,6 +1,10 @@
# Generated HTML
output/*.html
# Downloaded QR codes
output/qr-codes
# Server-side cache
cache

@ -1,11 +1,12 @@
<?php
$PROJECT_ROOT=__DIR__;
$CACHE_ROOT="$PROJECT_ROOT/cache";
$QR_CODES="$CACHE_ROOT/qr-codes";
$ROOMS_FILE="$CACHE_ROOT/rooms.json";
$DOCUMENT_ROOT="$PROJECT_ROOT/output";
$TEMPLATES_ROOT="$PROJECT_ROOT/sites";
$LANGUAGES_ROOT="$PROJECT_ROOT/languages";
$QR_CODES="$DOCUMENT_ROOT/qr-codes";
$QR_CODES_RELATIVE="qr-codes";
include_once "$PROJECT_ROOT/php/utils/logging.php";

@ -35,6 +35,14 @@
--dynamic-columns-width: var(--expanded-dynamic-columns-width);
}
:root {
--cell-padding-h: 0.5em;
--cell-padding-v: 0.5em;
--cell-padding: var(--cell-padding-h) var(--cell-padding-v);
--cell-padding-small:
calc( var(--cell-padding-h) / 2 ) calc( var(--cell-padding-v) / 2 );
}
html {
font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px);
}
@ -94,6 +102,10 @@ html:not(.js) .js-only {
display: none;
}
gap {
flex-grow: 1000;
}
header {
display: flex;
direction: row;
@ -117,12 +129,6 @@ header {
#tbl_communities {
margin: 0 auto;
--cell-padding-h: 0.5em;
--cell-padding-v: 0.5em;
--cell-padding: var(--cell-padding-h) var(--cell-padding-v);
--cell-padding-small:
calc( var(--cell-padding-h) / 2 ) calc( var(--cell-padding-v) / 2 );
}
/* Cells in general */
@ -331,30 +337,6 @@ a[href^="https:"] .protocol-indicator::after {
margin-right: 1em;
}
@media (max-width: 1050px) {
/* Only current width breakpoint; */
/* Would follow w4 and precede w6. */
.show-from-w5 {
display: none;
}
#th_preview, .td_preview {
display: none;
}
:root {
--dynamic-columns-width: var(--collapsed-dynamic-columns-width);
}
}
@media (max-width: 500px) {
:root {
/* ! For when descriptions don't wrap and 100vw doesn't work. */
--dynamic-columns-width: 15rem;
}
}
.join_url_container {
display: flex;
flex-direction: row;
@ -405,49 +387,70 @@ label[for=toggle-show-room-ids]::after {
}
/* --- QR code modals --- */
.qr-code {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
#details-modal {
padding: 0;
width: 80vw;
max-height: 80vh;
color: var(--primary-color);
background-color: var(--secondary-color);
}
#details-modal-contents {
display: flex;
position: relative;
flex-direction: row;
padding: 3em;
}
.qr-code-icon {
#details-modal-close {
position: absolute;
cursor: pointer;
top: 0rem;
right: 0rem;
font-size: 3.5rem;
width: 5rem;
height: 5.5rem;
text-align: center;
}
.qr-code-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
padding-top: 100px; /* Location of the box */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
/*overflow: auto;*/ /* Enable scroll if needed */
#details-modal-start {
display: flex;
flex-direction: column;
margin-right: 1em;
}
#details-modal-end {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.qr-code-modal-content {
background-color: var(--secondary-color);
border: 1px solid var(--primary-color);
width: 80%;
margin: auto;
padding: 20px;
}
.qr-code-modal-close {
float: right;
font-size: 35px;
font-weight: bold;
color: var(--primary-color);
opacity: 60%
#details-modal-start #details-modal-description {
max-height: 50vh;
overflow: auto;
}
.qr-code-modal-close:hover,
.qr-code-modal-close:focus {
cursor: pointer;
opacity: 100%
#details-modal-start #details-modal-description-inner:empty::after {
content: "No description";
font-style: italic;
}
#details-modal-end #details-modal-qr-code {
width: 20em;
height: 20em;
margin-bottom: 1em;
}
#details-modal-end #details-modal-qr-code-label {
text-align: center;
}
#details-modal :is(#details-modal-copy-button, #details-modal-copy-staff-id) {
color: var(--primary-color);
background-color: var(--secondary-color);
border-radius: 10%;
padding: var(--cell-padding-small);
}
/* <Snackbar> */
@ -475,6 +478,34 @@ label[for=toggle-show-room-ids]::after {
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@media (max-width: 1050px) {
/* Only current width breakpoint; */
/* Would follow w4 and precede w6. */
.show-from-w5 {
display: none;
}
#th_preview, .td_preview {
display: none;
}
:root {
--dynamic-columns-width: var(--collapsed-dynamic-columns-width);
}
}
@media (max-width: 500px) {
:root {
/* ! For when descriptions don't wrap and 100vw doesn't work. */
--dynamic-columns-width: 15rem;
}
#details-modal-contents {
flex-direction: column;
}
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}

@ -7,14 +7,36 @@ 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),
row_info: (row) => {
/** @type {string[]} */
return {
language_flag: row.querySelector('.td_language').textContent.trim(),
name: row.querySelector('.td_name').textContent.trim(),
description: row.querySelector('.td_description').textContent.trim(),
users: parseFloat(row.querySelector('.td_users').textContent.trim()),
preview_link: row.querySelector('.td_preview a[href]').getAttribute('href'),
join_link: row.querySelector('.td_join_url a[href]').getAttribute('href'),
hostname: row.getAttribute('data-hostname'),
public_key: row.getAttribute('data-pubkey'),
staff: row.getAttribute('data-staff')
};
},
meta_timestamp: () => document.querySelector('meta[name=timestamp]'),
last_checked: () => document.getElementById("last_checked_value"),
qr_modal: (communityID) => document.getElementById(`modal_${communityID}`),
/** @return {HTMLDialogElement | null} */
details_modal: () => document.getElementById('details-modal'),
details_modal_qr_code: () => document.getElementById('details-modal-qr-code'),
join_urls: () => document.getElementsByClassName("join_url_container"),
servers_hidden: () => document.getElementById("servers_hidden"),
snackbar: () => document.getElementById("copy-snackbar")
snackbar: () => document.getElementById("copy-snackbar"),
qr_code_buttons: () => document.querySelectorAll('.qr-code-button'),
}
export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join";
export const communityQRCodeURL = (communityID) => `qr-codes/${communityID}.png`
export const COLUMN = {
IDENTIFIER: 0, LANGUAGE: 1, NAME: 2,
DESCRIPTION: 3, USERS: 4, PREVIEW: 5,
@ -33,11 +55,20 @@ export const COMPARISON = {
};
export const ATTRIBUTES = {
ROW: {
IDENTIFIER: 'data-identifier',
PUBLIC_KEY: 'data-pubkey',
HOSTNAME: 'data-hostname',
STAFF_DATA: 'data-staff'
},
SORTING: {
ACTIVE: 'data-sort',
ASCENDING: 'data-sort-asc',
COLUMN: 'data-sorted-by',
// COLUMN_LITERAL: 'sorted-by'
},
HYDRATION: {
CONTENT: 'data-hydrate-with'
}
};

@ -16,7 +16,8 @@
// Import magic numbers and data
import {
dom, COLUMN, COLUMN_LITERAL, COMPARISON, ATTRIBUTES,
columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION, element
columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION,
element, JOIN_URL_PASTE, communityQRCodeURL
} from './js/constants.js';
// Hidden communities for transparency.
@ -71,31 +72,122 @@ function onLoad() {
markSortableColumns();
addQRModalHandlers();
addServerIconInteractions();
preloadQRCodes();
}
function displayQRModal(communityID) {
dom.qr_modal(communityID).style.display = "block";
const modal = dom.details_modal();
if (!modal) {
throw new DOMException("Modal element not found.");
}
const row = dom.community_row(communityID);
if (!row) {
throw new DOMException("Community row not found.");
}
const rowInfo = dom.row_info(row);
for (const element of modal.querySelectorAll(`[${ATTRIBUTES.HYDRATION.CONTENT}]`)) {
const attributes = element.getAttribute(ATTRIBUTES.HYDRATION.CONTENT);
if (!attributes) continue;
for (const attribute of attributes.split(';')) {
const [property, targetProperty] = attribute.includes(':')
? attribute.split(":")
: [attribute, 'textContent'];
if (!Object.getOwnPropertyNames(rowInfo).includes(property)) {
console.error(`Unknown rowInfo property: ${property}`);
continue;
}
if (targetProperty === 'textContent') {
element.textContent = rowInfo[property];
} else {
element.setAttribute(targetProperty, rowInfo[property]);
}
}
}
dom.details_modal_qr_code().src = communityQRCodeURL(communityID);
modal.showModal();
}
function hideQRModal(communityID) {
dom.qr_modal(communityID).style.display = "none";
dom.details_modal().close();
}
function addQRModalHandlers() {
const rows = dom.tbl_communities_content_rows();
if (!rows) throw new Error("Rows not found");
for (const row of rows) {
const communityID = row.getAttribute('data-identifier');
const communityID = row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER);
row.querySelector('.td_qr_code').addEventListener(
'click',
() => displayQRModal(communityID)
);
const closeButton =
dom.qr_modal(communityID).querySelector('.qr-code-modal-close');
closeButton.addEventListener(
row.querySelector('.td_name').addEventListener(
'click',
() => hideQRModal(communityID)
(e) => {
e.preventDefault();
displayQRModal(communityID);
}
);
}
const closeButton =
dom.details_modal().querySelector('#details-modal-close');
closeButton.addEventListener(
'click',
() => hideQRModal()
);
dom.details_modal().addEventListener('click', function (e) {
if (this == e.target) {
this.close();
}
});
document.querySelector('#details-modal-copy-button').addEventListener(
'click',
function () {
copyToClipboard(this.getAttribute('data-href'));
}
)
document.querySelector('#details-modal-copy-staff-id')?.addEventListener(
'click',
function () {
/**
* @type {string[]}
*/
const staff = JSON.parse(this.getAttribute(ATTRIBUTES.ROW.STAFF_DATA));
if (staff.length == 0) {
alert("No public moderators available for this Community.");
return;
}
const staffId = staff[~~(staff.length * Math.random())];
copyToClipboard(`@${staffId}`, 'Copied staff ID to clipboard.');
}
)
for (const anchor of dom.qr_code_buttons()) {
// Disable QR code links
anchor.setAttribute("href", "#");
anchor.removeAttribute("target");
anchor.addEventListener('click', (e) => { e.preventDefault(); return false });
}
}
function preloadQRCodes() {
const rows = dom.tbl_communities_content_rows();
const identifiers = rows.map(
rowElement => rowElement.getAttribute(ATTRIBUTES.ROW.IDENTIFIER)
);
for (const identifier of identifiers) {
(new Image()).src = communityQRCodeURL(identifier);
}
}
@ -134,13 +226,20 @@ function hideElementByID(id) {
/**
* Copies text to clipboard and shows an informative toast.
* @param {string} text - Text to copy to clipboard.
* @param {string} [toastText] - Text shown by toast.
*/
function copyToClipboard(text) {
function copyToClipboard(text, toastText = JOIN_URL_PASTE) {
navigator.clipboard.writeText(text);
// Find snackbar element
const snackbar = dom.snackbar();
if (!snackbar) {
throw new DOMException("Could not find snackbar");
}
snackbar.textContent = toastText;
snackbar.classList.add('show')
// After 3 seconds, hide the snackbar.
@ -164,8 +263,8 @@ function setLastChecked(last_checked) {
function addServerIconInteractions() {
const rows = dom.tbl_communities_content_rows();
for (const row of rows) {
const hostname = row.getAttribute('data-hostname');
const publicKey = row.getAttribute('data-pubkey');
const hostname = row.getAttribute(ATTRIBUTES.ROW.HOSTNAME);
const publicKey = row.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY);
const serverIcon = row.querySelector('.td_server_icon');
serverIcon.addEventListener('click', () => {
alert(`Host: ${hostname}\n\nPublic key:\n${publicKey}`);

@ -0,0 +1,39 @@
<?php
/**
* Return local path to room invite code.
* @param string $room_id Id of room to locate QR code for.
*/
function room_qr_code_path(string $room_id): string {
global $QR_CODES;
return "$QR_CODES/$room_id.png";
}
/**
* Return remote path to room invite code.
* @param string $room_id Id of room to locate QR code for.
*/
function room_qr_code_path_relative(string $room_id): string {
global $QR_CODES_RELATIVE;
return "$QR_CODES_RELATIVE/$room_id.png";
}
/**
* Fetch QR invite of the given room and return its local path.
* @param \CommunityRoom $room
* @return string
*/
function room_qr_code($room): string {
$room_id = $room->get_room_identifier();
$png_cached = room_qr_code_path($room_id);
if (file_exists($png_cached)) {
return room_qr_code_path_relative($room_id);
}
log_debug("Fetching QR code for $room_id.");
$png = file_get_contents($room->get_invite_url());
file_put_contents($png_cached, $png);
return room_qr_code_path_relative($room_id);
}
file_exists($QR_CODES) or mkdir($QR_CODES, 0700);
?>

@ -1,46 +1,74 @@
<?php
/**
* @var CommunityRoom[] $rooms
*/
function room_qr_code_cached($room_id) {
global $QR_CODES;
return "$QR_CODES/$room_id.png";
}
require_once "$PROJECT_ROOT/php/utils/room-invites.php";
?>
/**
* Fetch QR codes from SOGS server and encode them as base64
* @param CommunityRoom $room
*/
function base64_qr_code($room, $size = "512x512") {
$room_id = $room->get_room_identifier();
$png_cached = room_qr_code_cached($room_id);
if (file_exists($png_cached)) {
return base64_encode(file_get_contents($png_cached));
}
log_debug("Fetching QR code for $room_id.");
$png = file_get_contents($room->get_invite_url());
file_put_contents($png_cached, $png);
return base64_encode($png);
}
<dialog id="details-modal">
<div id="details-modal-contents">
<div id="details-modal-close">
&times;
</div>
<div id="details-modal-start">
<h1 id="details-modal-title">
<a
id="details-modal-community-name"
data-hydrate-with="name;preview_link:href"
title="Open preview in new tab"
></a>
</h1>
<p id="details-modal-description">
<span>Description:</span>
<span id="details-modal-description-inner" data-hydrate-with="description"></span>
</p>
<gap></gap>
<div id="details-modal-room-info">
<p>
Language: <span data-hydrate-with="language_flag"></span>
</p>
<p>
Users: <span data-hydrate-with="users"></span>
</p>
<p>
Server:
<a
title="Open server in new tab"
data-hydrate-with="hostname;hostname:href"
target="_blank"
rel="noopener noreferrer"
></a>
</p>
file_exists($QR_CODES) or mkdir($QR_CODES, 0700);
?>
<p>
<button
id="details-modal-copy-button"
data-hydrate-with="join_link:data-href"
title="Click here to copy this Community's join link"
>
Copy join link
</button>
<div id="modal-container">
<?php foreach ($rooms as $room): ?>
<div id="modal_<?=$room->get_room_identifier()?>" class="qr-code-modal">
<div class="qr-code-modal-content">
<span class="qr-code-modal-close">
&times;
</span>
<button
id="details-modal-copy-staff-id"
data-hydrate-with="staff:data-staff"
title="Copy the mention for a random staff member"
>
Copy mod ID
</button>
</p>
</div>
</div>
<gap></gap>
<div id="details-modal-end">
<img
src="data:image/png;base64,<?=base64_qr_code($room)?>"
alt="Community join link encoded as QR code"
class="qr-code"
loading="lazy"
src=""
id="details-modal-qr-code"
title="Community join link encoded as QR code"
>
<div id="details-modal-qr-code-label">
Scan QR code in Session to join
<br>
'<span data-hydrate-with="name"></span>'
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</dialog>

@ -1,6 +1,7 @@
<?php
require_once "$PROJECT_ROOT/php/utils/utils.php";
require_once "$PROJECT_ROOT/php/utils/servers-rooms.php";
require_once "$PROJECT_ROOT/php/utils/room-invites.php";
/**
* @var CommunityRoom[] $rooms
@ -17,7 +18,7 @@
$column = $TABLE_COLUMNS[$colno];
$name = isset($column['name_long']) ? $column['name_long'] : $column['name'];
if (!column_sortable($column['id'])) return " title='$name'";
return " title='Click to sort by $name'.";
return " title='Click to sort by $name.'";
}
// Note: Changing the names displayed requires updating
@ -63,12 +64,15 @@
$join_link = html_sanitize($room->get_join_url());
$pubkey = html_sanitize($pubkey);
$hostname = html_sanitize($hostname);
$staff_json = json_encode(array_map('html_sanitize', $room->get_staff()));
?>
<tr id="<?=$id?>" itemscope itemtype="https://schema.org/EntryPoint"
<tr id="<?=$id?>" class="room-row" itemscope itemtype="https://schema.org/EntryPoint"
data-identifier="<?=$id?>"
data-pubkey="<?=$pubkey?>"
data-hostname="<?=$hostname?>"
data-staff='<?=$staff_json?>'
>
<td class="td_identifier" itemprop="identifier"><?=$id?></td>
<td class="td_language" title="Language flag for '<?=$name?>'"><?=$language?></td>
@ -100,12 +104,18 @@
</a>
</td>
<td class="td_qr_code">
<img
class="qr-code-icon"
src="qrcode-solid.svg"
alt="Pictogram of a QR code"
title="Click here to view the QR Code for '<?=$name?>'"
<a
class="qr-code-button"
href="<?=room_qr_code($room)?>"
target="_blank"
>
<img
class="qr-code-icon"
src="qrcode-solid.svg"
alt="Pictogram of a QR code"
title="Click here to view the details for '<?=$name?>'"
>
</a>
</td>
<td class="td_server_icon"
data-sort-by="<?=$pubkey?>"

@ -135,39 +135,37 @@
href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups"
target="_blank"
title="Closed groups curated by community moderators"
>Closed Groups</a>
<a
href="https://session.directory/"
target="_blank"
title="User-submitted closed groups, communities and user profiles. Not safe for work."
>session.directory</a>
<a
href="https://github.com/oxen-io/session-pysogs"
target="_blank"
title="Information about running a community server."
>Host Your Own Community</a>
<a
href="https://getsession.org/terms-of-service"
target="_blank"
>Session Terms Of Service</a>
</nav>
<nav>
<a
href="https://codeberg.org/gravel/sessioncommunities.online"
target="_blank"
title="sessioncommunities.online repository on Codeberg."
>Source Code</a>
<a
href="https://codeberg.org/gravel/sessioncommunities.online#contact"
target="_blank"
rel="author"
title="Information on how to contact the maintainer of sessioncommunities.online"
>Contact</a>
</nav>
</footer>
<div id="copy-snackbar">
Copied URL to clipboard. Paste into Session app to join
</div>
>Closed Groups</a>
<a
href="https://session.directory/"
target="_blank"
title="User-submitted closed groups, communities and user profiles. Not safe for work."
>session.directory</a>
<a
href="https://github.com/oxen-io/session-pysogs"
target="_blank"
title="Information about running a community server."
>Host Your Own Community</a>
<a
href="https://getsession.org/terms-of-service"
target="_blank"
>Session Terms Of Service</a>
</nav>
<nav>
<a
href="https://codeberg.org/gravel/sessioncommunities.online"
target="_blank"
title="sessioncommunities.online repository on Codeberg."
>Source Code</a>
<a
href="https://codeberg.org/gravel/sessioncommunities.online#contact"
target="_blank"
rel="author"
title="Information on how to contact the maintainer of sessioncommunities.online"
>Contact</a>
</nav>
</footer>
</div>
<div id="copy-snackbar"></div>
</body>
</html>

Loading…
Cancel
Save