tildefriends/apps/ssb/emojis.js

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);
	});
}