Menu data reference

[gilbertoalbino]

I have been fascinated by the beauty of Context.js. However, it is not clear for me how to get the information from the clicked element. Lets say I have an anchor that has some data attributes like this:

< a data-id="10" data-made="2014" data-type="car" data-color="red" href="#" >Ferrari< /a >

How can I get those data stuff?

I tried to use (this), but it returns the context menu itself.

[AchoArnold]

I would very much like to see a solution to the above problem

[jakiestfu]

I'm going to be releasing a new version of Context.js that uses Bootstrap 3 and far cleaner javascript. The API will be more extensive as well. I'll try to release it tonight. Thanks for the kind words!

[AchoArnold]

@jakiestfu You said "I'll will try to realease it tonight" but that was 7 days ago man and I haven't seen a release yet

[altmind]

Bootstrap is nice. Will there also be standalone version?

[altmind]

I created small and ugly fix for that - just save target in dropdown menu data attribute.

Compare and see usage example at https://github.com/altmind/Context.js/compare/altmind:e05571...click-target

Hope there will be a better solution soon.

[jakiestfu]

Sorry guys. There has been support for this. Within the action function, reference the this variable to get the element that was clicked.

{
    action: function(){
        var el = this;
    }
}

[altmind]

@jakiestfu i suppose, this is misunderstanding. Take a look at screenshot https://www.dropbox.com/s/pdi7afprw6qiqzq/contextjs-this.png

@gilbertoalbino need a way to get a reference to a item, which was right-mose-button-clicked to sdhow context menu. For istance, in screenshot above, he need to get a ref to dom element with text "Empty", not a dom element "Cut". "this" variable points to "Cut", not "Empty"

This issue possibly still need a fix

[jakiestfu]

I see, I'm an ass, reopening

[gilbertoalbino]

@jakiestfu you are not an ass.

@jakiestfu and @altmind : I have created a fix for this issue. It now returns the clicked element.

Adding https://github.com/gilbertoalbino/Context.js/blob/master/context.js#L77 And https://github.com/gilbertoalbino/Context.js/blob/master/context.js#L102

Hope this can solve this permanently.

[margaritis]

I have created a pull request which fixes the aforementioned problem. @gilbertoalbino I have tried to used your approach but since the master branch implementation is different that the one you are using it was not working.

My current approach exposes a data attribute (selection) in the event that is returned in the action. The selection attribute is actually a function which returns the element that triggered the click to context menu (originated event). Every time the context menu is triggered the selection attribute is updated. Additionally i have added the attribute selection in the context Object so at any point, even out of an action you can get the last element that triggered the context menu. @altmind @najela @gilbertoalbino @jakiestfu Let me know how it works for you guys. Feedback is more than welcome..!

Option A: using data selection from event (e.data.selection())

action: function(e) {
    e.preventDefault();
    $(e.data.selection()).css('background',$(e.target).attr('data-background'));
}

Option B: using context

context.selection();

[marc-gist]

@kmargaritis could you make this work in the latest version of the file (which seems to have changed considerably since you did this merge request)?

[margaritis]

Sure thing @marc-gist !

[marc-gist]

a 'solution' that i found was to just do a:

$('.select-class').each(function() {
    var obj = $(this);
    context.attach(obj, [ ... ]);
});

and inside the menu action function i can reference the obj variable and it works.

EDIT: although this works... when there are a large number, or you need to dynamically change the objects that contain context menus' this approach can hang the browser :(

[michaelbilow]

This would be a great feature.