custom emoji picker

merges fbb7ed3c9c (diff-beb98739004ececc621a1ab4a177e04f96d8d358c215716df0dcf1e1cb0f453c) and makes it fully functional along with CSS fixes

.dist/emoji.js

@@ -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");

.dist/guild.js

@@ -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 = [];

.dist/message.js

@@ -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;
-            let remove = false;
+        for (const thing of this.reactions) {
-            for (const thing of this.reactions) {
+            if (thing.emoji.name === emoji) {
-                if (thing.emoji.name === emoji) {
+                remove = thing.me;
-                    remove = thing.me;
+                break;
-                    break;
-                }
             }
-            fetch(this.info.api + "/channels/" + this.channel.id + "/messages/" + this.id + "/reactions/" + encodeURIComponent(emoji) + "/@me", {
+        }
-                method: remove ? "DELETE" : "PUT",
+        let reactiontxt;
-                headers: this.headers,
+        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);
             }

webpage/emoji.ts

@@ -110,7 +110,7 @@ class Emoji{
             Emoji.decodeEmojiList(e);
         })
     }
-    static async emojiPicker(x:number,y:number):Promise<Emoji|string>{
+    static async emojiPicker(x:number,y:number, localuser:Localuser):Promise<Emoji|string>{
         let res:(r:Emoji|string)=>void;
         const promise:Promise<Emoji|string>=new Promise((r)=>{res=r;})
         const menu=document.createElement("div");
@@ -118,6 +118,65 @@ class Emoji{
         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!=""){
@@ -128,16 +187,7 @@ class Emoji{
             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");

webpage/guild.ts

@@ -7,7 +7,7 @@ import {Member} from "./member.js";
 import {Settings,RoleList} from "./settings.js";
 import {Permissions} from "./permissions.js";
 import { SnowFlake } from "./snowflake.js";
-import { channeljson, guildjson } from "./jsontypes.js";
+import { channeljson, guildjson, emojijson } from "./jsontypes.js";
 class Guild{
     owner:Localuser;
     headers:Localuser["headers"];
@@ -24,6 +24,7 @@ class Guild{
     parent_id:string;
     member:Member;
     html:HTMLElement;
+    emojis:emojijson[];
     get id(){
         return this.snowflake.id;
     }
@@ -84,6 +85,7 @@ class Guild{
         if(json===-1){
             return;
         }
+        this.emojis = json.emojis
         this.owner=owner;
         this.headers=this.owner.headers;
         this.channels=[];

webpage/jsontypes.ts

@@ -156,12 +156,17 @@ type memberjson= {
     pending: boolean,
     last_message_id?: boolean//What???
 }
+type emojijson={
+            name:string,
+            id?:string,
+            animated?:boolean
+        }
 
 type guildjson={
     application_command_counts: {[key:string]:number},
     channels: channeljson[],
     data_mode: string,
-    emojis: [],
+    emojis: emojijson[],
     guild_scheduled_events: [],
     id: string,
     large: boolean,
@@ -274,11 +279,7 @@ type messagejson={
     embeds: embedjson[],
     reactions: {
         count:number,
-        emoji:{
+        emoji:emojijson,//very likely needs expanding
-            name:string,
-            id?:string,
-            animated?:boolean
-        },//very likely needs expanding
         me:boolean,
     }[],
     nonce: string,
@@ -326,4 +327,4 @@ type embedjson={
         name:string,
     }
 }
-export {readyjson,dirrectjson,channeljson,guildjson,rolesjson,userjson,memberjson,mainuserjson,messagejson,filejson,embedjson};
+export {readyjson,dirrectjson,channeljson,guildjson,rolesjson,userjson,memberjson,mainuserjson,messagejson,filejson,embedjson,emojijson};

webpage/message.ts

@@ -54,7 +54,7 @@ class Message{
             navigator.clipboard.writeText(this.id);
         });
         Message.contextmenu.addsubmenu("Add reaction",function(this:Message,e){
-            Emoji.emojiPicker(e.x,e.y).then(_=>{
+            Emoji.emojiPicker(e.x,e.y,this.localuser).then(_=>{
                 console.log(_,":3")
                 this.reactionToggle(_);
             });
@@ -77,21 +77,24 @@ class Message{
     }
     reactionToggle(emoji:string|Emoji){
 
-        if(typeof emoji === "string"){
+        let remove = false
-            let remove=false;
+        for (const thing of this.reactions) {
-            for(const thing of this.reactions){
+            if (thing.emoji.name === emoji) {
-                if(thing.emoji.name===emoji){
+                remove = thing.me
-                    remove=thing.me;
+                break
-                    break;
-                }
             }
-            fetch(this.info.api+ "/channels/"+this.channel.id+"/messages/"+this.id+"/reactions/"+encodeURIComponent(emoji)+"/@me",{
+
-                method:remove?"DELETE":"PUT",
-                headers:this.headers,
-            })
-        }else{
-            emoji
         }
+        let reactiontxt:string;
+        if(emoji instanceof Emoji){
+            reactiontxt=emoji.id;
+        }else{
+            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:messagejson){
         for(const thing of Object.keys(messagejson)){
@@ -387,7 +390,8 @@ class Message{
                 reaction.classList.add("meReacted")
             }
             let emoji:HTMLElement;
-            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 as {name:string,id:string,animated:boolean},this.guild);
                 emoji=emo.getHTML(false);
             }else{

webpage/style.css

@@ -1594,6 +1594,7 @@ form div{
 	justify-content: space-evenly;
 	border:solid var(--black) .03in;
 	flex-shrink:0;
+	align-items: center;
 }
 .emojiTitle{
 	padding: .03in;
@@ -1607,7 +1608,7 @@ form div{
 	display:flex;
 	flex-wrap: wrap;
 	flex-direction: row;
-	align-content: stretch;
+	align-content: flex-start;
 	justify-content: space-evenly;
 	/* height: 100%; */
 	overflow-y: scroll;
@@ -1720,4 +1721,11 @@ form div{
 #settings{
 	width:.225in;
 	margin:.05in;
+}
+.emojiSelect > .emoji-server {
+	width: 32px;
+	height: 32px;
+}
+.emojirow{
+	flex-grow:0;
 }