Multiple jsTree node icon overlays (all 4 quadrants)

[Kristian]

Hi,

I have been thinking, that for a lot of scenarios, you really need the
ability for the node icons to have multiple overlays, just like it's
the case in the usual tree structures seen in IDEs such as Eclipse
IDE.

Here you have an icon for the file state (fx in relation to a
repository), an icon marking it as a reference or not, etc.
There is an icon/state set for each of the four corners of the icon. I
think it is a 6x6 or 8x8 icon overlapping the main icon by a 4x4 area.

"can be used to overlay decoration images on to the 4 corner quadrants
of a base image".

I imagine the ability to set a stateToIconSet for each of the 4
quadrants:

var stateSet = [{state: 'dirty', icon: 'dirty.png'}, {state: 'inSync',
icon: 'insync.png'}]
var modeSet = [...]
var nodeTypeSet = [{state: 'reference', icon: 'ref.png'}, {state:
'instance', icon: 'instance.png'}]
var modeSet = [...]

'quadrantOverlays': {topLeft: stateSet, topRight: modeSet, bottomLeft:
nodeTypeSet, bottomRight: miscSet}

What do you think?

Kristian

[vakata]

It is quite a nice idea. Unfortunately, right now I cannot think of a
CSS solution about it. Maybe I will keep working on adding new DOM
nodes to the output so that this can be achieved (there already is an
extra <ins> element in the theme_roller theme). I guess I can work on
that :)
Thank you for the idea!

Kindest regards,
Ivan

[Shandem]

This is sort of why i posted this question:
http://groups.google.com/group/jstree/browse_thread/thread/905b801dabe05cba/ba831b889bf99c95#ba831b889bf99c95

i need to add a div before the a in the li tag that is rendered to do
an icon overlay...

Gonna see if i can get it to work now with the onopen calback.

[Shandem]

Got this working by doing this:

(I'm using async by the way, not sure how it will work without async)

- create overlay styles with the names prefixed with "overlay-"
Example:

/* define an overlay called new */
.tree .tree-mytree li div.overlay-new
{
background: no-repeat url(../../../images/new_overlay.png);
}

/* used by all overlays */
.tree .tree-mytree li div.overlay
{
position: relative;
z-index: 500;
left: -2px;
top: 6px;
width: 8px;
height: 8px;
}


- in the json data, specify the overlay classes that you would like
use for the node
- create onload callback and add a div element before the a element
for each node with the specified classes:

onOpen: function(NODE, TREE_OBJ) {
var _this = this;

//Find all class names contained in the node that are prefixed
with overlay-* and add
//a div element before the a element that has these overlay
classes.
var rxOverlay = new RegExp(/(?:overlay-\w+)+/);
$(NODE).find("ul > li").each(function() {
var m = rxOverlay.exec($(this).attr("class"));
if (m != null) {
var c = "overlay ";
for (i = 0; i < m.length; i++) {
c += m[i] + " ";
}
$(this).children("a:first").before("<div class='" + c +
"'></div>");
}
});

return true;
}


Thats it!

On May 14, 7:20 pm, Shandem <s...@thefarmcreative.com.au> wrote:
> This is sort of why i posted this question:http://groups.google.com/group/jstree/browse_thread/thread/905b801dab...

[Kristian]

Looks great!

Yes, I assume you would need to insert extra DOM elements on the
jsTree nodes created for the overlays to be attached to the four
corners. Could be an option, so that by default it is not enriched
with these extra DOM nodes. Would be nice with 4 x <ins> nodes, with
classes "nw" (North West), "ne", "sw", "se". Then it should be
possible to do the appropriate overlays using relative positioning.
Could anyone provide a working example (patch?) with overlays in all 4
corners doing something like this?
I don't exactly understand how to use Shandems code in a working
example ;P

Kristian

[Kristian]

Yes, having four <ins> with separate classes would solve this.

<node id="person_A">
<ins class="ne">
<ins class="new"
...

These 'could' be added using jQuery onDocumentReady I guess, but would
be nice if they could be added using jsTree options for this ;)

Then to set the state of a node and have the overlay

$("node#person_A").('ins.ne').addClass('dirty');

should have an API function like

setNodeState: fucntion(nodeId, cornerName, stateName) {
var ins = $('node#' + nodeId).('ins.' + cornerName);
ins.removeClasses();
ins.addClass(cornerName + ' ' + stateName);
}

css:

ins.ne {
// relative positioning -4, -4
}

ins.dirty {
// overlay image 'dirty.png'