Script column

Author: fileformat

README.md

@@ -1,5 +1,6 @@
 # UnicodeSearch <img alt="VectorLogoZone logo" src="public/favicon.svg" height="90" align="right" />
 
+[![deploy](https://github.com/FileFormatInfo/unicodesearch/actions/workflows/ghpages-deploy.yaml/badge.svg)](https://github.com/FileFormatInfo/unicodesearch/actions/workflows/ghpages-deploy.yaml)
 
 A web app for searching and browsing the Unicode character database.
 
@@ -31,10 +32,6 @@ See it in action: [unicodesearch.org](https://www.unicodesearch.org/)
 - [ ] copy to clipboard button
 - [ ] test dark mode
 - [ ] share links in footer
-- [ ] test responsive layout
-- [ ] expand category abbreviations
-- [ ] category search: 2 char=>use abbreviation, 3+ char=>search full name
-- [ ] name search
 - [ ] tips for name search
-- [ ] tags: bidi, emoji, letter, number, punctuation, symbol, whitespace
+- [ ] tags: bidi, letter, number
 - [ ] tag filters

src/index.ts

@@ -19,6 +19,7 @@ import {
 
 type SearchEntry = {
 	code: string;
+	example: string;
 	name: string;
 	age: string;
 	block: string;
@@ -67,6 +68,11 @@ const categoryMap: { [key: string]: string } = {
 	"Zs": "Separator, Space"
 }
 
+// translates from a hex codepoint string to the actual character
+function codeToString(code: string):string {
+	return String.fromCodePoint(parseInt(code, 16));
+}
+
 function filterCategory(
 	headerValue: string,
 	rowValue: string,
@@ -143,15 +149,6 @@ function fmtCodepoint(cell: CellComponent) {
 	return `U+${val.toUpperCase()}`;
 }
 
-function fmtExampleString(cell: CellComponent) {
-	const val = cell.getValue() as string;
-	if (!val) {
-		return "";
-	}
-	const codepoints = val.split(" ").map((cp) => parseInt(cp, 16));
-	return String.fromCodePoint(...codepoints);
-}
-
 function fmtTags(cell: CellComponent) {
 	const tags = cell.getValue() as string[];
 	if (!tags || tags.length === 0) {
@@ -279,6 +276,10 @@ async function main() {
 
 	data = rawData.data;
 
+	for (const row of data) {
+		row.example = codeToString(row.code);
+	}
+
 	console.log(data[0]);
 
 	Tabulator.registerModule([
@@ -298,43 +299,45 @@ async function main() {
 		autoResize: true,
 		data,
 		columns: [
+			{
+				field: "example",
+				headerFilter: "input",
+				headerFilterFunc: (
+					headerValue,
+					rowValue,
+					rowData,
+					filterParams
+				) => {
+					if (!headerValue) return true;
+					return headerValue == rowValue;
+				},
+				headerHozAlign: "center",
+				hozAlign: "center",
+				responsive: 0,
+				title: "Character",
+				width: 150,
+			},
 			{
 				field: "code",
 				formatter: fmtCodepoint,
 				headerFilter: "input",
 				headerHozAlign: "center",
 				hozAlign: "center",
-				responsive: 2,
-				sorter: function(a, b, aRow, bRow, column, dir, sorterParams) {
+				responsive: 10,
+				sorter: function (a, b, aRow, bRow, column, dir, sorterParams) {
 					const aInt = parseInt(a, 16);
 					const bInt = parseInt(b, 16);
 					return aInt - bInt;
 				},
 				title: "Codepoint",
-				width: 175,
-			},
-			{
-				field: "code",
-				formatter: fmtExampleString,
-				headerFilter: "input",
-				headerFilterFunc: (headerValue, rowValue, rowData, filterParams) => {
-					if (!headerValue || headerValue.length != 1) return true;
-					const headerInt = headerValue.codePointAt(0);
-					const headerHex = headerInt.toString(16).toUpperCase().padStart(4, "0");
-					return headerHex == rowData.code;
-				},
-				headerHozAlign: "center",
-				hozAlign: "center",
-				responsive: 2,
-				title: "Example",
-				width: 175,
+				width: 150,
 			},
 			{
 				field: "block",
 				headerFilter: "input",
 				headerHozAlign: "center",
 				hozAlign: "center",
-				responsive: 2,
+				responsive: 20,
 				title: "Block",
 				width: 175,
 			},
@@ -345,19 +348,29 @@ async function main() {
 				headerFilterFunc: filterCategory,
 				headerHozAlign: "center",
 				hozAlign: "center",
-				responsive: 2,
+				responsive: 40,
 				title: "Category",
 				width: 200,
 			},
+			{
+				field: "script",
+				headerFilter: "input",
+				headerFilterFunc: "starts",
+				headerHozAlign: "center",
+				hozAlign: "center",
+				responsive: 50,
+				title: "Script",
+				width: 100,
+			},
 			{
 				field: "age",
 				headerFilter: "input",
 				headerFilterFunc: "starts",
 				headerHozAlign: "center",
 				hozAlign: "center",
-				responsive: 2,
+				responsive: 30,
 				title: "Version",
-				width: 125,
+				width: 110,
 			},
 			{
 				title: "Name",
@@ -382,7 +395,7 @@ async function main() {
 				field: "tags",
 				formatter: fmtTags,
 				headerSort: false,
-				responsive: 0,
+				responsive: 15,
 				width: 375,
 			},
 		],