Merge pull request #70 from hay-kot/feat/implement-copy-button

feat: add copy button to viewer

src/pasta.rs

@@ -80,6 +80,10 @@ impl Pasta {
     pub fn content_not_highlighted(&self) -> String {
         html_highlight(&self.content, "txt")
     }
+
+    pub fn content_escaped(&self) -> String {
+        self.content.replace("`", "\\`").replace("$", "\\$")
+    }
 }
 
 impl fmt::Display for Pasta {

templates/pasta.html

@@ -16,13 +16,33 @@
   <a href="/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
 </div>
 <br>
-<div style="clear: both;">
+<div class="code-container">
-  {% if args.highlightsyntax %}
+  <a role="button" id="copy-button" class="copy-button">
-  <pre><code>{{pasta.content_syntax_highlighted()}}</code></pre>
+    Copy
-  {%- else %}
+  </a>
-  <pre><code>{{pasta.content_not_highlighted()}}</code></pre>
+  <div style="clear: both;">
-  {%- endif %}
+    {% if args.highlightsyntax %}
+    <pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre>
+    {%- else %}
+    <pre><code id="code">{{pasta.content_not_highlighted()}}</code></pre>
+    {%- endif %}
+  </div>
 </div>
+
+<script>
+  const btn = document.getElementById("copy-button")
+  const content = `{{ pasta.content_escaped() }}`
+
+  btn.addEventListener("click", () => {
+    navigator.clipboard.writeText(content)
+    btn.innerHTML = "Copied"
+    setTimeout(() => {
+      btn.innerHTML = "Copy"
+    }, 1000)
+  })
+
+</script>
+
 <style>
 code-line {
   counter-increment: listing;
@@ -48,6 +68,24 @@ code-line::before {
   user-select: none;
 }
 
+.code-container {
+  position: relative;
+}
+
+.hidden {
+  display: none;
+}
+
+.copy-button {
+  position: absolute;
+  background: transparent;
+  top: 0;
+  right: 0;
+  padding: 3px;
+  margin: 3px;
+  cursor:  pointer;
+}
+
 </style>
 
 {% include "footer.html" %}