const demoArea = document.getElementById('demoArea');
const contextMenu = document.getElementById('contextMenu');
const status = document.getElementById('status');
const allMenuItems = document.querySelectorAll('.menu-item');
// Prevent default context menu and show custom menu
demoArea.addEventListener('contextmenu', (e) => {
e.preventDefault();
// Get mouse position
const x = e.clientX;
const y = e.clientY;
// Show menu
contextMenu.classList.add('active');
// Position menu at cursor
contextMenu.style.left = x + 'px';
contextMenu.style.top = y + 'px';
// Check if menu goes off screen
setTimeout(() => {
const menuRect = contextMenu.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// Adjust horizontal position if needed
if (menuRect.right > windowWidth) {
contextMenu.style.left = (windowWidth - menuRect.width - 10) + 'px';
}
// Adjust vertical position if needed
if (menuRect.bottom > windowHeight) {
contextMenu.style.top = (windowHeight - menuRect.height - 10) + 'px';
}
}, 0);
});
// Handle menu item clicks
allMenuItems.forEach(item => {
item.addEventListener('click', (e) => {
// Don't close menu if item has submenu
if (item.querySelector('.submenu')) {
e.stopPropagation();
return;
}
const action = item.dataset.action;
const actionText = item.textContent.trim();
if (action) {
// Update status
status.textContent = `Action: ${actionText}`;
status.classList.add('active');
// Hide menu
contextMenu.classList.remove('active');
// Reset status after 3 seconds
setTimeout(() => {
status.textContent = 'Waiting for action...';
status.classList.remove('active');
}, 3000);
}
});
});
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (!contextMenu.contains(e.target)) {
contextMenu.classList.remove('active');
}
});
// Close menu on escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
contextMenu.classList.remove('active');
}
});
// Prevent menu from going off screen on window resize
window.addEventListener('resize', () => {
if (contextMenu.classList.contains('active')) {
contextMenu.classList.remove('active');
}
});
// Prevent context menu on the context menu itself
contextMenu.addEventListener('contextmenu', (e) => {
e.preventDefault();
});
No comments yet. Be the first!