Skip to content

Commit 337a625

Browse files
committed
Refactor discordinvites
1 parent a5ebbf4 commit 337a625

File tree

1 file changed

+85
-81
lines changed

1 file changed

+85
-81
lines changed

static/js/load-discordinvites.js

Lines changed: 85 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
const localStorage = window.sessionStorage;
2-
const hasClickedDiscordLoad = localStorage.getItem("hasClickedDiscordLoad");
1+
const sessionStorage = window.sessionStorage;
2+
const hasClickedDiscordLoad = sessionStorage.getItem("hasClickedDiscordLoad");
33

4-
if (hasClickedDiscordLoad) {
4+
// Check if session storage has discord invite data
5+
if (hasClickedDiscordLoad == "true") {
56
document.getElementById("load-invite-button").parentElement.style = "display: none";
67
loadAllInvites();
78
}
@@ -11,58 +12,47 @@ document.getElementById("load-invite-button").addEventListener("click", function
1112
document.getElementById("load-invite-button").parentElement.style = "display: none";
1213
})
1314

15+
/**
16+
* Loads images and data from all invite elements on the page
17+
*/
1418
function loadAllInvites() {
1519
const invites = document.getElementsByClassName("invite");
16-
for (const element of invites) {
17-
const url = element.getAttribute("invite-url");
18-
loadInvite(url, element);
20+
try {
21+
for (const element of invites) {
22+
const url = element.getAttribute("invite-url");
23+
loadInvite(url, element);
24+
}
25+
} catch (e) {
26+
// Set session storage to false on error
27+
sessionStorage.setItem("hasClickedDiscordLoad", "false");
28+
return;
1929
}
20-
localStorage.setItem("hasClickedDiscordLoad", "true");
30+
sessionStorage.setItem("hasClickedDiscordLoad", "true");
2131
}
2232

2333
/**
24-
*
25-
* @param {string} inviteUrl
26-
* @param {HTMLElement} inviteElement
34+
* Load a single invite
35+
* @param {string} inviteCode The invite code of the url
36+
* @param {HTMLElement} inviteElement The element to apply the data to
2737
*/
28-
function loadInvite(inviteUrl, inviteElement) {
29-
30-
if (hasClickedDiscordLoad) {
31-
const id = localStorage.getItem(`${inviteUrl}_id`);
32-
const name = localStorage.getItem(`${inviteUrl}_name`);
33-
const gicon = localStorage.getItem(`${inviteUrl}_gicon`)
34-
const gsplash = localStorage.getItem(`${inviteUrl}_gsplash`)
35-
const onlinecount = localStorage.getItem(`${inviteUrl}_onlinecount`)
36-
const membercount = localStorage.getItem(`${inviteUrl}_membercount`)
37-
38-
//Create Element
39-
const icon = inviteElement.getElementsByClassName("server-icon")[0];
40-
const splash = inviteElement.getElementsByClassName("splash")[0];
41-
const discordTitle = inviteElement.getElementsByClassName("discord-title")[0];
42-
const discordOnline = inviteElement.getElementsByClassName("discord-online")[0];
43-
const discordMembers = inviteElement.getElementsByClassName("discord-member")[0];
44-
45-
discordTitle.innerHTML = name;
46-
discordOnline.innerHTML = onlinecount + " Online";
47-
discordMembers.innerHTML = membercount + " Members"
48-
49-
50-
if (gsplash != "null") {
51-
splash.src = "https://cdn.discordapp.com/splashes/" + id + "/" + gsplash + ".png?size=480"
52-
splash.style = "display: block";
53-
}
38+
function loadInvite(inviteCode, inviteElement) {
5439

55-
let fileExtension = ".png";
56-
if (gicon.includes("a_")) {
57-
fileExtension = ".gif";
58-
}
40+
if (hasClickedDiscordLoad == "true") {
41+
const data = {
42+
id: sessionStorage.getItem(`${inviteCode}_id`),
43+
name: sessionStorage.getItem(`${inviteCode}_name`),
44+
gicon: sessionStorage.getItem(`${inviteCode}_gicon`),
45+
gsplash: sessionStorage.getItem(`${inviteCode}_gsplash`),
46+
onlinecount: sessionStorage.getItem(`${inviteCode}_onlinecount`),
47+
membercount: sessionStorage.getItem(`${inviteCode}_membercount`)
48+
};
5949

60-
icon.src = "https://cdn.discordapp.com/icons/" + id + "/" + gicon + fileExtension + "?size=128";
50+
applyInviteData(inviteCode, inviteElement, data);
6151

62-
return
52+
return;
6353
}
6454

65-
const url = 'https://discord.com/api/v10/invites/' + inviteUrl + '?with_counts=true';
55+
const url = `https://discord.com/api/v10/invites/${inviteCode}?with_counts=true`;
6656
fetch(url)
6757
.then(response => response.json())
6858
.then(json => {
@@ -72,45 +62,59 @@ function loadInvite(inviteUrl, inviteElement) {
7262
return;
7363
}
7464

75-
//Create Element
76-
const icon = inviteElement.getElementsByClassName("server-icon")[0];
77-
const splash = inviteElement.getElementsByClassName("splash")[0];
78-
79-
//Getting guild things
80-
const id = json.guild.id;
81-
const gicon = json.guild.icon;
82-
const gsplash = json.guild.splash;
83-
const name = json.guild.name;
84-
const onlinecount = json.approximate_presence_count.toLocaleString();
85-
const membercount = json.approximate_member_count.toLocaleString();
86-
87-
let fileExtension = ".png";
88-
if (gicon.includes("a_")) {
89-
fileExtension = ".gif";
90-
}
91-
92-
icon.src = "https://cdn.discordapp.com/icons/" + id + "/" + gicon + fileExtension + "?size=128";
93-
94-
95-
const discordTitle = inviteElement.getElementsByClassName("discord-title")[0];
96-
const discordOnline = inviteElement.getElementsByClassName("discord-online")[0];
97-
const discordMembers = inviteElement.getElementsByClassName("discord-member")[0];
98-
99-
discordTitle.innerHTML = name;
100-
discordOnline.innerHTML = onlinecount + " Online";
101-
discordMembers.innerHTML = membercount + " Members"
65+
// Getting the data
66+
const data = {
67+
id: json.guild.id,
68+
gicon: json.guild.icon,
69+
gsplash: json.guild.splash,
70+
name: json.guild.name,
71+
onlinecount: json.approximate_presence_count.toLocaleString(),
72+
membercount: json.approximate_member_count.toLocaleString()
73+
};
74+
75+
applyInviteData(inviteCode, inviteElement, data);
76+
77+
// Set data in session storage
78+
sessionStorage.setItem(`${inviteCode}_id`, data.id);
79+
sessionStorage.setItem(`${inviteCode}_name`, data.name);
80+
sessionStorage.setItem(`${inviteCode}_gicon`, data.gicon);
81+
sessionStorage.setItem(`${inviteCode}_gsplash`, data.gsplash);
82+
sessionStorage.setItem(`${inviteCode}_onlinecount`, data.onlinecount);
83+
sessionStorage.setItem(`${inviteCode}_membercount`, data.membercount);
84+
});
85+
}
10286

87+
/**
88+
* Applies the data to the invite element
89+
* @param {string} inviteCode The invite code of the url
90+
* @param {HTMLElement} inviteElement The element to apply the data to
91+
* @param {Object} data The data to apply to
92+
*/
93+
function applyInviteData(inviteCode, inviteElement, data) {
94+
95+
// Get invite parts
96+
const icon = inviteElement.getElementsByClassName("server-icon")[0];
97+
const splash = inviteElement.getElementsByClassName("splash")[0];
98+
const discordTitle = inviteElement.getElementsByClassName("discord-title")[0];
99+
const discordOnline = inviteElement.getElementsByClassName("discord-online")[0];
100+
const discordMembers = inviteElement.getElementsByClassName("discord-member")[0];
101+
102+
// Apply data to elements
103+
discordTitle.innerHTML = data.name;
104+
discordOnline.innerHTML = data.onlinecount + " Online";
105+
discordMembers.innerHTML = data.membercount + " Members"
106+
107+
// Apply icon which may be animated in some cases.
108+
let fileExtension = ".png";
109+
if (data.gicon.includes("a_")) {
110+
fileExtension = ".gif";
111+
}
103112

104-
if (gsplash != null) {
105-
splash.src = "https://cdn.discordapp.com/splashes/" + id + "/" + gsplash + ".png?size=480"
106-
splash.style = "display: block";
107-
}
113+
icon.src = `https://cdn.discordapp.com/icons/${data.id}/${data.gicon + fileExtension}?size=128`;
108114

109-
localStorage.setItem(`${inviteUrl}_id`, id);
110-
localStorage.setItem(`${inviteUrl}_name`, name);
111-
localStorage.setItem(`${inviteUrl}_gicon`, gicon)
112-
localStorage.setItem(`${inviteUrl}_gsplash`, gsplash)
113-
localStorage.setItem(`${inviteUrl}_onlinecount`, onlinecount)
114-
localStorage.setItem(`${inviteUrl}_membercount`, membercount)
115-
});
115+
// Apply splash which may not exist on some servers
116+
if (data.gsplash && data.gsplash != "null") {
117+
splash.src = `https://cdn.discordapp.com/splashes/${data.id}/${data.gsplash}.png?size=480`
118+
splash.style = "display: block";
119+
}
116120
}

0 commit comments

Comments
 (0)