2
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.com/yui/license.html
8
YUI.add('dd-delegate', function(Y) {
12
* Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.
14
* @submodule dd-delegate
17
* Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.
25
var Delegate = function(o) {
26
Delegate.superclass.constructor.apply(this, arguments);
30
_tmpNode = Y.Node.create('<div>Temp Node</div>');
33
Y.extend(Delegate, Y.Base, {
36
* @property _bubbleTargets
37
* @description The default bubbleTarget for this object. Default: Y.DD.DDM
39
_bubbleTargets: Y.DD.DDM,
42
* @description A reference to the temporary dd instance used under the hood.
46
* @property _shimState
48
* @description The state of the Y.DD.DDM._noShim property to it can be reset.
54
* @description Array of event handles to be destroyed
59
* @method _onNodeChange
60
* @description Listens to the nodeChange event and sets the dragNode on the temp dd instance.
61
* @param {Event} e The Event.
63
_onNodeChange: function(e) {
64
this.set('dragNode', e.newVal);
68
* @method _afterDragEnd
69
* @description Listens for the drag:end event and updates the temp dd instance.
70
* @param {Event} e The Event.
72
_afterDragEnd: function(e) {
73
Y.DD.DDM._noShim = this._shimState;
75
this.set('lastNode', this.dd.get('node'));
76
this.get('lastNode').removeClass(Y.DD.DDM.CSS_PREFIX + '-dragging');
78
this.dd.set('node', _tmpNode);
82
* @method _delMouseDown
83
* @description The callback for the Y.DD.Delegate instance used
84
* @param {Event} e The MouseDown Event.
86
_delMouseDown: function(e) {
87
var tar = e.currentTarget,
90
if (tar.test(this.get(NODES)) && !tar.test(this.get('invalid'))) {
91
this._shimState = Y.DD.DDM._noShim;
92
Y.DD.DDM._noShim = true;
93
this.set('currentNode', tar);
96
dd.set('dragNode', Y.DD.DDM._proxy);
98
dd.set('dragNode', tar);
102
dd.fire('drag:mouseDown', { ev: e });
107
* @method _onMouseEnter
108
* @description Sets the target shim state
109
* @param {Event} e The MouseEnter Event
111
_onMouseEnter: function(e) {
112
this._shimState = Y.DD.DDM._noShim;
113
Y.DD.DDM._noShim = true;
117
* @method _onMouseLeave
118
* @description Resets the target shim state
119
* @param {Event} e The MouseLeave Event
121
_onMouseLeave: function(e) {
122
Y.DD.DDM._noShim = this._shimState;
124
initializer: function(cfg) {
126
//Create a tmp DD instance under the hood.
127
var conf = Y.clone(this.get('dragConfig') || {}),
128
cont = this.get(CONT);
130
conf.node = _tmpNode.cloneNode(true);
131
conf.bubbleTargets = this;
133
if (this.get('handles')) {
134
conf.handles = this.get('handles');
137
this.dd = new Y.DD.Drag(conf);
139
//On end drag, detach the listeners
140
this.dd.after('drag:end', Y.bind(this._afterDragEnd, this));
141
this.dd.on('dragNodeChange', Y.bind(this._onNodeChange, this));
143
//Attach the delegate to the container
144
this._handles.push(Y.delegate(Y.DD.Drag.START_EVENT, Y.bind(this._delMouseDown, this), cont, this.get(NODES)));
146
this._handles.push(Y.on('mouseenter', Y.bind(this._onMouseEnter, this), cont));
148
this._handles.push(Y.on('mouseleave', Y.bind(this._onMouseLeave, this), cont));
150
Y.later(50, this, this.syncTargets);
151
Y.DD.DDM.regDelegate(this);
154
* @method syncTargets
155
* @description Applies the Y.Plugin.Drop to all nodes matching the cont + nodes selector query.
159
syncTargets: function() {
160
if (!Y.Plugin.Drop || this.get('destroyed')) {
163
var items, groups, config;
165
if (this.get('target')) {
166
items = Y.one(this.get(CONT)).all(this.get(NODES));
167
groups = this.dd.get('groups');
168
config = this.get('dragConfig');
170
if (config && 'groups' in config) {
171
groups = config.groups;
174
items.each(function(i) {
175
this.createDrop(i, groups);
182
* @description Apply the Drop plugin to this node
183
* @param {Node} node The Node to apply the plugin to
184
* @param {Array} groups The default groups to assign this target to.
187
createDrop: function(node, groups) {
194
node.plug(Y.Plugin.Drop, config);
196
node.drop.set('groups', groups);
199
destructor: function() {
204
var targets = Y.one(this.get(CONT)).all(this.get(NODES));
205
targets.unplug(Y.Plugin.Drop);
207
Y.each(this._handles, function(v) {
215
* @attribute container
216
* @description A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.
224
* @description A selector query to get the children of the "container" to make draggable elements from.
228
value: '.dd-draggable'
232
* @description A selector query to test a node to see if it's an invalid item.
236
value: 'input, select, button, a, textarea'
239
* @attribute lastNode
240
* @description Y.Node instance of the last item dragged.
247
* @attribute currentNode
248
* @description Y.Node instance of the dd node.
255
* @attribute dragNode
256
* @description Y.Node instance of the dd dragNode.
264
* @description Is the mouse currently over the container
272
* @description Should the items also be a drop target.
279
* @attribute dragConfig
280
* @description The default config to be used when creating the DD instance.
288
* @description The handles config option added to the temp DD instance.
301
* @property _delegates
302
* @description Holder for all Y.DD.Delegate instances
308
* @method regDelegate
309
* @description Register a Delegate with the DDM
311
regDelegate: function(del) {
312
this._delegates.push(del);
316
* @method getDelegate
317
* @description Get a delegate instance from a container node
318
* @returns Y.DD.Delegate
320
getDelegate: function(node) {
323
Y.each(this._delegates, function(v) {
324
if (node.test(v.get(CONT))) {
333
Y.DD.Delegate = Delegate;
337
}, '3.2.0' ,{requires:['dd-drag', 'event-mouseenter'], skinnable:false, optional:['dd-drop-plugin']});
added
removed
src-js/lazrjs/yui/dd/dd-delegate.js
