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:
@@ -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><head></code> of your HTML:</h3>
|
<h3>Paste this into the <code><head></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>
|
||||||
|
@@ -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))
|
||||||
|
})
|
||||||
|
@@ -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;
|
||||||
|
Reference in New Issue
Block a user