Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Access parent menu selected target #44

Closed
max-rh opened this issue Sep 4, 2023 · 10 comments
Closed

Access parent menu selected target #44

max-rh opened this issue Sep 4, 2023 · 10 comments

Comments

@max-rh
Copy link

max-rh commented Sep 4, 2023

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
@nkappler
Copy link
Owner

nkappler commented Sep 4, 2023 •
edited
Loading

Hi Max,

every submenu is a direct ChildElement of the parent list item that it belongs to.
Here's an example of the generated DOM:

<ul class="ctxmenu" style="position: fixed; left: 646px; top: 493px;">
  <li title="" class="interactive"><span>Add marker</span></li>
  <li title="" class="interactive"><span>Delete all markers</span></li>
  <li title="" class="interactive submenu">
    <span>Go to marker</span>
    <ul class="ctxmenu" style="position: fixed; left: 501.406px; top: 539px;">
      <li title="" class="interactive"><span>"New Marker"</span></li>
    </ul>
  </li>
</ul>

This means that while there is no dedicated API for this, you can achieve this via the DOM:

<body id="body" style="width: 100vw; height: 100vh;">
    <script>
        ctxmenu.attach("#body", [
            {
                text: "Parent",
                subMenu: [
                    {
                        text: "child",
                        action: (event) => {
                            const childListItem = event.target.parentElement;
                            const submenu = childListItem .parentElement;
                            const parentListItem = submenu.parentElement;
                            console.log(parentListItem );
                        }
                    }
                ]
            }
        ])
    </script>
</body>

Note that a default menu item has an extra span to wrap the text, hence the extra .parentElement after event.target.

You might need to modify this example a bit, depending on which type of item you are trying to achieve this, but it is totally doable 😊
Please let me know if you need further assistance.

Happy Coding
-Nikolaj

@max-rh
Copy link
Author

max-rh commented Sep 4, 2023

@nkappler Thanks for the fast response, you rock !

so I am trying to access the text of the parent item, now in your example parentListItem.innerText contains the parent item text plus all the current submenu items concatenated together, lets say the selected parent item is "test" and the sub-menu after that have the items (a,b,c), that innerText is "testabc", now i found a hacky way to extract that text from the parent menu within parentListItem, which is parentListItem.firstChild.innerText, so I am good for now.

would appreciate your advice if there is more suitable way to access the parent menu selected item text

Thanks.

  • Max

@nkappler
Copy link
Owner

nkappler commented Sep 4, 2023

Hi Max,

parentListItem.firstChild.innerText should work reliably, however if you want to be extra sure, I'd suggest going with a Query Selector:

parentListItem.querySelector("span").innerText

@max-rh
Copy link
Author

max-rh commented Sep 4, 2023

Thanks @nkappler , this works perfectly.

While on the subject of parent menus, is there a way to get a callback function not on "select" but on "hover" or "mouseenter" event; i mean obviously the mouseenter event opens the sub-menu, but could I pass extra functionality besides this.

I am closing this issue since its solved, thanks alot. lemme know if its ok to open another one for the mouseenter event if its doable :)

@max-rh max-rh closed this as completed Sep 4, 2023
@nkappler

This comment was marked as off-topic.

Sign in to view
@nkappler nkappler mentioned this issue Sep 4, 2023
Closed
@nkappler

This comment was marked as off-topic.

Sign in to view
@nkappler nkappler pinned this issue Sep 4, 2023
@max-rh

This comment was marked as off-topic.

Sign in to view
@nkappler

This comment was marked as off-topic.

Sign in to view
@max-rh

This comment was marked as off-topic.

Sign in to view
@nkappler nkappler mentioned this issue Sep 4, 2023
Closed
@nkappler
Copy link
Owner

nkappler commented Sep 4, 2023

I've created another Issue to track this feature request and keep this issue clean, since I've pinned it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nkappler @max-rh