From 5d5567e94caf5bbbce8e53bafc4e205aa24653ba Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Thu, 30 May 2024 12:40:21 -0400
Subject: [PATCH] Reworking the emoji picker to use w3-modal, in a step toward
 doing the same for the currently broken @autocomplete.

---
 apps/ssb.json      |  2 +-
 apps/ssb/emojis.js | 39 ++++++++++++++++++++-------------------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 13629b76..07c7ec4e 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&YhfwSB0+2jmPcHlxOXN73/81H5VEyQ1MaTJmWZbwqHU=.sha256"
+	"previous": "&zRv7YNZBT/NoliiTS7Jn/Q+3przdFZljUl8yPBIpSSE=.sha256"
 }
diff --git a/apps/ssb/emojis.js b/apps/ssb/emojis.js
index 451f6020..4fb8c431 100644
--- a/apps/ssb/emojis.js
+++ b/apps/ssb/emojis.js
@@ -1,4 +1,6 @@
 import * as tfrpc from '/static/tfrpc.js';
+import {html, render} from './lit-all.min.js';
+import {styles} from './tf-styles.js';
 
 let g_emojis;
 
@@ -36,11 +38,6 @@ export async function picker(callback, anchor, author) {
 	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';
@@ -58,14 +55,6 @@ export async function picker(callback, anchor, author) {
 		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();
@@ -153,13 +142,25 @@ export async function picker(callback, anchor, author) {
 	}
 	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%)';
+	let modal = html`
+		<style>
+			${styles}
+		</style>
+		<div class="w3-modal" style="display: block">
+			<div class="w3-modal-content w3-card-4">
+				${div}
+			</div>
+		</div>
+	`;
+	let parent = document.createElement('div');
+	document.body.appendChild(parent);
+	function cleanup() {
+		parent.parentElement.removeChild(parent);
+		window.removeEventListener('keydown', key_down);
+		document.body.removeEventListener('mousedown', cleanup);
+	}
+	render(modal, parent);
 	input.focus();
-	console.log('adding click');
 	document.body.addEventListener('mousedown', cleanup);
 	window.addEventListener('keydown', key_down);
 }