aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--docs/customservices.md18
-rw-r--r--src/components/services/CopyToClipboard.vue85
2 files changed, 103 insertions, 0 deletions
diff --git a/docs/customservices.md b/docs/customservices.md
index fb3f2a7..65f3d4c 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -27,6 +27,7 @@ within Homer:
27 - [Proxmox](#proxmox) 27 - [Proxmox](#proxmox)
28 - [rTorrent](#rtorrent) 28 - [rTorrent](#rtorrent)
29 - [qBittorrent](#qbittorrent) 29 - [qBittorrent](#qbittorrent)
30 - [CopyToClipboard](#copy-to-clipboard)
30 31
31If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page. 32If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
32 33
@@ -317,3 +318,20 @@ servers can be found at [enable-cors.org](https://enable-cors.org/server.html).
317 torrentInterval: 5000 # Interval for updating the torrent count. 318 torrentInterval: 5000 # Interval for updating the torrent count.
318 target: "_blank" # optional html a tag target attribute 319 target: "_blank" # optional html a tag target attribute
319``` 320```
321
322## Copy to Clipboard
323
324This service displays the same information of a generic one, but shows an icon button on the indicator place (right side) you can click to get the content of the `clipboard` field copied to your clipboard.
325
326You can still provide an `url` that would be open when clicked anywhere but on the icon button.
327
328Configuration example:
329
330```yaml
331- name: "Copy me!"
332 logo: "assets/tools/sample.png"
333 subtitle: "Subtitle text goes here"
334 url: "#"
335 type: "CopyToClipboard"
336 clipboard: "this text will be copied to your clipboard"
337```
diff --git a/src/components/services/CopyToClipboard.vue b/src/components/services/CopyToClipboard.vue
new file mode 100644
index 0000000..18c4dc3
--- /dev/null
+++ b/src/components/services/CopyToClipboard.vue
@@ -0,0 +1,85 @@
1<template>
2 <Generic :item="item">
3 <template #indicator>
4 <div class="status">
5 <i
6 class="fa-regular fa-copy fa-xl"
7 :class="{ scale: animate }"
8 @click="copy()"
9 @animationend="animate = false"
10 ></i>
11 </div>
12 </template>
13 </Generic>
14</template>
15
16<script>
17import service from "@/mixins/service.js";
18import Generic from "./Generic.vue";
19
20export default {
21 name: "CopyToClipboard",
22 mixins: [service],
23 props: {
24 item: Object,
25 },
26 components: {
27 Generic,
28 },
29 data: () => ({
30 animate: false,
31 }),
32 methods: {
33 copy() {
34 navigator.clipboard.writeText(this.item.clipboard);
35 this.animate = true;
36 },
37 },
38};
39</script>
40
41<style scoped lang="scss">
42.scale {
43 -webkit-animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
44 animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
45}
46.is-light i {
47 color: black;
48}
49.is-dark i {
50 color: white;
51}
52/**
53 * ----------------------------------------
54 * animation scale-down-center
55 * ----------------------------------------
56 */
57@-webkit-keyframes scale-up {
58 0% {
59 -webkit-transform: scale(1);
60 transform: scale(1);
61 }
62 50% {
63 -webkit-transform: scale(1.25);
64 transform: scale(1.25);
65 }
66 100% {
67 -webkit-transform: scale(1);
68 transform: scale(1);
69 }
70}
71@keyframes scale-up {
72 0% {
73 -webkit-transform: scale(1);
74 transform: scale(1);
75 }
76 50% {
77 -webkit-transform: scale(1.25);
78 transform: scale(1.25);
79 }
80 100% {
81 -webkit-transform: scale(1);
82 transform: scale(1);
83 }
84}
85</style>