2022-05-17 20:43:26 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
2022-05-18 11:17:35 +01:00
< title > frog_emojis< / title >
< link rel = "icon" type = "image/svg+xml" href = "https://raw.githubusercontent.com/Riesi/frog_emojis/master/svg/U1f438-frog.svg" sizes = "any" >
< link rel = "icon" href = "https://raw.githubusercontent.com/Riesi/frog_emojis/master/png/72/U1f438-frog.png" type = "image/png" >
2022-05-19 12:36:27 +01:00
< meta content = "frog_emojis" property = "og:title" / >
< meta content = "Frogs everywhere!" property = "og:description" / >
< meta content = "https://riesi.github.io/frog_emojis/" property = "og:url" / >
< meta content = "https://raw.githubusercontent.com/Riesi/frog_emojis/master/png/72/U1f438-frog.png" property = "og:image" / >
< meta content = "#43B581" data-react-helmet = "true" name = "theme-color" / >
< meta name = "twitter:card" content = "summary_large_image" >
2022-05-17 20:43:26 +01:00
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" >
< link rel = "stylesheet" href = "./style.css" >
< title > Document< / title >
< style >
.frog-holder {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
img {
2022-05-18 11:22:35 +01:00
width: 64px;
2022-05-17 20:43:26 +01:00
height: auto;
2022-05-18 11:22:35 +01:00
margin: 6px;
2022-05-17 20:43:26 +01:00
}
< / style >
< / head >
2022-05-18 10:37:05 +01:00
< body style = "background-color:#292929;" >
2023-08-23 21:48:10 +01:00
< script >
function set_all_format(){
let obj = document.getElementById("fileformat");
const frogs = document.getElementsByClassName("frog");
for (let i = 0; i < frogs.length ; i + + ) {
let frog = frogs[i];
let val = frog.getAttribute("value");
let url = `https://github.com/Riesi/frog_emojis/blob/master/${obj.value}/${val}`;
if (obj.value !== 'svg') url = url.replace(/svg$/,'png');
frog.href = url;
}
}
< / script >
2022-05-17 20:43:26 +01:00
< header class = "page-header" role = "banner" >
< h1 class = "project-name" > frog_emojis< / h1 >
< h2 class = "project-tagline" > Froggyfied custom emojies and logos< / h2 >
< a href = "https://github.com/Riesi/frog_emojis" class = "btn" > View on GitHub< / a >
2023-08-23 21:48:10 +01:00
< br / >
< select class = "frog-select" name = "formatselection" id = "fileformat" onchange = "set_all_format()" >
< option value = "svg" > SVG< / option >
< option value = "png/72" > 72px PNG< / option >
< option value = "png/512" > 512px PNG< / option >
< option value = "png/1024" > 1024px PNG< / option >
< / select >
2022-05-17 20:43:26 +01:00
< / header >
2022-05-18 11:06:18 +01:00
< div id = "mainholder" style = "text-align:center" > <!-- It's like the hand holder but with frogs -->
2022-05-17 20:43:26 +01:00
< / div >
< script type = "module" >
let cacheInvalidationPeriod = 1000 * 60; // 1 minute should be fine for github api ratelimiting
2023-08-23 21:48:10 +01:00
2022-05-17 20:43:26 +01:00
function frogCache_check() {
if (!window.localStorage) { // Some might have it disabled for privacy reasons
return false;
}
if (window.localStorage.getItem("frogCache_lastCheck") === null) {
return false;
}
let lastCheck = parseInt(window.localStorage.getItem("frogCache_lastCheck"));
let now = Date.now();
if (now - lastCheck > cacheInvalidationPeriod) {
return false;
}
return true;
}
function frogCache_commit(frogs) {
if (!window.localStorage) {
return false;
}
window.localStorage.setItem("frogCache_lastCheck", Date.now().toString());
window.localStorage.setItem("frogCache_frogs", JSON.stringify(frogs));
return true;
}
async function loadFrogs() {
let frogs;
if (!frogCache_check()) {
console.log("Re-fetching frogs");
frogs = await fetch("https://api.github.com/repos/Riesi/frog_emojis/git/trees/master?recursive=1")
2022-05-18 10:37:05 +01:00
.then(res => res.json())
2022-05-17 20:59:34 +01:00
.then(a => a.tree.filter(b => b.path.startsWith("svg/")));
2022-05-17 20:43:26 +01:00
//.then(a => a.filter(b => b.type === "blob"));
frogCache_commit(frogs);
} else {
console.log("Using old frogs");
frogs = JSON.parse(window.localStorage.getItem("frogCache_frogs"));
}
return frogs;
}
2022-05-18 10:37:05 +01:00
function mapFolderToDiv(folderPath) {
let divv = document.createElement("div");
2022-05-18 11:06:18 +01:00
let idstr = folderPath.replaceAll('/','');
2022-05-18 10:37:05 +01:00
divv.id = idstr;
divv.class = "frog-holder";
2022-05-19 08:10:00 +01:00
let mh = document.querySelector("#mainholder");
mh.insertBefore(divv, mh.firstChild);
2022-05-18 10:37:05 +01:00
let section = document.createElement("h1");
section.textContent = folderPath.replace("svg/","")+":";
document.querySelector("#" + idstr).appendChild(section);
return idstr;
}
2023-08-23 21:48:10 +01:00
2022-05-18 10:37:05 +01:00
function mapFrogToImage(frogs, idstr) {
2022-05-18 11:06:18 +01:00
let folderfroglink = frogs.map(frog => {
2022-05-18 11:17:35 +01:00
let linkimage = document.createElement("a");
linkimage.href = `https://github.com/Riesi/frog_emojis/blob/master/${frog.path}`;
2023-08-23 21:48:10 +01:00
linkimage.setAttribute('class',"frog");
linkimage.setAttribute('value',`${frog.path.replace(/^svg\//, '')}`);
2022-05-18 11:06:18 +01:00
let link = `https://raw.githubusercontent.com/Riesi/frog_emojis/master/${frog.path}`
2022-05-18 10:37:05 +01:00
let image = document.createElement("img");
image.src = link;
2022-05-18 11:09:22 +01:00
image.title = frog.path.replaceAll("/","").replace(idstr,"").replace(".svg","").replaceAll("svg","");
2023-08-23 21:48:10 +01:00
2022-05-18 11:17:35 +01:00
linkimage.appendChild(image);
document.querySelector("#" + idstr).appendChild(linkimage);
2022-05-18 11:06:18 +01:00
});
2022-05-18 10:37:05 +01:00
document.querySelector("#mainholder").appendChild(document.createElement("br"));
}
2022-05-17 20:43:26 +01:00
loadFrogs().then(a => {
2022-05-18 10:37:05 +01:00
2022-05-18 11:09:22 +01:00
//console.log(a);
2022-05-17 20:43:26 +01:00
let frogs = a.filter(b => b.type === "blob"); // get pngs
let folders = a.filter(b => b.type === "tree") // get folders
2022-05-18 10:37:05 +01:00
2022-05-18 11:09:22 +01:00
//console.log(folders);
2022-05-17 20:43:26 +01:00
folders.map(folder => {
2022-05-18 11:09:22 +01:00
//console.log(folder);
2022-05-18 10:37:05 +01:00
let folderfrog = frogs.filter(folderfrog => folderfrog.path.startsWith(folder.path)); // get subfolder frogs
frogs = frogs.filter( ( frog ) => !folderfrog.includes( frog ) ); // remove subfolder frogs from list
2022-05-18 11:09:22 +01:00
//console.log(frogs);
2022-05-18 10:37:05 +01:00
mapFrogToImage(folderfrog, mapFolderToDiv(folder.path));
2022-05-17 20:43:26 +01:00
})
2022-05-18 10:37:05 +01:00
mapFrogToImage(frogs, mapFolderToDiv("root"));
2023-08-23 21:48:10 +01:00
set_all_format();
});
2022-05-17 20:43:26 +01:00
< / script >
< footer class = "site-footer" >
2022-05-18 11:22:35 +01:00
< span class = "site-footer-owner" > < a href = "https://github.com/Riesi/frog_emojis" > frog_emojis< / a > is maintained by < a href = "https://github.com/Riesi" > Riesi< / a > and < a href = "https://github.com/Miepee" > Miepee< / a > . JavaScript base by < a href = "https://github.com/rphsoftware" > Rph< / a > .< / span >
2022-05-18 10:37:05 +01:00
< / footer >
2022-05-17 20:43:26 +01:00
< / body >
2023-08-23 21:48:10 +01:00
< / html >
