Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

custom emoji picker

Browse source 
merges fbb7ed3c9c (diff-beb98739004ececc621a1ab4a177e04f96d8d358c215716df0dcf1e1cb0f453c) and makes it fully functional along with CSS fixes
This commit is contained in:
MathMan05 2024-08-13 13:53:52 -05:00
parent 96faadddd0
commit ece9ebceb5
8 changed files with 174 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

65
.dist/emoji.js
View file

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

2
.dist/guild.js
View file

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

20
.dist/message.js
View file

@ -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,7 +70,6 @@ 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) {
@ -78,14 +77,17 @@ class Message {
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);
}

72
webpage/emoji.ts
View file

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

4
webpage/guild.ts
View file

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

15
webpage/jsontypes.ts
View file

@ -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:{
name:string,
id?:string,
animated?:boolean
},//very likely needs expanding
emoji:emojijson,//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};

30
webpage/message.ts
View file

@ -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;
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:string;
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: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{

10
webpage/style.css
View file

@ -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;
@ -1721,3 +1722,10 @@ form div{
width:.225in;
margin:.05in;
}
.emojiSelect > .emoji-server {
width: 32px;
height: 32px;
}
.emojirow{
flex-grow:0;
}