Task #7340 (closed)
Opened 12 years ago
Closed 12 years ago
P/D/I tree as jQuery plugin.
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 %}" >
Change History (2)
comment:1 Changed 12 years ago by wmoore
- Description modified (diff)
comment:2 Changed 12 years ago by wmoore
- Resolution set to fixed
- Status changed from new to closed
Much of this work has been done (E.g. tree selection listeners), but making the jsTree easier to customise requires more thought.
Especially since it is under development with Groups and Experimenters being added soon.
Closing this ticket now