Skip to content

Commit a2565a0

Browse files
ScribbleTASScribbleTAS
authored
Merge pull request #26 from ScribbleTAS/enhancement/invites-session
Keep images for discord invites loaded after leaving the page
2 parents a0a70f7 + 56ca08d commit a2565a0

File tree

2 files changed

+104
-48
lines changed

2 files changed

+104
-48
lines changed

‎layouts/_shortcodes/load-discordinvite.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
</div>
55
<strong>By clicking this button, you will connect to the discord servers to download the images for the invites. This might be giving you cookies!</strong>
66
</div>
7-
<script src="/js/load-discordinvites.js"></script>
7+
<script src="/js/load-discordinvites.js" async defer></script>

‎static/js/load-discordinvites.js‎

Lines changed: 103 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,121 @@
1+
const sessionStorage = window.sessionStorage;
2+
const hasClickedDiscordLoad = sessionStorage.getItem("hasClickedDiscordLoad");
13

2-
document.getElementById("load-invite-button").addEventListener("click", function (e){
4+
// Check if session storage has discord invite data
5+
if (hasClickedDiscordLoad == "true") {
6+
document.getElementById("load-invite-button").parentElement.style = "display: none";
37
loadAllInvites();
4-
document.getElementById("load-invite-button").parentElement.style="display: none";
8+
}
9+
10+
document.getElementById("load-invite-button").addEventListener("click", function (e) {
11+
loadAllInvites();
12+
document.getElementById("load-invite-button").parentElement.style = "display: none";
513
})
614

7-
function loadAllInvites(){
15+
/**
16+
* Loads images and data from all invite elements on the page
17+
*/
18+
function loadAllInvites() {
819
const invites = document.getElementsByClassName("invite");
9-
for(const element of invites){
10-
const url = element.getAttribute("invite-url");
11-
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;
1229
}
30+
sessionStorage.setItem("hasClickedDiscordLoad", "true");
1331
}
1432

1533
/**
16-
*
17-
* @param {string} inviteUrl
18-
* @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
1937
*/
20-
function loadInvite(inviteUrl, inviteElement){
21-
const url = 'https://discord.com/api/v10/invites/'+inviteUrl+'?with_counts=true';
38+
function loadInvite(inviteCode, inviteElement) {
39+
const isLoaded = sessionStorage.getItem(`${inviteCode}_isLoaded`);
40+
if (isLoaded && isLoaded == "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+
};
49+
50+
applyInviteData(inviteCode, inviteElement, data);
51+
52+
return;
53+
}
54+
55+
const url = `https://discord.com/api/v10/invites/${inviteCode}?with_counts=true`;
2256
fetch(url)
2357
.then(response => response.json())
2458
.then(json => {
25-
if(json.code==10006){
26-
const discordTitle=inviteElement.getElementsByClassName("discord-title")[0];
27-
discordTitle.innerHTML=json.message;
59+
if (json.code == 10006) {
60+
const discordTitle = inviteElement.getElementsByClassName("discord-title")[0];
61+
discordTitle.innerHTML = json.message;
2862
return;
2963
}
3064

31-
//Create Element
32-
const icon = inviteElement.getElementsByClassName("server-icon")[0];
33-
const splash = inviteElement.getElementsByClassName("splash")[0];
34-
35-
//Getting guild things
36-
const id = json.guild.id;
37-
const gicon = json.guild.icon;
38-
const gsplash = json.guild.splash;
39-
const name = json.guild.name;
40-
const onlinecount = json.approximate_presence_count.toLocaleString();
41-
const membercount = json.approximate_member_count.toLocaleString();
42-
43-
let fileExtension=".png";
44-
if(gicon.includes("a_")){
45-
fileExtension=".gif";
46-
}
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+
};
4774

48-
icon.src = "https://cdn.discordapp.com/icons/" + id + "/" + gicon + fileExtension + "?size=128";
49-
50-
51-
const discordTitle=inviteElement.getElementsByClassName("discord-title")[0];
52-
const discordOnline=inviteElement.getElementsByClassName("discord-online")[0];
53-
const discordMembers=inviteElement.getElementsByClassName("discord-member")[0];
54-
55-
discordTitle.innerHTML=name;
56-
discordOnline.innerHTML=onlinecount+" Online";
57-
discordMembers.innerHTML=membercount+" Members"
58-
59-
60-
if(gsplash!=null){
61-
splash.src = "https://cdn.discordapp.com/splashes/"+ id +"/"+gsplash+".png?size=480"
62-
splash.style = "display: block";
63-
}
75+
applyInviteData(inviteCode, inviteElement, data);
76+
77+
// Set data in session storage
78+
sessionStorage.setItem(`${inviteCode}_isLoaded`, "true");
79+
sessionStorage.setItem(`${inviteCode}_id`, data.id);
80+
sessionStorage.setItem(`${inviteCode}_name`, data.name);
81+
sessionStorage.setItem(`${inviteCode}_gicon`, data.gicon);
82+
sessionStorage.setItem(`${inviteCode}_gsplash`, data.gsplash);
83+
sessionStorage.setItem(`${inviteCode}_onlinecount`, data.onlinecount);
84+
sessionStorage.setItem(`${inviteCode}_membercount`, data.membercount);
6485
});
65-
}
86+
}
87+
88+
/**
89+
* Applies the data to the invite element
90+
* @param {string} inviteCode The invite code of the url
91+
* @param {HTMLElement} inviteElement The element to apply the data to
92+
* @param {Object} data The data to apply to
93+
*/
94+
function applyInviteData(inviteCode, inviteElement, data) {
95+
96+
// Get invite parts
97+
const icon = inviteElement.getElementsByClassName("server-icon")[0];
98+
const splash = inviteElement.getElementsByClassName("splash")[0];
99+
const discordTitle = inviteElement.getElementsByClassName("discord-title")[0];
100+
const discordOnline = inviteElement.getElementsByClassName("discord-online")[0];
101+
const discordMembers = inviteElement.getElementsByClassName("discord-member")[0];
102+
103+
// Apply data to elements
104+
discordTitle.innerHTML = data.name;
105+
discordOnline.innerHTML = data.onlinecount + " Online";
106+
discordMembers.innerHTML = data.membercount + " Members"
107+
108+
// Apply icon which may be animated in some cases.
109+
let fileExtension = ".png";
110+
if (data.gicon.includes("a_")) {
111+
fileExtension = ".gif";
112+
}
113+
114+
icon.src = `https://cdn.discordapp.com/icons/${data.id}/${data.gicon + fileExtension}?size=128`;
115+
116+
// Apply splash which may not exist on some servers
117+
if (data.gsplash && data.gsplash != "null") {
118+
splash.src = `https://cdn.discordapp.com/splashes/${data.id}/${data.gsplash}.png?size=480`
119+
splash.style = "display: block";
120+
}
121+
}

0 commit comments

Comments
 (0)