Menu positioning... about jquery-ui-contextmenu HOT 4 CLOSED

Thanks for your feeback!

The topic was already on the agenda ( #13 ). I was thinking about a adding position option, like here:

http://api.jqueryui.com/tooltip/#option-position
http://api.jqueryui.com/dialog/#option-position

(of defaulting to parentElement).

$().contextmenu({
    ...
    position: { my: "left top+15", at: "left bottom", collision: "flipfit" }
});

But that would not help in your use case, I guess, since event is not known at initialization time.

Maybe we could extend this by also accepting position to be a function?

function calcPos(event){
    return {
        my: "left top",
        at: "left+" + event.offsetX + " top+" + event.offsetY,
        of: event.target,
        collision: "fit"
    };
}
$().contextmenu({
    ...
    position: calcPos
});

As an additional feature we could add a beforeShow event, that is triggered after postioning happened.
This would allow users to call .position(...) on the popup menu.

If you like to work on this (which I would appreciate ;-), you could create a fork and make a pull-request.
( https://help.github.com/articles/creating-a-pull-request )

Regards
Martin

from jquery-ui-contextmenu.

I have made the changes and tested them. You can not define any custom position and it will work as it did before. You can define an indirect position and it will detect that a source was not provided and use the parentTarget for the 'of' field. For example:

$().contextmenu({
    ...
    position: { my: "left top+15", at: "left bottom", collision: "flipfit" }
});

You can position it directly like in:

$().contextmenu({
    ...
    position: { my: "left top+15", at: "left bottom", collision: "flipfit", of: $('#anything') }
});

Or you can define a function that returns the coordinates based on the event like:

$().contextmenu({
    ...
    position: function(event, ui) {
        return {
            my: "left top",
            at: "left+" + event.offsetX + " top+" + event.offsetY,
            of: event.target,
            collision: "fit"
        };
    }

Let me know what you think.

• Jeff

from jquery-ui-contextmenu.

looks good!

jshint complains about minor issues, but I can also fix myself...

Would you create a pull-request?
And if you give me a name and optionally e-mail and/or url, I'll add you to the contributors list

Martin

macmartin:jquery-ui-contextmenu martin$ grunt
Running "jshint:files" (jshint) task
Linting jquery.ui-contextmenu.js...ERROR
[L33:C1] W099: Mixed spaces and tabs.
�    ����preventSelect: false,   // disable text selection of target
[L161:C17] W081: Too many var statements.
      var posOption = this.options.position;
[L169:C18] W033: Missing semicolon.
      �����}
[L174:C21] W081: Too many var statements.
        var posTarget = posOption.of;

from jquery-ui-contextmenu.

Pull request done. I added the contribution information to the pull request, but I will write it here too:

My name is "Jeffrey Dean Altemus". My FOSS email is "[email protected]". My URL is "jeff.teamaltemus.net"

Since this is now complete I will close this issue.

Best Wishes,
Jeffrey Dean Altemus

from jquery-ui-contextmenu.