Move apps/cory/ => apps/. Going to change import and export to support this.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4163 ed5197a5-7fde-0310-b194-c3ffbd925b24
2023-02-02 00:18:22 +00:00
parent 6104af0d70
commit ec52e62908
53 changed files with 0 additions and 0 deletions
--- a/apps/ssb/emojis.js
+++ b/apps/ssb/emojis.js
@ -0,0 +1,109 @@
+let g_emojis;
+
+function get_emojis() {
+	if (g_emojis) {
+		return Promise.resolve(g_emojis);
+	}
+	return fetch('emojis.json').then(function(result) {
+		g_emojis = result.json();
+		return g_emojis;
+	});
+}
+
+export function picker(callback, anchor) {
+	get_emojis().then(function(json) {
+		let div = document.createElement('div');
+		div.id = 'emoji_picker';
+		div.style.color = '#000';
+		div.style.background = '#fff';
+		div.style.border = '1px solid #000';
+		div.style.display = 'block';
+		div.style.position = 'absolute';
+		div.style.minWidth = 'min(16em, 90vw)';
+		div.style.width = 'min(16em, 90vw)';
+		div.style.maxWidth = 'min(16em, 90vw)';
+		div.style.maxHeight = '16em';
+		div.style.overflow = 'scroll';
+		div.style.fontWeight = 'bold';
+		div.style.fontSize = 'xx-large';
+		let input = document.createElement('input');
+		input.type = 'text';
+		input.style.display = 'block';
+		input.style.boxSizing = 'border-box';
+		input.style.width = '100%';
+		input.style.margin = '0';
+		input.style.position = 'relative';
+		div.appendChild(input);
+		let list = document.createElement('div');
+		div.appendChild(list);
+		div.addEventListener('mousedown', function(event) {
+			event.stopPropagation();
+		});
+
+		function cleanup() {
+			console.log('emoji cleanup');
+			div.parentElement.removeChild(div);
+			window.removeEventListener('keydown', key_down);
+			console.log('removing click');
+			document.body.removeEventListener('mousedown', cleanup);
+		}
+
+		function key_down(event) {
+			if (event.key == 'Escape') {
+				cleanup();
+			}
+		}
+
+		function refresh() {
+			while (list.firstChild) {
+				list.removeChild(list.firstChild);
+			}
+			let search = input.value;
+			let any_at_all = false;
+			Object.entries(json).forEach(function(row) {
+				let header = document.createElement('div');
+				header.appendChild(document.createTextNode(row[0]));
+				list.appendChild(header);
+				let any = false;
+				for (let entry of row[1]) {
+					if (search &&
+						search.length &&
+						entry.name.indexOf(search) == -1) {
+						continue;
+					}
+					let emoji = document.createElement('span');
+					const k_size = '1.25em';
+					emoji.style.display = 'inline-block';
+					emoji.style.overflow = 'hidden';
+					emoji.style.cursor = 'pointer';
+					emoji.onclick = function() {
+						callback(entry);
+						cleanup();
+					}
+					emoji.title = entry.name;
+					emoji.appendChild(document.createTextNode(entry.emoji));
+					list.appendChild(emoji);
+					any = true;
+					any_at_all = true;
+				}
+				if (!any) {
+					list.removeChild(header);
+				}
+			});
+			if (!any_at_all) {
+				list.appendChild(document.createTextNode('No matches found.'));
+			}
+		}
+		refresh();
+		input.oninput = refresh;
+		document.body.appendChild(div);
+		div.style.position = 'fixed';
+		div.style.top = '50%';
+		div.style.left = '50%';
+		div.style.transform = 'translate(-50%, -50%)';
+		input.focus();
+		console.log('adding click');
+		document.body.addEventListener('mousedown', cleanup);
+		window.addEventListener('keydown', key_down);
+	});
+}