Hide/show columns, tag filter

Author: fileformat

src/index.ts

@@ -134,6 +134,31 @@ function filterName(
 	return rowValue.toLowerCase().includes(search);
 }
 
+function filterTags(
+	headerValue: string,
+	rowValue: string[],
+	rowData: any,
+	filterParams: any
+) {
+	if (!headerValue || headerValue.length == 0) return true;
+
+	const headerVals = headerValue.split(/[ ,]+/);
+	const rowVals:string[] = rowValue || [];
+
+	for (const filterVal of headerVals) {
+		if (filterVal.startsWith("!")) {
+			if (rowVals.indexOf(filterVal.slice(1)) != -1) {
+				return false;
+			}
+		} else {
+			if (rowVals.indexOf(filterVal) == -1) {
+				return false;
+			}
+		}
+	}
+	return true;
+}
+
 function fmtCategory(cell: CellComponent) {
 	const val = cell.getValue() as string;
 	if (!val) {
@@ -165,6 +190,12 @@ function fmtTags(cell: CellComponent) {
 		el.className =
 			"badge border border-primary text-primary me-1 mb-1 text-decoration-none";
 		el.textContent = key;
+		el.style.cursor = "pointer";
+		el.onclick = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			toggleTagFilter(cell, key);
+		}
 		container.appendChild(el);
 	}
 
@@ -238,21 +269,64 @@ function tickLinkFilter(
 	return true; // null case
 }
 
-function makeTagMap(row: any, socialmedia: SocialMedia[]): Map<string, string> {
-	const tagMap = new Map<string, string>();
-
-	tagMap.set("website", row.website);
+function toggleColumns(tbl: Tabulator, columns: string[]): void {
+	for (const col of columns) {
+		const column = tbl.getColumn(col);
+		if (column) {
+			if (column.isVisible()) {
+				column.hide();
+			} else {
+				column.show();
+			}
+		}
+	}
+}
 
-	for (const sm of socialmedia) {
-		if (row[sm.id]) {
-			tagMap.set(sm.id, row[sm.id]);
+function toggleTagFilter(cell: CellComponent, tag: string): void {
+	const tbl = cell.getTable();
+	var headerFilter = "";
+	const headerFilters = tbl.getHeaderFilters();
+	var existingFilter: Filter | null = null;
+	for (const hf of headerFilters) {
+		if (hf.field == "tags") {
+			headerFilter = hf.value;
+			existingFilter = hf;
+			break;
 		}
 	}
 
-	return tagMap;
+	if (existingFilter == null) {
+		console.log(`adding to blank`);
+		tbl.setHeaderFilterValue(cell.getColumn(), tag);
+	} else {
+		tbl.setHeaderFilterValue(
+			cell.getColumn(),
+			(existingFilter.value = toggleTagArray(
+				headerFilter.split(/[ ,]+/),
+				tag
+			).join(" "))
+		);
+	}
+	tbl.refreshFilter();
 }
 
+function toggleTagArray(tags: string[], tag: string): string[] {
+	var idx = tags.indexOf(tag);
+	if (idx != -1) {
+		tags.splice(idx);
+		tags.push(`!${tag}`);
+		return tags;
+	}
+
+	idx = tags.indexOf(`!${tag}`);
+	if (idx != -1) {
+		tags.splice(idx);
+		return tags;
+	}
 
+	tags.push(tag);
+	return tags;
+}
 
 async function main() {
 	let data: SearchEntry[];
@@ -432,6 +506,11 @@ async function main() {
 				title: "Tags",
 				field: "tags",
 				formatter: fmtTags,
+				headerFilter: "input",
+				headerFilterFunc: filterTags,
+				headerPopup: `Separate multiple tags with space or comma.<br/>Pr	efix a tag with <code>!</code> to exclude it.`,
+				headerPopupIcon:
+					'<span class="badge rounded-pill text-bg-primary">?</span>',
 				headerSort: false,
 				responsive: 15,
 				width: 375,
@@ -446,6 +525,7 @@ async function main() {
 		footerElement: `<span class="w-100 mx-2 my-1">
                 <img src="/favicon.svg" class="pe-2" style="height:1.2em;" alt="UnicodeSearch logo"/>UnicodeSearch
                 <span id="rowcount" class="px-3">Rows: ${data.length.toLocaleString()}</span>
+				<input id="showhidecolumns" type="checkbox" class="mx-2" title="Toggle columns: Version, Block, Category, Script"/> Show/Hide Detail Columns
                 <a class="d-none d-lg-block float-end" href="https://github.com/FileFormatInfo/unicodesearch">Source</a>
             </span>`,
 	});
@@ -475,6 +555,11 @@ async function main() {
 		window.history.replaceState(null, "", "?" + qs);
 	});
 
+	table.on("tableBuilt", function () {
+		document.getElementById("showhidecolumns")!.onclick = () =>
+			toggleColumns(table, ["age", "block", "category", "script"]);
+	});
+
 	document.getElementById("loading")!.style.display = "none";
 	document.getElementById("achtable")!.style.display = "block";
 }