1
0
Fork 1

Community modals (#11, #32) #41

Open
gravel wants to merge 2 commits from gravel/sessioncommunities.online-archive:dynamic-modals into main

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";

@ -7,14 +7,34 @@ 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 COLUMN = {
IDENTIFIER: 0, LANGUAGE: 1, NAME: 2,
DESCRIPTION: 3, USERS: 4, PREVIEW: 5,
@ -38,6 +58,9 @@ export const ATTRIBUTES = {
ASCENDING: 'data-sort-asc',
COLUMN: 'data-sorted-by',
// COLUMN_LITERAL: 'sorted-by'
},
HYDRATION: {
CONTENT: 'data-hydrate-with'
}
};

@ -16,7 +16,7 @@
// 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
} from './js/constants.js';
// Hidden communities for transparency.
@ -71,11 +71,46 @@ function onLoad() {
}
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 = `qr-codes/${communityID}.png`;
modal.showModal();
}
function hideQRModal(communityID) {
dom.qr_modal(communityID).style.display = "none";
dom.details_modal().close();
}
function addQRModalHandlers() {
@ -87,13 +122,51 @@ function addQRModalHandlers() {
'click',
() => displayQRModal(communityID)
);
const closeButton =
dom.qr_modal(communityID).querySelector('.qr-code-modal-close');
closeButton.addEventListener(
'click',
() => hideQRModal(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('data-staff'));
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 createJoinLinkButtons() {
@ -131,13 +204,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.

@ -61,6 +61,10 @@ html:not(.js) .js-only {
display: none;
}
gap {
flex-grow: 1000;
}
header {
display: flex;
direction: row;
@ -355,23 +359,54 @@ 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;
max-width: 80vw;
max-height: 80vh;
}
#details-modal-contents {
display: flex;
position: relative;
flex-direction: row;
padding: 2em;
}
.qr-code-icon {
#details-modal-close {
position: absolute;
cursor: pointer;
top: 0.35em;
right: 0.5em;
font-size: 2em;
}
#details-modal-start {
display: flex;
flex-direction: column;
margin-right: 1em;
}
#details-modal-copy-button {
font-size: 1.1em;
}
#details-modal-end {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#details-modal-end #details-modal-qr-code {
width: 20em;
height: 20em;
}
#details-modal-end #details-modal-qr-code-label {
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 */

@ -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,69 @@
<?php
/**
* @var CommunityRoom[] $rooms
*/
function room_qr_code_cached($room_id) {
global $QR_CODES;
return "$QR_CODES/$room_id.png";
}
/**
* 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);
}
file_exists($QR_CODES) or mkdir($QR_CODES, 0700);
require_once "$PROJECT_ROOT/php/utils/room-invites.php";
?>
<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>
<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" data-hydrate-with="description">
</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>
<?php /*
<p>
<button
id="details-modal-copy-button"
data-hydrate-with="join_link:data-href"
title="Copy join link"
>Copy link</button>
</p>
*/ ?>
<p>
<button
id="details-modal-copy-staff-id"
data-hydrate-with="staff:data-staff"
>
Copy mod ID
</button>
</p>
</div>
</div>
<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="qr-codes/android+118d.png"
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
'<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
@ -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?>"

@ -161,8 +161,6 @@
>Contact</a>
</nav>
</footer>
<div id="copy-snackbar">
Copied URL to clipboard. Paste into Session app to join
</div>
<div id="copy-snackbar"></div>
</body>
</html>