mirror of https://github.com/Riesi/frog_emojis.git
feat(format-switcher): Implement format switcher for frog links
This commit is contained in:
parent
645f480cbf
commit
1d57e06b4a
32
index.html
32
index.html
|
@ -31,18 +31,38 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body style="background-color:#292929;">
|
<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">
|
<header class="page-header" role="banner">
|
||||||
<h1 class="project-name">frog_emojis</h1>
|
<h1 class="project-name">frog_emojis</h1>
|
||||||
<h2 class="project-tagline">Froggyfied custom emojies and logos</h2>
|
<h2 class="project-tagline">Froggyfied custom emojies and logos</h2>
|
||||||
|
|
||||||
<a href="https://github.com/Riesi/frog_emojis" class="btn">View on GitHub</a>
|
<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>
|
</header>
|
||||||
<div id="mainholder" style="text-align:center"> <!-- It's like the hand holder but with frogs -->
|
<div id="mainholder" style="text-align:center"> <!-- It's like the hand holder but with frogs -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
let cacheInvalidationPeriod = 1000 * 60; // 1 minute should be fine for github api ratelimiting
|
let cacheInvalidationPeriod = 1000 * 60; // 1 minute should be fine for github api ratelimiting
|
||||||
|
|
||||||
function frogCache_check() {
|
function frogCache_check() {
|
||||||
if (!window.localStorage) { // Some might have it disabled for privacy reasons
|
if (!window.localStorage) { // Some might have it disabled for privacy reasons
|
||||||
return false;
|
return false;
|
||||||
|
@ -100,14 +120,18 @@
|
||||||
document.querySelector("#" + idstr).appendChild(section);
|
document.querySelector("#" + idstr).appendChild(section);
|
||||||
return idstr;
|
return idstr;
|
||||||
}
|
}
|
||||||
|
|
||||||
function mapFrogToImage(frogs, idstr) {
|
function mapFrogToImage(frogs, idstr) {
|
||||||
let folderfroglink = frogs.map(frog => {
|
let folderfroglink = frogs.map(frog => {
|
||||||
let linkimage = document.createElement("a");
|
let linkimage = document.createElement("a");
|
||||||
linkimage.href = `https://github.com/Riesi/frog_emojis/blob/master/${frog.path}`;
|
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 link = `https://raw.githubusercontent.com/Riesi/frog_emojis/master/${frog.path}`
|
||||||
let image = document.createElement("img");
|
let image = document.createElement("img");
|
||||||
image.src = link;
|
image.src = link;
|
||||||
image.title = frog.path.replaceAll("/","").replace(idstr,"").replace(".svg","").replaceAll("svg","");
|
image.title = frog.path.replaceAll("/","").replace(idstr,"").replace(".svg","").replaceAll("svg","");
|
||||||
|
|
||||||
linkimage.appendChild(image);
|
linkimage.appendChild(image);
|
||||||
document.querySelector("#" + idstr).appendChild(linkimage);
|
document.querySelector("#" + idstr).appendChild(linkimage);
|
||||||
});
|
});
|
||||||
|
@ -130,11 +154,13 @@
|
||||||
mapFrogToImage(folderfrog, mapFolderToDiv(folder.path));
|
mapFrogToImage(folderfrog, mapFolderToDiv(folder.path));
|
||||||
})
|
})
|
||||||
mapFrogToImage(frogs, mapFolderToDiv("root"));
|
mapFrogToImage(frogs, mapFolderToDiv("root"));
|
||||||
})
|
set_all_format();
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<footer class="site-footer">
|
<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>
|
<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>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue