From 1a042f43eaed0f5d8ad63e8ed66030d3ca1dc277 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sun, 26 Jul 2020 13:17:10 +0200
Subject: [PATCH] extract LinkInput

---
 components/LinkInput.vue | 31 +++++++++++++++++++++++++++++++
 pages/index.vue          | 21 +--------------------
 2 files changed, 32 insertions(+), 20 deletions(-)
 create mode 100644 components/LinkInput.vue

diff --git a/components/LinkInput.vue b/components/LinkInput.vue
new file mode 100644
index 000000000..e14c5e60a
--- /dev/null
+++ b/components/LinkInput.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="input-group my-2">
+        <input class="form-control" readonly :value="link.replace('https://', '').replace('http://', '')" id="link" ref="link">
+        <div class="input-group-append">
+            <button class="btn btn-outline-secondary btn-clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink">
+                <Icon v="clipboard"/>
+            </button>
+            <a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
+                <Icon v="external-link"/>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+    import ClipboardJS from 'clipboard';
+
+    export default {
+        props: {
+            link: { required: true },
+        },
+        mounted () {
+            new ClipboardJS('.btn-clipboard');
+        },
+        methods: {
+            focusLink() {
+                setTimeout(_ => this.$refs.link.select(), 100);
+            },
+        },
+    }
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 8f2ba73ab..dccbb85d8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -94,17 +94,7 @@
                     </template>
                 </div>
                 <div class="card-footer" v-if="customise && link">
-                    <div class="input-group my-2">
-                        <input class="form-control" readonly :value="link.replace('https://', '').replace('http://', '')" id="link" ref="link">
-                        <div class="input-group-append">
-                            <button class="btn btn-outline-secondary btn-clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink">
-                                <Icon v="clipboard"/>
-                            </button>
-                            <a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
-                                <Icon v="external-link"/>
-                            </a>
-                        </div>
-                    </div>
+                    <LinkInput :link="link"/>
                 </div>
                 <div class="card-body border-top" v-if="getTemplate(templates, selectedTemplate.name()) && getTemplate(templates, selectedTemplate.name()).sources.length">
                     <Literature :sources="getTemplate(templates, selectedTemplate.name()).sources"/>
@@ -165,7 +155,6 @@
 <script>
     import { examples, templates } from "~/src/data";
     import Compressor from "../src/compressor";
-    import ClipboardJS from 'clipboard';
     import { getTemplate } from "../src/buildTemplate";
 
     export default {
@@ -181,9 +170,6 @@
                 customise: false,
             }
         },
-        mounted () {
-            new ClipboardJS('.btn-clipboard');
-        },
         computed: {
             usedBase() {
                 const name = this.selectedTemplate.name();
@@ -219,11 +205,6 @@
                 return process.env.baseUrl + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink);
             },
         },
-        methods: {
-            focusLink() {
-                setTimeout(_ => this.$refs.link.select(), 100);
-            },
-        }
     }
 </script>