From 59c07a85b24649832c648be1aa91a6c580a33000 Mon Sep 17 00:00:00 2001
From: Ivan Dossi <ivan.dossi@knobs.it>
Date: Mon, 6 Sep 2021 14:15:00 +0200
Subject: [PATCH] feat(UI): Introducing new component to apply a custom cursor
 to a specific area of the DOM

---
 .../ui/CustomCursorArea/CustomCursorArea.html |  4 +++
 .../ui/CustomCursorArea/CustomCursorArea.less | 33 +++++++++++++++++++
 .../ui/CustomCursorArea/CustomCursorArea.vue  | 31 +++++++++++++++++
 3 files changed, 68 insertions(+)
 create mode 100644 components/ui/CustomCursorArea/CustomCursorArea.html
 create mode 100644 components/ui/CustomCursorArea/CustomCursorArea.less
 create mode 100644 components/ui/CustomCursorArea/CustomCursorArea.vue

diff --git a/components/ui/CustomCursorArea/CustomCursorArea.html b/components/ui/CustomCursorArea/CustomCursorArea.html
new file mode 100644
index 0000000000..f86ff66b8c
--- /dev/null
+++ b/components/ui/CustomCursorArea/CustomCursorArea.html
@@ -0,0 +1,4 @@
+<div id="custom-cursor-area" @mouseover="hideCursor = false" @mouseleave="hideCursor = true">
+    <div v-if="!hideCursor" id="custom-cursor" ref="point" :style="cursorPoint"></div>
+    <slot />
+</div>
\ No newline at end of file
diff --git a/components/ui/CustomCursorArea/CustomCursorArea.less b/components/ui/CustomCursorArea/CustomCursorArea.less
new file mode 100644
index 0000000000..7979cdffea
--- /dev/null
+++ b/components/ui/CustomCursorArea/CustomCursorArea.less
@@ -0,0 +1,33 @@
+#custom-cursor {
+  top: 0;
+  left: 0;
+  position: fixed;
+  width: 30px;
+  height: 30px;
+  pointer-events: none;
+  user-select: none;
+  border-radius: 100%;
+  z-index: 55555555;
+  backface-visibility: hidden;
+  will-change: transform;
+  box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
+  -webkit-animation: pulse 2s linear 1s infinite;
+  background: -webkit-radial-gradient(
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.4),
+    rgba(255, 255, 255, 0.7)
+  );
+  opacity: 0.4;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
+  }
+  50% {
+    box-shadow: 0 0 20px #fff, inset 0 0 18px #fff;
+  }
+  100% {
+    box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
+  }
+}
diff --git a/components/ui/CustomCursorArea/CustomCursorArea.vue b/components/ui/CustomCursorArea/CustomCursorArea.vue
new file mode 100644
index 0000000000..f10178f1ca
--- /dev/null
+++ b/components/ui/CustomCursorArea/CustomCursorArea.vue
@@ -0,0 +1,31 @@
+<template src="./CustomCursorArea.html"></template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return { xChild: 0, yChild: 0, xParent: 0, yParent: 0, hideCursor: true }
+  },
+  computed: {
+    cursorPoint(): string {
+      return `transform: translateX(${this.xChild - 15}px) translateY(${
+        this.yChild - 15
+      }px) translateZ(0) translate3d(0, 0, 0);`
+    },
+  },
+  methods: {
+    moveCursor(e: Event | any) {
+      this.xChild = e.clientX
+      this.yChild = e.clientY
+      setTimeout(() => {
+        this.xParent = e.clientX - 15
+        this.yParent = e.clientY - 15
+      }, 1000)
+    },
+  },
+  mounted() {
+    document.addEventListener('mousemove', this.moveCursor)
+  },
+})
+</script>
+<style scoped lang="less" src="./CustomCursorArea.less"></style>