TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-23 20:54:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

extract LinkInput

Browse Source
This commit is contained in:
Andrea Vos 2020-07-26 13:17:10 +02:00
parent c4c6fe9b76
commit 1a042f43ea
2 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/LinkInput.vue Normal file
View File

@ -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>

21
pages/index.vue
View File

@ -94,17 +94,7 @@
</template> </template>
</div> </div>
<div class="card-footer" v-if="customise && link"> <div class="card-footer" v-if="customise && link">
<div class="input-group my-2"> <LinkInput :link="link"/>
<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>
</div> </div>
<div class="card-body border-top" v-if="getTemplate(templates, selectedTemplate.name()) && getTemplate(templates, selectedTemplate.name()).sources.length"> <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"/> <Literature :sources="getTemplate(templates, selectedTemplate.name()).sources"/>
@ -165,7 +155,6 @@
<script> <script>
import { examples, templates } from "~/src/data"; import { examples, templates } from "~/src/data";
import Compressor from "../src/compressor"; import Compressor from "../src/compressor";
import ClipboardJS from 'clipboard';
import { getTemplate } from "../src/buildTemplate"; import { getTemplate } from "../src/buildTemplate";
export default { export default {
@ -181,9 +170,6 @@
customise: false, customise: false,
} }
}, },
mounted () {
new ClipboardJS('.btn-clipboard');
},
computed: { computed: {
usedBase() { usedBase() {
const name = this.selectedTemplate.name(); const name = this.selectedTemplate.name();
@ -219,11 +205,6 @@
return process.env.baseUrl + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink); return process.env.baseUrl + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink);
}, },
}, },
methods: {
focusLink() {
setTimeout(_ => this.$refs.link.select(), 100);
},
}
} }
</script> </script>