Add "simple" filter highlighting (on yellow "span"s)

css/base.php

@@ -80,6 +80,9 @@ body > .toast-container {
 	filter: saturate(0);
 	opacity: 0.7;
 }
+span.sr {
+	background: yellow;
+}
 .gray { color: gray }
 .btn {
 	padding: 1em 3em;

js/base.php

@@ -127,6 +127,43 @@ function JSON_to_URLEncoded(element,key,list) {
 	return list.join('&');
 }
 
+function remove_accents(str) {
+	return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
+
+function normalize_for_search(str) {
+	if (str.trim() === '') return '';
+	str = str.trim().replaceAll(/\s\s+/g, ' ');
+	var words = str.split(' ');
+	var newwords = [];
+	for (var i = 0; i < words.length; i++) {
+		var word = words[i];
+		word = remove_accents(word);
+		word = word.toLowerCase();
+		word = word.replaceAll(/[^a-z0-9]+/g, '');
+		if (word.trim() === '')
+			continue;
+		word = word.replaceAll('4','a');
+		word = word.replaceAll('3','e');
+		word = word.replaceAll('1','i');
+		word = word.replaceAll('0','o');
+		word = word.replaceAll('5','s');
+		word = word.replaceAll('8','b');
+		var nword = '';
+		for (var j = 0; j < word.length; j++) {
+			if (j === 0) {
+				nword += word[0];
+				continue;
+			}
+			if (word[j] !== word[j-1]) {
+				nword += word[j];
+			}
+		}
+		newwords.push(nword);
+	}
+	return newwords.join(' ');
+}
+
 // source: https://www.geeksforgeeks.org/how-to-get-the-javascript-function-parameter-names-values-dynamically/
 function _get_func_params(func) {
 	// String representaation of the function code

views/instance.php

@@ -25,6 +25,25 @@ window.view.instance = {
 		}
 		return acct;
 	},
+	html_add_search_spans: function(html, search) {
+		search = search.trim();
+		if (search.startsWith('expr:')) {
+			console.log('EXPR');
+		} else {
+			search = search.toLowerCase();
+			const words = search.split(' ');
+			const hwords = html.split(/\b/);
+			for (var i = 0; i < words.length; i++) {
+				const w = words[i];
+				for (var j = 0; j < hwords.length; j++) {
+					const h = hwords[j];
+					if (normalize_for_search(h).startsWith(normalize_for_search(w)))
+						html = html.replaceAll(h, '<span class="sr">'+h+'</span>');
+				}
+			}
+		}
+		return html;
+	},
 	do: {
 		users: {
 			trust_user: function(acct) {
@@ -245,6 +264,8 @@ window.view.instance = {
 					if (js === undefined) return toast.error('Could not process the query result');
 					if (js.ok !== undefined) return toast.info(js.ok);
 					if (js.error !== undefined) return toast.error(js.error);
+					const filter = window.view.instance.do.filter_users.get_current_filter();
+					if (filter === undefined) return;
 					E.template('users-all', function(TPL) {
 						var html = '';
 						for (var i = 0; i < js['data'].length; i++) {
@@ -269,8 +290,10 @@ window.view.instance = {
 									var _fields = '<table class="fields"><tbody>';
 									for (var j = 0; j < it.fields.length; j++) {
 										var t = '<tr class="{verified}"><td>{name}</td><td>{value}</td>{verifiedColumn}</tr>';
-										t = t.replaceAll('{name}', html2text(it.fields[j].name));
+										t = t.replaceAll('{name}', window.view.instance.html_add_search_spans(
-										t = t.replaceAll('{value}', html2text(it.fields[j].value));
+											html2text(it.fields[j].name), atob(filter.profile)));
+										t = t.replaceAll('{value}', window.view.instance.html_add_search_spans(
+											html2text(it.fields[j].value), atob(filter.profile)));
 										t = t.replaceAll('{verified}', it.fields[j].verified_at !== undefined ? 'verified' : '');
 										t = t.replaceAll('{verifiedColumn}', it.fields[j].verified_at !== undefined ?
 											'<td title="verified"><i class="fa fa-check fa-fw"></i></td>' : '');
@@ -281,7 +304,8 @@ window.view.instance = {
 								} else tpl = tpl.replaceAll('{mastodon:fields}', '');
 							}
 							tpl = tpl.replaceAll('{note}', it.note.trim() === '' ?
-								'&lt;empty&gt;' : html2text(it.note));
+								'&lt;empty&gt;' : window.view.instance.html_add_search_spans(
+									html2text(it.note), atob(filter.profile)));
 							html += tpl;
 						}
 						return html;