You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
550 lines
16 KiB
JavaScript
550 lines
16 KiB
JavaScript
/*
|
|
Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
|
Available via Academic Free License >= 2.1 OR the modified BSD license.
|
|
see: http://dojotoolkit.org/license for details
|
|
*/
|
|
|
|
|
|
if(!dojo._hasResource["dojo.dnd.Source"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
|
|
dojo._hasResource["dojo.dnd.Source"] = true;
|
|
dojo.provide("dojo.dnd.Source");
|
|
|
|
dojo.require("dojo.dnd.Selector");
|
|
dojo.require("dojo.dnd.Manager");
|
|
|
|
/*
|
|
Container property:
|
|
"Horizontal"- if this is the horizontal container
|
|
Source states:
|
|
"" - normal state
|
|
"Moved" - this source is being moved
|
|
"Copied" - this source is being copied
|
|
Target states:
|
|
"" - normal state
|
|
"Disabled" - the target cannot accept an avatar
|
|
Target anchor state:
|
|
"" - item is not selected
|
|
"Before" - insert point is before the anchor
|
|
"After" - insert point is after the anchor
|
|
*/
|
|
|
|
/*=====
|
|
dojo.dnd.__SourceArgs = function(){
|
|
// summary:
|
|
// a dict of parameters for DnD Source configuration. Note that any
|
|
// property on Source elements may be configured, but this is the
|
|
// short-list
|
|
// isSource: Boolean?
|
|
// can be used as a DnD source. Defaults to true.
|
|
// accept: Array?
|
|
// list of accepted types (text strings) for a target; defaults to
|
|
// ["text"]
|
|
// autoSync: Boolean
|
|
// if true refreshes the node list on every operation; false by default
|
|
// copyOnly: Boolean?
|
|
// copy items, if true, use a state of Ctrl key otherwise,
|
|
// see selfCopy and selfAccept for more details
|
|
// delay: Number
|
|
// the move delay in pixels before detecting a drag; 0 by default
|
|
// horizontal: Boolean?
|
|
// a horizontal container, if true, vertical otherwise or when omitted
|
|
// selfCopy: Boolean?
|
|
// copy items by default when dropping on itself,
|
|
// false by default, works only if copyOnly is true
|
|
// selfAccept: Boolean?
|
|
// accept its own items when copyOnly is true,
|
|
// true by default, works only if copyOnly is true
|
|
// withHandles: Boolean?
|
|
// allows dragging only by handles, false by default
|
|
// generateText: Boolean?
|
|
// generate text node for drag and drop, true by default
|
|
this.isSource = isSource;
|
|
this.accept = accept;
|
|
this.autoSync = autoSync;
|
|
this.copyOnly = copyOnly;
|
|
this.delay = delay;
|
|
this.horizontal = horizontal;
|
|
this.selfCopy = selfCopy;
|
|
this.selfAccept = selfAccept;
|
|
this.withHandles = withHandles;
|
|
this.generateText = true;
|
|
}
|
|
=====*/
|
|
|
|
dojo.declare("dojo.dnd.Source", dojo.dnd.Selector, {
|
|
// summary:
|
|
// a Source object, which can be used as a DnD source, or a DnD target
|
|
|
|
// object attributes (for markup)
|
|
isSource: true,
|
|
horizontal: false,
|
|
copyOnly: false,
|
|
selfCopy: false,
|
|
selfAccept: true,
|
|
skipForm: false,
|
|
withHandles: false,
|
|
autoSync: false,
|
|
delay: 0, // pixels
|
|
accept: ["text"],
|
|
generateText: true,
|
|
|
|
constructor: function(/*DOMNode|String*/node, /*dojo.dnd.__SourceArgs?*/params){
|
|
// summary:
|
|
// a constructor of the Source
|
|
// node:
|
|
// node or node's id to build the source on
|
|
// params:
|
|
// any property of this class may be configured via the params
|
|
// object which is mixed-in to the `dojo.dnd.Source` instance
|
|
dojo.mixin(this, dojo.mixin({}, params));
|
|
var type = this.accept;
|
|
if(type.length){
|
|
this.accept = {};
|
|
for(var i = 0; i < type.length; ++i){
|
|
this.accept[type[i]] = 1;
|
|
}
|
|
}
|
|
// class-specific variables
|
|
this.isDragging = false;
|
|
this.mouseDown = false;
|
|
this.targetAnchor = null;
|
|
this.targetBox = null;
|
|
this.before = true;
|
|
this._lastX = 0;
|
|
this._lastY = 0;
|
|
// states
|
|
this.sourceState = "";
|
|
if(this.isSource){
|
|
dojo.addClass(this.node, "dojoDndSource");
|
|
}
|
|
this.targetState = "";
|
|
if(this.accept){
|
|
dojo.addClass(this.node, "dojoDndTarget");
|
|
}
|
|
if(this.horizontal){
|
|
dojo.addClass(this.node, "dojoDndHorizontal");
|
|
}
|
|
// set up events
|
|
this.topics = [
|
|
dojo.subscribe("/dnd/source/over", this, "onDndSourceOver"),
|
|
dojo.subscribe("/dnd/start", this, "onDndStart"),
|
|
dojo.subscribe("/dnd/drop", this, "onDndDrop"),
|
|
dojo.subscribe("/dnd/cancel", this, "onDndCancel")
|
|
];
|
|
},
|
|
|
|
// methods
|
|
checkAcceptance: function(source, nodes){
|
|
// summary:
|
|
// checks if the target can accept nodes from this source
|
|
// source: Object
|
|
// the source which provides items
|
|
// nodes: Array
|
|
// the list of transferred items
|
|
if(this == source){
|
|
return !this.copyOnly || this.selfAccept;
|
|
}
|
|
for(var i = 0; i < nodes.length; ++i){
|
|
var type = source.getItem(nodes[i].id).type;
|
|
// type instanceof Array
|
|
var flag = false;
|
|
for(var j = 0; j < type.length; ++j){
|
|
if(type[j] in this.accept){
|
|
flag = true;
|
|
break;
|
|
}
|
|
}
|
|
if(!flag){
|
|
return false; // Boolean
|
|
}
|
|
}
|
|
return true; // Boolean
|
|
},
|
|
copyState: function(keyPressed, self){
|
|
// summary:
|
|
// Returns true if we need to copy items, false to move.
|
|
// It is separated to be overwritten dynamically, if needed.
|
|
// keyPressed: Boolean
|
|
// the "copy" key was pressed
|
|
// self: Boolean?
|
|
// optional flag that means that we are about to drop on itself
|
|
|
|
if(keyPressed){ return true; }
|
|
if(arguments.length < 2){
|
|
self = this == dojo.dnd.manager().target;
|
|
}
|
|
if(self){
|
|
if(this.copyOnly){
|
|
return this.selfCopy;
|
|
}
|
|
}else{
|
|
return this.copyOnly;
|
|
}
|
|
return false; // Boolean
|
|
},
|
|
destroy: function(){
|
|
// summary:
|
|
// prepares the object to be garbage-collected
|
|
dojo.dnd.Source.superclass.destroy.call(this);
|
|
dojo.forEach(this.topics, dojo.unsubscribe);
|
|
this.targetAnchor = null;
|
|
},
|
|
|
|
// markup methods
|
|
markupFactory: function(params, node){
|
|
params._skipStartup = true;
|
|
return new dojo.dnd.Source(node, params);
|
|
},
|
|
|
|
// mouse event processors
|
|
onMouseMove: function(e){
|
|
// summary:
|
|
// event processor for onmousemove
|
|
// e: Event
|
|
// mouse event
|
|
if(this.isDragging && this.targetState == "Disabled"){ return; }
|
|
dojo.dnd.Source.superclass.onMouseMove.call(this, e);
|
|
var m = dojo.dnd.manager();
|
|
if(!this.isDragging){
|
|
if(this.mouseDown && this.isSource &&
|
|
(Math.abs(e.pageX - this._lastX) > this.delay || Math.abs(e.pageY - this._lastY) > this.delay)){
|
|
var nodes = this.getSelectedNodes();
|
|
if(nodes.length){
|
|
m.startDrag(this, nodes, this.copyState(dojo.isCopyKey(e), true));
|
|
}
|
|
}
|
|
}
|
|
if(this.isDragging){
|
|
// calculate before/after
|
|
var before = false;
|
|
if(this.current){
|
|
if(!this.targetBox || this.targetAnchor != this.current){
|
|
this.targetBox = dojo.position(this.current, true);
|
|
}
|
|
if(this.horizontal){
|
|
before = (e.pageX - this.targetBox.x) < (this.targetBox.w / 2);
|
|
}else{
|
|
before = (e.pageY - this.targetBox.y) < (this.targetBox.h / 2);
|
|
}
|
|
}
|
|
if(this.current != this.targetAnchor || before != this.before){
|
|
this._markTargetAnchor(before);
|
|
m.canDrop(!this.current || m.source != this || !(this.current.id in this.selection));
|
|
}
|
|
}
|
|
},
|
|
onMouseDown: function(e){
|
|
// summary:
|
|
// event processor for onmousedown
|
|
// e: Event
|
|
// mouse event
|
|
if(!this.mouseDown && this._legalMouseDown(e) && (!this.skipForm || !dojo.dnd.isFormElement(e))){
|
|
this.mouseDown = true;
|
|
this._lastX = e.pageX;
|
|
this._lastY = e.pageY;
|
|
dojo.dnd.Source.superclass.onMouseDown.call(this, e);
|
|
}
|
|
},
|
|
onMouseUp: function(e){
|
|
// summary:
|
|
// event processor for onmouseup
|
|
// e: Event
|
|
// mouse event
|
|
if(this.mouseDown){
|
|
this.mouseDown = false;
|
|
dojo.dnd.Source.superclass.onMouseUp.call(this, e);
|
|
}
|
|
},
|
|
|
|
// topic event processors
|
|
onDndSourceOver: function(source){
|
|
// summary:
|
|
// topic event processor for /dnd/source/over, called when detected a current source
|
|
// source: Object
|
|
// the source which has the mouse over it
|
|
if(this != source){
|
|
this.mouseDown = false;
|
|
if(this.targetAnchor){
|
|
this._unmarkTargetAnchor();
|
|
}
|
|
}else if(this.isDragging){
|
|
var m = dojo.dnd.manager();
|
|
m.canDrop(this.targetState != "Disabled" && (!this.current || m.source != this || !(this.current.id in this.selection)));
|
|
}
|
|
},
|
|
onDndStart: function(source, nodes, copy){
|
|
// summary:
|
|
// topic event processor for /dnd/start, called to initiate the DnD operation
|
|
// source: Object
|
|
// the source which provides items
|
|
// nodes: Array
|
|
// the list of transferred items
|
|
// copy: Boolean
|
|
// copy items, if true, move items otherwise
|
|
if(this.autoSync){ this.sync(); }
|
|
if(this.isSource){
|
|
this._changeState("Source", this == source ? (copy ? "Copied" : "Moved") : "");
|
|
}
|
|
var accepted = this.accept && this.checkAcceptance(source, nodes);
|
|
this._changeState("Target", accepted ? "" : "Disabled");
|
|
if(this == source){
|
|
dojo.dnd.manager().overSource(this);
|
|
}
|
|
this.isDragging = true;
|
|
},
|
|
onDndDrop: function(source, nodes, copy, target){
|
|
// summary:
|
|
// topic event processor for /dnd/drop, called to finish the DnD operation
|
|
// source: Object
|
|
// the source which provides items
|
|
// nodes: Array
|
|
// the list of transferred items
|
|
// copy: Boolean
|
|
// copy items, if true, move items otherwise
|
|
// target: Object
|
|
// the target which accepts items
|
|
if(this == target){
|
|
// this one is for us => move nodes!
|
|
this.onDrop(source, nodes, copy);
|
|
}
|
|
this.onDndCancel();
|
|
},
|
|
onDndCancel: function(){
|
|
// summary:
|
|
// topic event processor for /dnd/cancel, called to cancel the DnD operation
|
|
if(this.targetAnchor){
|
|
this._unmarkTargetAnchor();
|
|
this.targetAnchor = null;
|
|
}
|
|
this.before = true;
|
|
this.isDragging = false;
|
|
this.mouseDown = false;
|
|
this._changeState("Source", "");
|
|
this._changeState("Target", "");
|
|
},
|
|
|
|
// local events
|
|
onDrop: function(source, nodes, copy){
|
|
// summary:
|
|
// called only on the current target, when drop is performed
|
|
// source: Object
|
|
// the source which provides items
|
|
// nodes: Array
|
|
// the list of transferred items
|
|
// copy: Boolean
|
|
// copy items, if true, move items otherwise
|
|
|
|
if(this != source){
|
|
this.onDropExternal(source, nodes, copy);
|
|
}else{
|
|
this.onDropInternal(nodes, copy);
|
|
}
|
|
},
|
|
onDropExternal: function(source, nodes, copy){
|
|
// summary:
|
|
// called only on the current target, when drop is performed
|
|
// from an external source
|
|
// source: Object
|
|
// the source which provides items
|
|
// nodes: Array
|
|
// the list of transferred items
|
|
// copy: Boolean
|
|
// copy items, if true, move items otherwise
|
|
|
|
var oldCreator = this._normalizedCreator;
|
|
// transferring nodes from the source to the target
|
|
if(this.creator){
|
|
// use defined creator
|
|
this._normalizedCreator = function(node, hint){
|
|
return oldCreator.call(this, source.getItem(node.id).data, hint);
|
|
};
|
|
}else{
|
|
// we have no creator defined => move/clone nodes
|
|
if(copy){
|
|
// clone nodes
|
|
this._normalizedCreator = function(node, hint){
|
|
var t = source.getItem(node.id);
|
|
var n = node.cloneNode(true);
|
|
n.id = dojo.dnd.getUniqueId();
|
|
return {node: n, data: t.data, type: t.type};
|
|
};
|
|
}else{
|
|
// move nodes
|
|
this._normalizedCreator = function(node, hint){
|
|
var t = source.getItem(node.id);
|
|
source.delItem(node.id);
|
|
return {node: node, data: t.data, type: t.type};
|
|
};
|
|
}
|
|
}
|
|
this.selectNone();
|
|
if(!copy && !this.creator){
|
|
source.selectNone();
|
|
}
|
|
this.insertNodes(true, nodes, this.before, this.current);
|
|
if(!copy && this.creator){
|
|
source.deleteSelectedNodes();
|
|
}
|
|
this._normalizedCreator = oldCreator;
|
|
},
|
|
onDropInternal: function(nodes, copy){
|
|
// summary:
|
|
// called only on the current target, when drop is performed
|
|
// from the same target/source
|
|
// nodes: Array
|
|
// the list of transferred items
|
|
// copy: Boolean
|
|
// copy items, if true, move items otherwise
|
|
|
|
var oldCreator = this._normalizedCreator;
|
|
// transferring nodes within the single source
|
|
if(this.current && this.current.id in this.selection){
|
|
// do nothing
|
|
return;
|
|
}
|
|
if(copy){
|
|
if(this.creator){
|
|
// create new copies of data items
|
|
this._normalizedCreator = function(node, hint){
|
|
return oldCreator.call(this, this.getItem(node.id).data, hint);
|
|
};
|
|
}else{
|
|
// clone nodes
|
|
this._normalizedCreator = function(node, hint){
|
|
var t = this.getItem(node.id);
|
|
var n = node.cloneNode(true);
|
|
n.id = dojo.dnd.getUniqueId();
|
|
return {node: n, data: t.data, type: t.type};
|
|
};
|
|
}
|
|
}else{
|
|
// move nodes
|
|
if(!this.current){
|
|
// do nothing
|
|
return;
|
|
}
|
|
this._normalizedCreator = function(node, hint){
|
|
var t = this.getItem(node.id);
|
|
return {node: node, data: t.data, type: t.type};
|
|
};
|
|
}
|
|
this._removeSelection();
|
|
this.insertNodes(true, nodes, this.before, this.current);
|
|
this._normalizedCreator = oldCreator;
|
|
},
|
|
onDraggingOver: function(){
|
|
// summary:
|
|
// called during the active DnD operation, when items
|
|
// are dragged over this target, and it is not disabled
|
|
},
|
|
onDraggingOut: function(){
|
|
// summary:
|
|
// called during the active DnD operation, when items
|
|
// are dragged away from this target, and it is not disabled
|
|
},
|
|
|
|
// utilities
|
|
onOverEvent: function(){
|
|
// summary:
|
|
// this function is called once, when mouse is over our container
|
|
dojo.dnd.Source.superclass.onOverEvent.call(this);
|
|
dojo.dnd.manager().overSource(this);
|
|
if(this.isDragging && this.targetState != "Disabled"){
|
|
this.onDraggingOver();
|
|
}
|
|
},
|
|
onOutEvent: function(){
|
|
// summary:
|
|
// this function is called once, when mouse is out of our container
|
|
dojo.dnd.Source.superclass.onOutEvent.call(this);
|
|
dojo.dnd.manager().outSource(this);
|
|
if(this.isDragging && this.targetState != "Disabled"){
|
|
this.onDraggingOut();
|
|
}
|
|
},
|
|
_markTargetAnchor: function(before){
|
|
// summary:
|
|
// assigns a class to the current target anchor based on "before" status
|
|
// before: Boolean
|
|
// insert before, if true, after otherwise
|
|
if(this.current == this.targetAnchor && this.before == before){ return; }
|
|
if(this.targetAnchor){
|
|
this._removeItemClass(this.targetAnchor, this.before ? "Before" : "After");
|
|
}
|
|
this.targetAnchor = this.current;
|
|
this.targetBox = null;
|
|
this.before = before;
|
|
if(this.targetAnchor){
|
|
this._addItemClass(this.targetAnchor, this.before ? "Before" : "After");
|
|
}
|
|
},
|
|
_unmarkTargetAnchor: function(){
|
|
// summary:
|
|
// removes a class of the current target anchor based on "before" status
|
|
if(!this.targetAnchor){ return; }
|
|
this._removeItemClass(this.targetAnchor, this.before ? "Before" : "After");
|
|
this.targetAnchor = null;
|
|
this.targetBox = null;
|
|
this.before = true;
|
|
},
|
|
_markDndStatus: function(copy){
|
|
// summary:
|
|
// changes source's state based on "copy" status
|
|
this._changeState("Source", copy ? "Copied" : "Moved");
|
|
},
|
|
_legalMouseDown: function(e){
|
|
// summary:
|
|
// checks if user clicked on "approved" items
|
|
// e: Event
|
|
// mouse event
|
|
|
|
// accept only the left mouse button
|
|
if(!dojo.mouseButtons.isLeft(e)){ return false; }
|
|
|
|
if(!this.withHandles){ return true; }
|
|
|
|
// check for handles
|
|
for(var node = e.target; node && node !== this.node; node = node.parentNode){
|
|
if(dojo.hasClass(node, "dojoDndHandle")){ return true; }
|
|
if(dojo.hasClass(node, "dojoDndItem") || dojo.hasClass(node, "dojoDndIgnore")){ break; }
|
|
}
|
|
return false; // Boolean
|
|
}
|
|
});
|
|
|
|
dojo.declare("dojo.dnd.Target", dojo.dnd.Source, {
|
|
// summary: a Target object, which can be used as a DnD target
|
|
|
|
constructor: function(node, params){
|
|
// summary:
|
|
// a constructor of the Target --- see the `dojo.dnd.Source.constructor` for details
|
|
this.isSource = false;
|
|
dojo.removeClass(this.node, "dojoDndSource");
|
|
},
|
|
|
|
// markup methods
|
|
markupFactory: function(params, node){
|
|
params._skipStartup = true;
|
|
return new dojo.dnd.Target(node, params);
|
|
}
|
|
});
|
|
|
|
dojo.declare("dojo.dnd.AutoSource", dojo.dnd.Source, {
|
|
// summary:
|
|
// a source that syncs its DnD nodes by default
|
|
|
|
constructor: function(node, params){
|
|
// summary:
|
|
// constructor of the AutoSource --- see the Source constructor for details
|
|
this.autoSync = true;
|
|
},
|
|
|
|
// markup methods
|
|
markupFactory: function(params, node){
|
|
params._skipStartup = true;
|
|
return new dojo.dnd.AutoSource(node, params);
|
|
}
|
|
});
|
|
|
|
}
|