cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions 1 Releases 26 Wiki Activity

Reworking the emoji picker to use w3-modal, in a step toward doing the same for the currently broken @autocomplete.

Browse Source
This commit is contained in:
Cory McWilliams 2024-05-30 12:40:21 -04:00
parent 684e6fb9cb
commit 5d5567e94c
2 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&YhfwSB0+2jmPcHlxOXN73/81H5VEyQ1MaTJmWZbwqHU=.sha256" "previous": "&zRv7YNZBT/NoliiTS7Jn/Q+3przdFZljUl8yPBIpSSE=.sha256"
} }

39
apps/ssb/emojis.js
View File

@ -1,4 +1,6 @@
import * as tfrpc from '/static/tfrpc.js'; import * as tfrpc from '/static/tfrpc.js';
import {html, render} from './lit-all.min.js';
import {styles} from './tf-styles.js';
let g_emojis; let g_emojis;
@ -36,11 +38,6 @@ export async function picker(callback, anchor, author) {
div.style.background = '#fff'; div.style.background = '#fff';
div.style.border = '1px solid #000'; div.style.border = '1px solid #000';
div.style.display = 'block'; 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.overflow = 'scroll';
div.style.fontWeight = 'bold'; div.style.fontWeight = 'bold';
div.style.fontSize = 'xx-large'; div.style.fontSize = 'xx-large';
@ -58,14 +55,6 @@ export async function picker(callback, anchor, author) {
event.stopPropagation(); 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) { function key_down(event) {
if (event.key == 'Escape') { if (event.key == 'Escape') {
cleanup(); cleanup();
@ -153,13 +142,25 @@ export async function picker(callback, anchor, author) {
} }
refresh(); refresh();
input.oninput = refresh; input.oninput = refresh;
document.body.appendChild(div); let modal = html`
div.style.position = 'fixed'; <style>
div.style.top = '50%'; ${styles}
div.style.left = '50%'; </style>
div.style.transform = 'translate(-50%, -50%)'; <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(); input.focus();
console.log('adding click');
document.body.addEventListener('mousedown', cleanup); document.body.addEventListener('mousedown', cleanup);
window.addEventListener('keydown', key_down); window.addEventListener('keydown', key_down);
} }