jsTree 0.6
Version 0.6 is finally out, but without the new examples and new documentation - they will be out in a few days.
Changes in this version include:
- added multiple selection with move & delete (use Ctrl - and “multiple : true” in the settings object)
- added basic rtl support (user opinions?)
- added getJSON - return the tree as an object
- added drag & drop between trees with correct marker placement
- added cookie support with definable prefix and options - default is false
- added animation support (slideUp/slideDown) - specify duration (disabled for msie 6 - slow)
- added insertAt option for creating nodes (’top’ or ‘bottom’)
- optimized jQuery selectors
- added cut/copy/paste + oncopy callback
- added error callback - attach custom function to errors
- added before handlers
- optimized css, added ‘leaf’ class
- added if selected node is within closed parent - select parent
- added CSS solution when dragging large sets - all inner nodes are closed while dragging
- added solid background color option (not white) - set background color on “li.last”, “.tree”
- updated listen plugin
- updated sarissa
@vakata
thanks for your help. I solved my problems, it was due to unicode characters. Now, I’m using a function that replaces them into HTML entities. This leads me to my question:
Why do HTML entities appear like this:
Hair color crème
?
Comment by Rafi B. — July 1, 2008 @ 3:54 pm
Oops. I’ll separate it with spaces:
Hair color cr& # 232;me
Comment by Rafi B. — July 1, 2008 @ 3:55 pm
@Rafi B
You need to properly encode those entities for XML output - meaning &#…. format.
Check the html entities cheat sheet here:
http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/
In your case - the text that need be encoded is found in a CDATA section, meaning you don’t have to encode anything - leave everything as unicode characters.
The example you sent me worked fine in Internet Explorer 6,7,8 on my server - check if the problem is not in the encoding that your server is sending.
If you cannot send the correct headers - just loose the < ![[CDATA...]]> section and leave you titles looking like this <name ..>text with no CDATA</name>
Comment by vakata — July 1, 2008 @ 4:57 pm
@vakata
wow. Finally solved everything. Turns out that IE needs the actual XML file to be UTF-8, while I thought that just having the xml header with UTF-8 is enough. It was enough for Firefox to display it perfect. Being forced to use ASP3 to create the XML file, it was quite a chore finding a way to make ASP write UTF-8 files.. Thank you for all your help, really appreciate it !
One more question:
Is there a way to define rules for the create() method, for example, not letting the user create a “file” inside “file”, only enabling creation of “folder” inside “folder” and so on… ?
Comment by Rafi B. — July 1, 2008 @ 9:52 pm
I’m glad it is working fine now :)
As for the question - just use the settings.dragrules, instead of having it “all”, describe the relations as follows:
[
"folder inside folder",
"folder after folder",
"folder before folder",
"folder after file",
"folder before file",
"file inside folder",
"file before file",
"file after file",
"file before folder",
"file after folder"
]
Notice that “file inside file” is missing :) This will do the trick.
P.S. Well, I know it is a bit awkward and needs some optimization - I plan on adding wildcards (for example “folder after *”) in the next version.
Comment by vakata — July 1, 2008 @ 10:24 pm
it took me quite a while to figure this out since i was sure my code looked exactly as the json example but for some reason ie always said “cannot display page” until i found that putting the js at the end of my html isnt enough! for ie you have to actually wait for “document.ready” or in short $(function() {…}
gonna test jsTree now, but it looks really good, nice job!
Comment by Alex — July 2, 2008 @ 3:50 am
You star! I was just trying to figure out how to send the suggestion of a callback that could return false to prevent the action from completing, and here it is already!
Comment by Colin — July 2, 2008 @ 11:21 am
Think I’ve found a bug - the beforemove/beforecreate callbacks seem to be the wrong way round (works as expected when swapped) - tree_component.js lines 868 & 871
Comment by Colin — July 2, 2008 @ 11:38 am
@Colin
Thanks, it really is a mistake :) I guess working late has its disadvantages - fixing it now!
Comment by vakata — July 2, 2008 @ 11:48 am
WOW, this is great work!
by the way, it is inteded to work drag and drop between trees?
Actually it seems to work between XML and json, but when dragging from xml to json it doubles entries, as “Contacts” and “????????”
Comment by Claudio — July 2, 2008 @ 12:00 pm
@Colin
Bug fixed - new version is out - 0.6.0.1
@Claudio
This is because in this example the XML tree has language versions and the JSON tree has no language versions. In a real-world scenario I guess this won’t be an issue, as usually when you drag & drop between trees they will both have the same language configuration.
Still - I will think about a fix for this.
In the mean time - using the onmove callback you can cleanup what you don’t need.
For example:
onmove : function(NODE,REF_NODE,TYPE) {$(NODE).children("a.bg").remove();
}
Comment by vakata — July 2, 2008 @ 12:12 pm
Hi, thanks for the great plugin.
I would like to know if it’s possbile to add an extra callback named doubleclick.
Comment by Arno — July 3, 2008 @ 10:28 am
@Arno
Hi, it won’t be a problem.
Currently doubleclick opens/closes the node and fires onopen/onclose callbacks.
I will send you a slightly modified version of the js file, so that you can attach anything to the doubleclick event.
Comment by vakata — July 3, 2008 @ 10:40 am
@vakata
Thanks, that would be great. The goal is, on doubleClick to open an url specified in the node.
Comment by Arno — July 3, 2008 @ 11:10 am
A prerelease of v.6.5 is at Google Code SVN.
It includes the definable ondblclk callback - it defaults to toggle & select the node, but can be overridden.
Also an additional paramter is passed to all callbacks - the actual tree object.
Comment by vakata — July 3, 2008 @ 11:29 am
Wow! I just came here to ask for that exact thing - I wanted to create a custom trigger for double-click to open up a modal window for preferences, and it’s already made!
Great work vakata!
I would love to build an UNDO function that will undo rename or move.
BTW, the RTL feature looks great. Haven’t had a chance to really look into it yet, cause I’m using English right now.
Comment by Rafi B. — July 3, 2008 @ 6:35 pm
@Rafi B.
I guess you could use the beforerename callback, to store the old name and the node and then return true in order to allow the rename.
After that it would be pretty easy to undo the rename.
You could use the same strategy for moving - although it is a bit more complex and involves more DOM manipulation.
I’d recommend using the moved function instead of doing it manually. Just pass the right parameters (first is the node being moved, second is the reference node, third is the new position relative to the reference node - either “after”, “before” or “inside”).
So basically you’d have to save the node, and the previous or next sibling (if there are such, if not - the parent node).
After that upon undo - call the moved function with the following parameters:
- the actual node that you saved in beforemove
- the saved reference node
- if you saved a previous Sibling as ref node - “after”
if you saved a next Sibling as ref node - “before”
if you saved a parent node as ref node - “inside”
Important - remember that you should have a flag of some sort if you use the moved function so that when you are actually doing an undo, you do not process the callback.
Drop me a note how it turned out.
Comment by vakata — July 4, 2008 @ 10:39 am
Hi there
I really like your tree plugin, but i’ve some problems with the dragrules.
I use the following dragrules:
“folder after folder”,
“folder before folder”,
“folder inside folder”
As soon is I activate this rules, it’s not longer possible to drop a node (rel=”folder”) on an other.
Maybe u can give me a workable example?
Thanks
Comment by F. Miller — July 4, 2008 @ 4:01 pm
@F.Miller
Can you give me an URL? So that I can see what the problem is.
Also make sure that metadata in the settings object is disabled.
http://www.vakata.com/jsTree/examples/ is the example you are looking for (the middle tree) - it has your dragrules configuration and all the nodes have the rel attribute set to “folder”.
Comment by vakata — July 4, 2008 @ 4:16 pm
Hi, I’ve just tried jsTree - it’s a very nice component, but I’ve found some strange behavior:
If the tree is inside a relative or absolute positioned element, dragging doesn’t work as expected - the offset of dragged element seems to be computed wrongly (relative to the document origin - not to the positioned parent).
Another thing - I think the path to the images used in JS should be determined by some better way (simple option variable with path string could be just fine).
Comment by karf — July 6, 2008 @ 7:08 pm
A quick patch for the problem posted above: (line 326 in rev. 28)
var parentOffset = $(_this.drag).offsetParent().offset();
$(_this.drag).css({ “left” : (event.pageX - parentOffset.left + 5), “top” : (event.pageY - parentOffset.top + ($.browser.opera ? _this.container.scrollTop() : 0) + 15) });
Comment by karf — July 6, 2008 @ 7:33 pm
@karf
Thanks for the info and for the fix - will include it tomorrow, along with an optional path parameter (it was there in the earlier versions). I believe it would be best if I return the path option and if it is not set - detect it as I do now.
Comment by vakata — July 6, 2008 @ 8:32 pm
@vakata
I think I’ve found something else odd. in the beforemove callback, the NODE, and REF_NODE are not in the expected format. If I include alert(NODE) in the beforedelete callback I see “[object HTMLLIElement]” but in beforemove I see “[object Object]” and I can’t access attributes, etc.
Comment by Colin — July 7, 2008 @ 11:27 am
@colin
Thanks - it actually returned the jQuery object - fixing it now - the new version will be in the SVN @ Google Code this evening.
Comment by vakata — July 7, 2008 @ 11:40 am
Thanks that’s great - FYI I’m working on a web based SVN interface, so the filetree is a rather important part - and this has been a pleasure to use.
Comment by Colin — July 7, 2008 @ 11:43 am
@vakata: Thanks for your reply, that’s great :)
Another one bug: When collapsing a node that has already focus, the onchange event is fired unexpectedly.
And yet another suggestion: I think the height of the tree item shouldn’t be hard coded as a magic number inside a script (18px) but rather computed dynamically (offsetHeight of the first item rendered or something like that). I tried to add more white space between items and change the font size but it broke drag’n drop.
Comment by karf — July 8, 2008 @ 1:11 am
@karf
Thanks again - I really appreciate the feedback - recently there have been a lot of requests and obviously I have cut on the testing a bit.
The close_branch bug is fixed.
As for the 18px - that has been bugging me for quite some time.
What is fixed now is that you can specify different height for the LI element using CSS (along with font-size, face, etc) as for the nested A element its height should be the height of the LI minus 2px.
I’m working on calculating margins & padding now, but for now it is not recommended to change those.
Rev29 is @ Google Code, version 0.6.5 is coming soon with a complete list of the changes and optimizations requested by all of you. Thanks! :)
Comment by vakata — July 8, 2008 @ 10:41 am
Hello I am trying to run the example in my local machine and I am getting error “Security error” code: “1000
file:jsTree/_source/css.js
Line 5″ Any trick to solve this ?
Comment by Alpesh — July 8, 2008 @ 5:42 pm
It most probably is because you are not running the example from a web server. Give me more info about your config - paste me the url you are using - does it begin with file:// ???
Comment by vakata — July 8, 2008 @ 8:15 pm
First let me say fantastic control, I have been looking for something like this for awhile.
A suggestion - it would be nice to be able to easily change both the expand/collapse icon and the background image for the nodes. While you can change the background image for the node they must be approximately the same size or else there will be problems with the line height. It would be nice if there were a couple easy overrides that you could do in the css that would allow for different sized icons for the page background and also to replace the expand/collapse icons for the nodes and allow them to be different sizes as well.
Currently it is not easy or straight-forward to do this.
Comment by Arthur — July 9, 2008 @ 8:39 am
One more question:
I am trying to add some extra image links to the right of the main link (these would be for add/delete images next to each list item), but these links keep getting the background-image for the main list item link. Is there a way to turn this off:
Item3
Published
I have set a css class with a.add, a.modify { background-image: none; } but that still gets the background image.
Comment by Arthur — July 9, 2008 @ 10:11 am
@Arthur
You can currently just replace the two image files in the images folder (for collapse & expand). As for the node size - it has been somewhat fixed (check the latest revision at the SVN & Post no.27 here)
About the a.add & a.modify - check your selector - if you have an ID for the container try using #id-of-container a.add, or at least .tree li a a.add, to get a higher priority selector.
Comment by vakata — July 9, 2008 @ 10:53 am
Is there a way to restrict movement to within same parent?
Comment by William — July 9, 2008 @ 5:03 pm
@William
Currently - no (unless you define rules for each parent which is tedious and not efficient), but I’m writing it down for the next version.
Comment by vakata — July 9, 2008 @ 5:27 pm
Great, I look forward to being able to replace my current tree script with yours.
I’ve found a bug in the cookies functionality.
Basically if you rearrange the tree and then refresh the page, sometimes it puts collapse/expand arrows on nodes with no children.
Comment by William — July 9, 2008 @ 8:27 pm
@William
Thanks - actually I was not sure what to do with this - the simplest fix would be to check if the node has children before opening it, the reason I am not checking that is because the children could be loaded onopen (ajax).
Still - I will fix this and upload the new version tomorrow. As for async - I believe it could be a setting.
Comment by vakata — July 9, 2008 @ 9:20 pm
Hello,
First of all great script!
I’m having trouble positioning the marker image with drag and drop. The list has some padding. I even tried version 0.6.5 but that did not help either. The sample can be found at:
http://www.addnoise.nl/jtree/examples/addsite_tree.html
When adding a new node (category) it assigns the ‘wrong’ icon. I think it should be the leaf icon.
Thanks!
Comment by addwin — July 15, 2008 @ 6:43 pm
@addwin
Thank you for the info - fixing the leaf issue now.
As for the marker placement - leave the original CSS file as is and overwrite some of the rules like this:
#predef li {
line-height:24px;
min-height:24px;
}
#predef li a {
line-height:22px;
height:22px;
background-position:4px 3px;
}
#predef li a:hover,
#predef li a.clicked {
background-position:3px 2px;
}
Comment by vakata — July 16, 2008 @ 10:45 am
@vakata
Thanks, that fixed the problem! I have placed the updated version online:
http://www.addnoise.nl/jstree_update/examples/addsite_tree.html
Comment by addwin — July 16, 2008 @ 1:41 pm