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));
142 this.dd.after('drag:mouseup', function() {
146 //Attach the delegate to the container
147 this._handles.push(Y.delegate(Y.DD.Drag.START_EVENT, Y.bind(this._delMouseDown, this), cont, this.get(NODES)));
149 this._handles.push(Y.on('mouseenter', Y.bind(this._onMouseEnter, this), cont));
151 this._handles.push(Y.on('mouseleave', Y.bind(this._onMouseLeave, this), cont));
153 Y.later(50, this, this.syncTargets);
154 Y.DD.DDM.regDelegate(this);
157 * @method syncTargets
158 * @description Applies the Y.Plugin.Drop to all nodes matching the cont + nodes selector query.
162 syncTargets: function() {
163 if (!Y.Plugin.Drop || this.get('destroyed')) {
166 var items, groups, config;
168 if (this.get('target')) {
169 items = Y.one(this.get(CONT)).all(this.get(NODES));
170 groups = this.dd.get('groups');
171 config = this.get('dragConfig');
173 if (config && 'groups' in config) {
174 groups = config.groups;
177 items.each(function(i) {
178 this.createDrop(i, groups);
185 * @description Apply the Drop plugin to this node
186 * @param {Node} node The Node to apply the plugin to
187 * @param {Array} groups The default groups to assign this target to.
190 createDrop: function(node, groups) {
197 node.plug(Y.Plugin.Drop, config);
199 node.drop.set('groups', groups);
202 destructor: function() {
207 var targets = Y.one(this.get(CONT)).all(this.get(NODES));
208 targets.unplug(Y.Plugin.Drop);
210 Y.each(this._handles, function(v) {
218 * @attribute container
219 * @description A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.
227 * @description A selector query to get the children of the "container" to make draggable elements from.
231 value: '.dd-draggable'
235 * @description A selector query to test a node to see if it's an invalid item.
239 value: 'input, select, button, a, textarea'
242 * @attribute lastNode
243 * @description Y.Node instance of the last item dragged.
250 * @attribute currentNode
251 * @description Y.Node instance of the dd node.
258 * @attribute dragNode
259 * @description Y.Node instance of the dd dragNode.
267 * @description Is the mouse currently over the container
275 * @description Should the items also be a drop target.
282 * @attribute dragConfig
283 * @description The default config to be used when creating the DD instance.
291 * @description The handles config option added to the temp DD instance.
304 * @property _delegates
305 * @description Holder for all Y.DD.Delegate instances
311 * @method regDelegate
312 * @description Register a Delegate with the DDM
314 regDelegate: function(del) {
315 this._delegates.push(del);
319 * @method getDelegate
320 * @description Get a delegate instance from a container node
321 * @returns Y.DD.Delegate
323 getDelegate: function(node) {
326 Y.each(this._delegates, function(v) {
327 if (node.test(v.get(CONT))) {
336 Y.DD.Delegate = Delegate;
340 }, '3.3.0' ,{requires:['dd-drag', 'event-mouseenter'], skinnable:false, optional:['dd-drop-plugin']});