Hello Everyone, I am currently working on a project with an SVG layout for building that involves contextMenu, and the contextMenu needs to show the name of the clicked space at the first child of its list because a data attribute is in use.
I need help on this project to be able to display the name of the clicked svg at the first list of the contextMenu.
function handleContextMenu(event) {
event.preventDefault();
// Close any open context menu
const openContextMenu = document.querySelector(".context-menu");
if (openContextMenu) {
openContextMenu.remove();
}
const posX = event.pageX;
const posY = event.pageY;
let dataName = this.getAttribute("data-name");
let menuItems;
if (this.classList.contains("officeArea")) {
menuItems = [dataName,"Reception", "Creative", "BD", "Conference-Room","Procurement", "Head-BD","Finance","Director", "MD-PA","MD","Admin","IT"];
} else {
menuItems = [dataName,"Restroom","Creative-Lobby", "Walkway", "Stairs", "Procurement-Store","Game-Arena"];
}
const contextMenu = createContextMenu(menuItems);
contextMenu.style.left = (posX - 1) + 'px';
contextMenu.style.top = ( posY - 15) + 'px';
contextMenu.style.display = 'block';
document.body.append(contextMenu);
}
Top comments (0)