Merge pull request #5 from btholt/copy-code-functionality

feature: copy code

data/copyCode.js

@@ -0,0 +1,35 @@
+function createDOMElements() {
+  const container = document.createElement("div");
+  container.innerHTML =
+    "<div class='tooltip-copy'><input type='submit' value='Copy' /></div>";
+  container.className = "div-copy";
+  return container;
+}
+
+function attachCopyCodeFunctionality(div) {
+  const elementsToClean = [];
+  document
+    .querySelectorAll("pre")
+    .forEach(function createButtonAndAttachHandlers(pre) {
+      let timeout = null;
+      const copy = div.cloneNode(true);
+      pre.appendChild(copy);
+      elementsToClean.push(pre);
+
+      copy.onclick = function copyTextToClipboard() {
+        navigator.clipboard.writeText(pre.textContent);
+        copy.classList.add("clicked");
+        clearTimeout(timeout);
+        timeout = setTimeout(function hidePopup() {
+          copy.classList.remove("clicked");
+        }, 1500);
+      };
+    });
+
+  return elementsToClean;
+}
+
+export default function createCopyCodeFunctionality() {
+  const container = createDOMElements();
+  return attachCopyCodeFunctionality(container);
+}

pages/lessons/[section]/[slug].js

@@ -4,17 +4,23 @@ import { getLesson, getLessons } from "../../../data/lesson";
 import getCourseConfig from "../../../data/course";
 import Corner from "../../../components/corner";
 import { Context } from "../../../context/headerContext";
+import createCopyCodeFunctionality from "../../../data/copyCode";
 
 export default function LessonSlug({ post }) {
   const courseInfo = getCourseConfig();
   const [_, setHeader] = useContext(Context);
+
   useEffect(() => {
     setHeader({
       section: post.section,
       title: post.title,
       icon: post.icon,
     });
-    return () => setHeader({});
+    let elementsToClean = createCopyCodeFunctionality();
+    return () => {
+      setHeader({});
+      elementsToClean = [];
+    }
   }, []);
 
   const title = post.title

styles/courses.css

@@ -530,4 +530,53 @@ pre code.hljs {
 pre code,
 pre code.hljs {
   display: block;
-}
+}
+
+pre {
+    position: relative;
+}
+
+.div-copy {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.div-copy .tooltip-copy::after {
+    content: "";
+    position: absolute;
+    right: 100%;
+    margin-right: -4px;
+    top: 60%;
+    transform: translateY(-50%);
+    border-style: solid;
+    border-width: 2px 2px 5px 8px;
+    border-color: transparent transparent transparent #444;
+    opacity: 0;
+    transition: opacity .3s;
+}
+
+.div-copy .tooltip-copy::before {
+  content: "Copied";
+  position: absolute;
+  top: 60%;
+  transform: translateY(-50%);
+  right: 100%;
+  margin-right: 5px;
+  padding: 2px 7px;
+  border-radius: 5px;
+  background: #444;
+  color: #fff;
+  text-align: center;
+  opacity: 0;
+  transition: opacity .3s;
+}
+
+.div-copy .tooltip-copy {
+    margin-right: 0.3em;
+    margin-top: 0.3em;
+}
+
+.div-copy.clicked .tooltip-copy::before, .div-copy.clicked .tooltip-copy::after {
+    opacity: 1;
+}