<html>
<head>
<title>Dojo Tree Widget Test (ajax, drag'n'drop and more)</title>
<script type="text/javascript">
var djConfig = {isDebug: true };
</script>
<script type="text/javascript" src="../../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeRPCController");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
function restoreIconSrc() {
// icon was changed during the action => no need to move it back
//alert("Restore "+this.icon.src.substr(-18))
if (this.icon.src.substr(-18) != 'static/loading.jpg') { // check if icon.src is loading icon
return;
}
this.icon.src = this.oldIconSrc;
}
/* process up or down operation */
function moveClicked(selectedNode, controllerId, icon, direction) {
if (selectedNode.actionIsDisabled(selectedNode.actions.MOVE)) {
return false;
}
this.icon = icon;
this.oldIconSrc = icon.src;
this.controller = dojo.widget.manager.getWidgetById(controllerId);
if (!selectedNode) {
alert('No node selected');
return false;
}
if (direction == 'up') {
if (!selectedNode.getPreviousSibling()) return;
var res = controller.move(selectedNode, selectedNode.parent, selectedNode.getParentIndex()-1);
} else if (direction == 'down') {
if (!selectedNode.getNextSibling()) return;
var res = controller.move(selectedNode, selectedNode.parent, selectedNode.getParentIndex()+1);
}
}
/* process create operation */
function createClicked(selectedNode, controllerId, icon) {
if (!selectedNode || selectedNode.actionIsDisabled(selectedNode.actions.ADDCHILD)) {
return false;
}
this.icon = icon;
this.oldIconSrc = icon.src;
this.controller = dojo.widget.manager.getWidgetById(controllerId);
if (!selectedNode || !selectedNode.isFolder) {
alert('Select folder please');
return false;
}
this.icon.src = 'static/loading.jpg';
// I send some data to server and recieve feedback with right node
var res = controller.createChild(selectedNode, 0, { suggestedTitle: "New node" }, dojo.lang.hitch(this, restoreIconSrc));
// local checks failed
if (res == false) {
restoreIconSrc.apply(this);
}
}
function removeClicked(selectedNode, controllerId, icon) {
if (!selectedNode) {
alert('No node selected');
return false;
}
if (selectedNode.actionIsDisabled(selectedNode.actions.REMOVE)) {
return false;
}
this.icon = icon;
this.oldIconSrc = icon.src;
this.controller = dojo.widget.manager.getWidgetById(controllerId);
this.icon.src = 'static/loading.jpg';
var res = controller.removeNode(selectedNode, dojo.lang.hitch(this, restoreIconSrc));
// local checks failed
if (res == false) {
restoreIconSrc.apply(this);
}
}
var reporter = function(reporter) {
this.name = eventName;
this.go = function(message) {
var rep = [ reporter + " -- event: "+this.name ];
for(i in message) rep.push(i+": "+message[i]);
dojo.debug(rep.join(', '));
}
}
dojo.addOnLoad(function(){
/* Add debug print for all controller events */
var controller = dojo.widget.manager.getWidgetById('treeController');
for(eventName in controller.eventNames) {
dojo.event.topic.subscribe(
controller.eventNames[eventName],
new reporter('controller'),
'go'
);
}
/* Add debug print for all firstTree events */
var firstTree = dojo.widget.manager.getWidgetById('firstTree');
for(eventName in firstTree.eventNames) {
dojo.event.topic.subscribe(
firstTree.eventNames[eventName],
new reporter('firstTree'),
'go'
);
}
/* Add debug print for all secondTree events */
var secondTree = dojo.widget.manager.getWidgetById('secondTree');
for(eventName in secondTree.eventNames) {
dojo.event.topic.subscribe(
secondTree.eventNames[eventName],
new reporter('secondTree'),
'go'
);
}
//dojo.widget.manager.getWidgetById('1.1').edit({title: '123'});
});
</script>
</head>
<body>
<div dojoType="TreeRPCController" RPCUrl="local" widgetId="treeController" DNDController="create"></div>
<div dojoType="TreeSelector" widgetId="treeSelector"></div>
<div dojoType="TreeContextMenu" toggle="explode" contextMenuForWindow="false" widgetId="treeContextMenu">
<div dojoType="TreeMenuItem" treeActions="addChild" iconSrc="static/createsmall.gif" widgetId="treeContextMenuCreate" caption="Create"></div>
<div dojoType="TreeMenuItem" treeActions="remove" iconSrc="static/removesmall.gif" caption="Remove" widgetId="treeContextMenuRemove"></div>
<div dojoType="TreeMenuItem" treeActions="move" iconSrc="static/downsmall.png" caption="Up" widgetId="treeContextMenuUp"></div>
<div dojoType="TreeMenuItem" treeActions="move" iconSrc="static/upsmall.png" caption="Down" widgetId="treeContextMenuDown"></div>
</div>
<script>
/* setup menu actrions */
dojo.addOnLoad(function() {
dojo.event.topic.subscribe('treeContextMenuCreate/engage',
function (menuItem) { createClicked( menuItem.getTreeNode(), 'treeController', menuItem.getTreeNode().expandIcon); }
);
dojo.event.topic.subscribe('treeContextMenuRemove/engage',
function (menuItem) { removeClicked( menuItem.getTreeNode(), 'treeController', menuItem.getTreeNode().expandIcon); }
);
dojo.event.topic.subscribe('treeContextMenuUp/engage',
function (menuItem) { moveClicked( menuItem.getTreeNode(), 'treeController', menuItem.getTreeNode().expandIcon, 'up'); }
);
dojo.event.topic.subscribe('treeContextMenuDown/engage',
function (menuItem) { moveClicked( menuItem.getTreeNode(), 'treeController', menuItem.getTreeNode().expandIcon, 'down'); }
);
});
</script>
<style>
#toolsDiv img {
vertical-align: middle;
}
.treeTable tr {
vertical-align: top;
}
</style>
<!--
A sample toolbar
-->
<div id="toolsDiv">
<img src="static/create.gif" onclick="createClicked(dojo.widget.manager.getWidgetById('treeSelector').selectedNode,'treeController', this);"/>
<img src="static/up.gif" onclick="moveClicked(dojo.widget.manager.getWidgetById('treeSelector').selectedNode,'treeController', this, 'up');"/>
<img src="static/down.gif" onclick="moveClicked(dojo.widget.manager.getWidgetById('treeSelector').selectedNode,'treeController', this, 'down');"/>
<img src="static/recyclebin.gif" onclick="removeClicked(dojo.widget.manager.getWidgetById('treeSelector').selectedNode, 'treeController', this);"/>
</div>
<hr/>
<!--
Every node must have widgetId to get recognized by server (ajax)
!!! wipe toggle from widget.Tree is buggy in FF (try open a lot of nodes)
-->
<table class="treeTable" cellpadding="10">
<tr>
<td style="border:1px dashed black;">
<h4>firstTree</h4>
<div dojoType="Tree" menu="treeContextMenu" DNDMode="between" selector="treeSelector" actionsDisabled="addChild" toggler="fade" widgetId="firstTree" DNDAcceptTypes="secondTree" controller="treeController">
<div dojoType="TreeNode" widgetId="1.1" title="Can't remove me" actionsDisabled="remove">
<div dojoType="TreeNode" widgetId="1.1.1" title="<span style='color:blue'>node with HTML title</span>" isFolder="true">
</div>
</div>
<div dojoType="TreeNode" widgetId="1.2" title="Can't add child to me" actionsDisabled="addChild" isFolder="true"></div>
<div dojoType="TreeNode" widgetId="1.3" title="Can't move me" actionsDisabled="remove" isFolder="true"></div>
</div>
</td>
<td style="border:1px dashed black;">
<h4>secondTree</h4>
<div dojoType="Tree" DNDMode="between" selector="treeSelector" widgetId="secondTree" DNDAcceptTypes="secondTree;firstTree" controller="treeController">
<div dojoType="TreeNode" title="Item 2.1" widgetId="2.1" isFolder="true"></div>
<div dojoType="TreeNode" title="Item 2.2" widgetId="2.2" isFolder="true"></div>
</div>
</td>
</tr>
</table>
<hr>
<h3>Read the description first.<br/>
Also, if something does not work, please read more carefully before reporting.</h3>
<ol>
<li>Every node can be initially opened or closed. Also, some actions upon it may be disabled, you'll see that on demo</li>
<li>
You can <u>drag'n'drop a node</u> to change parent
<ul>
<li>FirstTree accepts only sources from secondTree, secondTree accepts both (for demo purposes)</li>
<li>You can only drop to folder ("+/-" sign)</li>
<li>You can't drop an ancestor to any of its descenants</li>
<li>You can't drop a child to its closest parent</li>
<li>A node is highlighted if you can drop onto it</li>
<li>There are two DnD modes: "between" and "onto". Between is used in the demo.</li>
<li>Nodes autoexpand on dragOver after delay</li>
</ul>
</li>
<li>
<u>Move nodes up and down, remove them</u> by selecting and pressing tool buttons.
You surely can't move top nodes higher and bottom nodes lower.
</li>
<li>
<u>You can create nodes</u> by clicking create button.
<ul>
<li>Currently only simple same nodes are created, but this can be changed easily.</li>
<li>Nodes are created on top for convinience.</li>
</ul>
</li>
<li>All editing operations use <u>server requests(ajax)</u>
<ul>
<li>Empty folders get loaded dynamically.</li>
<li>In this demo "test" node can be expanded infinitely (from server).</li>
<li>Remote communication process is indicated.</li>
</ul>
</li>
<li>FirstTree has <u>context menu</u> (right-click on node), attached using events.
Its main functionality inherits dojo.widget.PopupMenu2.</li>
<li>
A bunch of <u>events</u> is fired by both tree and controller to simplify integration.
</li>
<li>
<b>Yes, it is OpenSource, and yes, you are free to use & contribute to it.</b>
</li>
</ol>
<p align="right">Ilia Kantor, ilia at manual dot ru</p>
<hr>
<h4>Here go debug messages</h4>
</body>
</html>