Allow naming zip as prefix

index.html

@@ -78,6 +78,12 @@ <h2> A small tool to split images into square tiles, like large Discord emojis.
                         <i class="fas fa-times"></i>
                     </label>
                     <input type="checkbox" id="shrink">
+                    <label for="namezip">
+                        Use prefix as zip name?
+                        <i class="fas fa-check"></i>
+                        <i class="fas fa-times"></i>
+                    </label>
+                    <input type="checkbox" id="namezip">
 
                     <input type="submit" value="Split" id="submit">
                 </form>

js/main.js

@@ -24,13 +24,12 @@ function init () {
     txt = $('textarea');
     previewDiv = $('div');
     prev = $('td#preview');
-    shrinkCheck = $('i.fa-check');
-    shrinkCross = $('i.fa-times');
     fileInfo = $('em');
 
     form = $('form');
     prefixInput = $('input#prefix');
     shrinkInput = $('input#shrink');
+    namezipInput = $('input#namezip');
     delayInput = $('input#delay');
     fileInput = $('input#file');
     sizeInput = $('input#size');
@@ -44,9 +43,10 @@ function init () {
     delayLabel.style.display = delayInput.style.display = 'none';
 
     form.addEventListener('submit', e => e.preventDefault());
-    shrinkInput.addEventListener('click', toggleShrink);
+    shrinkInput.addEventListener('click', handleCheckboxes);
+    namezipInput.addEventListener('click', handleCheckboxes);
     addEventListeners();
-    toggleShrink();
+    handleCheckboxes();
 }
 
 const toBlob = (d) => new Promise((res) => d.toBlob(res));
@@ -57,8 +57,20 @@ function addEventListeners () {
     fileInput.addEventListener('change', handleFileChange);
 }
 
-function toggleShrink () {
-    if (shrinkInput.checked) {
+function handleCheckboxes(e) {
+    if (e == null) {
+        document.querySelectorAll('input[type=checkbox]').forEach((e) => {
+            $(`input#${e.id}`).checked = (e.id == 'namezip' ? true : false);
+            $(`label[for=${e.id}] > i.fa-check`).style.display = (e.id == 'namezip' ? '' : 'none');
+            $(`label[for=${e.id}] > i.fa-times`).style.display = (e.id == 'namezip' ? 'none' : '');
+        });
+        return;
+    }
+    var target = e.target;
+    var shrinkCheck = $(`label[for=${target.id}] > i.fa-check`);
+    var shrinkCross = $(`label[for=${target.id}] > i.fa-times`);
+
+    if (target.checked) {
         shrinkCheck.style.display = '';
         shrinkCross.style.display = 'none';
     } else {
@@ -74,8 +86,13 @@ function handleFileChange () {
     delayLabel.style.display = delayInput.style.display = file.name.endsWith('.gif') ? '' : 'none';
 }
 
-function save () {
-    saveAs(currentZip, 'emojis.zip');
+function save (prefix) {
+    console.log("called save");
+    if (namezipInput.checked) {
+        saveAs(currentZip, `${prefix}.zip`);
+    } else {
+        saveAs(currentZip, 'emojis.zip');
+    }
 }
 
 function resize (img, w, h) {
@@ -302,8 +319,10 @@ async function splitImages () {
     timeTaken.innerText = `Time taken: ${ Date.now() - startTime }ms`;
     submit.value = 'Split';
 
-    download.removeEventListener('click', save);
-    download.addEventListener('click', save);
+    newDownload = download.cloneNode(true);
+    download.parentNode.replaceChild(newDownload, download);
+    download = newDownload;
+    download.addEventListener('click', function(){save(prefix)});
 
     addEventListeners();
 }

style.css

@@ -124,12 +124,12 @@ label {
     font-size: 0.95rem;
 }
 
-input#shrink {
+input:is(#shrink, #namezip) {
     opacity: 0;
     position: absolute;
 }
 
-label[for="shrink"] {
+label:is([for="shrink"], [for="namezip"]) {
     cursor: pointer;
     user-select: none;
 }