From 377d8a5ae080cf61b6fee2042a1fbf7d66dd9025 Mon Sep 17 00:00:00 2001 From: Aaron Crawfis Date: Fri, 16 Jun 2023 16:23:27 -0700 Subject: [PATCH] Update code snippets to show button on hover (#3561) Signed-off-by: Aaron Crawfis --- daprdocs/assets/scss/_code.scss | 56 +++++++------------ daprdocs/static/js/copy-code-button.js | 74 +++++++++++--------------- 2 files changed, 48 insertions(+), 82 deletions(-) diff --git a/daprdocs/assets/scss/_code.scss b/daprdocs/assets/scss/_code.scss index dd05e51bf1b..49ad9c8b36a 100644 --- a/daprdocs/assets/scss/_code.scss +++ b/daprdocs/assets/scss/_code.scss @@ -1,38 +1,12 @@ // Code formatting. -.copy-code-button { - color: #272822; - background-color: #FFF; - border-color: #0D2192; - border: 2px solid; - border-radius: 3px 3px 0px 0px; - - /* right-align */ - display: block; - margin-left: auto; - margin-right: 0; - - margin-bottom: -2px; - padding: 3px 8px; - font-size: 0.8em; +.highlight .copy-icon { + position: absolute; + right: 20px; + top: 18px; + opacity: 0.7; } -.copy-code-button:hover { - cursor: pointer; - background-color: #F2F2F2; -} - -.copy-code-button:focus { - /* Avoid an ugly focus outline on click in Chrome, - but darken the button for accessibility. - See https://stackoverflow.com/a/25298082/1481479 */ - background-color: #E6E6E6; - outline: 0; -} - -.copy-code-button:active { - background-color: #D9D9D9; -} .highlight pre { /* Avoid pushing up the copy buttons. */ @@ -40,25 +14,31 @@ } .td-content { - // Highlighted code. + + // Highlighted code. .highlight { @extend .card; - + margin: 0rem 0; padding: 0rem; margin-bottom: 2rem; max-width: 100%; - + + border: none; + pre { margin: 0; padding: 1rem; + border-radius: 10px; } } // Inline code - p code, li > code, table code { + p code, + li>code, + table code { color: inherit; padding: 0.2em 0.4em; margin: 0; @@ -78,11 +58,11 @@ word-wrap: normal; background-color: $gray-100; padding: $spacer; - + max-width: 100%; - > code { - background-color: inherit !important; + >code { + background-color: inherit !important; padding: 0; margin: 0; font-size: 100%; diff --git a/daprdocs/static/js/copy-code-button.js b/daprdocs/static/js/copy-code-button.js index 579d2514824..ca5d0e26e90 100644 --- a/daprdocs/static/js/copy-code-button.js +++ b/daprdocs/static/js/copy-code-button.js @@ -1,49 +1,35 @@ -function addCopyButtons(clipboard) { - document.querySelectorAll('pre > code').forEach(function(codeBlock) { - var button = document.createElement('button'); - button.className = 'copy-code-button'; - button.type = 'button'; - button.innerText = 'Copy'; +const highlightClass = document.querySelectorAll('.highlight'); - button.addEventListener('click', function() { - clipboard.writeText(codeBlock.textContent).then( - function() { - button.blur(); +highlightClass.forEach(element => { + const copyIcon = document.createElement('i'); + copyIcon.classList.add('fas', 'fa-copy', 'copy-icon'); + copyIcon.style.color = 'white'; + copyIcon.style.display = 'none'; + element.appendChild(copyIcon); - button.innerText = 'Copied!'; - setTimeout(function() { - button.innerText = 'Copy'; - }, 2000); - }, - function(error) { - button.innerText = 'Error'; - console.error(error); - } - ); - }); + element.addEventListener('mouseenter', () => { + copyIcon.style.display = 'inline'; + }); - var pre = codeBlock.parentNode; - if (pre.parentNode.classList.contains('highlight')) { - var highlight = pre.parentNode; - highlight.parentNode.insertBefore(button, highlight); - } else { - pre.parentNode.insertBefore(button, pre); - } - }); -} + element.addEventListener('mouseleave', () => { + copyIcon.style.display = 'none'; + copyIcon.classList.replace('fa-check', 'fa-copy'); + }); -if (navigator && navigator.clipboard) { - addCopyButtons(navigator.clipboard); -} else { - var script = document.createElement('script'); - script.src = - 'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js'; - script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94='; - script.crossOrigin = 'anonymous'; + copyIcon.addEventListener('click', async () => { + const selection = window.getSelection(); + const range = document.createRange(); + range.selectNodeContents(element); + selection.removeAllRanges(); + selection.addRange(range); - script.onload = function() { - addCopyButtons(clipboard); - }; - - document.body.appendChild(script); -} + try { + await navigator.clipboard.writeText(selection.toString()); + console.log('Text copied to clipboard'); + copyIcon.classList.replace('fa-copy', 'fa-check'); + selection.removeAllRanges(); + } catch (error) { + console.error('Failed to copy: ', error); + } + }); +});