add copy codeblock button

Apply suggestions from code review

Co-authored-by: Danny <[email protected]>

Change to icon, change according to slice's review

2 files changed, 59 insertions, 2 deletions

diff --git a/docs/_static/copy.js b/docs/_static/copy.js
new file mode 100644
index 00000000..e0210062
--- /dev/null
+++ b/docs/_static/copy.js
@@ -0,0 +1,31 @@
+const COPY = "fa-copy";
+const COPIED = "fa-clipboard-check";
+
+const copy = async (obj) => {
+  // <div><span class="copy">  <i class="fas ...">the icon element</i>  </span><pre> code </pre></div>
+  await navigator.clipboard.writeText(obj.children[1].innerText).then(
+    () => {
+      let icon = obj.children[0].children[0];
+      icon.className = icon.className.replace(COPY, COPIED);
+      setTimeout(() => (icon.className = icon.className.replace(COPIED, COPY)), 2500);
+    },
+    (r) => alert('Could not copy codeblock:\n' + r.toString())
+  );
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  let allCodeblocks = document.querySelectorAll("div[class='highlight']");
+
+  for (let codeblock of allCodeblocks) {
+      codeblock.parentNode.className += " relative-copy";
+      let copyEl = document.createElement("span");
+      copyEl.addEventListener('click', () => copy(codeblock));
+      copyEl.className = "copy";
+
+      let copyIcon = document.createElement("i");
+      copyIcon.className = "fas " + COPY;
+      copyEl.append(copyIcon);
+
+      codeblock.prepend(copyEl);
+  }
+});
diff --git a/docs/_static/style.css b/docs/_static/style.css
index f3449dd7..e0789974 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -143,7 +143,7 @@ label.toggle input:checked + span.toggle-slider:before {
   transform: translateX(18px);
 }
 
- 
+
 div.related {
   padding: 10px 10px;
   width: 100%;
@@ -703,4 +703,30 @@ div.code-block-caption {
     background-color: transparent;
     border-left: none;
   }
-}
\ No newline at end of file
+}
+
+.relative-copy {
+  position: relative;
+}
+
+.copy {
+  cursor: pointer;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0px;
+  right: 0px;
+  border: 1px solid #C6C9CB;
+  line-height: 0.8em;
+  font-size: 0.9em;
+  font-family: monospace;
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+  border-radius: 0px 3px 0px 0px;
+  text-align: center;
+}
+
+.copy i {
+  display: inline;
+  vertical-align: middle;
+}