Pass menu-title data attribute as option parameter

[Knochenmark]

The issue I ran into is, that the demo example for menu-titles works on static contextmenus but is not working for dynamic created menus. Since you dont have a callback about for the creation of the menu to set the data-attribute. I solved this by passing the menu-title string directly as option parameter, similar to className.

all i did was adding this on creation of the contextmenu
if(opt.title) opt.$menu.attr("data-menutitle", opt.title);

I might add a pull request.

[bbrala]

I wonder, wouldn't the option className do? This is called only a few lines before the addition you did and gets applies to the menu.

                // create contextMenu
                opt.$menu = $('<ul class="context-menu-list"></ul>').addClass(opt.className || '').data({
                    'contextMenu': opt,
                    'contextMenuRoot': root
                });

This enabled the same selection as you can with the data attribute? Or am i missing something.

[Knochenmark]

Not really, in your demo examples the className is used as selector, which then is used to add the data-attribute string which is used as title. The problem here is, that you cant set the data-attribute to dynamicly created contextmenus using the build function. Therefore I pass the string when creating the contextmenu. Its essentially a timing problem you didnt encounter in your demo examples, since these are static. You also have to account for variable strings considering you might want to translate the menutitle.

[bbrala]

You should be able to set the contextmenu class when using the the build callback which i assume is what you use?

function someBuildCallback() {
                                return {
                                    className: "my-class-name",
                                    items: {
                                        "edit": {name: "Edit", icon: "edit"},
                                        "cut": {name: "Cut", icon: "cut"},
                                        "copy": {name: "Copy", icon: "copy"}
                                    }
                                };
                            }

Or are you using another option for the dynamic menu?

[Knochenmark]

Yeah, I use the build callback, but I thought I made clear that I need a data-attribute and not a className?

[Knochenmark]

Just for clarification, because I feel like you focus on the wrong things. Iam talking about this demo example:

 // register menu with title provided by data-attribute
    $.contextMenu({
        selector: '.context-menu-three',
        className: 'data-title',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}
        }
    });

    // set a title
    $('.data-title').attr('data-menutitle', "Some JS Title");

Now the problem is, that you cant set the data-attribute afterwards when you use the build callback to create the contextmenu, because you essentially lack a callback in the callback. Therefore my suggestion to pass the string for the data attribute in advance. Which makes way more sense anyways or not? Also, you dont require a class for the sole reason to select the contextmenu and add a data-attribute, which itself is already a detour, dont you think?

[bbrala]

You it is kind of an detour indeed. I would probably make it so you can add an data attribute to the item definition to add html5 data attributes. That would probably make the most sense.

[Knochenmark]

I see, so you could potentially add more than one data-attribute? Would you pass an object with key/value pairs?

[Knochenmark]

I changed the menuTitle parameter in the pullRequest to a more generic dataAttr parameter, that takes an object, so you can pass any data attribute you wish

[bbrala]

Yeah something like that, dataAttr: {menutitle: "my title"} which would result in <li data-menuttitle="my title"> this gives people the option to pass specific data to the menu items.

[Knochenmark]

dataAttr: {menutitle: "my title"} this is how the parameter would look, but I actually bind it to the ul element and not to the children. I think if you want data-attributes on children, you might need a second parameter, especially if you would like to do something like specific data-attributes depending on the child keys.

[janneman001]

When will this be merged? It hangs due to dependencies on other stuff?

[Knochenmark]

@janneman001 who knows, i suggest a fork and cherry-pick for now