Merge pull request #4 from Cito/nicer-buttons

Use nice, unobtrusive GitHub-styled icon as button

.gitignore

@@ -8,6 +8,7 @@ package-lock.json
 
 # build
 main.js
+styles.css
 *.js.map
 
 # obsidian

main.ts

@@ -1,67 +1,80 @@
-import { App, Plugin, PluginManifest, MarkdownView  } from "obsidian";
+import { App, Plugin, PluginManifest } from "obsidian";
+import "./styles.scss";
 
-const excludeLangs = [
-    "todoist"
-];
+const excludeLangs = ["todoist"];
 
-export default class CMSyntaxHighlightPlugin extends Plugin {
-    constructor(app: App, pluginManifest: PluginManifest) {
-        super(app, pluginManifest);
-    }
+const svgCopy =
+  '<svg height="16" width="16" viewBox="0 0 16 16" version="1.1" data-view-component="true" class="copy"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>';
+const svgSuccess =
+  '<svg height="16" width="16" viewBox="0 0 16 16" version="1.1" data-view-component="true" class="copy-success"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
 
-    async onload() {
-        this.registerInterval(
-            window.setInterval(this.injectButtons.bind(this), 1000)
-        );
-    }
+export default class CMSyntaxHighlightPlugin extends Plugin {
+  constructor(app: App, pluginManifest: PluginManifest) {
+    super(app, pluginManifest);
+  }
 
-    injectButtons() {
-        this.addCopyButtons(navigator.clipboard);
-    }
+  async onload() {
+    this.registerInterval(
+      window.setInterval(this.injectButtons.bind(this), 1000)
+    );
+  }
 
-    addCopyButtons(clipboard:any) {
-        document.querySelectorAll('pre > code').forEach(function (codeBlock) {
-            var pre = codeBlock.parentNode;
+  injectButtons() {
+    this.addCopyButtons(navigator.clipboard);
+  }
 
-            //check for excluded langs
-            for ( let lang of excludeLangs ){
-                if (pre.classList.contains( `language-${lang}` ))
-                return;
-            }
+  addCopyButtons(clipboard: any) {
+    document
+      .querySelectorAll("pre > code")
+      .forEach((codeBlock: HTMLElement) => {
+        const pre = codeBlock.parentNode as HTMLPreElement;
 
-            //dont add more than once
-            if (pre.parentNode.classList.contains('has-code-copy-button')) {
-                return;
-            }
+        // check for excluded langs
+        if (
+          excludeLangs.some((lang) =>
+            pre.classList.contains(`language-${lang}`)
+          )
+        ) {
+          return;
+        }
 
-            pre.parentNode.classList.add('has-code-copy-button');
+        const parent = pre.parentNode as HTMLDivElement;
 
-            var button = document.createElement('button');
-            button.className = 'code-copy-button';
-            button.type = 'button';
-            button.innerText = 'Copy';
+        // don't add more than once
+        if (parent.classList.contains("has-code-copy-button")) {
+          return;
+        }
 
-            button.addEventListener('click', function () {
-                //get the code snippet
-                var copied_text = codeBlock.innerText;
-                //remove the last trailing character (which is a newline)
-                copied_text = copied_text.substring(0, copied_text.length - 1);
-                //write to clipboard
-                clipboard.writeText(copied_text).then(function () {
-                    //Chrome doesn't seem to blur automatically, leaving the button in a focused state.
-                    button.blur();
+        parent.classList.add("has-code-copy-button");
 
-                    button.innerText = 'Copied';
-                    setTimeout(function () {
-                        button.innerText = 'Copy';
-                    }, 2000);
+        const button = document.createElement("div");
+        button.className = "code-copy-button";
+        button.setAttribute("aria-label", "Copy");
+        button.innerHTML = svgCopy;
 
-                }, function (error) {
-                    button.innerText = 'Error';
-                });
-            });
-
-            pre.appendChild(button);
+        button.addEventListener("click", function () {
+          // get the code snippet
+          var copiedText = codeBlock.innerText;
+          // remove the last trailing character (which is a newline)
+          copiedText = copiedText.substring(0, copiedText.length - 1);
+          // write to clipboard
+          clipboard.writeText(copiedText).then(
+            () => {
+              /* Chrome doesn't seem to blur automatically,
+                 leaving the button in a focused state. */
+              button.blur();
+              button.innerHTML = svgSuccess;
+              setTimeout(function () {
+                button.innerHTML = svgCopy;
+              }, 2000);
+            },
+            () => {
+              button.innerText = "Error!";
+            }
+          );
         });
-    }
+
+        pre.appendChild(button);
+      });
+  }
 }

package.json

@@ -11,13 +11,15 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^18.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-typescript": "^8.2.1",
-    "@types/node": "^14.14.37",
     "obsidian": "^0.12.0",
-    "rollup": "^2.32.1",
-    "tslib": "^2.2.0",
-    "typescript": "^4.2.4"
+    "@types/node": "^16.7.10",
+    "typescript": "^4.4.2",
+    "tslib": "^2.3.1",
+    "sass": "^1.38.2",
+    "rollup": "^2.56.3",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "rollup-plugin-scss": "^3.0.0"
   }
 }

rollup.config.js

@@ -1,8 +1,9 @@
 import typescript from '@rollup/plugin-typescript';
 import {nodeResolve} from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import scss from 'rollup-plugin-scss';
 
-const isProd = (process.env.BUILD === 'production');
+const isProd = process.env.BUILD === 'production';
 
 const banner = 
 `/*
@@ -26,5 +27,6 @@ export default {
     typescript(),
     nodeResolve({browser: true}),
     commonjs(),
+    scss({output: 'styles.css'}),
   ]
 };

styles.scss

@@ -0,0 +1,38 @@
+.code-copy-button {
+  display: none;
+  margin: 0 0 0 auto;
+  padding: 4px;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  svg.copy path {
+    fill: var(--text-faint);
+  }
+
+  svg.copy-success path {
+    fill: var(--interactive-success);
+  }
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+    svg path {
+      fill: var(--text-accent-hover);
+      transition: all ease 0.3s;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.has-code-copy-button pre {
+  position: relative;
+  &:hover {
+    .code-copy-button {
+      display: block;
+    }
+  }
+}