Client - improve calendar display on desktop and mobile (wip)

fittrackee_client/src/directives.ts

@@ -0,0 +1,27 @@
+import { Directive, DirectiveBinding } from 'vue'
+
+interface ClickOutsideHTMLElement extends HTMLElement {
+  clickOutsideEvent?: (event: MouseEvent | TouchEvent) => void
+}
+
+export const clickOutsideDirective: Directive = {
+  mounted: (
+    element: ClickOutsideHTMLElement,
+    binding: DirectiveBinding
+  ): void => {
+    element.clickOutsideEvent = function (event) {
+      if (!(element === event.target || element.contains(<Node>event.target))) {
+        binding.value(event)
+      }
+    }
+    document.body.addEventListener('click', element.clickOutsideEvent)
+    document.body.addEventListener('touchstart', element.clickOutsideEvent)
+  },
+  unmounted: function (element: ClickOutsideHTMLElement): void {
+    if (element.clickOutsideEvent) {
+      document.body.removeEventListener('click', element.clickOutsideEvent)
+      document.body.removeEventListener('touchstart', element.clickOutsideEvent)
+      element.clickOutsideEvent = undefined
+    }
+  },
+}