From c938689a7ea4eec8826502bcc9d961d7e1e03cf6 Mon Sep 17 00:00:00 2001
From: Jonas Kuske <30421456+jonaskuske@users.noreply.github.com>
Date: Sat, 30 May 2020 04:27:57 +0200
Subject: [PATCH] feat: wire up copy button

---
 docs/index.html |  8 +++++++-
 docs/script.js  | 13 +++++++++++++
 docs/style.css  |  4 ++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 3fe3f07..68d9db5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -57,6 +57,11 @@
       }
     </script>
 
+    <script>
+      // eslint-disable-next-line no-useless-escape
+      window.navigator.clipboard || document.write('<script src="https://unpkg.com/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.promise.js"><\/script>')
+    </script>
+
     <!-- Use bright favicons when the browser is in dark mode. -->
     <script type="module">
       import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
@@ -117,7 +122,8 @@
     <div id="installation">
       <header class="row version-select-snippet">
         <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
-        <button type="button" id="copy-snippet">
+        <button type="button" id="copy-button">
+          <span id="copy-button-feedback" class="emoji"></span>
           Copy to clipboard
         </button>
       </header>
diff --git a/docs/script.js b/docs/script.js
index 3e79fb0..8b43794 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -12,6 +12,8 @@ const themeForm = document.getElementById('theme-form')
 const stylesheet = document.getElementById('js-stylesheet')
 const startupStylesheet = document.getElementById('js-startup-stylesheet')
 const productHunt = document.getElementById('product-hunt')
+const copyButton = document.getElementById('copy-button')
+const copyButtonFeedback = document.getElementById('copy-button-feedback')
 const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
 
 const table = {
@@ -70,3 +72,14 @@ prefersColorScheme.addListener(() => {
 
 updateTheme()
 startupStylesheet.parentElement.removeChild(startupStylesheet)
+
+copyButton.addEventListener('click', () => {
+  const clipboard = navigator.clipboard || window.clipboard
+  const theme = themeForm.querySelector('input[name="theme"]:checked').value
+  const snippetText = document.querySelector(`#link-snippet-${theme} code`).textContent
+
+  clipboard.writeText(snippetText)
+    .then(() => { copyButtonFeedback.textContent = '✔' })
+    .catch(() => { copyButtonFeedback.textContent = '❌' })
+    .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
+})
diff --git a/docs/style.css b/docs/style.css
index 88e1e80..a9d31a9 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -11,13 +11,13 @@ html {
 }
 
 /* Make the ✔ / ❌ Emoji appear next to the button */
-#copy-snippet {
+#copy-button {
   position: relative;
   margin-right: 2px;
   overflow: visible;
 }
 
-#copy-snippet span {
+#copy-button-feedback {
   position: absolute;
   left: -2rem;
   display: inline-block;