Add sample searches & search by language

output/index.css

@@ -127,7 +127,7 @@ html:not(.js) .js-only {
 	/* box-shadow: 0.05em 0.05em 0.1em 0 #4444;*/
 }
 
-#tbl_communities .room-label, #details-modal .room-label {
+#tbl_communities .room-label, #details-modal .room-label, .sample-search {
 	color: black;
 }
 
@@ -135,11 +135,11 @@ html:not(.js) .js-only {
 	opacity: 0.75;
 }
 
-.room-label-user {
+.room-label-user, .sample-search-tag {
 	background-color: greenyellow;
 }
 
-.room-label-reserved {
+.room-label-reserved, .sample-search-tag-reserved {
 	background-color: yellow;
 }
 
@@ -147,6 +147,14 @@ html:not(.js) .js-only {
 	background-color: pink;
 }
 
+.sample-search-plain {
+	background-color: lightgrey;
+}
+
+.sample-search-language {
+	background-color: whitesmoke;
+}
+
 #tbl_communities .room-label:not(.room-label-highlighted) {
 	background-color: transparent;
 	color: var(--primary-color);
@@ -177,19 +185,26 @@ header {
 
 #search-container {
 	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	max-height: 6rem;
 	justify-content: center;
 	box-sizing: border-box;
-	height: 3rem;
 	overflow: hidden;
-	transition: height 0.25s;
+	transition: max-height 0.1s;
+	align-items: flex-start;
+}
+
+#search-container > * {
+	margin-block: 0.75rem;
 }
 
 .collapsed {
-	height: 0 !important;
+	max-height: 0 !important;
 }
 
 #search-container.collapsed > * {
-	display: none;
+	/* display: none; */
 }
 
 #search {
@@ -212,6 +227,10 @@ header {
 	color: red;
 }
 
+#btn-clear-search {
+	margin-right: 1rem;
+}
+
 /* --- Table --- */
 
 #tbl_communities {

output/js/constants.js

@@ -48,6 +48,7 @@ export const dom = {
 	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";
@@ -96,6 +97,9 @@ export const ATTRIBUTES = {
 	},
 	HYDRATION: {
 		CONTENT: 'data-hydrate-with'
+	},
+	SEARCH: {
+		TARGET_SEARCH: 'data-search'
 	}
 };
 
@@ -108,6 +112,32 @@ export const CLASSES = {
 	}
 }
 
+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));
+	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;
 }

output/main.js

@@ -17,7 +17,7 @@
 import {
 	dom, COLUMN, COLUMN_LITERAL, COMPARISON, ATTRIBUTES,
 	columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION,
-	element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE, DETAILS_LINK_PASTE, CLASSES
+	element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE, DETAILS_LINK_PASTE, CLASSES, flagToLanguageAscii
 } from './js/constants.js';
 
 // Hidden communities for transparency.
@@ -450,6 +450,7 @@ function addServerIconInteractions() {
 
 function addSearchInteractions() {
 	dom.btn_toggle_search()?.addEventListener('click', function (ev) {
+		location.hash="#";
 		const container = dom.search_container();
 		container?.classList.toggle(CLASSES.COMPONENTS.COLLAPSED);
 		if (!container?.classList.contains(CLASSES.COMPONENTS.COLLAPSED)) {
@@ -479,6 +480,12 @@ function addSearchInteractions() {
 		searchBar?.focus();
 		searchBar.value = "";
 	})
+
+	Array.from(dom.sample_searches()).forEach(button => button.addEventListener('click', function() {
+		const targetSearch = button.getAttribute(ATTRIBUTES.SEARCH.TARGET_SEARCH);
+		useSearchTerm(targetSearch);
+		dom.search_bar().value = targetSearch;
+	}))
 }
 
 /**
@@ -613,7 +620,6 @@ const communityFullRowCache = [];
 function initializeSearch() {
 	communityFullRowCache.push(...dom.tbl_communities_content_rows());
 }
-
 /**
  *
  * @param {string} [rawTerm]
@@ -623,15 +629,27 @@ function useSearchTerm(rawTerm) {
 		replaceRowsWith(communityFullRowCache);
 		dom.search_bar()?.classList.remove(CLASSES.SEARCH.NO_RESULTS);
 	} else {
-		const term = rawTerm.toLowerCase();
+		const term = rawTerm.toLowerCase().replace(/lang:(\S+)/g, "").trim();
 		const termTags = Array.from(rawTerm.matchAll(/#[^#\s]+/g)).map(match => match[0].slice(1).toLowerCase());
+		const termLanguage = rawTerm.match(/lang:(\S+)/)?.[1];
+		console.log(termLanguage);
 		const newRows = communityFullRowCache.filter(
 			row => {
 				const rowInfo = dom.row_info(row);
+				const langAscii = rowInfo.language_flag && flagToLanguageAscii(rowInfo.language_flag).toLowerCase();
+				const rowName = rowInfo.name.toLowerCase();
+				const rowDesc = rowInfo.description.toLowerCase();
 				const rowTags = rowInfo.tags.map(({text}) => text);
-				return rowInfo.name.toLowerCase().includes(term) ||
-					rowInfo.description.toLowerCase().includes(term) ||
-					(termTags.length >= 1 && termTags.some(tag => rowTags.some(rowTag => rowTag.includes(tag))))
+				if (termLanguage && !langAscii.includes(termLanguage.toLowerCase())) {
+					return false;
+				}
+				if (termTags.length >= 1) {
+					if (termTags.some(tag => rowTags.some(rowTag => rowTag.includes(tag)))) {
+						return true;
+					}
+				}
+				return rowName.includes(term) || rowDesc.includes(term);
+
 			}
 		);
 		if (newRows.length === 0) {

sites/+components/communities-search.php

@@ -0,0 +1,40 @@
+<?php
+	$sample_searches_tags_reserved = ["we're here"];
+	$sample_searches_plain = ["Australia"];
+	$sample_searches_tags = ["privacy", "linux"];
+	$sample_searches_languages = [["en", "🇬🇧"], ["zh", "🇨🇳"]];
+
+	$sample_searches = [];
+
+	foreach ($sample_searches_tags_reserved as $sample_search) {
+		$sample_searches[] = array("type" => "tag-reserved", "text" => "#$sample_search", "search" => "#$sample_search");
+	}
+	foreach ($sample_searches_tags as $sample_search) {
+		$sample_searches[] = array("type" => "tag", "text" => "#$sample_search", "search" => "#$sample_search");
+	}
+	foreach ($sample_searches_plain as $sample_search) {
+		$sample_searches[] = array("type" => "plain", "text" => $sample_search, "search" => $sample_search);
+	}
+	foreach ($sample_searches_languages as $sample_search) {
+		$sample_searches[] = array("type" => "language", "text" => $sample_search[1], "search" => "lang:" . $sample_search[0]);
+	}
+?>
+
+<div id="search-container" class="collapsed">
+	<div id="search">
+		<input id="search-bar" autocomplete="off" type="text" placeholder="Search for Communities">
+		<span id="btn-clear-search" class="anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span>
+	</div>
+	<div id="sample-searches">
+<?php foreach ($sample_searches as $search): ?>
+		<span
+			class="badge clickable enter-clicks sample-search sample-search-<?=$search['type']?>"
+			title="Try searching for <?=$search['search']?>"
+			data-search="<?=$search['search']?>"
+			tabindex=0
+		><?=
+			$search['text']
+		?></span>
+<?php endforeach; ?>
+	</div>
+</div>

sites/index.php

@@ -97,12 +97,7 @@
 			</header>
 			<h1 id="headline">Session Communities</h1>
 
-			<div id="search-container" class="collapsed">
-				<div id="search">
-					<input id="search-bar" type="text" placeholder="Search text, #tags">
-					<span id="btn-clear-search" class="anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span>
-				</div>
-			</div>
+			<?php include "+components/communities-search.php" ?>
 
 			<?php include "+components/qr-modals.php" ?>