diff options
| author | Igor Tolmachev <me@igorek.dev> | 2024-04-23 20:45:13 +0900 |
|---|---|---|
| committer | Igor Tolmachev <me@igorek.dev> | 2024-04-23 20:49:44 +0900 |
| commit | 622b3504520be1b3e09d5798c5e946248fcfa8da (patch) | |
| tree | 8ae9913d820c6f7c27567196f85f61bfde5f5603 | |
| parent | 93b7de928e8ab59396fcd5ac263aed37afc5ec85 (diff) | |
| download | pages-622b3504520be1b3e09d5798c5e946248fcfa8da.tar.gz pages-622b3504520be1b3e09d5798c5e946248fcfa8da.zip | |
Change copy behavior
| -rw-r--r-- | script.js | 8 | ||||
| -rw-r--r-- | style.css | 11 |
2 files changed, 5 insertions, 14 deletions
| @@ -1,16 +1,16 @@ | |||
| 1 | function copy(text, tooltip) { | 1 | function copy(text, tooltip) { |
| 2 | return () => { | 2 | return () => { |
| 3 | navigator.clipboard.writeText(text); | 3 | navigator.clipboard.writeText(text); |
| 4 | tooltip.textContent = "[copied]"; | 4 | tooltip.textContent = " []"; |
| 5 | setTimeout(() => (tooltip.textContent = "[click to copy]"), 1000); | 5 | setTimeout(() => (tooltip.textContent = " []"), 1000); |
| 6 | }; | 6 | }; |
| 7 | } | 7 | } |
| 8 | 8 | ||
| 9 | window.onload = () => { | 9 | window.onload = () => { |
| 10 | document.querySelectorAll(".copy").forEach((element) => { | 10 | document.querySelectorAll(".copy").forEach((element) => { |
| 11 | const tooltip = document.createElement("span"); | 11 | const tooltip = document.createElement("span"); |
| 12 | tooltip.classList.add("copy-tooltip"); | 12 | tooltip.classList.add("copy-button"); |
| 13 | tooltip.textContent = "[click to copy]"; | 13 | tooltip.textContent = " []"; |
| 14 | 14 | ||
| 15 | element.onclick = copy(element.attributes["copy-text"]?.value, tooltip); | 15 | element.onclick = copy(element.attributes["copy-text"]?.value, tooltip); |
| 16 | element.appendChild(tooltip); | 16 | element.appendChild(tooltip); |
| @@ -40,16 +40,7 @@ a, | |||
| 40 | } | 40 | } |
| 41 | 41 | ||
| 42 | a:active, | 42 | a:active, |
| 43 | .copy:active { | 43 | .copy:hover { |
| 44 | cursor: pointer; | 44 | cursor: pointer; |
| 45 | color: #9b859d; | 45 | color: #9b859d; |
| 46 | } | 46 | } |
| 47 | |||
| 48 | .copy > .copy-tooltip { | ||
| 49 | visibility: hidden; | ||
| 50 | margin-left: 1em; | ||
| 51 | } | ||
| 52 | |||
| 53 | .copy:hover > .copy-tooltip { | ||
| 54 | visibility: visible; | ||
| 55 | } | ||
