Different items depending the element clicked about electron-context-menu HOT 16 CLOSED

@nvrnight I'm currently using native electron menus, creating them dynamically on the on click event.

Not sure if it will help, but you can check how I use them here and here

from electron-context-menu.

@b3u I don't, I run most of the logic in the renderer process. I'm not sure you can actually get the DOM node in the main process as that's probably not serializable I guess.

from electron-context-menu.

I am looking for the same thing, did you find any solutions angrykoala?

from electron-context-menu.

It is possible to use this extension in order to provide different context menus to different items, and even updating those menus dynamically.

I'm doing it this way:

1. I'm defining multiple context menus
2. I'm using the shouldShowMenu method to ensure only the right context menu gets displayed
3. I'm mutating the menus before returing from shouldShowMenu

Here's the code:

function getTargetElement ( x, y, selector ) {
  return $(document.elementsFromPoint ( x, y )).filter ( selector )[0];
}

/* XYZ ITEMS CONTEXT MENU */

const items = [
  { label: 'Foo' },
  { label: 'Bar' }
];

contextMenu ({
  shouldShowMenu: ( event, { x, y } ) => {
    const ele = getTargetElement ( x, y, '.xyz-selector' );
    if ( !ele ) return false;
    items[0].visible = !items[0].visible; // Update the items
    return true;
  },
  prepend: () => items
});

/* FALLBACK CONTEXT MENU */

contextMenu ({
  shouldShowMenu: ( event, { x, y } ) => {
    return !!getTargetElement ( x, y, ':not(.xyz-selector)' );
  }
});

from electron-context-menu.

You can now (soon) also use the menu option to completely customize the menu however you want.

from electron-context-menu.

I tried tinkering with the prepend callback but it doesn't provide any information about the clicked element.

That's not correct. The first argument passed to prepend is a params object with that information. See the first example in the readme.

from electron-context-menu.

@fabiospampinato how do you get the document from the main process?

from electron-context-menu.

Regarding the example code above, is using x/y coords and filtering by selector the best way to go about determining if a specific element was right clicked on? This feels a little brittle to me but maybe its fine and I'm being overly paranoid?

EDIT - Actually it appears a better method for dealing with this will be possible in this PR once it is merged. #93

This will allow you to setup context menus inside the component itself. This will feel much better imo.

from electron-context-menu.

Here's a Gist of how I did it without this library in one react app: https://gist.github.com/loopmode/f1760d6562d9fa04ff73b64d0fe25651

Basically, I needed different context menus per component, so I made a hook and I pass a reference to the DOM element into the hook. Inside the hook, when handling the context menu event, I check if the event.target is either the DOM element I expect, or a child of the expected element (see L36). If it isn't - I bail out.

I hope #93 gets merged soon and I'll be happy to provide a similar hook for it. (Then I can drop the stuff from the gist in the app it comes from and use electron-context-menu there as well)

from electron-context-menu.

Thanks @loopmode this is great. Regarding the performance comment in I saw in your other gist. Do you think there will be much of a performance hit if you have say 100 elements with unique context menus?

from electron-context-menu.

I don't think so - basically it's just a bunch of plain object and event listeners.
The app where I used the approach from the gist uses the menu hook in three places: once in the root (this menu stays always attached), and then in two list pages you can navigate to.
On the list pages I've had dozens of rows (not hundreds tho), and each uses the hook. I didn't notice any performance hits so far.
I usually navigate between the two list pages, so some 30-40 menus get registered and unregistered again when navigating back and forth, and everything is snappy.

from electron-context-menu.

Regarding the example code above, is using x/y coords and filtering by selector the best way to go about determining if a specific element was right clicked on? This feels a little brittle to me but maybe its fine and I'm being overly paranoid?

There are pros and cons I think.

Regarding the use of coordinates that's how this thing fundamentally works, listening for the "contextmenu" event on the target elements instead doesn't really work any differently, you're just letting the browser/os/whatever handle the coordinates for you. There's a bug in my code above though, the x and y coordinates should be scaled by the zoom factor, which is window.outerWidth / window.innerWidth.

Regarding using a selector this is indeed somewhat brittle as it introduces a reliance on something that's probably hidden in the codebase, like you could change your target elements and forget to update the selector and things will break, I don't think in practice this is too much of a problem though. On the other hand attaching tens or hundreds of event listers to all those target elements might not be great, and using event delegation would be better for performance.

from electron-context-menu.

I don't even see how it's possible to use the x/y coordinates because the contextmenu event fires immediately but getting the element at x/y would require another round trip IPC from main to renderer and back - but contextmenu can't be made to wait while that IPC completes.

from electron-context-menu.

@sindresorhus would you be open to a PR to enable this if it added a slight delay to the menu appearing, and if so, what would be your acceptable threshold in milliseconds?

I don't think it would be very easy to cleanly implement as an optional feature. I'm also not even sure I'll ever get around to it.

from electron-context-menu.

@Slapbox I don't think that would work well in practice. The required delay would depend on the machine performance, Electron version, and other factors. The best solution is to just do all the logic in the renderer.

from electron-context-menu.

The best solution is to just do all the logic in the renderer.

I of course agree, but I don't see how without breaking Electron's security model.

from electron-context-menu.