Update code snippets to show button on hover (#3561)

Signed-off-by: Aaron Crawfis <Aaron.Crawfis@microsoft.com>

daprdocs/assets/scss/_code.scss

@@ -1,38 +1,12 @@
 // Code formatting.
 
-.copy-code-button {
+.highlight .copy-icon {
-    color: #272822;
+    position: absolute;
-    background-color: #FFF;
+    right: 20px;
-    border-color: #0D2192;
+    top: 18px;
-    border: 2px solid;
+    opacity: 0.7;
-    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;
 }
 
-.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,7 +14,8 @@
 }
 
 .td-content {
-	// Highlighted code.
+
+    // Highlighted code.
     .highlight {
         @extend .card;
 
@@ -51,14 +26,19 @@
 
         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;
@@ -81,8 +61,8 @@
 
         max-width: 100%;
 
-        > code {
+        >code {
-	    background-color: inherit !important;
+            background-color: inherit !important;
             padding: 0;
             margin: 0;
             font-size: 100%;

daprdocs/static/js/copy-code-button.js

@@ -1,49 +1,35 @@
-function addCopyButtons(clipboard) {
+const highlightClass = document.querySelectorAll('.highlight');
-    document.querySelectorAll('pre > code').forEach(function(codeBlock) {
-        var button = document.createElement('button');
-        button.className = 'copy-code-button';
-        button.type = 'button';
-        button.innerText = 'Copy';
 
-        button.addEventListener('click', function() {
+highlightClass.forEach(element => {
-            clipboard.writeText(codeBlock.textContent).then(
+  const copyIcon = document.createElement('i');
-                function() {
+  copyIcon.classList.add('fas', 'fa-copy', 'copy-icon');
-                    button.blur();
+  copyIcon.style.color = 'white';
+  copyIcon.style.display = 'none';
+  element.appendChild(copyIcon);
 
-                    button.innerText = 'Copied!';
+  element.addEventListener('mouseenter', () => {
-                    setTimeout(function() {
+    copyIcon.style.display = 'inline';
-                        button.innerText = 'Copy';
+  });
-                    }, 2000);
-                },
-                function(error) {
-                    button.innerText = 'Error';
-                    console.error(error);
-                }
-            );
-        });
 
-        var pre = codeBlock.parentNode;
+  element.addEventListener('mouseleave', () => {
-        if (pre.parentNode.classList.contains('highlight')) {
+    copyIcon.style.display = 'none';
-            var highlight = pre.parentNode;
+    copyIcon.classList.replace('fa-check', 'fa-copy');
-            highlight.parentNode.insertBefore(button, highlight);
+  });
-        } else {
-            pre.parentNode.insertBefore(button, pre);
-        }
-    });
-}
 
-if (navigator && navigator.clipboard) {
+  copyIcon.addEventListener('click', async () => {
-    addCopyButtons(navigator.clipboard);
+    const selection = window.getSelection();
-} else {
+    const range = document.createRange();
-    var script = document.createElement('script');
+    range.selectNodeContents(element);
-    script.src =
+    selection.removeAllRanges();
-        'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js';
+    selection.addRange(range);
-    script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=';
-    script.crossOrigin = 'anonymous';
 
-    script.onload = function() {
+    try {
-        addCopyButtons(clipboard);
+      await navigator.clipboard.writeText(selection.toString());
-    };
+      console.log('Text copied to clipboard');
-
+      copyIcon.classList.replace('fa-copy', 'fa-check');
-    document.body.appendChild(script);
+      selection.removeAllRanges();
-}
+    } catch (error) {
+      console.error('Failed to copy: ', error);
+    }
+  });
+});