Dynamic ContextMenu

Leksydepark — Thu, 22 Feb 2024 12:34:50 +0000

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);
}

DEV Community: Leksydepark

Dynamic ContextMenu