Skip to content

Commit adbc99f

Browse files
MathMan05MathMan05
committed
role icon setting and image upload improvements
1 parent 54b1f43 commit adbc99f

File tree

7 files changed

+331
-117
lines changed

7 files changed

+331
-117
lines changed

‎src/webpage/emoji.ts

Lines changed: 82 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class Emoji {
1818
id?: string;
1919
emoji?: string;
2020
animated: boolean;
21-
owner: Guild | Localuser;
21+
owner?: Guild | Localuser;
2222
get guild() {
2323
if (this.owner instanceof Guild) {
2424
return this.owner;
@@ -32,10 +32,7 @@ class Emoji {
3232
return this.owner;
3333
}
3434
}
35-
get info() {
36-
return this.owner.info;
37-
}
38-
constructor(json: emojijson, owner: Guild | Localuser) {
35+
constructor(json: emojijson, owner?: Guild | Localuser) {
3936
this.name = json.name;
4037
this.id = json.id;
4138
this.animated = json.animated || false;
@@ -53,12 +50,18 @@ class Emoji {
5350
}
5451
getHTML(bigemoji: boolean = false) {
5552
if (this.id) {
53+
if (!this.owner) throw new Error("owner is missing for custom emoji!");
5654
const emojiElem = document.createElement("img");
5755
emojiElem.classList.add("md-emoji");
5856
emojiElem.classList.add(bigemoji ? "bigemoji" : "smallemoji");
5957
emojiElem.crossOrigin = "anonymous";
6058
emojiElem.src =
61-
this.info.cdn + "/emojis/" + this.id + "." + (this.animated ? "gif" : "png") + "?size=32";
59+
this.owner.info.cdn +
60+
"/emojis/" +
61+
this.id +
62+
"." +
63+
(this.animated ? "gif" : "png") +
64+
"?size=32";
6265
emojiElem.alt = this.name;
6366
emojiElem.loading = "lazy";
6467

@@ -147,7 +150,7 @@ class Emoji {
147150
this: typeof Emoji,
148151
x: number,
149152
y: number,
150-
localuser: Localuser,
153+
localuser?: Localuser,
151154
): Promise<Emoji> {
152155
let res: (r: Emoji) => void;
153156
this;
@@ -231,76 +234,77 @@ class Emoji {
231234
body.classList.add("emojiBody");
232235

233236
let isFirst = true;
237+
if (localuser) {
238+
[
239+
localuser.lookingguild,
240+
...localuser.guilds.filter((guild) => guild !== localuser.lookingguild),
241+
]
242+
.filter((_) => _ !== undefined)
243+
.filter((guild) => guild.id != "@me" && guild.emojis.length > 0)
244+
.forEach((guild) => {
245+
const select = document.createElement("div");
246+
select.classList.add("emojiSelect");
234247

235-
[
236-
localuser.lookingguild,
237-
...localuser.guilds.filter((guild) => guild !== localuser.lookingguild),
238-
]
239-
.filter((_) => _ !== undefined)
240-
.filter((guild) => guild.id != "@me" && guild.emojis.length > 0)
241-
.forEach((guild) => {
242-
const select = document.createElement("div");
243-
select.classList.add("emojiSelect");
248+
if (guild.properties.icon) {
249+
const img = document.createElement("img");
250+
img.classList.add("pfp", "servericon", "emoji-server");
251+
img.crossOrigin = "anonymous";
252+
img.src =
253+
localuser.info.cdn +
254+
"/icons/" +
255+
guild.properties.id +
256+
"/" +
257+
guild.properties.icon +
258+
".png?size=48";
259+
img.alt = "Server: " + guild.properties.name;
260+
select.appendChild(img);
261+
} else {
262+
const div = document.createElement("span");
263+
div.textContent = guild.properties.name
264+
.replace(/'s /g, " ")
265+
.replace(/\w+/g, (word) => word[0])
266+
.replace(/\s/g, "");
267+
select.append(div);
268+
}
244269

245-
if (guild.properties.icon) {
246-
const img = document.createElement("img");
247-
img.classList.add("pfp", "servericon", "emoji-server");
248-
img.crossOrigin = "anonymous";
249-
img.src =
250-
localuser.info.cdn +
251-
"/icons/" +
252-
guild.properties.id +
253-
"/" +
254-
guild.properties.icon +
255-
".png?size=48";
256-
img.alt = "Server: " + guild.properties.name;
257-
select.appendChild(img);
258-
} else {
259-
const div = document.createElement("span");
260-
div.textContent = guild.properties.name
261-
.replace(/'s /g, " ")
262-
.replace(/\w+/g, (word) => word[0])
263-
.replace(/\s/g, "");
264-
select.append(div);
265-
}
270+
selection.append(select);
266271

267-
selection.append(select);
272+
const clickEvent = () => {
273+
search.value = "";
274+
updateSearch.call(this);
275+
title.textContent = guild.properties.name;
276+
body.innerHTML = "";
277+
for (const emojit of guild.emojis) {
278+
const emojiElem = document.createElement("div");
279+
emojiElem.classList.add("emojiSelect");
268280

269-
const clickEvent = () => {
270-
search.value = "";
271-
updateSearch.call(this);
272-
title.textContent = guild.properties.name;
273-
body.innerHTML = "";
274-
for (const emojit of guild.emojis) {
275-
const emojiElem = document.createElement("div");
276-
emojiElem.classList.add("emojiSelect");
281+
const emojiClass = new Emoji(
282+
{
283+
id: emojit.id as string,
284+
name: emojit.name,
285+
animated: emojit.animated as boolean,
286+
},
287+
localuser,
288+
);
289+
emojiElem.append(emojiClass.getHTML());
290+
body.append(emojiElem);
277291

278-
const emojiClass = new Emoji(
279-
{
280-
id: emojit.id as string,
281-
name: emojit.name,
282-
animated: emojit.animated as boolean,
283-
},
284-
localuser,
285-
);
286-
emojiElem.append(emojiClass.getHTML());
287-
body.append(emojiElem);
292+
emojiElem.addEventListener("click", () => {
293+
res(emojiClass);
294+
if (Contextmenu.currentmenu !== "") {
295+
Contextmenu.currentmenu.remove();
296+
}
297+
});
298+
}
299+
};
288300

289-
emojiElem.addEventListener("click", () => {
290-
res(emojiClass);
291-
if (Contextmenu.currentmenu !== "") {
292-
Contextmenu.currentmenu.remove();
293-
}
294-
});
301+
select.addEventListener("click", clickEvent);
302+
if (isFirst) {
303+
clickEvent();
304+
isFirst = false;
295305
}
296-
};
297-
298-
select.addEventListener("click", clickEvent);
299-
if (isFirst) {
300-
clickEvent();
301-
isFirst = false;
302-
}
303-
});
306+
});
307+
}
304308

305309
if (Contextmenu.currentmenu !== "") {
306310
Contextmenu.currentmenu.remove();
@@ -344,7 +348,7 @@ class Emoji {
344348
search.focus();
345349
return promise;
346350
}
347-
static searchEmoji(search: string, localuser: Localuser, results = 50): [Emoji, number][] {
351+
static searchEmoji(search: string, localuser?: Localuser, results = 50): [Emoji, number][] {
348352
//NOTE this function is used for searching in the emoji picker for reactions, and the emoji auto-fill
349353
const ranked: [emojijson, number][] = [];
350354
function similar(json: emojijson) {
@@ -364,11 +368,13 @@ class Emoji {
364368
}
365369
}
366370
const weakGuild = new WeakMap<emojijson, Guild>();
367-
for (const guild of localuser.guilds) {
368-
if (guild.id !== "@me" && guild.emojis.length !== 0) {
369-
for (const emoji of guild.emojis) {
370-
if (similar(emoji)) {
371-
weakGuild.set(emoji, guild);
371+
if (localuser) {
372+
for (const guild of localuser.guilds) {
373+
if (guild.id !== "@me" && guild.emojis.length !== 0) {
374+
for (const emoji of guild.emojis) {
375+
if (similar(emoji)) {
376+
weakGuild.set(emoji, guild);
377+
}
372378
}
373379
}
374380
}

‎src/webpage/guild.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,8 +287,20 @@ class Guild extends SnowFlake {
287287
initText: this.properties.name,
288288
});
289289

290-
form.addFileInput(I18n.getTranslation("guild.banner:"), "banner", {clear: true});
291-
form.addFileInput(I18n.getTranslation("guild.icon:"), "icon", {clear: true});
290+
form.addImageInput(I18n.getTranslation("guild.banner:"), "banner", {
291+
clear: true,
292+
width: 96 * 3,
293+
initImg: this.banner
294+
? this.info.cdn + "/icons/" + this.id + "/" + this.banner + ".png?size=256"
295+
: "",
296+
objectFit: "cover",
297+
});
298+
form.addImageInput(I18n.getTranslation("guild.icon:"), "icon", {
299+
clear: true,
300+
initImg: this.properties.icon
301+
? this.info.cdn + "/icons/" + this.id + "/" + this.properties.icon + ".png"
302+
: "",
303+
});
292304

293305
form.addHR();
294306

‎src/webpage/localuser.ts

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1295,7 +1295,9 @@ class Localuser {
12951295
}
12961296
});
12971297
});
1298-
form.addFileInput(I18n.getTranslation("guild.icon:"), "icon", {files: "one"});
1298+
form.addImageInput(I18n.getTranslation("guild.icon:"), "icon", {
1299+
clear: true,
1300+
});
12991301
form.addTextInput(I18n.getTranslation("guild.name:"), "name", {required: true});
13001302
const loading = new Dialog("");
13011303
loading.float.options.addTitle(I18n.guild.creating());
@@ -1332,7 +1334,7 @@ class Localuser {
13321334
const template = form.addTextInput(I18n.guild.template(), "template", {
13331335
initText: templateID || "",
13341336
});
1335-
form.addFileInput(I18n.getTranslation("guild.icon:"), "icon", {files: "one"});
1337+
form.addImageInput(I18n.getTranslation("guild.icon:"), "icon", {files: "one", clear: true});
13361338
form.addTextInput(I18n.getTranslation("guild.name:"), "name", {required: true});
13371339

13381340
const loading = new Dialog("");
@@ -1533,14 +1535,14 @@ class Localuser {
15331535
const settingsRight = userOptions.addOptions("");
15341536
settingsRight.addHTMLArea(hypotheticalProfile);
15351537

1536-
const finput = settingsLeft.addFileInput(
1538+
const finput = settingsLeft.addImageInput(
15371539
I18n.getTranslation("uploadPfp"),
15381540
(_) => {
15391541
if (file) {
15401542
this.updatepfp(file);
15411543
}
15421544
},
1543-
{clear: true},
1545+
{clear: true, initImg: this.user.getpfpsrc()},
15441546
);
15451547
finput.watchForChange((_) => {
15461548
if (!_) {
@@ -1559,14 +1561,19 @@ class Localuser {
15591561
}
15601562
});
15611563
let bfile: undefined | File | null;
1562-
const binput = settingsLeft.addFileInput(
1564+
const binput = settingsLeft.addImageInput(
15631565
I18n.getTranslation("uploadBanner"),
15641566
(_) => {
15651567
if (bfile !== undefined) {
15661568
this.updatebanner(bfile);
15671569
}
15681570
},
1569-
{clear: true},
1571+
{
1572+
clear: true,
1573+
width: 96 * 3,
1574+
initImg: this.user.banner ? this.user.getBannerUrl() : "",
1575+
objectFit: "cover",
1576+
},
15701577
);
15711578
binput.watchForChange((_) => {
15721579
if (!_) {
@@ -2391,6 +2398,7 @@ class Localuser {
23912398
headers: this.headers,
23922399
});
23932400
const json = await res.json();
2401+
console.error(json);
23942402
const form = container.addSubForm(json.name, () => {}, {
23952403
fetchURL: this.info.api + "/applications/" + appId,
23962404
method: "PATCH",
@@ -2401,7 +2409,10 @@ class Localuser {
24012409
form.addMDInput(I18n.getTranslation("localuser.description"), "description", {
24022410
initText: json.description,
24032411
});
2404-
form.addFileInput("Icon:", "icon");
2412+
form.addImageInput("Icon:", "icon", {
2413+
clear: true,
2414+
initImg: json.icon ? this.info.cdn + "/app-icons/" + appId + "/" + json.icon : "",
2415+
});
24052416
form.addTextInput(I18n.getTranslation("localuser.privacyPolcyURL"), "privacy_policy_url", {
24062417
initText: json.privacy_policy_url,
24072418
});
@@ -2441,7 +2452,7 @@ class Localuser {
24412452
if (!json.bot) {
24422453
return alert(I18n.getTranslation("localuser.confuseNoBot"));
24432454
}
2444-
const bot: mainuserjson = json.bot;
2455+
const bot: User = new User(json.bot, this);
24452456
const form = container.addSubForm(
24462457
I18n.getTranslation("localuser.editingBot", bot.username),
24472458
(out) => {
@@ -2457,7 +2468,10 @@ class Localuser {
24572468
form.addTextInput(I18n.getTranslation("localuser.botUsername"), "username", {
24582469
initText: bot.username,
24592470
});
2460-
form.addFileInput(I18n.getTranslation("localuser.botAvatar"), "avatar");
2471+
form.addImageInput(I18n.getTranslation("localuser.botAvatar"), "avatar", {
2472+
initImg: bot.getpfpsrc(),
2473+
clear: true,
2474+
});
24612475
form.addButtonInput("", I18n.getTranslation("localuser.resetToken"), async () => {
24622476
if (!confirm(I18n.getTranslation("localuser.confirmReset"))) {
24632477
return;

0 commit comments

Comments
 (0)