sessioncommunities.online/output/js/util.js

// This file contains definitions which help to reduce the amount
// of redundant values in the main file, especially those that could
// change in the foreseeable future.

export const dom = {
	/** @return {HTMLTableElement | null} */
	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.querySelector(`.room-row[${ATTRIBUTES.ROW.IDENTIFIER}="${communityID}"]`),
	row_info: (row) => {
		const dateCreated = new Date(row.getAttribute(ATTRIBUTES.ROW.DATE_CREATED) * 1000);
		/** @type {string[]} */
		return {
			language_flag: row.querySelector('.td_language').textContent.trim(),
			name: row.querySelector('.td_name-inner').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'),
			identifier: row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER),
			hostname: row.getAttribute(ATTRIBUTES.ROW.HOSTNAME),
			public_key: row.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY),
			staff: row.getAttribute(ATTRIBUTES.ROW.STAFF_DATA),
			/** @type {{type: string, text: string, description: string}[]} */
			tags: JSON.parse(row.getAttribute(ATTRIBUTES.ROW.TAGS)),
			icon: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON),
			has_icon: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON).trim() != "",
			icon_safety: row.getAttribute(ATTRIBUTES.ROW.ROOM_ICON_SAFETY),
			date_created: dateCreated,
			creation_datestring: dateCreated.toLocaleDateString(undefined, {dateStyle: "medium"})
		};
	},
	meta_timestamp: () => document.querySelector('meta[name=timestamp]'),
	last_checked: () => document.getElementById("last_checked_value"),
	/** @return {HTMLDialogElement | null} */
	details_modal: () => document.getElementById('details-modal'),
	details_modal_tag_container: () => document.getElementById('details-modal-room-tags'),
	details_modal_qr_code: () => document.getElementById('details-modal-qr-code'),
	details_modal_room_icon: () => document.getElementById('details-modal-community-icon'),
	join_urls: () => document.getElementsByClassName("join_url_container"),
	servers_hidden: () => document.getElementById("servers_hidden"),
	snackbar: () => document.getElementById("copy-snackbar"),
	qr_code_buttons: () => document.querySelectorAll('.qr-code-button'),
	/** @return {HTMLInputElement | null} */
	btn_toggle_search: () => document.querySelector('#btn-toggle-search'),
	/** @return {HTMLInputElement | null} */
	search_bar: () => document.querySelector('#search-bar'),
	btn_clear_search: () => document.querySelector("#btn-clear-search"),
	search_container: () => document.querySelector("#search-container"),
	sample_searches: () => document.querySelectorAll(".sample-search")
}

export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join";

export const STAFF_ID_PASTE = "Copied staff ping to clipboard. Use it in the selected Community to alert a random moderator.";

export const IDENTIFIER_PASTE = "Copied internal room identifier. Use it to identify a room, such as when contributing language labels."

export const DETAILS_LINK_PASTE = "Copied link to Community details.";

export const communityQRCodeURL = (communityID) => `qr-codes/${communityID}.png`

export const COLUMN = {
	LANGUAGE:     0,  NAME:         1,
	DESCRIPTION:  2,  USERS:        3,  PREVIEW:      4,
	QR_CODE:      5,  SERVER_ICON:  6,  JOIN_URL:     7
};

// Reverse enum.
// Takes original key-value pairs, flips them, and casefolds the new values.
// Should correspond to #th_{} and .td_{} elements in communities table.
export const COLUMN_LITERAL = Object.fromEntries(
	Object.entries(COLUMN).map(([name, id]) => [id, name.toLowerCase()])
);

export const COMPARISON = {
	GREATER: 1, EQUAL: 0, SMALLER: -1
};

export const ATTRIBUTES = {
	ROW: {
		TAGS: 'data-tags',
		IDENTIFIER: 'data-identifier',
		PUBLIC_KEY: 'data-pubkey',
		HOSTNAME: 'data-hostname',
		STAFF_DATA: 'data-staff',
		ROOM_ICON: 'data-icon',
		ROOM_ICON_SAFETY: 'data-icon-safe',
		DATE_CREATED: 'data-created'
	},
	SORTING: {
		ACTIVE: 'data-sort',
		ASCENDING: 'data-sort-asc',
		COLUMN: 'data-sorted-by',
		// COLUMN_LITERAL: 'sorted-by'
	},
	HYDRATION: {
		CONTENT: 'data-hydrate-with'
	},
	SEARCH: {
		TARGET_SEARCH: 'data-search'
	}
};

export const CLASSES = {
	COMPONENTS: {
		COLLAPSED: 'collapsed',
	},
	SEARCH: {
		NO_RESULTS: 'search-no-results',
	}
}

const CODEPOINT_REGIONAL_INDICATOR_A = 0x1F1E6;
const CODEPOINT_LOWERCASE_A = 0x61;

/**
 *
 * @param {string} flag
 */
export function flagToLanguageAscii(flag) {
	const regionalIndicators = [0, 2].map(idx => flag.codePointAt(idx));
	if (regionalIndicators.includes(undefined)) {
		return "";
	}
	const ascii = regionalIndicators
		.map(codePoint => codePoint - CODEPOINT_REGIONAL_INDICATOR_A)
		.map(codePoint => codePoint + CODEPOINT_LOWERCASE_A)
		.map(codePoint => String.fromCodePoint(codePoint))
		.join("");

	switch (ascii) {
		case "gb":
			return "en";
		case "cn":
			return "zh";
		default:
			return ascii;
	}
}


export function columnAscendingByDefault(column) {
	return column != COLUMN.USERS;
}

export function columnIsSortable(column) {
	return ![
		COLUMN.QR_CODE,
		COLUMN.PREVIEW,
		// Join URL contents are not guaranteed to have visible text.
		COLUMN.JOIN_URL
	].includes(column);
}

/**
 * @type {Record<string, (el: HTMLTableCellElement) => any>}
 */
const TRANSFORMATION = {
	numeric: (el) => parseInt(el.innerText),
	casefold: (el) => el.innerText.toLowerCase().trim(),
	getSortKey: (el) => el.getAttribute("data-sort-by")
}

/**
 * @type {Dictionary<number, (el: HTMLTableCellElement) => any>}
 */
export const COLUMN_TRANSFORMATION = {
	[COLUMN.USERS]: TRANSFORMATION.numeric,
	[COLUMN.IDENTIFIER]: TRANSFORMATION.casefold,
	[COLUMN.NAME]: TRANSFORMATION.getSortKey,
	[COLUMN.DESCRIPTION]: TRANSFORMATION.casefold,
	[COLUMN.SERVER_ICON]: TRANSFORMATION.getSortKey
}

/**
 * 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)
	}
});