nkappler / ctxmenu Goto Github PK

In the callback beforeRender I can get the current target with event.currentTarget.
Is there an elegant way to retrieve it when a "Action Item" is clicked?

Hello. Our layout designer still faces a css from js problem. This css has the highest priority. Therefore, we have to adjust the js file. In js, we've temporarily cleared the styles like this:

".ctxmenu": {},
".ctxmenu li": {}

etc.

Therefore, you need to somehow solve this problem. It's probably best to clear everything like we did. The js file is located at the bottom of the page and therefore there is no other css after it. This leads to the highest priority js-css

It seems to me you can add a setting to the initialization to use inline css. And by default use css in a separate file.

Wondering if it's possible to open the menu and select options via the keyboard, like up/down arrows and Enter...

the font from google is included statically on the homepage, not via javascript, which means if you only inlcude the js file, the fonts are not loaded.

I was expecting this modified example to do what you want:

ctxmenu.attach("#body", [
            {
                text: "Parent",
                subMenu: function beforeOpenSubMenu() {
                    alert("beforeOpenSubmenu");

                    return [
                        {
                            text: "child",
                            action: (event) => {
                                const childListElement = event.target.parentElement;
                                const submenu = childListElement.parentElement;
                                const parentListElement = submenu.parentElement;
                                console.log(parentListElement.querySelector("span").innerText);
                            }
                        }
                    ];
                }
            }
        ], function beforeOpen(menu) {
            alert("BeforeOpen")

            return menu;
        });

You can pass a function as a third parameter to the attach method, which will be called before the root menu opens.
Note that the function receives the menu definition as a parameter and also has to return it.
You can modify it as you please, but this function needs to return a valid menu definition.

As per my own documentation, you should also be able to pass a function to generate the submenu (beforeOpenSubMenu), however the Parent list item ends up being disabled.
It's been a while that I wrote this code and honestly the test coverage is at best mediocre, since it depends on manual testing,
but I am pretty sure that this is a bug.

The beforeOpenSubMenu should be called just before the submenu is being opened, but currently it is never called.
I've created a new bug #45 to track this.

Originally posted by @nkappler in #44 (comment)

if we want selectable items (i.e. checkboxes), how would they handle icons?

this is not a common use case, but still it's a bug

The postinstall script introduced by bdc40a2 will cause errors when installing version 1.4.4 into any project, as the util/convertStyles.js file is missing in the published package.

I assume the postinstall script is only required when running / building ctxmenu, but not when installing it as a dependency?

The x,y positions are not calculated correctly when the element is outside the visible area (scrollbar is active)

Check out:
https://test.nubuilder.cloud/index.php?u=test&p=nutest&f=618b6d9e9485c80

It must have to do something with scrollHeight, offsetHeight, clientHeight but I'm not sure how to address this issue.
https://javascript.info/size-and-scroll-window

simple solution would be to set .innerHtml to the supplied value instead of wrapping it in a span.

Having an extra item to do this would be nicer though and also backwards compatible.

Supplying a DOM Node object instead of an html string should also be possible.

see #12

add documentation to type declarations.
Would be nice if the API section in readme.md could be generated automatically

What is the recommended way to delete a menu item in the beforeRender callback?

function beforeRenderCallback(menu, event) {

	for (let i = 0; i < menu.length; i++) {
			if ( /* Some condition here */) { 
				// delete/remove menu[i]
			}
	}

	return menu;

}

when the context menu is open, clicking a disabled item or right-clicking inside the context menu should not close/retrigger it.

It seems like the scrollbar is not taken into account, causing long items to wrap, which means the menu ends up larger than expected, potentially getting cropped at the bottom.

What about adding user-select: none to ctxmenu li?

".ctxmenu li": {
	margin: "1px 0",
	display: "block",
	position: "relative",
	"-moz-user-select": "none",
	"-webkit-user-select": "none",
	"-ms-user-select": "none",
	"user-select": "none"
},

On a mobile device, the arrow symbols (sub menu)
are not shown. Instead, a small rectangle is displayed.

Tested with
https://nkappler.de/ctxmenu/

The context menu does not close when the user hits the escape key. If the user does not want to select an option from the menu they must click outside the menu to get rid of the menu, and may inadvertently change something in the process (for example clicking on another column and changing the sort).

I would like the escape key to close the context menu, just as the escape key can be used to close browser context menus.

Sure, so I have a KonvaJS dashboard; now until i found this context menu library, i used to build my own menus to allow the user to interact with the dashboard; adding elements, modifying or deleting.

now the cool thing about mouseenter events is mainly with delete functionalities; if a user opened a context-menu and hovers over the delete item, i highlight and blink certain elements to show what will get deleted if the selected item is deleted, now once its clicked, a popup shows to confirm the deletion, but that blinking animation prior to deleting is what i had using my manual menus and its what i am trying to achieve here.

I didnt get the chance to go deep in the ctxmenu code, but I would be happy to open a PR if i get the chance to review it.

Thanks :)

Originally posted by @max-rh in #44 (comment)

Sometimes the trigger button that is clicked to show the context menu is very long, in my case.

So if I click near the middle of it, the menu still appears on the top.

Wondering if there's a way to make the context menu appear near the location of the trigger click?

Observed Behaviour

When a submenu with several items is opened from a menu that already appears at the bottom of the viewport, the submenu is displayed incorrectly the first time.

Reproducer

I've made a simple html file to reproduce the issue if needed
example-ctxmenu.zip

Possible fixes

It appears that when the direction is set to "u", the code no longer takes the height of the submenu into account when calculating the vertical position.

hi! just stumbled upon your project and was wondering if there was a way to override the ctxmenu from showing, and doing the default browser context menu when control is held down. this seems to be working properly on Firefox, but on Chromium-based browsers, it doesn't work properly.

currently there's no good way to set the tabindex of the menu items (or other attributes for that matter)

preferrably this should happen automatically.

Keyboard shortcuts should be added to provide easier navigation for people with disabilities.

• Esc: Closes the opened ContextMenu.
• Enter: Selects the focused item.
• Up: Navigates up or to the previous menu item.
• Down: Navigates down or to the next menu item.
• Left: Close the current sub menu and navigates to the parent menu.
• Right: Navigates and open the next sub menu.

If the menu is too large or the screen too small, you sometimes have to scroll to see the whole menu. However, the menu is closed when you scroll.
How about adding an option to disable the "scroll" addEventListener?

I need to perform something when the contextual menu is closed even without any action taken. I used a MutationObserver on my side right now to achieve that but find it a bit ugly. Would be nice to be able to know when a menu displayed with ctxmenu.show is hidden.

In your demo (index.html), if you set the focus on the "Click this button" button (without clicking it) and hit Enter, the menu is opened at a wrong position.
Maybe check if a key is pressed and then use event.target to determine the source element.

The last menu item with text "e.g. Cursor Position: X:184 / Y:850" appears off screen when the context menu is opened the first time.
When the menu is opened again, the item is visible (the context menu top position is further up).

The x,y positions are not calculated correctly when a transform e.g. scale(6.9) or similar is applied.

Check out this demo and do a single tap on a "test" button.

Also open the link on a mobile phone and you'll see that the ctxmenu appears much further below on the screen.

Maybe add an option to make an Action Item, Submenu Item appear bold. This can be used to highlight an item.
Of course you can also assign tags like to the HTML but it is probably more elegant to have an option.

bold?: boolean | () => boolean  // default false

BTW, it's a great, flexible an lightweight library!
It's been included in nubuilder.com:

Newly merged changes immediately reflect on github pages and sources downloaded from there.
They should be synced with the latest release instead.

Very good work. But the documentation is weak. More examples are needed. You also need beautiful skins. It's not a problem for me, but people will need it. I figured it out, but not right away. I hope the project will develop. We are preparing to integrate this menu into our project.

Are you also experiencing an issue where, upon downloading the zip file of the latest release, Windows Defender flags it as dangerous, citing "This program executes commands from an attacker" and the file gets deleted?

Hi there,

first of all: great work on this plugin!

I was looking for an alternative for our current context menu library an came across this library. It has almost everything I was looking for.

One suggestion / idea:

In our app, we are integrating a single context menu implementation with a couple of other controls ( tables, scheduling charts, maps, ...).
In those cases it might not be possible or at least quite hard to setup a context menu for a specific target. Usually the libraries we use for the actual component already provide some sort of event handling for opening a custom context menu.

So for this to work, it would be great if your plugin would provide an additional api to show a context menu, based only on an already existing contextmenu event.

I did a simple implementation of this idea
jkorrek@18196b4
basically adding a show and close function to create (and close) a context menu "on demand" without attaching to specific targets.

Is this something you would be interested in for this plugin? If so I could clean up the code, extend the docs and open a pull request.

How about changing #aaa to #dadce0 ? Chrome uses the same color in its context menu. IMO it looks more decent than the darker greyish color.

 .ctxmenu li.divider {
	border-bottom: 1px solid #dadce0 ;
}

Add documentation for the closeMenu method:

E.g. The closeMenu method is used to close an open context menu.

Hello !

I was looking for a plugin generating context menus but without jQuery and I found yours.
It's really nice and it does almost everything I need.

Could you add a standard property "classes" that would be added to item ? To the generated ideally.
Something like that :

items.push({
    text: "Test",
    classes : "class1 class2 class3", // OR ["class1","class2","class3"]
    action: () => console.log('test')
});

It would render something like that :

<ul class="ctxmenu" style="...">
    <li class="interactive">
        <span class="class1 class2 class3">Test</span>
    </li>
</ul>

I know I can do it with the property "html" but it would be easier with a "classes" property.

Thanks by advance,
John

Hi there,

Thanks for the great context menu library, finally a flexible library.

I have one request, is there a way to access the parent menu selected Item ?

I have a scenario where i have multiple sub-menues but once the item in the last sub-menu is selected i need the callback function in it to access the targets from the parent menus that caused the sub-menues to open.

is there a way to achieve that ? cause i noticed that the target object right now doesn't include information about the parent menu item that opened this submenu

Hi, thanks for the library. I have a question.
Say one wants the context menu to appear when elements that have a certain similar class are clicked, eg, certain table cells.
Currently, using a class target (eg, .target), only attaches the context menu to the first match it finds.