From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 6 Nov 2023 06:02:03 +0000 (-0800)
Subject: Add "Download to CSV" button on output table
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=358f16fe3840df75eb8b828def588151651886ef;p=ens2hex

Add "Download to CSV" button on output table
---

diff --git a/index.html b/index.html
index d669664..14388a4 100644
--- a/index.html
+++ b/index.html
@@ -148,7 +148,7 @@
       font-weight: 500;
     }
 
-    button {
+    #fetch {
       inline-size: fit-content;
       color: inherit;
       background: var(--secondary-lighter);
@@ -160,14 +160,14 @@
       transition: filter 500ms;
     }
 
-    button:hover,
-    button:focus {
+    #fetch:hover,
+    #fetch:focus {
       cursor: pointer;
       filter: brightness(1);
       transition: filter 150ms;
     }
 
-    button:disabled {
+    #fetch:disabled {
       cursor: not-allowed;
       filter: brightness(0.9);
     }
@@ -193,6 +193,28 @@
 
     output#table {
       display: none;
+      position: relative;
+    }
+
+    #download {
+      cursor: pointer;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: none;
+      border: none;
+      padding: 0;
+      transition: filter 400ms;
+    }
+
+    #download:is(:hover, :focus) {
+      filter: drop-shadow(0 0 8px var(--secondary-lighter));
+      transition: filter 200ms;
+    }
+
+    #download svg {
+      inline-size: 24px;
+      block-size: 24px;
     }
 
     table {
@@ -286,13 +308,21 @@
         </details>
 
         <div>
-          <button>Fetch addresses</button>
+          <button id="fetch">Fetch addresses</button>
           <span class="inline-spinner"></span>
         </div>
-        
+
         <output name="status" id="status"></output>
 
         <output name="table" id="table">
+          <button id="download" aria-label="Download to CSV file">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
+              <polyline points="14 2 14 8 20 8"></polyline>
+              <path d="M12 18v-6"></path>
+              <path d="m9 15 3 3 3-3"></path>
+            </svg>
+          </button>
           <table>
             <thead>
               <tr>
@@ -408,6 +438,18 @@
       spinner.style.setProperty('display', 'none');
       document.querySelector('output#table').style.display = 'block';
     });
+
+    // Download to CSV
+    document.querySelector('#download').addEventListener('click', e => {
+      e.preventDefault(); // Prevents re-submit on the form
+      const table = document.querySelector('table');
+      const csv = table.innerText.replaceAll('\t', ',');
+      const file = new File([csv], `ENS_Addresses_${Date.now()}`, { type: 'text/csv' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(file);
+      a.download = file.name;
+      a.click();
+    });
   </script>
 </body>