custom emoji picker
merges fbb7ed3c9c (diff-beb98739004ececc621a1ab4a177e04f96d8d358c215716df0dcf1e1cb0f453c) and makes it fully functional along with CSS fixes
This commit is contained in:
MathMan05
parent
96faadddd0
commit
ece9ebceb5
8 changed files with 174 additions and 60 deletions
|
|
@ -100,13 +100,66 @@ class Emoji {
|
|||
Emoji.decodeEmojiList(e);
|
||||
});
|
||||
}
|
||||
static async emojiPicker(x, y) {
|
||||
static async emojiPicker(x, y, localuser) {
|
||||
let res;
|
||||
const promise = new Promise((r) => { res = r; });
|
||||
const menu = document.createElement("div");
|
||||
menu.classList.add("flextttb", "emojiPicker");
|
||||
menu.style.top = y + "px";
|
||||
menu.style.left = x + "px";
|
||||
const title = document.createElement("h2");
|
||||
title.textContent = Emoji.emojis[0].name;
|
||||
title.classList.add("emojiTitle");
|
||||
menu.append(title);
|
||||
console.log("menu :3");
|
||||
const selection = document.createElement("div");
|
||||
selection.classList.add("flexltr", "dontshrink", "emojirow");
|
||||
console.log("menu :3");
|
||||
const body = document.createElement("div");
|
||||
body.classList.add("emojiBody");
|
||||
let isFirst = true;
|
||||
localuser.guilds.filter(guild => guild.id != "@me" && guild.emojis.length > 0).forEach(guild => {
|
||||
const select = document.createElement("div");
|
||||
select.classList.add("emojiSelect");
|
||||
if (guild.properties.icon) {
|
||||
const img = document.createElement("img");
|
||||
img.classList.add("pfp", "servericon", "emoji-server");
|
||||
img.crossOrigin = "anonymous";
|
||||
img.src = localuser.info.cdn + "/icons/" + guild.properties.id + "/" + guild.properties.icon + ".png?size=48";
|
||||
img.alt = "Server: " + guild.properties.name;
|
||||
select.appendChild(img);
|
||||
}
|
||||
else {
|
||||
const div = document.createElement("span");
|
||||
div.textContent = guild.properties.name.replace(/'s /g, " ").replace(/\w+/g, word => word[0]).replace(/\s/g, "");
|
||||
select.append(div);
|
||||
}
|
||||
selection.append(select);
|
||||
const clickEvent = () => {
|
||||
title.textContent = guild.properties.name;
|
||||
body.innerHTML = "";
|
||||
for (const emojit of guild.emojis) {
|
||||
const emojiElem = document.createElement("div");
|
||||
emojiElem.classList.add("emojiSelect");
|
||||
const emojiClass = new Emoji({
|
||||
id: emojit.id,
|
||||
name: emojit.name,
|
||||
animated: emojit.animated
|
||||
}, localuser);
|
||||
emojiElem.append(emojiClass.getHTML());
|
||||
body.append(emojiElem);
|
||||
emojiElem.addEventListener("click", () => {
|
||||
res(emojiClass);
|
||||
Contextmenu.currentmenu.remove();
|
||||
});
|
||||
}
|
||||
};
|
||||
select.addEventListener("click", clickEvent);
|
||||
if (isFirst) {
|
||||
clickEvent();
|
||||
isFirst = false;
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
if (Contextmenu.currentmenu != "") {
|
||||
Contextmenu.currentmenu.remove();
|
||||
|
|
@ -115,16 +168,6 @@ class Emoji {
|
|||
Contextmenu.currentmenu = menu;
|
||||
Contextmenu.keepOnScreen(menu);
|
||||
}, 10);
|
||||
const title = document.createElement("h2");
|
||||
title.textContent = Emoji.emojis[0].name;
|
||||
title.classList.add("emojiTitle");
|
||||
menu.append(title);
|
||||
console.log("menu :3");
|
||||
const selection = document.createElement("div");
|
||||
selection.classList.add("flexltr", "dontshrink");
|
||||
console.log("menu :3");
|
||||
const body = document.createElement("div");
|
||||
body.classList.add("emojiBody");
|
||||
let i = 0;
|
||||
for (const thing of Emoji.emojis) {
|
||||
const select = document.createElement("div");
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ class Guild {
|
|||
parent_id;
|
||||
member;
|
||||
html;
|
||||
emojis;
|
||||
get id() {
|
||||
return this.snowflake.id;
|
||||
}
|
||||
|
|
@ -75,6 +76,7 @@ class Guild {
|
|||
if (json === -1) {
|
||||
return;
|
||||
}
|
||||
this.emojis = json.emojis;
|
||||
this.owner = owner;
|
||||
this.headers = this.owner.headers;
|
||||
this.channels = [];
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ class Message {
|
|||
navigator.clipboard.writeText(this.id);
|
||||
});
|
||||
Message.contextmenu.addsubmenu("Add reaction", function (e) {
|
||||
Emoji.emojiPicker(e.x, e.y).then(_ => {
|
||||
Emoji.emojiPicker(e.x, e.y, this.localuser).then(_ => {
|
||||
console.log(_, ":3");
|
||||
this.reactionToggle(_);
|
||||
});
|
||||
|
|
@ -70,22 +70,24 @@ class Message {
|
|||
this.giveData(messagejson);
|
||||
}
|
||||
reactionToggle(emoji) {
|
||||
if (typeof emoji === "string") {
|
||||
let remove = false;
|
||||
for (const thing of this.reactions) {
|
||||
if (thing.emoji.name === emoji) {
|
||||
remove = thing.me;
|
||||
break;
|
||||
}
|
||||
let remove = false;
|
||||
for (const thing of this.reactions) {
|
||||
if (thing.emoji.name === emoji) {
|
||||
remove = thing.me;
|
||||
break;
|
||||
}
|
||||
fetch(this.info.api + "/channels/" + this.channel.id + "/messages/" + this.id + "/reactions/" + encodeURIComponent(emoji) + "/@me", {
|
||||
method: remove ? "DELETE" : "PUT",
|
||||
headers: this.headers,
|
||||
});
|
||||
}
|
||||
let reactiontxt;
|
||||
if (emoji instanceof Emoji) {
|
||||
reactiontxt = emoji.id;
|
||||
}
|
||||
else {
|
||||
emoji;
|
||||
reactiontxt = encodeURIComponent(emoji);
|
||||
}
|
||||
fetch(`${this.info.api}/channels/${this.channel.id}/messages/${this.id}/reactions/${reactiontxt}/@me`, {
|
||||
method: remove ? "DELETE" : "PUT",
|
||||
headers: this.headers
|
||||
});
|
||||
}
|
||||
giveData(messagejson) {
|
||||
for (const thing of Object.keys(messagejson)) {
|
||||
|
|
@ -383,7 +385,9 @@ class Message {
|
|||
reaction.classList.add("meReacted");
|
||||
}
|
||||
let emoji;
|
||||
if (thing.emoji.id) {
|
||||
if (thing.emoji.id || /\d{17,21}/.test(thing.emoji.name)) {
|
||||
if (/\d{17,21}/.test(thing.emoji.name))
|
||||
thing.emoji.id = thing.emoji.name; //Should stop being a thing once the server fixes this bug
|
||||
const emo = new Emoji(thing.emoji, this.guild);
|
||||
emoji = emo.getHTML(false);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue