mirror of https://github.com/Riesi/frog_emojis.git
166 lines
7.1 KiB
HTML
166 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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">
|
|
<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">
|
|
<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 {
|
|
width: 64px;
|
|
height: auto;
|
|
margin: 6px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="background-color:#292929;">
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</header>
|
|
<div id="mainholder" style="text-align:center"> <!-- It's like the hand holder but with frogs -->
|
|
|
|
</div>
|
|
<script type="module">
|
|
let cacheInvalidationPeriod = 1000 * 60; // 1 minute should be fine for github api ratelimiting
|
|
|
|
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")
|
|
.then(res => res.json())
|
|
.then(a => a.tree.filter(b => b.path.startsWith("svg/")));
|
|
//.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;
|
|
}
|
|
function mapFolderToDiv(folderPath) {
|
|
let divv = document.createElement("div");
|
|
let idstr = folderPath.replaceAll('/','');
|
|
divv.id = idstr;
|
|
divv.class = "frog-holder";
|
|
let mh = document.querySelector("#mainholder");
|
|
mh.insertBefore(divv, mh.firstChild);
|
|
let section = document.createElement("h1");
|
|
section.textContent = folderPath.replace("svg/","")+":";
|
|
document.querySelector("#" + idstr).appendChild(section);
|
|
return idstr;
|
|
}
|
|
|
|
function mapFrogToImage(frogs, idstr) {
|
|
let folderfroglink = frogs.map(frog => {
|
|
let linkimage = document.createElement("a");
|
|
linkimage.href = `https://github.com/Riesi/frog_emojis/blob/master/${frog.path}`;
|
|
linkimage.setAttribute('class',"frog");
|
|
linkimage.setAttribute('value',`${frog.path.replace(/^svg\//, '')}`);
|
|
let link = `https://raw.githubusercontent.com/Riesi/frog_emojis/master/${frog.path}`
|
|
let image = document.createElement("img");
|
|
image.src = link;
|
|
image.title = frog.path.replaceAll("/","").replace(idstr,"").replace(".svg","").replaceAll("svg","");
|
|
|
|
linkimage.appendChild(image);
|
|
document.querySelector("#" + idstr).appendChild(linkimage);
|
|
});
|
|
|
|
document.querySelector("#mainholder").appendChild(document.createElement("br"));
|
|
}
|
|
|
|
loadFrogs().then(a => {
|
|
|
|
//console.log(a);
|
|
let frogs = a.filter(b => b.type === "blob"); // get pngs
|
|
let folders = a.filter(b => b.type === "tree") // get folders
|
|
|
|
//console.log(folders);
|
|
folders.map(folder => {
|
|
//console.log(folder);
|
|
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
|
|
//console.log(frogs);
|
|
mapFrogToImage(folderfrog, mapFolderToDiv(folder.path));
|
|
})
|
|
mapFrogToImage(frogs, mapFolderToDiv("root"));
|
|
set_all_format();
|
|
});
|
|
|
|
</script>
|
|
|
|
<footer class="site-footer">
|
|
<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>
|
|
</footer>
|
|
</body>
|
|
</html> |