Add some usability for the website: copy link

omrilotan · Nov 20, 2023 · 0caac4a · 0caac4a
1 parent 66e1aa7
commit 0caac4a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git a/page/index.pug b/page/index.pug
@@ -15,6 +15,8 @@ html(lang="en-GB")
       h1 Is this a bot user agent string?
       textarea
       output
+      p Click here to&nbsp;
+        a(href="#copy" id="copy-link") copy link
       p Powered by Javascript package&nbsp;
         a(href="https://github.com/omrilotan/isbot" rel="noopener noreferrer") isbot
     script(src="./script.js")
diff --git a/page/script.js b/page/script.js
@@ -5,6 +5,7 @@ import list from '../src/list.json'
 {
   const textarea = document.querySelector('textarea')
   const output = document.querySelector('output')
+  const copyLink = document.querySelector('[id="copy-link"]')
   let timer
 
   const query = window.location.search.replace(/\?ua=(.*)$/, '$1')
@@ -75,4 +76,24 @@ import list from '../src/list.json'
     output.className = ''
     setTimeout(() => { output.className = 'highlight' }, 100)
   }
+
+  copyLink.addEventListener('click', () => {
+    const { protocol, host, pathname } = document.location
+    navigator.clipboard.writeText([
+      protocol, '//', host, pathname, '?ua=', encodeURIComponent(textarea.value)
+    ].join(''))
+    const dialog = document.createElement('dialog')
+    dialog.appendChild(document.createTextNode('copied to clipboard'))
+    document.body.appendChild(dialog)
+    setTimeout(() => {
+      dialog.showModal()
+      setTimeout(() => {
+        dialog.addEventListener('transitionend', () => {
+          dialog.close()
+          document.body.removeChild(dialog)
+        })
+        dialog.style.opacity = 0
+      }, 2000)
+    }, 0)
+  })
 }
diff --git a/page/styles.css b/page/styles.css
@@ -75,3 +75,26 @@ kbd {
   font-size: 0.8em;
   padding: 0 0.2em;
 }
+dialog {
+  position: fixed;
+  top: 10vh;
+  left: 0;
+  z-index: 100;
+  width: 20vw;
+  margin: 0 40vw;
+  padding: 1em;
+  background: var(--color-foreground);
+  color: var(--color-highlight);
+  text-shadow: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1em;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  box-shadow: var(--color-shadow) 0 0 0 .5em;
+}
+
+dialog[open] {
+  opacity: 1;
+}