From b5f65844b6ac0c5cc38ddb7a5a4362802688f33f Mon Sep 17 00:00:00 2001
From: Allen Lee <alee@users.noreply.github.com>
Date: Fri, 6 Oct 2023 21:47:10 -0700
Subject: [PATCH] feat: add copy to clipboard on click

also move bibtex to its own section
---
 app/components/Citation.vue   | 24 ++++++++++++++++++++++--
 app/components/TermsOfUse.vue |  1 +
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/components/Citation.vue b/app/components/Citation.vue
index 7ad37e5..9dd6ad8 100644
--- a/app/components/Citation.vue
+++ b/app/components/Citation.vue
@@ -25,8 +25,13 @@
           </p>
 
           <h2>Example Citation</h2>
-          <blockquote class="blockquote">{{ citationText }}</blockquote>
-          <blockquote class="blockquote">{{ citationBibTex }}</blockquote>
+          <blockquote class="blockquote" @click="copyToClipboard">
+            {{ citationText }}
+          </blockquote>
+          <h2>BibTeX</h2>
+          <blockquote class="blockquote" @click="copyToClipboard">
+            {{ citationBibTex }}
+          </blockquote>
 
           <h2>Contact us</h2>
           <p class="text-body-1 px-2">
@@ -36,6 +41,12 @@
               skope-team@googlegroups.com
             </a>
           </p>
+          <v-snackbar v-model="clipboardMessage" timeout="6000">
+            <p class="text-center">
+              Citation text copied to clipboard. Use <kbd>Ctrl + V</kbd> to
+              paste.
+            </p>
+          </v-snackbar>
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -49,6 +60,7 @@ import { CITATION_TXT, CITATION_BIB } from "@/store/modules/_constants";
 @Component()
 class Citation extends Vue {
   showCitation = false;
+  clipboardMessage = false;
 
   get citationText() {
     return CITATION_TXT;
@@ -57,6 +69,14 @@ class Citation extends Vue {
   get citationBibTex() {
     return CITATION_BIB;
   }
+
+  copyToClipboard(evt, data) {
+    const srcElement = evt.srcElement;
+    const citationText = srcElement.innerText;
+    navigator.clipboard.writeText(citationText).then(() => {
+      this.clipboardMessage = true;
+    });
+  }
 }
 
 export default Citation;
diff --git a/app/components/TermsOfUse.vue b/app/components/TermsOfUse.vue
index 417da67..ba33e4d 100644
--- a/app/components/TermsOfUse.vue
+++ b/app/components/TermsOfUse.vue
@@ -36,6 +36,7 @@
 
           <h2>Example Citation</h2>
           <blockquote class="blockquote">{{ citationText }}</blockquote>
+          <h2>BibTeX</h2>
           <blockquote class="blockquote">{{ citationBibTex }}</blockquote>
 
           <h2>Contact us</h2>