Task #7340 (new)
Opened 12 years ago
Last modified 12 years ago
P/D/I tree as jQuery plugin. — at Version 1
Reported by: | wmoore | Owned by: | wmoore |
---|---|---|---|
Priority: | major | Milestone: | Unscheduled |
Component: | Web | Version: | n.a. |
Keywords: | n.a. | Cc: | atarkowska, cxallan, saloynton |
Resources: | n.a. | Referenced By: | n.a. |
References: | n.a. | Remaining Time: | n.a. |
Sprint: | n.a. |
Description (last modified by wmoore)
Would be nice to separate out the variables from the jsTree, so that the containers.html page becomes a little cleaner. Also try to decouple the jsTree from events that are fired on selection changes etc.
E.g. sample code:
var pid_data = "{% url load_data %}"; var select = "{% if init.initially_select %}"{{ init.initially_select }}"{% else %}"experimenter-0"{% endif %}"; var open = ["{% for p in init.initially_open %}"{{ p }}",{% endfor %} "experimenter-0"]; var pdiTree = $("#dataTree").pdiTree(pid_data, select, open); pidTree.bind("select_node.jstree", function (e, data) { // update toolbar etc };
When new pages are loaded into center or right-hand panels, they can also register for selection changes:
// called after page has loaded $("#dataTree").bind("select_node.jstree", function (e, data) { // update thumbnail selection etc. }; // called when user selects thumbnails etc var branch = datatree._get_children('#'+$('#content_details').attr('rel')); var selectee = $(branch[selIndex]); datatree.select_node(selectee);
This should allow 3rd parties to extend webclient with their own pages and have them fully update with selection etc.
In the above example, icons would need to be specified in the tree itself. Currently the data_tree looks like:
<ul> <li id="experimenter-0" rel="experimenter"><a href="#">Will Moore</a> <ul> <li id='project-151' rel="project"><a href="#">big images <span id="counter-project-151">[3]</span></a> <ul> <li id='dataset-151' rel="dataset" class="jstree-closed"> <a href="#"> Beta set <span id="counter-dataset-151">[7 <span id="page-dataset-151"></span>] </span> </a> </li> ...etc
This might need to include more 'dynamic' attributes of each node, E.g:
<li icon="{{ STATIC_WEBCLIENT_PREFIX }}image/folder_image_locked16.png}}" delete_node = "{% if eContext.isLeader %}true{% else %}false{% endif %}" >