Make the copy button nicer using an SVG icon

tdharris · Dec 18, 2020 · e6c995d · e6c995d
1 parent 8923243
commit e6c995d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 44 deletions.
diff --git a/main.ts b/main.ts
@@ -5,6 +5,8 @@ const excludeLangs = [
   "todoist"
 ];
 
+const svgCopy = '<svg viewBox="0 0 100 100" width="20" height="20" class="documents"><path fill="currentColor" stroke="currentColor" d="M74,4c-0.1,0-0.2,0-0.3,0H40v11.5l4,4V8h28v20h20v48H64v4h32V26.3c0-0.2,0-0.4,0-0.6v-0.5l-0.4-0.4 c-0.1-0.1-0.2-0.3-0.4-0.4c0,0,0,0,0,0L75.6,4.8c-0.1-0.1-0.2-0.3-0.4-0.4L74.8,4h-0.5C74.2,4,74.1,4,74,4L74,4z M76,10.8L89.2,24 H76V10.8z M38,20c-0.1,0-0.2,0-0.3,0H4v76h56V42.3c0-0.2,0-0.4,0-0.6v-0.5l-0.4-0.4c-0.1-0.1-0.2-0.3-0.4-0.4L39.6,20.7 c-0.1-0.1-0.2-0.3-0.4-0.4L38.8,20h-0.5C38.2,20,38.1,20,38,20z M8,24h28v20h20v48H8L8,24z M40,26.8L53.2,40H40V26.8z M60.5,36 l4,4H84v-4L60.5,36z M64,48v4h12v-4H64z M16,52v4h32v-4H16z M64,60v4h20v-4H64z M16,64v4h24v-4H16z M16,76v4h32v-4H16z"></path></svg>';
+
 
 export default class CMSyntaxHighlightPlugin extends Plugin {
 
@@ -26,42 +28,45 @@ export default class CMSyntaxHighlightPlugin extends Plugin {
   }
 
   addCopyButtons(clipboard:any) {
-    document.querySelectorAll('pre > code').forEach(function (codeBlock) {
+    document.querySelectorAll('pre > code').forEach(function (codeBlock: HTMLElement) {
 
-      var pre = codeBlock.parentNode;
+      const pre = codeBlock.parentNode as HTMLPreElement;
 
       // check for excluded langs
       for ( let lang of excludeLangs ){
-        if (pre.classList.contains( `language-${lang}` ))
+        if (pre.classList.contains(`language-${lang}`))
           return;
       }
 
-      // Dont add more than once
-      if (pre.parentNode.classList.contains('has-copy-button')) {
+      const parent = pre.parentNode as HTMLDivElement;
+
+      // don't add more than once
+      if (parent.classList.contains('has-copy-button')) {
         return;
       }
-      pre.parentNode.classList.add( 'has-copy-button' );
 
-        var button = document.createElement('button');
-        button.className = 'copy-code-button';
-        button.type = 'button';
-        button.innerText = 'Copy';
-
-        button.addEventListener('click', function () {
-            clipboard.writeText(codeBlock.innerText).then(function () {
-                /* Chrome doesn't seem to blur automatically,
-                   leaving the button in a focused state. */
-                button.blur();
-
-                button.innerText = 'copied!';
-
-                setTimeout(function () {
-                    button.innerText = 'copy';
-                }, 2000);
-            }, function (error) {
-                button.innerText = 'Error';
-            });
-        });
+      parent.classList.add('has-copy-button');
+
+      const button = document.createElement('div');
+      button.className = 'copy-code-button';
+      button.setAttribute('aria-label', 'Copy code block');
+      button.innerHTML = svgCopy;
+
+      button.addEventListener('click', function () {
+          clipboard.writeText(codeBlock.innerText).then(function () {
+              /* Chrome doesn't seem to blur automatically,
+                  leaving the button in a focused state. */
+              button.blur();
+
+              button.innerText = 'Code has been copied!';
+
+              setTimeout(function () {
+                  button.innerHTML = svgCopy;
+              }, 2000);
+          }, function () {
+              button.innerText = 'An error occurred!';
+          });
+      });
 
         pre.appendChild(button);
 

diff --git a/styles.scss b/styles.scss
@@ -1,8 +1,6 @@
 
 .copy-code-button {
-  color: var(--background-primary);
-  background-color: var(--text-faint);
-  border-radius: 1px 1px 0px 0px;
+  color: var(--text-faint);
 
   /* right-align */
   display: block;
@@ -16,23 +14,15 @@
   position: absolute;
   top: 0px;
   right: 0px;
-}
-
-.copy-code-button:hover {
-  cursor: pointer;
-  background-color: var(--text-normal);
-}
 
-.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: var(--text-normal);
-  outline: 0;
-}
+  &:hover, &:active {
+    cursor: pointer;
+    color: var(--interactive-accent-hover);
+  }
 
-.copy-code-button:active {
-  background-color: var(--text-normal);
+  &:focus {
+    outline: 0;
+  }
 }
 
 .highlight pre {