Right-click menus done the meteor way

announce
1

Hey all!

Thought I’d just post about an update to jchristman:context-menu, which I’ve rewritten from a simple DOM manipulating wrapper for another library into a true, meteor package (live example here). It utilizes a chainable, programatic menu construction syntax, simple template-driven menu model, and a very easy attaching syntax. I think this package makes it extremely easy to get at the right-click functionality without having to put very much effort into hooking into .onRendered functions. An example:

// Define a menu. This should go in a Meteor.startup on the client
let exampleMenu5 = (new Context.Menu('example5'))
    .addHeader('Example 5')
    .addItem('9', function (context, element) { alert('9 clicked on ' + context.target.id) })

Context.addMenu(exampleMenu5);

<!-- This will attach the above menu to your element -->
<li class='someClass' {{Context.attach 'example5'}}></li>

It’s that easy! Some additional features include:

  • Automatic positioning based on where you right-click (keeps things from going offscreen)
  • Automatic combining of menus if there are menus “behind” the thing you clicked on (bubbling events)
  • Attaching multiple menus to the same item that will combine

This is my first release with the new syntax, so there are some things that need to be smoothed out, but I think it’s mostly ready for use. Let me know what you think!

2 Likes
2

That’s really sweet! Definitely something I would consider adding to one of my games.

3

I don’t think I’ve done anything wrong, but its the first time I’ve tried using this module. I’ve built a menu + addMenu in Meteor.startup, then {{Context.attach}} in my template. But then every time I right click the element, I get a repeated block of menu items added to the menu. So I start with the defined 2 items, then get 4, then 6, then 8 …

4

Can you send me a link to a repository with the bug in it? It seems as though for some reason, the previously built menu is not being cleared, which would cause this.

5

hi, I did some more testing and found your package was behaving very strangely for me - e.g. the right-click wasn’t just restricted to the table tr elements I had attached it to, but was also occurring all over the page. And my menu consisted of a divider-line followed by 2 items even though I hadn’t defined a divider. When I only attached the menu to a th element the menu stopped expanding on each click, but it was still accessible from anywhere on the page. So I’m afraid I’ve given up on the whole idea of right-click menus and instead added an action button to each table row.