Advice for right mouse click - context menu with async jsTree

[starmonkey]

Hey Guys,

I'm playing around with jsTree (async/json for loading my hierarchy) -
looking at using it for a widget in an application - liking it so far!

What I wanted to get going was a "context menu" that displays when you
right click on a folder/file/etc. This means I'd have multiple context
menu sets and attach them to a node depending on what it is (image,
doc, zip, etc).

The two I'm looking at now are:

http://www.javascripttoolbox.com/lib/contextmenu/
and
http://abeautifulsite.net/notebook/80

Anyone have any experience integrating these things with jsTree? Tips?
Advice? Pitfalls?

I'm going to have a play with Matt Kruse's one (the first url) and let
you guys know how I go.

I would prefer to generate/attach/display the context menu when the
onrgtclk callback fires from the jsTree, rather than say attach the
menu to all nodes after the tree is manipulated (showing more nodes).

cheers,
SM

[vakata]

Hi,

I am glad you are using and liking jstree :)

As of version 0.9.5 (currently available only as checkout at the SVN)
there is a native context menu!
It is rather simple, but I believe would satisfy most needs - it has
settings for icons, labels, operations and visibility depending on
node, tree, etc.

Check out the documentation at the SVN for more on the native context
menu.
The official download of version 0.9.5, along with documentation,
examples and a new site will be out soon!

Best regards,
Ivan

On Jan 9, 12:34 am, starmonkey <scott.macl...@gmail.com> wrote:
> Hey Guys,
>
> I'm playing around with jsTree (async/json for loading my hierarchy) -
> looking at using it for a widget in an application - liking it so far!
>
> What I wanted to get going was a "context menu" that displays when you
> right click on a folder/file/etc. This means I'd have multiple context
> menu sets and attach them to a node depending on what it is (image,
> doc, zip, etc).
>
> The two I'm looking at now are:
>
> http://www.javascripttoolbox.com/lib/contextmenu/

> andhttp://abeautifulsite.net/notebook/80

[starmonkey]

Hi Ivan,

Thanks for the great work + news re: native context menu!

It won't be too hard to switch over once you're finished with your
menu - most of the "grunt work" will be done elsewhere in my own
jquery functions, so it's mainly an issue of API.

I'll post an update on how I go with "ContextMenu" in the meantime :)

Keep up the great work on a great widget!

// SM

[starmonkey]

An update on my integration of jsTree + ContextMenu:

In the tree1.init:

callback : {
onrgtclk : function(NODE, TREE_OBJ, EV) { treeRightClick
(NODE, TREE_OBJ, EV); },

So that wires up the right click event of a node to a custom function:

/**
* Right click event handler function
*/
function treeRightClick(NODE, TREE_OBJ, EV) {
// lazily create contextmenu
initContextMenu(NODE);
// now force trigger for contextmenu event - first time around
$(NODE).trigger('contextmenu', EV);
}

The trigger call is because I want to create AND display the
contextmenu when the user first right-clicks the node.

And here are some test menus:

/*
setup nodes with contextmenus on rightclick?
*/
function initContextMenu(NODE) {

var menuFolder = [
{'Folder Option 1':function(menuItem,menu) { alert("You clicked
Option 1!"); } },
$.contextMenu.separator,
{'Folder Option 2':function(menuItem,menu) { alert("You clicked
Option 2!"); } }
];
var menuFile = [
{'File Option 1':function(menuItem,menu) { alert("You clicked
Option 1!"); } },
$.contextMenu.separator,
{'File Option 2':function(menuItem,menu) { alert("You clicked
Option 2!"); } },
{'Rename':function(menuItem,menu) { alert("todo - rename node id
#"+$(this).attr('id')); } }
];
var menuZip = [
{'Zip Option 1':function(menuItem,menu) { alert("You clicked
Option 1!"); } },
$.contextMenu.separator,
{'Zip Option 2':function(menuItem,menu) { alert("You clicked
Option 2!"); } }
];

var menu = null;
var nodeType = $(NODE).attr('node_type'); // Set by php/json and
stored as a dom attr by jsTree.


switch(nodeType) {

case 'file':
menu = menuFile;
break;
case 'folder':
menu = menuFolder;
break;
case 'zip':
menu = menuZip;
break;
}

// attach to node
if(menu) {
$(NODE).contextMenu(menu,{theme:'xp'});
}

}

You can see here that I rely on "node_type" being set by my async/json
code (easy enough).

The next step is for me to cancel the contextmenu when you left-click
on any other node (currently stays open), and then wire in some real
actions (like rename) to the server.

// SM

[Gorgoroth]

This is a very good solution but there is a little error.
Attaching the menù with:

function treeRightClick(NODE, TREE_OBJ, EV) {
// lazily create contextmenu
initContextMenu(NODE);
// now force trigger for contextmenu event - first time around
$(NODE).trigger('contextmenu', EV);
}

function initContextMenu(NODE) {
....
....

// attach to node
if(menu) {
$(NODE).contextMenu(menu,{theme:'xp'});
}
}

does not work well (almost using the async ajax feature).
If I right click in a parent node a context menu appears, with the
correct NODE object parameter passed to initContextMenu(). But left
clicking that node and loading his children with ajax and then right
clicking in any of the children, a context menu appears but the NODE
parameter refers to the parent, not to the selected child.
I do not know the exact cause of this problem but I have solved
binding to the A element of the LI node instead of the LI element
itself.

function treeRightClick(NODE, TREE_OBJ, EV) {
// lazily create contextmenu
initContextMenu(NODE);
// now force trigger for contextmenu event - first time around

$(NODE).children("a").trigger('contextmenu', EV);
}

function initContextMenu(NODE) {
....
....

// attach to node
if(menu) {

$(NODE).children("a").contextMenu(menu,{theme:'xp'});
}
}

[vakata]

Well,

Keep us posted about the integration. But just don't forget to try the
native jsTree context menu - your experience will be very useful -
maybe you could share what the native context menu lacks compared to
this one. So that I can make some changes and improve!

Best regards,
Ivan

[Gorgoroth]

Initially I've tried this hack because of the native context menu
problems on IE7 (it did not pop up). However I need some special
behaviours for Rename/Create/Delete.

- For Delete, the selected node must be deleted only if an ajax call
gives the user this right.
- For Rename, the user, if allowed by an ajax call, have to rename the
node in various languages (a 'dialog' must be shown and 'OK' button
have to be pushed, at the end).
- For Create, the user, if allowed by an ajax call, have to insert the
node name in various languages (a 'dialog' must be shown and 'OK'
button have to be pushed, at the end).

Substantially I am developing a simplified file system browser where
jsTree allows folder' navigation and manipulation (if the current
logged user has the rights, according to a logic of ACLs/ACEs similar
to the one on MS Windows OS).