Skip to content

Instantly share code, notes, and snippets.

@thisismattmiller

thisismattmiller/copy-to-clipboard.html

Created February 28, 2024 21:24
Show Gist options
  • Save thisismattmiller/391397175eb2d138b145319824ee1fe8 to your computer and use it in GitHub Desktop.
Save thisismattmiller/391397175eb2d138b145319824ee1fe8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
copy-to-clipboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--
This is an HTML comment
You can write text in a comment and the content won't be visible in the page
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<!--
This is the page head - it contains info the browser uses
Like the title, which appears on the browser tab but not inside the page
Further down you'll see the content that displays in the page
-->
<title>Hello World!</title>
<!-- The website stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- The website JavaScript file -->
<script src="/script.js" defer></script>
</head>
<body>
<a data-copy="http://id.loc.gov/authorities/names/n94118754" href="http://id.loc.gov/authorities/names/n94118754">http://id.loc.gov/authorities/names/n94118754</a>
<br/>
<span data-copy="n94118754">LCCN: n94118754</span>
<br/>
<span data-copy-hidden="n94118754">LCCN: n94118754</span>
<style>
[data-copy-hidden] + .copy-button-hidden{
opacity:0;
width:0;
overflow:hidden;
}
.copy-button-hidden{
transition-property: all;
transition-duration: 0.15s;
}
[data-copy-hidden]:hover + .copy-button-hidden{
opacity:1;
width:1.25em;
overflow:visible;
}
.copy-button-hidden:hover{
opacity:1;
width:1.25em;
overflow:visible;
}
.copy-button{
background:none;
border:none;
padding:0;
padding-left:0.1em;
margin:0;
height:1.25em;
width:1.25em;
overflow:hidden;
position: relative;
}
.copy-button svg.clip{
height:1.2em;
vertical-align: text-bottom;
transition-property: height, transform, opacity;
transition-duration: 0.25s;
filter: blur(0);
image-rendering: optimizeSpeed; /* */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
cursor: pointer;
}
.copy-button svg.check{
height:1.2em;
vertical-align: text-bottom;
transform: scale(0);
position: absolute;
top:0;
left:0;
cursor: pointer;
}
.copy-button svg.clip:hover{
height:1.25em;
transform:translateY(1px);
}
.add-check-mark{
animation-duration: 1s;
animation-name: check-mark-added;
}
@keyframes check-mark-added {
from {
transform: scale(0);
}
75% {
transform: scale(2);
}
to {
transform: scale(0);
}
}
</style>
<script>
for (let el of document.querySelectorAll('[data-copy],[data-copy-hidden]')){
let button = document.createElement("button")
button.classList.add('copy-button')
button.setAttribute('title','click to copy to clipboard')
if (el.dataset.copyHidden){
button.classList.add('copy-button-hidden')
button.dataset['copy'] = el.dataset.copyHidden
}else{
button.dataset['copy'] = el.dataset.copy
}
button.innerHTML = `
<svg class="clip" fill="#1F1627" alt="click to copy to clipboard" version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="m17.414 1.2461h41.449c3.0547 0 5.8242 1.2461 7.832 3.2539 2.0078 2.0078 3.2539 4.7812 3.2539 7.832v8.2031h12.633c3.0547 0 5.8242 1.2461 7.832 3.2539 2.0078 2.0078 3.2539 4.7812 3.2539 7.832v56.047c0 3.0508-1.2461 5.8242-3.2539 7.832-2.0078 2.0078-4.7812 3.2539-7.832 3.2539h-41.449c-3.0547 0-5.8242-1.2461-7.832-3.2539-2.0078-2.0117-3.2539-4.7812-3.2539-7.832v-8.2031h-12.633c-3.0547 0-5.8242-1.2461-7.832-3.2539-2.0078-2.0078-3.2539-4.7812-3.2539-7.832v-56.047c0-3.0547 1.2461-5.8242 3.2539-7.832 2.0078-2.0078 4.7812-3.2539 7.832-3.2539zm52.535 25.828v41.309c0 3.0508-1.2461 5.8242-3.2539 7.832-2.0078 2.0078-4.7812 3.2539-7.832 3.2539h-22.277v8.2031c0 1.2461 0.51172 2.3867 1.3398 3.2148 0.82812 0.82422 1.9648 1.3398 3.2148 1.3398h41.449c1.2461 0 2.3867-0.51172 3.2148-1.3398 0.82812-0.82812 1.3398-1.9648 1.3398-3.2148v-56.047c0-1.2461-0.51172-2.3867-1.3398-3.2148-0.82813-0.82422-1.9648-1.3398-3.2148-1.3398h-12.633zm-11.09-19.289h-41.449c-1.2461 0-2.3867 0.51172-3.2148 1.3398-0.82812 0.82812-1.3398 1.9648-1.3398 3.2148v56.047c0 1.2461 0.51172 2.3867 1.3398 3.2109 0.82813 0.82812 1.9648 1.3398 3.2148 1.3398h41.445c1.2461 0 2.3867-0.51172 3.2148-1.3398 0.82422-0.82422 1.3398-1.9609 1.3398-3.2109v-56.047c0-1.2461-0.51172-2.3867-1.3398-3.2148-0.82812-0.82812-1.9648-1.3398-3.2148-1.3398z"/>
</svg>
<svg class="check" fill="#009600" version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="m70.984 28.062-3.5312 3.5625c-9.5781 9.5977-16.891 17.613-25.781 26.688l-9.4688-8-3.8125-3.2188-6.4375 7.625 3.8125 3.25 13 11 3.5 2.9688 3.25-3.25c10.77-10.793 18.438-19.414 29-30l3.5312-3.5625z"/>
</svg>`
button.addEventListener('click',(event)=>{
navigator.clipboard.writeText(button.dataset['copy']).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
event.target.closest('button').querySelector('.clip').style.opacity=0;
event.target.closest('button').querySelector('.check').classList.add('add-check-mark')
event.target.closest('button').querySelector('.check').addEventListener("animationend", (subEvent) => {
subEvent.target.classList.remove('add-check-mark')
subEvent.target.parentNode.querySelector('.clip').style.opacity=1
});
})
el.after(button)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment