Skip to content

Commit

Permalink
feat: cell context menu
Browse files Browse the repository at this point in the history
  • Loading branch information
aymanalhattami committed Apr 23, 2024
1 parent 0e1be32 commit a5b62f2
Showing 1 changed file with 52 additions and 52 deletions.
Original file line number Diff line number Diff line change
@@ -1,64 +1,64 @@
<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="
window.addEventListener('resize', function(event) { contextMenuOpen = false; });
"
@contextmenu="contextMenuToggle(event)" class="relative z-50 w-full">
<div x-data="contextMenuComponent()"
x-init="init()"
@contextmenu="contextMenuToggle($event)"
@close-other-menus.window="handleCloseOtherMenus($event)"
class="relative z-50 w-full">

<span class="cursor-default">
@include('filament-tables::columns.text-column')
</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">
<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>
</template>
</div>

<script>
function contextMenuComponent() {
return {
contextMenuOpen: false,
contextMenuToggle: function(event) {
event.preventDefault();
this.contextMenuOpen = true;
this.$dispatch('close-other-menus', { id: this.$el });
this.$nextTick(() => {
this.calculateContextMenuPosition(event);
});
},
calculateContextMenuPosition: function(clickEvent) {
const menu = this.$refs.contextmenu;
const menuHeight = menu.offsetHeight;
const menuWidth = menu.offsetWidth;
const top = clickEvent.clientY + menuHeight > window.innerHeight ?
window.innerHeight - menuHeight :
clickEvent.clientY;
const left = clickEvent.clientX + menuWidth > window.innerWidth ?
clickEvent.clientX - menuWidth :
clickEvent.clientX;
menu.style.top = `${top}px`;
menu.style.left = `${left}px`;
},
handleCloseOtherMenus: function(event) {
if (event.detail.id !== this.$el) {
this.contextMenuOpen = false;
}
},
init: function() {
window.addEventListener('resize', () => { this.contextMenuOpen = false; });
}
}
}
</script>

0 comments on commit a5b62f2

Please sign in to comment.