diff options
| -rw-r--r-- | chat.js | 54 | ||||
| -rw-r--r-- | extension.js | 3 |
2 files changed, 55 insertions, 2 deletions
@@ -4,6 +4,58 @@ function getChannelName() { return null; } +function addEmotePopup(node, emote) { + let popup; + console.log("added"); + + node.addEventListener("mouseenter", () => { + const img = document.createElement("img"); + img.src = emote.fullurl; + img.alt = emote.code; + + const code = document.createElement("p"); + code.textContent = emote.code; + code.style.fontWeight = 'bold'; + + const type = document.createElement("p"); + type.textContent = `Channel ${emote.instance} emote`; + + const uploader = document.createElement("p"); + uploader.textContent = `By: ${emote.uploader}`; + + popup = document.createElement("div"); + popup.append(img, code, type, uploader); + + popup.style.position = 'absolute'; + popup.style.display = 'flex'; + popup.style.flexDirection = 'column'; + popup.style.justifyContent = 'center'; + popup.style.alignItems = 'center'; + popup.style.padding = '8px'; + popup.style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 20, 0.8))'; + popup.style.color = '#fff'; + popup.style.borderRadius = '4px'; + popup.style.border = 'solid 1px rgba(10, 10, 10, 0.8)'; + popup.style.fontSize = '12px'; + popup.style.pointerEvents = 'none'; + popup.style.zIndex = '10'; + + document.body.appendChild(popup); + + const rect = node.getBoundingClientRect(); + const popupRect = popup.getBoundingClientRect(); + popup.style.top = `${rect.bottom + window.scrollY + 2}px`; + popup.style.left = `${rect.left + window.scrollX - (popupRect.width / 2)}px`; + }); + + node.addEventListener("mouseleave", () => { + if (popup) { + popup.remove(); + popup = null; + } + }); +} + function replaceEmotes(node, emotes) { const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null); @@ -23,7 +75,7 @@ function replaceEmotes(node, emotes) { img.src = emote.miniatureurl; img.alt = word; img.classList.add("tiny-emote"); - img.addEventListener("mouseenter", () => console.log(word)); + addEmotePopup(img, emote); frag.appendChild(img); } else { frag.appendChild(document.createTextNode(word)); diff --git a/extension.js b/extension.js index 4771baa..ba741a9 100644 --- a/extension.js +++ b/extension.js @@ -28,7 +28,8 @@ const start = async () => { miniatureurl: `${url}/static/userdata/emotes/${emote.id}/1x.${emote.ext}`, fullurl: `${url}/static/userdata/emotes/${emote.id}/3x.${emote.ext}`, uploader: emote.uploaded_by ? emote.uploaded_by.username : "Anonymous*", - instance: instanceUrl + instance: instanceUrl, + code: emote.code }; } } |