1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
function getChannelName() {
const path = window.location.pathname.split('/').filter(Boolean);
if (path.length == 1) return path[path.length - 1];
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);
const textNodes = [];
while (walker.nextNode()) textNodes.push(walker.currentNode);
textNodes.forEach(x => {
const parent = x.parentNode;
const frag = document.createDocumentFragment();
const words = x.textContent.split(/(\s+)/);
words.forEach(word => {
if (emotes[word]) {
const emote = emotes[word];
const img = document.createElement("img");
img.src = emote.miniatureurl;
img.alt = word;
img.classList.add("tiny-emote");
addEmotePopup(img, emote);
frag.appendChild(img);
} else {
frag.appendChild(document.createTextNode(word));
}
});
parent.replaceChild(frag, x);
});
}
|
