fix emojis (i broke them)

votekiss
easrng 2022-02-16 10:48:34 -05:00
parent 65212087e3
commit 74f5ef76fd
3 changed files with 45 additions and 36 deletions

View File

@ -6,17 +6,15 @@ import {
import { emojify, emojis } from "./emojis.mjs?v=1e57e6"; import { emojify, emojis } from "./emojis.mjs?v=1e57e6";
function setCaretPosition(elem, caretPos) { function setCaretPosition(elem, caretPos) {
if(elem.createTextRange) { if (elem.createTextRange) {
var range = elem.createTextRange(); var range = elem.createTextRange();
range.move('character', caretPos); range.move("character", caretPos);
range.select(); range.select();
} else { } else {
if(elem.selectionStart) { if (elem.selectionStart) {
elem.focus(); elem.focus();
elem.setSelectionRange(caretPos, caretPos); elem.setSelectionRange(caretPos, caretPos);
} } else elem.focus();
else
elem.focus();
} }
} }
@ -57,21 +55,27 @@ const setupChatboxEvents = (socket) => {
className: "emoji-option" + (i === 0 ? " selected" : ""), className: "emoji-option" + (i === 0 ? " selected" : ""),
onmousedown: (e) => e.preventDefault(), onmousedown: (e) => e.preventDefault(),
onclick: () => { onclick: () => {
messageInput.value=prefix+replaceWith+" "+suffix; messageInput.value = prefix + replaceWith + " " + suffix;
setCaretPosition(messageInput, (prefix+" "+replaceWith).length) setCaretPosition(
messageInput,
(prefix + " " + replaceWith).length
);
}, },
onmouseover: () => select(button), onmouseover: () => select(button),
onfocus: () => select(button), onfocus: () => select(button),
type: "button",
}); });
button.append( button.append(
(replaceWith[0]!==":"?Object.assign(document.createElement("span"), { replaceWith[0] !== ":"
? Object.assign(document.createElement("span"), {
textContent: replaceWith, textContent: replaceWith,
className: "emoji", className: "emoji",
}):Object.assign(new Image(), { })
: Object.assign(new Image(), {
loading: "lazy", loading: "lazy",
src: `/emojis/${name}.png`, src: `/emojis/${name}.png`,
className: "emoji", className: "emoji",
})), }),
Object.assign(document.createElement("span"), { textContent: name }) Object.assign(document.createElement("span"), { textContent: name })
); );
return button; return button;

View File

@ -5,8 +5,12 @@ export async function emojify(text) {
text.replace(/:([^\s:]+):/g, (match, name, index) => { text.replace(/:([^\s:]+):/g, (match, name, index) => {
if (last <= index) if (last <= index)
nodes.push(document.createTextNode(text.slice(last, index))); nodes.push(document.createTextNode(text.slice(last, index)));
if (!emojiList.includes(name)) { let emoji = emojiList.find((e) => e[0] == name);
if (!emoji) {
nodes.push(document.createTextNode(match)); nodes.push(document.createTextNode(match));
} else {
if (emoji[1][0] !== ":") {
nodes.push(document.createTextNode(emoji[1]));
} else { } else {
nodes.push( nodes.push(
Object.assign(new Image(), { Object.assign(new Image(), {
@ -16,6 +20,7 @@ export async function emojify(text) {
}) })
); );
} }
}
last = index + match.length; last = index + match.length;
}); });
if (last < text.length) nodes.push(document.createTextNode(text.slice(last))); if (last < text.length) nodes.push(document.createTextNode(text.slice(last)));
@ -24,7 +29,6 @@ export async function emojify(text) {
export const emojis = Promise.all([ export const emojis = Promise.all([
fetch("/emojis") fetch("/emojis")
.then((e) => e.json()) .then((e) => e.json())
.then((e) => e.map((e) => [e.slice(0, -4), ":"+e.slice(0, -4)+":"])), .then((e) => e.map((e) => [e.slice(0, -4), ":" + e.slice(0, -4) + ":"])),
fetch('/emojis/unicode.json') fetch("/emojis/unicode.json").then((e) => e.json()),
.then((e) => e.json()) ]).then((e) => e.flat(1));
]).then(e=>e.flat(1));

View File

@ -13,7 +13,8 @@
--fg-transparent: rgba(var(--fg-rgb), 0.25); --fg-transparent: rgba(var(--fg-rgb), 0.25);
--bg-transparent: rgba(var(--bg-rgb), 0.25); --bg-transparent: rgba(var(--bg-rgb), 0.25);
--autocomplete-bg: linear-gradient( --autocomplete-bg: linear-gradient(
var(--fg-transparent), var(--fg-transparent) var(--fg-transparent),
var(--fg-transparent)
), ),
linear-gradient(var(--bg), var(--bg)); linear-gradient(var(--bg), var(--bg));
} }