forked from thedevdojo/pines
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontext-menu.html
113 lines (111 loc) · 9.79 KB
/
context-menu.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<div x-data="{
contextMenuOpen: false,
contextMenuToggle: function(event) {
this.contextMenuOpen = true;
event.preventDefault();
this.$refs.contextmenu.classList.add('opacity-0');
let that = this;
$nextTick(function(){
that.calculateContextMenuPosition(event);
that.calculateSubMenuPosition(event);
that.$refs.contextmenu.classList.remove('opacity-0');
});
},
calculateContextMenuPosition (clickEvent) {
if(window.innerHeight < clickEvent.clientY + this.$refs.contextmenu.offsetHeight){
this.$refs.contextmenu.style.top = (window.innerHeight - this.$refs.contextmenu.offsetHeight) + 'px';
} else {
this.$refs.contextmenu.style.top = clickEvent.clientY + 'px';
}
if(window.innerWidth < clickEvent.clientX + this.$refs.contextmenu.offsetWidth){
this.$refs.contextmenu.style.left = (clickEvent.clientX - this.$refs.contextmenu.offsetWidth) + 'px';
} else {
this.$refs.contextmenu.style.left = clickEvent.clientX + 'px';
}
},
calculateSubMenuPosition (clickEvent) {
let submenus = document.querySelectorAll('[data-submenu]');
let contextMenuWidth = this.$refs.contextmenu.offsetWidth;
for(let i = 0; i < submenus.length; i++){
if(window.innerWidth < (clickEvent.clientX + contextMenuWidth + submenus[i].offsetWidth)){
submenus[i].classList.add('left-0', '-translate-x-full');
submenus[i].classList.remove('right-0', 'translate-x-full');
} else {
submenus[i].classList.remove('left-0', '-translate-x-full');
submenus[i].classList.add('right-0', 'translate-x-full');
}
if(window.innerHeight < (submenus[i].previousElementSibling.getBoundingClientRect().top + submenus[i].offsetHeight)){
let heightDifference = (window.innerHeight - submenus[i].previousElementSibling.getBoundingClientRect().top) - submenus[i].offsetHeight;
submenus[i].style.top = heightDifference + 'px';
} else {
submenus[i].style.top = '';
}
}
}
}"
x-init="
$watch('contextMenuOpen', function(value){
if(value === true){ document.body.classList.add('overflow-hidden') }
else { document.body.classList.remove('overflow-hidden') }
});
window.addEventListener('resize', function(event) { contextMenuOpen = false; });
"
@contextmenu="contextMenuToggle(event)" class="relative z-50 flex h-[150px] w-[300px] text-sm items-center justify-center rounded-md border border-neutral-300 border-dashed text-neutral-800">
<span class="cursor-default text-neutral-400">Right click here</span>
<template x-teleport="body">
<div x-show="contextMenuOpen" @click.away="contextMenuOpen=false" x-ref="contextmenu" class="z-50 min-w-[8rem] text-neutral-800 rounded-md border border-neutral-200/70 bg-white text-sm fixed p-1 shadow-md w-64" x-cloak>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<span>Back</span>
<span class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600">⌘[</span>
</div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none" data-disabled>
<span>Forward</span>
<span class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600">⌘]</span>
</div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<span>Reload</span>
<span class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600">⌘R</span>
</div>
<div class="relative group">
<div class="flex cursor-default select-none items-center rounded px-2 hover:bg-neutral-100 py-1.5 outline-none pl-8">
<span>More Tools</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 ml-auto"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
<div data-submenu class="absolute top-0 right-0 invisible mr-1 duration-200 ease-out translate-x-full opacity-0 group-hover:mr-0 group-hover:visible group-hover:opacity-100">
<div class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 shadow-md animate-in slide-in-from-left-1 w-48">
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Save Page As...<span class="ml-auto text-xs tracking-widest text-muted-foreground">⇧⌘S</span></div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Create Shortcut...</div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Name Window...</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Developer Tools</div>
</div>
</div>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div x-data="{ showBookmarks: true }" @click="showBookmarks=!showBookmarks; contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
<span x-show="showBookmarks" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
<span>Show Bookmarks Bar</span>
<span class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600">⌘⇧B</span>
</div>
<div x-data="{ showFullUrl: false }" @click="showFullUrl=!showFullUrl; contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
<span x-show="showFullUrl" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
<span>Show Full URLs</span>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div>
<div class="px-2 py-1.5 text-sm font-semibold text-foreground pl-8">People</div>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div x-data="{ contextMenuPeople: 'adam' }" class="relative">
<div @click="contextMenuPeople='adam'; contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
<span x-show="contextMenuPeople=='adam'" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 fill-current"><circle cx="12" cy="12" r="10"></circle></svg></span>
<span>Adam Wathan</span>
</div>
<div @click="contextMenuPeople='caleb'; contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
<span x-show="contextMenuPeople=='caleb'" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 fill-current"><circle cx="12" cy="12" r="10"></circle></svg></span>
<span>Caleb Porzio</span>
</div>
</div>
</div>
</template>
</div>