cory/tildefriends
4
5
Fork 1
Code Issues 31 Pull Requests 1 Actions Releases 24 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",
"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 {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);
}