feat(tmpl): add copy btn in history row, simplify dynamic row

adhocore · Mar 30, 2021 · 272fe11 · 272fe11
1 parent 604c8cb
commit 272fe11
Showing 1 changed file with 12 additions and 13 deletions.
diff --git a/tmpl/home.html b/tmpl/home.html
@@ -20,6 +20,9 @@
     .th-url {
       width: 90%;
     }
+    .copy-url {
+      cursor: pointer;
+    }
   </style>
 </head>
 <body>
@@ -145,19 +148,10 @@ <h4 class="subtitle">
 
 function renderHistory(code, url, idx) {
   const row  = hist.insertRow(idx)
-  const col1 = row.insertCell()
-  const col2 = row.insertCell()
-  const link = document.createElement('a')
-  const trnk = url.length > 150 ? url.substring(0, 150) + '...' : url
-
-  row.id     = code
-  link.title = url
-  link.href  = `${base}/${code}`
-
-  link.setAttribute('target', '_blank')
-  link.appendChild(document.createTextNode(code))
-  col1.appendChild(link)
-  col2.appendChild(document.createTextNode(trnk))
+
+  row.insertCell().innerHTML = `<a href="${base}/${code}" target="_blank" title="${url}">${code}</a>
+    <span class="icon"><i class="fas fa-copy copy-url" title="Copy URL" data-short-url="${base}/${code}"></i></span>`
+  row.insertCell().innerText = url.length > 150 ? url.substring(0, 150) + '...' : url
 }
 
 function loadHistory() {
@@ -170,6 +164,11 @@ <h4 class="subtitle">
 }
 
 setTimeout(loadHistory, 500)
+document.addEventListener('click', e => {
+  if (e.target && e.target.classList.contains('copy-url')) {
+    navigator.clipboard.writeText(e.target.dataset.shortUrl)
+  }
+})
 </script>
 </body>
 </html>