From f71668e3ff30dc46487df78b7c976ff6c147c2a8 Mon Sep 17 00:00:00 2001
From: Rph <rphsoftware@users.noreply.github.com>
Date: Wed, 23 Aug 2023 22:48:10 +0200
Subject: [PATCH] feat(format-switcher): Implement format switcher for frog
 links

---
 index.html | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 59ccaed..2ab1a08 100644
--- a/index.html
+++ b/index.html
@@ -31,18 +31,38 @@
     </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;
@@ -100,14 +120,18 @@
                 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);
             });
@@ -130,11 +154,13 @@
                 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>
+</html>
\ No newline at end of file
