feat: add a button to download SVG

sicamp · Jun 2, 2024 · c69d3e7 · c69d3e7
1 parent 7b8acb1
commit c69d3e7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,10 @@
                     <option value="center">Center</option>
                     <option value="right">Right</option>
                 </select>
-                <button type="button">Download</button>
+                <div class="settings-actions">
+                    <button type="button" name="svg">Download SVG</button>
+                    <button type="button" name="png">Download PNG</button>
+                </div>
             </form>
             <div class="preview">
                 <svg

diff --git a/src/main.ts b/src/main.ts
@@ -43,12 +43,18 @@ settings.onSettingsChange((data) => {
     cover.setTheme(data.theme);
 });
 
-settings.onDownload(async () => {
+settings.onDownloadPng(async () => {
     const imageData = await cover.createPngUri();
 
     download("sicamp.png", imageData);
 });
 
+settings.onDownloadSvg(() => {
+    const imageData = cover.createSvgUri();
+
+    download("sicamp.svg", imageData);
+});
+
 async function initAsync() {
     const rules = await getFontsRules();
     cover.injectFonts(rules);

diff --git a/src/settings.ts b/src/settings.ts
@@ -18,7 +18,8 @@ export class SettingsManager {
     private readonly textarea: HTMLTextAreaElement;
     private readonly fontSizeInput: HTMLInputElement;
     private readonly alignSelect: HTMLSelectElement;
-    private readonly downloadButton: HTMLButtonElement;
+    private readonly downloadPng: HTMLButtonElement;
+    private readonly downloadSvg: HTMLButtonElement;
 
     constructor(private readonly form: HTMLFormElement) {
         const themeSelect =
@@ -57,14 +58,23 @@ export class SettingsManager {
 
         this.alignSelect = alignSelect;
 
-        const downloadButton =
-            this.form.querySelector<HTMLButtonElement>("button");
+        const downloadPng =
+            this.form.querySelector<HTMLButtonElement>("[name=png]");
 
-        if (!downloadButton) {
-            throw new Error("Cannot find download button");
+        if (!downloadPng) {
+            throw new Error("Cannot find download PNG button");
         }
 
-        this.downloadButton = downloadButton;
+        this.downloadPng = downloadPng;
+
+        const downloadSvg =
+            this.form.querySelector<HTMLButtonElement>("[name=svg]");
+
+        if (!downloadSvg) {
+            throw new Error("Cannot find download SVG button");
+        }
+
+        this.downloadSvg = downloadSvg;
 
         this.form.addEventListener("submit", (event) => event.preventDefault());
     }
@@ -85,11 +95,15 @@ export class SettingsManager {
         this.alignSelect.addEventListener("change", handler);
     }
 
-    onDownload(callback: () => void) {
-        this.downloadButton.addEventListener("click", () => callback());
+    onDownloadPng(callback: () => void) {
+        this.downloadPng.addEventListener("click", () => callback());
         this.form.addEventListener("submit", () => callback());
     }
 
+    onDownloadSvg(callback: () => void) {
+        this.downloadSvg.addEventListener("click", () => callback());
+    }
+
     get theme() {
         return this.themeSelect.value;
     }