From 74f5ef76fde198a1ccf6b69db4f51e840fc72ec9 Mon Sep 17 00:00:00 2001 From: easrng Date: Wed, 16 Feb 2022 10:48:34 -0500 Subject: [PATCH] fix emojis (i broke them) --- frontend/lib/chat.mjs | 50 ++++++++++++++++++++++------------------- frontend/lib/emojis.mjs | 28 +++++++++++++---------- frontend/styles.css | 3 ++- 3 files changed, 45 insertions(+), 36 deletions(-) diff --git a/frontend/lib/chat.mjs b/frontend/lib/chat.mjs index a956b66..d7e225d 100644 --- a/frontend/lib/chat.mjs +++ b/frontend/lib/chat.mjs @@ -6,18 +6,16 @@ import { import { emojify, emojis } from "./emojis.mjs?v=1e57e6"; function setCaretPosition(elem, caretPos) { - if(elem.createTextRange) { - var range = elem.createTextRange(); - range.move('character', caretPos); - range.select(); - } else { - if(elem.selectionStart) { - elem.focus(); - elem.setSelectionRange(caretPos, caretPos); - } - else - elem.focus(); - } + if (elem.createTextRange) { + var range = elem.createTextRange(); + range.move("character", caretPos); + range.select(); + } else { + if (elem.selectionStart) { + elem.focus(); + elem.setSelectionRange(caretPos, caretPos); + } else elem.focus(); + } } const setupChatboxEvents = (socket) => { @@ -57,21 +55,27 @@ const setupChatboxEvents = (socket) => { className: "emoji-option" + (i === 0 ? " selected" : ""), onmousedown: (e) => e.preventDefault(), onclick: () => { - messageInput.value=prefix+replaceWith+" "+suffix; - setCaretPosition(messageInput, (prefix+" "+replaceWith).length) - }, + messageInput.value = prefix + replaceWith + " " + suffix; + setCaretPosition( + messageInput, + (prefix + " " + replaceWith).length + ); + }, onmouseover: () => select(button), onfocus: () => select(button), + type: "button", }); button.append( - (replaceWith[0]!==":"?Object.assign(document.createElement("span"), { - textContent: replaceWith, - className: "emoji", - }):Object.assign(new Image(), { - loading: "lazy", - src: `/emojis/${name}.png`, - className: "emoji", - })), + replaceWith[0] !== ":" + ? Object.assign(document.createElement("span"), { + textContent: replaceWith, + className: "emoji", + }) + : Object.assign(new Image(), { + loading: "lazy", + src: `/emojis/${name}.png`, + className: "emoji", + }), Object.assign(document.createElement("span"), { textContent: name }) ); return button; diff --git a/frontend/lib/emojis.mjs b/frontend/lib/emojis.mjs index b5429ec..152b7ff 100644 --- a/frontend/lib/emojis.mjs +++ b/frontend/lib/emojis.mjs @@ -5,16 +5,21 @@ export async function emojify(text) { text.replace(/:([^\s:]+):/g, (match, name, index) => { if (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)); } else { - nodes.push( - Object.assign(new Image(), { - src: `/emojis/${name}.png`, - className: "emoji", - alt: name, - }) - ); + if (emoji[1][0] !== ":") { + nodes.push(document.createTextNode(emoji[1])); + } else { + nodes.push( + Object.assign(new Image(), { + src: `/emojis/${name}.png`, + className: "emoji", + alt: name, + }) + ); + } } last = index + match.length; }); @@ -24,7 +29,6 @@ export async function emojify(text) { export const emojis = Promise.all([ fetch("/emojis") .then((e) => e.json()) - .then((e) => e.map((e) => [e.slice(0, -4), ":"+e.slice(0, -4)+":"])), - fetch('/emojis/unicode.json') - .then((e) => e.json()) -]).then(e=>e.flat(1)); \ No newline at end of file + .then((e) => e.map((e) => [e.slice(0, -4), ":" + e.slice(0, -4) + ":"])), + fetch("/emojis/unicode.json").then((e) => e.json()), +]).then((e) => e.flat(1)); diff --git a/frontend/styles.css b/frontend/styles.css index afc2d81..a736993 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -13,7 +13,8 @@ --fg-transparent: rgba(var(--fg-rgb), 0.25); --bg-transparent: rgba(var(--bg-rgb), 0.25); --autocomplete-bg: linear-gradient( - var(--fg-transparent), var(--fg-transparent) + var(--fg-transparent), + var(--fg-transparent) ), linear-gradient(var(--bg), var(--bg)); }