]>
git.wh0rd.org - tt-rss.git/blob - lib/dijit/tree/dndSource.js.uncompressed.js
1 define("dijit/tree/dndSource", [
2 "dojo/_base/array", // array.forEach array.indexOf array.map
3 "dojo/_base/connect", // isCopyKey
4 "dojo/_base/declare", // declare
5 "dojo/dom-class", // domClass.add
6 "dojo/dom-geometry", // domGeometry.position
7 "dojo/_base/lang", // lang.mixin lang.hitch
8 "dojo/on", // subscribe
11 "dojo/dnd/Manager", // DNDManager.manager
13 ], function(array
, connect
, declare
, domClass
, domGeometry
, lang
, on
, touch
, topic
, DNDManager
, _dndSelector
){
16 // dijit/tree/dndSource
18 // Handles drag and drop operations (as a source or a target) for `dijit.Tree`
23 // New item to be added to the Tree, like:
31 var dndSource
= declare("dijit.tree.dndSource", _dndSelector
, {
33 // Handles drag and drop operations (as a source or a target) for `dijit.Tree`
36 // Can be used as a DnD source.
40 // List of accepted types (text strings) for the Tree; defaults to
42 accept
: ["text", "treeNode"],
44 // copyOnly: [private] Boolean
45 // Copy items, if true, use a state of Ctrl key otherwise
48 // dragThreshold: Number
49 // The move delay in pixels before detecting a drag; 5 by default
52 // betweenThreshold: Integer
53 // Distance from upper/lower edge of node to allow drop to reorder nodes
56 // Flag used by Avatar.js to signal to generate text node when dragging
59 constructor: function(/*dijit/Tree*/ tree, /*dijit/tree/dndSource*/ params
){
61 // a constructor of the Tree DnD Source
64 if(!params
){ params
= {}; }
65 lang
.mixin(this, params
);
66 var type
= params
.accept
instanceof Array
? params
.accept
: ["text", "treeNode"];
70 for(var i
= 0; i
< type
.length
; ++i
){
71 this.accept
[type
[i
]] = 1;
75 // class-specific variables
76 this.isDragging
= false;
77 this.mouseDown
= false;
78 this.targetAnchor
= null; // DOMNode corresponding to the currently moused over TreeNode
79 this.targetBox
= null; // coordinates of this.targetAnchor
80 this.dropPosition
= ""; // whether mouse is over/after/before this.targetAnchor
85 this.sourceState
= "";
87 domClass
.add(this.node
, "dojoDndSource");
89 this.targetState
= "";
91 domClass
.add(this.node
, "dojoDndTarget");
96 topic
.subscribe("/dnd/source/over", lang
.hitch(this, "onDndSourceOver")),
97 topic
.subscribe("/dnd/start", lang
.hitch(this, "onDndStart")),
98 topic
.subscribe("/dnd/drop", lang
.hitch(this, "onDndDrop")),
99 topic
.subscribe("/dnd/cancel", lang
.hitch(this, "onDndCancel"))
104 checkAcceptance: function(/*===== source, nodes =====*/){
106 // Checks if the target can accept nodes from this source
107 // source: dijit/tree/dndSource
108 // The source which provides items
110 // Array of DOM nodes corresponding to nodes being dropped, dijitTreeRow nodes if
111 // source is a dijit/Tree.
114 return true; // Boolean
117 copyState: function(keyPressed
){
119 // Returns true, if we need to copy items, false to move.
120 // It is separated to be overwritten dynamically, if needed.
121 // keyPressed: Boolean
122 // The "copy" control key was pressed
125 return this.copyOnly
|| keyPressed
; // Boolean
129 // Prepares the object to be garbage-collected.
130 this.inherited(arguments
);
132 while(h
= this.topics
.pop()){ h
.remove(); }
133 this.targetAnchor
= null;
136 _onDragMouse: function(e
, firstTime
){
138 // Helper method for processing onmousemove/onmouseover events while drag is in progress.
139 // Keeps track of current drop target.
141 // The mousemove event.
142 // firstTime: Boolean?
143 // If this flag is set, this is the first mouse move event of the drag, so call m.canDrop() etc.
144 // even if newTarget == null because the user quickly dragged a node in the Tree to a position
145 // over Tree.containerNode but not over any TreeNode (#7971)
147 var m
= DNDManager
.manager(),
148 oldTarget
= this.targetAnchor
, // the TreeNode corresponding to TreeNode mouse was previously over
149 newTarget
= this.current
, // TreeNode corresponding to TreeNode mouse is currently over
150 oldDropPosition
= this.dropPosition
; // the previous drop position (over/before/after)
152 // calculate if user is indicating to drop the dragged node before, after, or over
153 // (i.e., to become a child of) the target node
154 var newDropPosition
= "Over";
155 if(newTarget
&& this.betweenThreshold
> 0){
156 // If mouse is over a new TreeNode, then get new TreeNode's position and size
157 if(!this.targetBox
|| oldTarget
!= newTarget
){
158 this.targetBox
= domGeometry
.position(newTarget
.rowNode
, true);
160 if((e
.pageY
- this.targetBox
.y
) <= this.betweenThreshold
){
161 newDropPosition
= "Before";
162 }else if((e
.pageY
- this.targetBox
.y
) >= (this.targetBox
.h
- this.betweenThreshold
)){
163 newDropPosition
= "After";
167 if(firstTime
|| newTarget
!= oldTarget
|| newDropPosition
!= oldDropPosition
){
169 this._removeItemClass(oldTarget
.rowNode
, oldDropPosition
);
172 this._addItemClass(newTarget
.rowNode
, newDropPosition
);
175 // Check if it's ok to drop the dragged node on/before/after the target node.
178 }else if(newTarget
== this.tree
.rootNode
&& newDropPosition
!= "Over"){
179 // Can't drop before or after tree's root node; the dropped node would just disappear (at least visually)
182 // Guard against dropping onto yourself (TODO: guard against dropping onto your descendant, #7140)
184 if(m
.source
== this){
185 for(var dragId
in this.selection
){
186 var dragNode
= this.selection
[dragId
];
187 if(dragNode
.item
=== newTarget
.item
){
195 }else if(this.checkItemAcceptance(newTarget
.rowNode
, m
.source
, newDropPosition
.toLowerCase())
196 && !this._isParentChildDrop(m
.source
, newTarget
.rowNode
)){
203 this.targetAnchor
= newTarget
;
204 this.dropPosition
= newDropPosition
;
208 onMouseMove: function(e
){
210 // Called for any onmousemove/ontouchmove events over the Tree
212 // onmousemouse/ontouchmove event
215 if(this.isDragging
&& this.targetState
== "Disabled"){ return; }
216 this.inherited(arguments
);
217 var m
= DNDManager
.manager();
219 this._onDragMouse(e
);
221 if(this.mouseDown
&& this.isSource
&&
222 (Math
.abs(e
.pageX
-this._lastX
)>=this.dragThreshold
|| Math
.abs(e
.pageY
-this._lastY
)>=this.dragThreshold
)){
223 var nodes
= this.getSelectedTreeNodes();
225 if(nodes
.length
> 1){
226 //filter out all selected items which has one of their ancestor selected as well
227 var seen
= this.selection
, i
= 0, r
= [], n
, p
;
228 nextitem
: while((n
= nodes
[i
++])){
229 for(p
= n
.getParent(); p
&& p
!== this.tree
; p
= p
.getParent()){
230 if(seen
[p
.id
]){ //parent is already selected, skip this node
234 //this node does not have any ancestors selected, add it
239 nodes
= array
.map(nodes
, function(n
){return n
.domNode
});
240 m
.startDrag(this, nodes
, this.copyState(connect
.isCopyKey(e
)));
241 this._onDragMouse(e
, true); // because this may be the only mousemove event we get before the drop
247 onMouseDown: function(e
){
249 // Event processor for onmousedown/ontouchstart
251 // onmousedown/ontouchend event
254 this.mouseDown
= true;
255 this.mouseButton
= e
.button
;
256 this._lastX
= e
.pageX
;
257 this._lastY
= e
.pageY
;
258 this.inherited(arguments
);
261 onMouseUp: function(e
){
263 // Event processor for onmouseup/ontouchend
265 // onmouseup/ontouchend event
269 this.mouseDown
= false;
270 this.inherited(arguments
);
274 onMouseOut: function(){
276 // Event processor for when mouse is moved away from a TreeNode
279 this.inherited(arguments
);
280 this._unmarkTargetAnchor();
283 checkItemAcceptance: function(/*===== target, source, position =====*/){
285 // Stub function to be overridden if one wants to check for the ability to drop at the node/item level
287 // In the base case, this is called to check if target can become a child of source.
288 // When betweenThreshold is set, position="before" or "after" means that we
289 // are asking if the source node can be dropped before/after the target node.
291 // The dijitTreeRoot DOM node inside of the TreeNode that we are dropping on to
292 // Use dijit.getEnclosingWidget(target) to get the TreeNode.
293 // source: dijit/tree/dndSource
294 // The (set of) nodes we are dropping
296 // "over", "before", or "after"
302 // topic event processors
303 onDndSourceOver: function(source
){
305 // Topic event processor for /dnd/source/over, called when detected a current source.
307 // The dijit/tree/dndSource / dojo/dnd/Source which has the mouse over it
311 this.mouseDown
= false;
312 this._unmarkTargetAnchor();
313 }else if(this.isDragging
){
314 var m
= DNDManager
.manager();
318 onDndStart: function(source
, nodes
, copy
){
320 // Topic event processor for /dnd/start, called to initiate the DnD operation
322 // The dijit/tree/dndSource / dojo/dnd/Source which is providing the items
324 // The list of transferred items, dndTreeNode nodes if dragging from a Tree
326 // Copy items, if true, move items otherwise
331 this._changeState("Source", this == source
? (copy
? "Copied" : "Moved") : "");
333 var accepted
= this.checkAcceptance(source
, nodes
);
335 this._changeState("Target", accepted
? "" : "Disabled");
338 DNDManager
.manager().overSource(this);
341 this.isDragging
= true;
344 itemCreator: function(nodes
/*===== , target, source =====*/){
346 // Returns objects passed to `Tree.model.newItem()` based on DnD nodes
347 // dropped onto the tree. Developer must override this method to enable
348 // dropping from external sources onto this Tree, unless the Tree.model's items
349 // happen to look like {id: 123, name: "Apple" } with no other attributes.
351 // For each node in nodes[], which came from source, create a hash of name/value
352 // pairs to be passed to Tree.model.newItem(). Returns array of those hashes.
355 // source: dojo/dnd/Source
357 // Array of name/value hashes for each new item to be added to the Tree
361 // TODO: for 2.0 refactor so itemCreator() is called once per drag node, and
362 // make signature itemCreator(sourceItem, node, target) (or similar).
364 return array
.map(nodes
, function(node
){
367 "name": node
.textContent
|| node
.innerText
|| ""
372 onDndDrop: function(source
, nodes
, copy
){
374 // Topic event processor for /dnd/drop, called to finish the DnD operation.
376 // Updates data store items according to where node was dragged from and dropped
377 // to. The tree will then respond to those data store updates and redraw itself.
379 // The dijit/tree/dndSource / dojo/dnd/Source which is providing the items
381 // The list of transferred items, dndTreeNode nodes if dragging from a Tree
383 // Copy items, if true, move items otherwise
386 if(this.containerState
== "Over"){
387 var tree
= this.tree
,
389 target
= this.targetAnchor
;
391 this.isDragging
= false;
393 // Compute the new parent item
396 var before
; // drop source before (aka previous sibling) of target
397 newParentItem
= (target
&& target
.item
) || tree
.item
;
398 if(this.dropPosition
== "Before" || this.dropPosition
== "After"){
399 // TODO: if there is no parent item then disallow the drop.
400 // Actually this should be checked during onMouseMove too, to make the drag icon red.
401 newParentItem
= (target
.getParent() && target
.getParent().item
) || tree
.item
;
402 // Compute the insert index for reordering
403 insertIndex
= target
.getIndexInParent();
404 if(this.dropPosition
== "After"){
405 insertIndex
= target
.getIndexInParent() + 1;
406 before
= target
.getNextSibling() && target
.getNextSibling().item
;
408 before
= target
.item
;
411 newParentItem
= (target
&& target
.item
) || tree
.item
;
414 // If necessary, use this variable to hold array of hashes to pass to model.newItem()
415 // (one entry in the array for each dragged node).
418 array
.forEach(nodes
, function(node
, idx
){
419 // dojo/dnd/Item representing the thing being dropped.
420 // Don't confuse the use of item here (meaning a DnD item) with the
421 // uses below where item means dojo.data item.
422 var sourceItem
= source
.getItem(node
.id
);
424 // Information that's available if the source is another Tree
425 // (possibly but not necessarily this tree, possibly but not
426 // necessarily the same model as this Tree)
427 if(array
.indexOf(sourceItem
.type
, "treeNode") != -1){
428 var childTreeNode
= sourceItem
.data
,
429 childItem
= childTreeNode
.item
,
430 oldParentItem
= childTreeNode
.getParent().item
;
434 // This is a node from my own tree, and we are moving it, not copying.
435 // Remove item from old parent's children attribute.
436 // TODO: dijit/tree/dndSelector should implement deleteSelectedNodes()
437 // and this code should go there.
439 if(typeof insertIndex
== "number"){
440 if(newParentItem
== oldParentItem
&& childTreeNode
.getIndexInParent() < insertIndex
){
444 model
.pasteItem(childItem
, oldParentItem
, newParentItem
, copy
, insertIndex
, before
);
445 }else if(model
.isItem(childItem
)){
446 // Item from same model
447 // (maybe we should only do this branch if the source is a tree?)
448 model
.pasteItem(childItem
, oldParentItem
, newParentItem
, copy
, insertIndex
, before
);
450 // Get the hash to pass to model.newItem(). A single call to
451 // itemCreator() returns an array of hashes, one for each drag source node.
453 newItemsParams
= this.itemCreator(nodes
, target
.rowNode
, source
);
456 // Create new item in the tree, based on the drag source.
457 model
.newItem(newItemsParams
[idx
], newParentItem
, insertIndex
, before
);
461 // Expand the target node (if it's currently collapsed) so the user can see
462 // where their node was dropped. In particular since that node is still selected.
463 this.tree
._expandNode(target
);
468 onDndCancel: function(){
470 // Topic event processor for /dnd/cancel, called to cancel the DnD operation
473 this._unmarkTargetAnchor();
474 this.isDragging
= false;
475 this.mouseDown
= false;
476 delete this.mouseButton
;
477 this._changeState("Source", "");
478 this._changeState("Target", "");
481 // When focus moves in/out of the entire Tree
482 onOverEvent: function(){
484 // This method is called when mouse is moved over our container (like onmouseenter)
487 this.inherited(arguments
);
488 DNDManager
.manager().overSource(this);
490 onOutEvent: function(){
492 // This method is called when mouse is moved out of our container (like onmouseleave)
495 this._unmarkTargetAnchor();
496 var m
= DNDManager
.manager();
502 this.inherited(arguments
);
505 _isParentChildDrop: function(source
, targetRow
){
507 // Checks whether the dragged items are parent rows in the tree which are being
508 // dragged into their own children.
511 // The DragSource object.
514 // The tree row onto which the dragged nodes are being dropped.
519 // If the dragged object is not coming from the tree this widget belongs to,
520 // it cannot be invalid.
521 if(!source
.tree
|| source
.tree
!= this.tree
){
526 var root
= source
.tree
.domNode
;
527 var ids
= source
.selection
;
529 var node
= targetRow
.parentNode
;
531 // Iterate up the DOM hierarchy from the target drop row,
532 // checking of any of the dragged nodes have the same ID.
533 while(node
!= root
&& !ids
[node
.id
]){
534 node
= node
.parentNode
;
537 return node
.id
&& ids
[node
.id
];
540 _unmarkTargetAnchor: function(){
542 // Removes hover class of the current target anchor
545 if(!this.targetAnchor
){ return; }
546 this._removeItemClass(this.targetAnchor
.rowNode
, this.dropPosition
);
547 this.targetAnchor
= null;
548 this.targetBox
= null;
549 this.dropPosition
= null;
552 _markDndStatus: function(copy
){
554 // Changes source's state based on "copy" status
555 this._changeState("Source", copy
? "Copied" : "Moved");
560 dndSource.__Item = __Item;