1
0
mirror of https://github.com/kognise/water.css.git synced 2025-08-13 16:44:58 +02:00

feat: wire up copy button

This commit is contained in:
Jonas Kuske
2020-05-30 04:27:57 +02:00
parent 24ac400205
commit c938689a7e
3 changed files with 22 additions and 3 deletions

View File

@@ -57,6 +57,11 @@
} }
</script> </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. --> <!-- Use bright favicons when the browser is in dark mode. -->
<script type="module"> <script type="module">
import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs' import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
@@ -117,7 +122,8 @@
<div id="installation"> <div id="installation">
<header class="row version-select-snippet"> <header class="row version-select-snippet">
<h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3> <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 Copy to clipboard
</button> </button>
</header> </header>

View File

@@ -12,6 +12,8 @@ const themeForm = document.getElementById('theme-form')
const stylesheet = document.getElementById('js-stylesheet') const stylesheet = document.getElementById('js-stylesheet')
const startupStylesheet = document.getElementById('js-startup-stylesheet') const startupStylesheet = document.getElementById('js-startup-stylesheet')
const productHunt = document.getElementById('product-hunt') 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 linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
const table = { const table = {
@@ -70,3 +72,14 @@ prefersColorScheme.addListener(() => {
updateTheme() updateTheme()
startupStylesheet.parentElement.removeChild(startupStylesheet) 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))
})

View File

@@ -11,13 +11,13 @@ html {
} }
/* Make the ✔ / ❌ Emoji appear next to the button */ /* Make the ✔ / ❌ Emoji appear next to the button */
#copy-snippet { #copy-button {
position: relative; position: relative;
margin-right: 2px; margin-right: 2px;
overflow: visible; overflow: visible;
} }
#copy-snippet span { #copy-button-feedback {
position: absolute; position: absolute;
left: -2rem; left: -2rem;
display: inline-block; display: inline-block;