feat: add copy to clipboard on click

also move bibtex to its own section
openskope · Oct 7, 2023 · b5f6584 · b5f6584
1 parent b4ceb16
commit b5f6584
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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>