New Copy to clipboard custom service

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:
   - [Proxmox](#proxmox)
   - [rTorrent](#rtorrent)
   - [qBittorrent](#qbittorrent)
+  - [CopyToClipboard](#copy-to-clipboard)
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
 
@@ -317,3 +318,20 @@ servers can be found at [enable-cors.org](https://enable-cors.org/server.html).
   torrentInterval: 5000 # Interval for updating the torrent count.
   target: "_blank" # optional html a tag target attribute
 ```
+
+## Copy to Clipboard
+
+This 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.
+
+You can still provide an `url` that would be open when clicked anywhere but on the icon button.
+
+Configuration example:
+
+```yaml
+- name: "Copy me!"
+  logo: "assets/tools/sample.png"
+  subtitle: "Subtitle text goes here"
+  url: "#"
+  type: "CopyToClipboard"
+  clipboard: "this text will be copied to your clipboard"
+```
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 @@
+<template>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="status">
+        <i
+          class="fa-regular fa-copy fa-xl"
+          :class="{ scale: animate }"
+          @click="copy()"
+          @animationend="animate = false"
+        ></i>
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "CopyToClipboard",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => ({
+    animate: false,
+  }),
+  methods: {
+    copy() {
+      navigator.clipboard.writeText(this.item.clipboard);
+      this.animate = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.scale {
+  -webkit-animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: scale-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.is-light i {
+  color: black;
+}
+.is-dark i {
+  color: white;
+}
+/**
+ * ----------------------------------------
+ * animation scale-down-center
+ * ----------------------------------------
+ */
+@-webkit-keyframes scale-up {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(1.25);
+    transform: scale(1.25);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes scale-up {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(1.25);
+    transform: scale(1.25);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+</style>