| 1318 |
alexandre_ |
1 |
/*
|
|
|
2 |
Copyright (c) 2004-2006, The Dojo Foundation
|
|
|
3 |
All Rights Reserved.
|
|
|
4 |
|
|
|
5 |
Licensed under the Academic Free License version 2.1 or above OR the
|
|
|
6 |
modified BSD license. For more information on Dojo licensing, see:
|
|
|
7 |
|
|
|
8 |
http://dojotoolkit.org/community/licensing.shtml
|
|
|
9 |
*/
|
|
|
10 |
|
| 1422 |
alexandre_ |
11 |
|
|
|
12 |
|
| 1318 |
alexandre_ |
13 |
dojo.provide("dojo.dnd.TreeDragAndDrop");
|
|
|
14 |
dojo.require("dojo.dnd.HtmlDragAndDrop");
|
|
|
15 |
dojo.require("dojo.lang.func");
|
|
|
16 |
dojo.require("dojo.lang.array");
|
|
|
17 |
dojo.require("dojo.lang.extras");
|
|
|
18 |
dojo.require("dojo.html.layout");
|
|
|
19 |
dojo.dnd.TreeDragSource = function (node, syncController, type, treeNode) {
|
|
|
20 |
this.controller = syncController;
|
|
|
21 |
this.treeNode = treeNode;
|
|
|
22 |
dojo.dnd.HtmlDragSource.call(this, node, type);
|
|
|
23 |
};
|
|
|
24 |
dojo.inherits(dojo.dnd.TreeDragSource, dojo.dnd.HtmlDragSource);
|
|
|
25 |
dojo.lang.extend(dojo.dnd.TreeDragSource, {onDragStart:function () {
|
|
|
26 |
var dragObject = dojo.dnd.HtmlDragSource.prototype.onDragStart.call(this);
|
|
|
27 |
dragObject.treeNode = this.treeNode;
|
|
|
28 |
dragObject.onDragStart = dojo.lang.hitch(dragObject, function (e) {
|
|
|
29 |
this.savedSelectedNode = this.treeNode.tree.selector.selectedNode;
|
|
|
30 |
if (this.savedSelectedNode) {
|
|
|
31 |
this.savedSelectedNode.unMarkSelected();
|
|
|
32 |
}
|
|
|
33 |
var result = dojo.dnd.HtmlDragObject.prototype.onDragStart.apply(this, arguments);
|
|
|
34 |
var cloneGrid = this.dragClone.getElementsByTagName("img");
|
|
|
35 |
for (var i = 0; i < cloneGrid.length; i++) {
|
|
|
36 |
cloneGrid.item(i).style.backgroundImage = "url()";
|
|
|
37 |
}
|
|
|
38 |
return result;
|
|
|
39 |
});
|
|
|
40 |
dragObject.onDragEnd = function (e) {
|
|
|
41 |
if (this.savedSelectedNode) {
|
|
|
42 |
this.savedSelectedNode.markSelected();
|
|
|
43 |
}
|
|
|
44 |
return dojo.dnd.HtmlDragObject.prototype.onDragEnd.apply(this, arguments);
|
|
|
45 |
};
|
|
|
46 |
return dragObject;
|
|
|
47 |
}, onDragEnd:function (e) {
|
|
|
48 |
var res = dojo.dnd.HtmlDragSource.prototype.onDragEnd.call(this, e);
|
|
|
49 |
return res;
|
|
|
50 |
}});
|
|
|
51 |
dojo.dnd.TreeDropTarget = function (domNode, controller, type, treeNode) {
|
|
|
52 |
this.treeNode = treeNode;
|
|
|
53 |
this.controller = controller;
|
|
|
54 |
dojo.dnd.HtmlDropTarget.apply(this, [domNode, type]);
|
|
|
55 |
};
|
|
|
56 |
dojo.inherits(dojo.dnd.TreeDropTarget, dojo.dnd.HtmlDropTarget);
|
|
|
57 |
dojo.lang.extend(dojo.dnd.TreeDropTarget, {autoExpandDelay:1500, autoExpandTimer:null, position:null, indicatorStyle:"2px black solid", showIndicator:function (position) {
|
|
|
58 |
if (this.position == position) {
|
|
|
59 |
return;
|
|
|
60 |
}
|
|
|
61 |
this.hideIndicator();
|
|
|
62 |
this.position = position;
|
|
|
63 |
if (position == "before") {
|
|
|
64 |
this.treeNode.labelNode.style.borderTop = this.indicatorStyle;
|
|
|
65 |
} else {
|
|
|
66 |
if (position == "after") {
|
|
|
67 |
this.treeNode.labelNode.style.borderBottom = this.indicatorStyle;
|
|
|
68 |
} else {
|
|
|
69 |
if (position == "onto") {
|
|
|
70 |
this.treeNode.markSelected();
|
|
|
71 |
}
|
|
|
72 |
}
|
|
|
73 |
}
|
|
|
74 |
}, hideIndicator:function () {
|
|
|
75 |
this.treeNode.labelNode.style.borderBottom = "";
|
|
|
76 |
this.treeNode.labelNode.style.borderTop = "";
|
|
|
77 |
this.treeNode.unMarkSelected();
|
|
|
78 |
this.position = null;
|
|
|
79 |
}, onDragOver:function (e) {
|
|
|
80 |
var accepts = dojo.dnd.HtmlDropTarget.prototype.onDragOver.apply(this, arguments);
|
|
|
81 |
if (accepts && this.treeNode.isFolder && !this.treeNode.isExpanded) {
|
|
|
82 |
this.setAutoExpandTimer();
|
|
|
83 |
}
|
|
|
84 |
return accepts;
|
|
|
85 |
}, accepts:function (dragObjects) {
|
|
|
86 |
var accepts = dojo.dnd.HtmlDropTarget.prototype.accepts.apply(this, arguments);
|
|
|
87 |
if (!accepts) {
|
|
|
88 |
return false;
|
|
|
89 |
}
|
|
|
90 |
var sourceTreeNode = dragObjects[0].treeNode;
|
|
|
91 |
if (dojo.lang.isUndefined(sourceTreeNode) || !sourceTreeNode || !sourceTreeNode.isTreeNode) {
|
|
|
92 |
dojo.raise("Source is not TreeNode or not found");
|
|
|
93 |
}
|
|
|
94 |
if (sourceTreeNode === this.treeNode) {
|
|
|
95 |
return false;
|
|
|
96 |
}
|
|
|
97 |
return true;
|
|
|
98 |
}, setAutoExpandTimer:function () {
|
|
|
99 |
var _this = this;
|
|
|
100 |
var autoExpand = function () {
|
|
|
101 |
if (dojo.dnd.dragManager.currentDropTarget === _this) {
|
|
|
102 |
_this.controller.expand(_this.treeNode);
|
|
|
103 |
}
|
|
|
104 |
};
|
|
|
105 |
this.autoExpandTimer = dojo.lang.setTimeout(autoExpand, _this.autoExpandDelay);
|
|
|
106 |
}, getDNDMode:function () {
|
|
|
107 |
return this.treeNode.tree.DNDMode;
|
|
|
108 |
}, getAcceptPosition:function (e, sourceTreeNode) {
|
|
|
109 |
var DNDMode = this.getDNDMode();
|
|
|
110 |
if (DNDMode & dojo.widget.Tree.prototype.DNDModes.ONTO && !(!this.treeNode.actionIsDisabled(dojo.widget.TreeNode.prototype.actions.ADDCHILD) && sourceTreeNode.parent !== this.treeNode && this.controller.canMove(sourceTreeNode, this.treeNode))) {
|
|
|
111 |
DNDMode &= ~dojo.widget.Tree.prototype.DNDModes.ONTO;
|
|
|
112 |
}
|
|
|
113 |
var position = this.getPosition(e, DNDMode);
|
|
|
114 |
if (position == "onto" || (!this.isAdjacentNode(sourceTreeNode, position) && this.controller.canMove(sourceTreeNode, this.treeNode.parent))) {
|
|
|
115 |
return position;
|
|
|
116 |
} else {
|
|
|
117 |
return false;
|
|
|
118 |
}
|
|
|
119 |
}, onDragOut:function (e) {
|
|
|
120 |
this.clearAutoExpandTimer();
|
|
|
121 |
this.hideIndicator();
|
|
|
122 |
}, clearAutoExpandTimer:function () {
|
|
|
123 |
if (this.autoExpandTimer) {
|
|
|
124 |
clearTimeout(this.autoExpandTimer);
|
|
|
125 |
this.autoExpandTimer = null;
|
|
|
126 |
}
|
|
|
127 |
}, onDragMove:function (e, dragObjects) {
|
|
|
128 |
var sourceTreeNode = dragObjects[0].treeNode;
|
|
|
129 |
var position = this.getAcceptPosition(e, sourceTreeNode);
|
|
|
130 |
if (position) {
|
|
|
131 |
this.showIndicator(position);
|
|
|
132 |
}
|
|
|
133 |
}, isAdjacentNode:function (sourceNode, position) {
|
|
|
134 |
if (sourceNode === this.treeNode) {
|
|
|
135 |
return true;
|
|
|
136 |
}
|
|
|
137 |
if (sourceNode.getNextSibling() === this.treeNode && position == "before") {
|
|
|
138 |
return true;
|
|
|
139 |
}
|
|
|
140 |
if (sourceNode.getPreviousSibling() === this.treeNode && position == "after") {
|
|
|
141 |
return true;
|
|
|
142 |
}
|
|
|
143 |
return false;
|
|
|
144 |
}, getPosition:function (e, DNDMode) {
|
|
|
145 |
var node = dojo.byId(this.treeNode.labelNode);
|
|
|
146 |
var mousey = e.pageY || e.clientY + dojo.body().scrollTop;
|
|
|
147 |
var nodey = dojo.html.getAbsolutePosition(node).y;
|
|
|
148 |
var height = dojo.html.getBorderBox(node).height;
|
|
|
149 |
var relY = mousey - nodey;
|
|
|
150 |
var p = relY / height;
|
|
|
151 |
var position = "";
|
|
|
152 |
if (DNDMode & dojo.widget.Tree.prototype.DNDModes.ONTO && DNDMode & dojo.widget.Tree.prototype.DNDModes.BETWEEN) {
|
|
|
153 |
if (p <= 0.3) {
|
|
|
154 |
position = "before";
|
|
|
155 |
} else {
|
|
|
156 |
if (p <= 0.7) {
|
|
|
157 |
position = "onto";
|
|
|
158 |
} else {
|
|
|
159 |
position = "after";
|
|
|
160 |
}
|
|
|
161 |
}
|
|
|
162 |
} else {
|
|
|
163 |
if (DNDMode & dojo.widget.Tree.prototype.DNDModes.BETWEEN) {
|
|
|
164 |
if (p <= 0.5) {
|
|
|
165 |
position = "before";
|
|
|
166 |
} else {
|
|
|
167 |
position = "after";
|
|
|
168 |
}
|
|
|
169 |
} else {
|
|
|
170 |
if (DNDMode & dojo.widget.Tree.prototype.DNDModes.ONTO) {
|
|
|
171 |
position = "onto";
|
|
|
172 |
}
|
|
|
173 |
}
|
|
|
174 |
}
|
|
|
175 |
return position;
|
|
|
176 |
}, getTargetParentIndex:function (sourceTreeNode, position) {
|
|
|
177 |
var index = position == "before" ? this.treeNode.getParentIndex() : this.treeNode.getParentIndex() + 1;
|
|
|
178 |
if (this.treeNode.parent === sourceTreeNode.parent && this.treeNode.getParentIndex() > sourceTreeNode.getParentIndex()) {
|
|
|
179 |
index--;
|
|
|
180 |
}
|
|
|
181 |
return index;
|
|
|
182 |
}, onDrop:function (e) {
|
|
|
183 |
var position = this.position;
|
|
|
184 |
this.onDragOut(e);
|
|
|
185 |
var sourceTreeNode = e.dragObject.treeNode;
|
|
|
186 |
if (!dojo.lang.isObject(sourceTreeNode)) {
|
|
|
187 |
dojo.raise("TreeNode not found in dragObject");
|
|
|
188 |
}
|
|
|
189 |
if (position == "onto") {
|
|
|
190 |
return this.controller.move(sourceTreeNode, this.treeNode, 0);
|
|
|
191 |
} else {
|
|
|
192 |
var index = this.getTargetParentIndex(sourceTreeNode, position);
|
|
|
193 |
return this.controller.move(sourceTreeNode, this.treeNode.parent, index);
|
|
|
194 |
}
|
|
|
195 |
}});
|
|
|
196 |
dojo.dnd.TreeDNDController = function (treeController) {
|
|
|
197 |
this.treeController = treeController;
|
|
|
198 |
this.dragSources = {};
|
|
|
199 |
this.dropTargets = {};
|
|
|
200 |
};
|
|
|
201 |
dojo.lang.extend(dojo.dnd.TreeDNDController, {listenTree:function (tree) {
|
|
|
202 |
dojo.event.topic.subscribe(tree.eventNames.createDOMNode, this, "onCreateDOMNode");
|
|
|
203 |
dojo.event.topic.subscribe(tree.eventNames.moveFrom, this, "onMoveFrom");
|
|
|
204 |
dojo.event.topic.subscribe(tree.eventNames.moveTo, this, "onMoveTo");
|
|
|
205 |
dojo.event.topic.subscribe(tree.eventNames.addChild, this, "onAddChild");
|
|
|
206 |
dojo.event.topic.subscribe(tree.eventNames.removeNode, this, "onRemoveNode");
|
|
|
207 |
dojo.event.topic.subscribe(tree.eventNames.treeDestroy, this, "onTreeDestroy");
|
|
|
208 |
}, unlistenTree:function (tree) {
|
|
|
209 |
dojo.event.topic.unsubscribe(tree.eventNames.createDOMNode, this, "onCreateDOMNode");
|
|
|
210 |
dojo.event.topic.unsubscribe(tree.eventNames.moveFrom, this, "onMoveFrom");
|
|
|
211 |
dojo.event.topic.unsubscribe(tree.eventNames.moveTo, this, "onMoveTo");
|
|
|
212 |
dojo.event.topic.unsubscribe(tree.eventNames.addChild, this, "onAddChild");
|
|
|
213 |
dojo.event.topic.unsubscribe(tree.eventNames.removeNode, this, "onRemoveNode");
|
|
|
214 |
dojo.event.topic.unsubscribe(tree.eventNames.treeDestroy, this, "onTreeDestroy");
|
|
|
215 |
}, onTreeDestroy:function (message) {
|
|
|
216 |
this.unlistenTree(message.source);
|
|
|
217 |
}, onCreateDOMNode:function (message) {
|
|
|
218 |
this.registerDNDNode(message.source);
|
|
|
219 |
}, onAddChild:function (message) {
|
|
|
220 |
this.registerDNDNode(message.child);
|
|
|
221 |
}, onMoveFrom:function (message) {
|
|
|
222 |
var _this = this;
|
|
|
223 |
dojo.lang.forEach(message.child.getDescendants(), function (node) {
|
|
|
224 |
_this.unregisterDNDNode(node);
|
|
|
225 |
});
|
|
|
226 |
}, onMoveTo:function (message) {
|
|
|
227 |
var _this = this;
|
|
|
228 |
dojo.lang.forEach(message.child.getDescendants(), function (node) {
|
|
|
229 |
_this.registerDNDNode(node);
|
|
|
230 |
});
|
|
|
231 |
}, registerDNDNode:function (node) {
|
|
|
232 |
if (!node.tree.DNDMode) {
|
|
|
233 |
return;
|
|
|
234 |
}
|
|
|
235 |
var source = null;
|
|
|
236 |
var target = null;
|
|
|
237 |
if (!node.actionIsDisabled(node.actions.MOVE)) {
|
|
|
238 |
var source = new dojo.dnd.TreeDragSource(node.labelNode, this, node.tree.widgetId, node);
|
|
|
239 |
this.dragSources[node.widgetId] = source;
|
|
|
240 |
}
|
|
|
241 |
var target = new dojo.dnd.TreeDropTarget(node.labelNode, this.treeController, node.tree.DNDAcceptTypes, node);
|
|
|
242 |
this.dropTargets[node.widgetId] = target;
|
|
|
243 |
}, unregisterDNDNode:function (node) {
|
|
|
244 |
if (this.dragSources[node.widgetId]) {
|
|
|
245 |
dojo.dnd.dragManager.unregisterDragSource(this.dragSources[node.widgetId]);
|
|
|
246 |
delete this.dragSources[node.widgetId];
|
|
|
247 |
}
|
|
|
248 |
if (this.dropTargets[node.widgetId]) {
|
|
|
249 |
dojo.dnd.dragManager.unregisterDropTarget(this.dropTargets[node.widgetId]);
|
|
|
250 |
delete this.dropTargets[node.widgetId];
|
|
|
251 |
}
|
|
|
252 |
}});
|
|
|
253 |
|