Context Menu WIP

src/ui/context-menu/ContextMenu.vue

@@ -11,6 +11,8 @@
 </template>
 
 <script>
+    import ContextMenuDirective from './ContextMenuDirective.js';
+
     export default {
         data: function () {
             return {

src/ui/context-menu/ContextMenuDirective.js

@@ -0,0 +1,10 @@
+import ContextMenuGesture from './ContextMenuGesture.js';
+
+export default {
+    bind(element, binding) {
+        binding.vnode.context.destroy = new ContextMenuGesture(element, binding.value);
+    },
+    unbind(){
+        
+    }
+}

src/ui/context-menu/ContextMenuGesture.js

@@ -0,0 +1,31 @@
+import ContextMenu from '../components/ContextMenu.vue';
+import Vue from 'vue';
+
+export default function ContextMenuGesture (element, object) {
+        let vm;
+        element.addEventListener('context', showContextMenu);
+
+        function showContextMenu(event){
+            vm = new Vue({
+                ...ContextMenu
+            });
+            document.body.appendChild(vm.$el);
+            document.addEventListener('click', hideContextMenu, {
+                capture: true,
+                once: true
+            });
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        function hideContextMenu() {
+            vm.destroy();
+            document.body.removeChild(vm.$el);
+        }
+
+        return function destroy() {
+            element.removeEventListener('context', this.showContextMenu);
+            document.removeEventListener('click', hideContextMenu);
+        }
+    }
+}