Update & reload output filename option

Uses localStorage to save the "output filename" option & update text to be clearer that it applies to a single image

also use date variable for zip download
This commit is contained in:
JovannMC 2024-11-13 20:08:57 +03:00
parent 1d7671ce54
commit 677842b7d3
No known key found for this signature in database
1 changed files with 12 additions and 3 deletions

View File

@ -54,6 +54,12 @@
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
isSm = window.innerWidth < 640; isSm = window.innerWidth < 640;
}); });
// reloads the "output filename" option
const savedOption = localStorage.getItem('outputFilename');
if (savedOption) {
outputFilename = savedOption;
}
}); });
let disabled = $derived(files.files.some((f) => !f.result)); let disabled = $derived(files.files.some((f) => !f.result));
@ -149,7 +155,7 @@
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = document.createElement("a"); const a = document.createElement("a");
a.href = url; a.href = url;
a.download = `VERT-Converted_${new Date().toISOString()}.zip`; a.download = `VERT-Converted_${date}.zip`;
a.click(); a.click();
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
a.remove(); a.remove();
@ -183,7 +189,7 @@
<h2 class="font-bold text-xl mb-1">Options</h2> <h2 class="font-bold text-xl mb-1">Options</h2>
<div class="flex flex-col w-full gap-4 mt-2"> <div class="flex flex-col w-full gap-4 mt-2">
<div class="flex flex-col gap-3 w-fit"> <div class="flex flex-col gap-3 w-fit">
<h3>Output filename</h3> <h3>Output filename (for single image)</h3>
<div class="grid grid-rows-1 grid-cols-1"> <div class="grid grid-rows-1 grid-cols-1">
<div <div
transition:blur={{ transition:blur={{
@ -196,7 +202,10 @@
<Dropdown <Dropdown
options={outputFilenameOption} options={outputFilenameOption}
selected={outputFilename} selected={outputFilename}
onselect={(o) => outputFilename = o} onselect={(o) => {
outputFilename = o;
localStorage.setItem('outputFilename', o);
}}
/> />
</div> </div>
</div> </div>