Context Navigation

source: Dev/branches/rest-dojo-ui/client/dojox/mdnd/AreaManager.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 21.2 KB

Line
1	define(["dojo/_base/kernel","dojo/_base/declare","dojo/_base/connect","dojo/_base/window",
2	"dojo/_base/array","dojo/query","dojo/_base/html","./Moveable"],function(dojo){
3	var am = dojo.declare(
4	"dojox.mdnd.AreaManager",
5	null,
6	{
7	// summary:
8	// Drag And Drop manager
9
10	// autoRefresh: Boolean
11	// Enable the refresh of registered areas on drag start.
12	autoRefresh: true,
13
14
15	// areaClass: String
16	// CSS class enabled an area if areaClass is defined
17	areaClass: "dojoxDndArea",
18
19	// dragHandleClass: String
20	// CSS class enabled a drag handle.
21	dragHandleClass: "dojoxDragHandle",
22
23	constructor: function(){
24	// summary:
25	// Constructor of AreaManager class.
26	// Initialize arrays, connects and subscribes.
27
28	//console.log("dojox.mdnd.AreaManager ::: constructor");
29	this._areaList = [];
30	this.resizeHandler = dojo.connect(dojo.global,"onresize", this, function(){
31	this._dropMode.updateAreas(this._areaList);
32	});
33
34	this._oldIndexArea = this._currentIndexArea = this._oldDropIndex = this._currentDropIndex = this._sourceIndexArea = this._sourceDropIndex = -1;
35	},
36
37	init: function(){
38	// summary:
39	// Initialize the manager by calling the registerByClass method
40
41	//console.log("dojox.mdnd.AreaManager ::: init");
42	this.registerByClass();
43	},
44
45	registerByNode: function(/DOMNode/area, /Boolean/notInitAreas){
46	// summary:
47	// To register Dnd Area : insert the DndArea using the specific sort of dropMode.
48	// area:
49	// a DOM node corresponding to the Dnd Area
50	// notInitAreas:
51	// if false or undefined, init the areas.
52
53	//console.log("dojox.mdnd.AreaManager ::: registerByNode", area);
54	var index = this._getIndexArea(area);
55	if(area && index == -1){
56	var acceptType = area.getAttribute("accept");
57	var accept = (acceptType) ? acceptType.split(/\s,\s/) : ["text"];
58	var obj = {
59	'node': area,
60	'items': [],
61	'coords': {},
62	'margin': null,
63	'accept': accept,
64	'initItems': false
65	};
66	dojo.forEach(this._getChildren(area), function(item){
67	this._setMarginArea(obj, item);
68	obj.items.push(this._addMoveableItem(item));
69	}, this);
70	this._areaList = this._dropMode.addArea(this._areaList, obj);
71	if(!notInitAreas){
72	this._dropMode.updateAreas(this._areaList);
73	}
74	dojo.publish("/dojox/mdnd/manager/register",[area]);
75	}
76	},
77
78	registerByClass: function(){
79	// summary:
80	// Register all Dnd Areas identified by the attribute areaClass :
81	// insert Dnd Areas using the specific sort of dropMode.
82
83	//console.log("dojox.mdnd.AreaManager ::: registerByClass");
84	dojo.query('.'+this.areaClass).forEach(function(area){
85	this.registerByNode(area, true);
86	}, this);
87	this._dropMode.updateAreas(this._areaList);
88	},
89
90	unregister: function(/DOMNode/area){
91	// summary:
92	// Unregister a D&D Area and its children into the AreaManager.
93	// area:
94	// A node corresponding to the D&D Area.
95	// returns:
96	// True if the area is found and unregistered.
97
98	//console.log("dojox.mdnd.AreaManager ::: unregister");
99	var index = this._getIndexArea(area);
100	if(index != -1){
101	dojo.forEach(this._areaList[index].items, function(item){
102	this._deleteMoveableItem(item);
103	}, this);
104	this._areaList.splice(index,1);
105	// refresh target area
106	this._dropMode.updateAreas(this._areaList);
107	return true; // Boolean
108	}
109	return false; // Boolean
110	},
111
112	_addMoveableItem: function(/DOMNode/node){
113	// summary:
114	// Create a draggable item with a DOM node.
115	// node:
116	// A child of the D&D Area.
117	// returns:
118	// The draggable item.
119	// tags:
120	// protected
121
122	//console.log("dojox.mdnd.AreaManager ::: _addMoveableItem");
123	node.setAttribute("tabIndex", "0");
124	var handle = this._searchDragHandle(node);
125	var moveable = new dojox.mdnd.Moveable({ 'handle': handle, 'skip': true }, node);
126	// add a css style :
127	dojo.addClass(handle \|\| node, "dragHandle");
128	var type = node.getAttribute("dndType");
129	var item = {
130	'item': moveable,
131	'type': type ? type.split(/\s,\s/) : ["text"],
132	'handlers': [dojo.connect(moveable, "onDragStart", this, "onDragStart")]
133	}
134	// connect to the uninitialize method of dijit._Widget to delete a moveable before a destruct
135	if(dijit && dijit.byNode){
136	var widget = dijit.byNode(node);
137	if(widget){
138	item.type = widget.dndType ? widget.dndType.split(/\s,\s/) : ["text"];
139	item.handlers.push(
140	dojo.connect(widget, "uninitialize", this, function(){
141	this.removeDragItem(node.parentNode, moveable.node);
142	})
143	);
144	}
145	}
146	return item; // Object
147	},
148
149	_deleteMoveableItem: function(/Object/ objItem){
150	// summary:
151	// Delete the Moveable object associated with a node.
152	// item:
153	// A moveable Object.
154	// tags:
155	// protected
156
157	//console.log("dojox.mdnd.AreaManager ::: _deleteMoveableItem", objItem);
158	// disconnect the handle
159	dojo.forEach(objItem.handlers, function(handler){
160	dojo.disconnect(handler);
161	});
162	// delete css style :
163	var node = objItem.item.node,
164	handle = this._searchDragHandle(node);
165	dojo.removeClass(handle \|\| node, "dragHandle");
166	// call destroy of Moveable class
167	objItem.item.destroy();
168	},
169
170	_getIndexArea: function(/DOMNode/area){
171	// summary:
172	// Get the index of an area.
173	// area:
174	// A moveable Object.
175	// returns:
176	// area index or -1
177	// tags:
178	// protected
179
180	//console.log("dojox.mdnd.AreaManager ::: _getIndexArea");
181	if(area){
182	for(var i = 0; i < this._areaList.length; i++){
183	if(this._areaList[i].node === area){
184	return i; // Integer
185	}
186	}
187	}
188	return -1; // Integer
189	},
190
191	_searchDragHandle: function(/DOMNode/node){
192	// summary:
193	// Return the node which contains the first specific CSS class handle.
194	// node:
195	// A child of the D&D Area.
196	// returns:
197	// The drag handle node.
198	// tags:
199	// protected
200
201	//console.log("dojox.mdnd.AreaManager ::: _searchDragHandle");
202	if(node){
203	var cssArray = this.dragHandleClass.split(' '),
204	length = cssArray.length,
205	queryCss = "";
206	dojo.forEach(cssArray, function(css, i){
207	queryCss += "." + css;
208	if(i != length - 1){
209	queryCss += ", ";
210	}
211	});
212	return dojo.query(queryCss, node)[0]; // DomNode
213	}
214	},
215
216	addDragItem: function(/DOMNode/area, /DOMNode/node, /Integer/index, /Boolean/notCheckParent){
217	// summary:
218	// To add an item programmatically.
219	// area:
220	// a node corresponding to the D&D Area
221	// node:
222	// the node which has to be treated.
223	// index:
224	// the place in the area
225	// noCheckParent:
226	// if true, doesn't check if node has a parent.
227	// returns:
228	// True if the node has been inserted else false.
229
230	//console.log("dojox.mdnd.AreaManager ::: addDragItem");
231	var add = true;
232	if(!notCheckParent){
233	add = area && node && (node.parentNode === null \|\| (node.parentNode && node.parentNode.nodeType !== 1));
234	}
235	if(add){
236	var indexArea = this._getIndexArea(area);
237	if(indexArea !== -1){
238	var item = this._addMoveableItem(node),
239	items = this._areaList[indexArea].items;
240	if(0 <= index && index < items.length){
241	var firstListChild = items.slice(0, index),
242	lastListChild = items.slice(index, items.length);
243	firstListChild[firstListChild.length] = item;
244	this._areaList[indexArea].items = firstListChild.concat(lastListChild);
245	area.insertBefore(node, items[index].item.node);
246	}
247	else{
248	this._areaList[indexArea].items.push(item);
249	area.appendChild(node);
250	}
251	this._setMarginArea(this._areaList[indexArea], node);
252	this._areaList[indexArea].initItems = false;
253	return true; // Boolean
254	}
255	}
256	return false; // Boolean
257	},
258
259	removeDragItem: function(/DOMNode/area, /DOMNode/node){
260	// summary:
261	// Delete a moveable item programmatically. The node is removed from the area.
262	// area:
263	// A node corresponding to the DndArea.
264	// node:
265	// The node which has to be treated.
266	// returns:
267	// the removed node
268
269	//console.log("dojox.mdnd.AreaManager ::: removeDragItem");
270	var index = this._getIndexArea(area);
271	if(area && index !== -1){
272	var items = this._areaList[index].items;
273	for(var j = 0; j < items.length; j++){
274	if(items[j].item.node === node){
275	this._deleteMoveableItem(items[j]);
276	// delete item of the array
277	items.splice(j, 1);
278	return area.removeChild(node); // Object
279	}
280	}
281	}
282	return null;
283	},
284
285	_getChildren: function(/DOMNode/area){
286	// summary:
287	// Get the children of a D&D area.
288	// area:
289	// A DnD area.
290	// returns:
291	// The children of a DnD area
292	// tags:
293	// protected
294
295	//console.log("dojox.mdnd.AreaManager ::: _getChildren");
296	var children = [];
297	dojo.forEach(area.childNodes, function(child){
298	// delete \n
299	if(child.nodeType == 1){
300	if(dijit && dijit.byNode){
301	var widget = dijit.byNode(child);
302	if(widget){
303	if(!widget.dragRestriction){
304	children.push(child);
305	}
306	}
307	else{
308	children.push(child);
309	}
310	}
311	else{
312	children.push(child);
313	}
314	}
315	});
316	return children; //Array
317	},
318
319	_setMarginArea: function(/Object/area,/DOMNode/node){
320	// summary:
321	// Set the value of margin in the data type of areaManager
322	// only when the margin has never been computed.
323	// area:
324	// The object of a D&D Area.
325	// node:
326	// The node which contains margins
327	// tags:
328	// protected
329
330	//console.log("dojox.mdnd.AreaManager ::: _setMarginArea");
331	if(area && area.margin === null && node){
332	area.margin = dojo._getMarginExtents(node);
333	}
334	},
335
336	findCurrentIndexArea: function(/Object/coords, /Object/size){
337	// summary:
338	// find the nearest target area according to coordinates.
339	// Coordinates are representing by an object : for example, {'x':10,'y':10}
340	// coords:
341	// an object encapsulating X and Y position
342	// size:
343	// an object encapsulating the area size
344	// returns:
345	// an index of area
346
347	//console.log("dojox.mdnd.AreaManager ::: findCurrentIndexArea");
348	this._oldIndexArea = this._currentIndexArea;
349	this._currentIndexArea = this._dropMode.getTargetArea(this._areaList, coords, this._currentIndexArea);
350	if(this._currentIndexArea != this._oldIndexArea){
351	if(this._oldIndexArea != -1){
352	this.onDragExit(coords, size);
353	}
354	if(this._currentIndexArea != -1){
355	this.onDragEnter(coords, size);
356	}
357	}
358	return this._currentIndexArea; //Integer
359	},
360
361	_isAccepted: function(/Array/ type, /Array/ accept){
362	// summary:
363	// True if user can drop widget on this node.
364	// type:
365	// Array containing item type
366	// accept:
367	// Array containing types
368	this._accept = false;
369	for(var i = 0; i < accept.length; ++i){
370	for(var j = 0; j < type.length;++j){
371	if(type[j] == accept[i]){
372	this._accept = true;
373	break;
374	}
375	}
376	}
377	},
378
379	onDragStart: function(/DOMNode/node, /Object/coords, /Object/size){
380	// summary:
381	// Initialize the drag (see dojox.mdnd.Moveable.initOffsetDrag())
382	// node:
383	// The node which is about to be dragged
384	// coords:
385	// an object encapsulating X and Y position
386	// size:
387	// an object encapsulating width and height values
388	// tags:
389	// callback
390
391	//console.log("dojox.mdnd.AreaManager ::: onDragStart");
392	if(this.autoRefresh){
393	this._dropMode.updateAreas(this._areaList);
394	}
395
396	// Create the cover :
397	var _html = (dojo.isWebKit) ? dojo.body() : dojo.body().parentNode;
398	if(!this._cover){
399	this._cover = dojo.create('div', {
400	'class': "dndCover"
401	});
402	this._cover2 = dojo.clone(this._cover);
403	dojo.addClass(this._cover2, "dndCover2");
404	}
405	var h = _html.scrollHeight+"px";
406	this._cover.style.height = this._cover2.style.height = h;
407	dojo.body().appendChild(this._cover);
408	dojo.body().appendChild(this._cover2);
409
410	this._dragStartHandler = dojo.connect(node.ownerDocument, "ondragstart", dojo, "stopEvent");
411	// to know the source
412	this._sourceIndexArea = this._lastValidIndexArea = this._currentIndexArea = this._getIndexArea(node.parentNode);
413	// delete the dragItem into the source area
414	var sourceArea = this._areaList[this._sourceIndexArea];
415	var children = sourceArea.items;
416	for(var i = 0; i < children.length; i++){
417	if(children[i].item.node == node){
418	this._dragItem = children[i];
419	this._dragItem.handlers.push(dojo.connect(this._dragItem.item, "onDrag", this, "onDrag"));
420	this._dragItem.handlers.push(dojo.connect(this._dragItem.item, "onDragEnd", this, "onDrop"));
421	children.splice(i,1);
422	this._currentDropIndex = this._sourceDropIndex = i;
423	break;
424	}
425	}
426	var nodeRef = null;
427	if(this._sourceDropIndex !== sourceArea.items.length){
428	nodeRef = sourceArea.items[this._sourceDropIndex].item.node;
429	}
430	// IE7 OPTIMIZATION
431	if(dojo.isIE > 7){
432	// connect these events on the cover
433	this._eventsIE7 = [
434	dojo.connect(this._cover, "onmouseover", dojo, "stopEvent"),
435	dojo.connect(this._cover, "onmouseout", dojo, "stopEvent"),
436	dojo.connect(this._cover, "onmouseenter", dojo, "stopEvent"),
437	dojo.connect(this._cover, "onmouseleave", dojo, "stopEvent")
438	];
439	}
440
441	var s = node.style;
442	s.left = coords.x+"px";
443	s.top = coords.y+"px";
444	// attach the node to the cover
445	if(s.position == "relative" \|\| s.position == ""){
446	s.position = "absolute"; // enforcing the absolute mode
447	}
448	this._cover.appendChild(node);
449
450	this._dropIndicator.place(sourceArea.node, nodeRef, size);
451	// add a style to place the _dragNode in foreground
452	dojo.addClass(node, "dragNode");
453	// A dragged node is always draggable in this source area.
454	this._accept = true;
455	dojo.publish("/dojox/mdnd/drag/start",[node, sourceArea, this._sourceDropIndex]);
456	},
457
458	onDragEnter: function(/Object/coords, /Object/size){
459	// summary:
460	// Optionally called by the getTargetArea method of TargetFinder class.
461	// coords:
462	// coordinates of the dragged Node.
463	// size:
464	// size of the dragged Node.
465	// tags:
466	// callback
467
468	//console.log("dojox.mdnd.AreaManager ::: onDragEnter", coords, size);
469	if(this._currentIndexArea === this._sourceIndexArea){
470	this._accept = true;
471	}
472	else{
473	this._isAccepted(this._dragItem.type, this._areaList[this._currentIndexArea].accept);
474	}
475	},
476
477	onDragExit: function(/Object/coords, /Object/size){
478	// summary:
479	// Optionally called by the getTargetArea method of TargetFinder class.
480	// coords:
481	// coordinates of the dragged Node.
482	// size:
483	// size of the dragged Node.
484	// tags:
485	// callback
486
487	//console.log("dojox.mdnd.AreaManager ::: onDragExit");
488	this._accept = false;
489	},
490
491	onDrag: function(/DOMNode/node, /Object/coords, /Object/size, /Object/mousePosition){
492	// summary:
493	// Occurs when the dojo.dnd.Moveable.onDrag is fired.
494	// Search the nearest target area and called the placeDropIndicator
495	// node:
496	// The node which is dragged
497	// coords:
498	// an object encapsulating X and Y position
499	// size:
500	// an object encapsulating width and height values
501	// mousePosition:
502	// coordinates of mouse
503	// tags:
504	// callback
505
506	//console.log("dojox.mdnd.AreaManager ::: onDrag", node, ",", coords,size);
507	var coordinates = this._dropMode.getDragPoint(coords, size, mousePosition);
508	this.findCurrentIndexArea(coordinates, size);
509	if(this._currentIndexArea !== -1 && this._accept){
510	this.placeDropIndicator(coordinates, size);
511	}
512	},
513
514	placeDropIndicator: function(/Object/coords, /Object/size){
515	// summary:
516	// Search the right place to insert the dropIndicator and display the dropIndicator.
517	// coords:
518	// an object encapsulating X and Y position
519	// size:
520	// an object encapsulating width and height values
521	// returns:
522	// the current drop index
523
524	//console.log("dojox.mdnd.AreaManager ::: placeDropIndicator");
525	//keep old drop Index
526	this._oldDropIndex = this._currentDropIndex;
527	// calculate all children marker (see VerticalDropMode.initItems())
528	var area = this._areaList[this._currentIndexArea];
529	if(!area.initItems){
530	this._dropMode.initItems(area);
531	}
532	//get the index where the drop has to be placed.
533	this._currentDropIndex = this._dropMode.getDropIndex(area, coords);
534	if(!(this._currentIndexArea === this._oldIndexArea && this._oldDropIndex === this._currentDropIndex)){
535	this._placeDropIndicator(size);
536	}
537	return this._currentDropIndex; //Integer
538	},
539
540	_placeDropIndicator: function(/Object/size){
541	// summary:
542	// place the dropIndicator
543	// size:
544	// an object encapsulating width and height values
545	// tags:
546	// protected
547
548	var oldArea = this._areaList[this._lastValidIndexArea];
549	var currentArea = this._areaList[this._currentIndexArea];
550	//refresh the previous area after moving out the drop indicator
551	this._dropMode.refreshItems(oldArea, this._oldDropIndex, size, false);
552	// place dropIndicator
553	var node = null;
554	if(this._currentDropIndex != -1){
555	node = currentArea.items[this._currentDropIndex].item.node;
556	}
557	this._dropIndicator.place(currentArea.node, node);
558	this._lastValidIndexArea = this._currentIndexArea;
559	//refresh the current area after placing the drop indicator
560	this._dropMode.refreshItems(currentArea, this._currentDropIndex, size, true);
561	},
562
563	onDropCancel: function(){
564	// summary:
565	// Cancel the drop.
566	// The dragNode returns into the source.
567	// tags:
568	// callback
569
570	//console.log("dojox.mdnd.AreaManager ::: onDropCancel");
571	if(!this._accept){
572	var index = this._getIndexArea(this._dropIndicator.node.parentNode);
573	if(index != -1){
574	this._currentIndexArea = index;
575	}
576	else{
577	// case if the dropIndicator is in the area which has been unregistered during the drag.
578	// chose by default the first area.
579	this._currentIndexArea = 0;
580	}
581	}
582	},
583
584	onDrop: function(/DOMNode/node){
585	// summary:
586	// Drop the dragged item where the dropIndicator is displayed.
587	// node:
588	// The node which is about to be dropped
589	// tags:
590	// callback
591
592	//console.log("dojox.mdnd.AreaManager ::: onDrop");
593	//dropCancel
594	this.onDropCancel();
595	var targetArea = this._areaList[this._currentIndexArea];
596	dojo.removeClass(node, "dragNode");
597	var style = node.style;
598	style.position = "relative";
599	style.left = "0";
600	style.top = "0";
601	style.width = "auto";
602	if(targetArea.node == this._dropIndicator.node.parentNode){
603	targetArea.node.insertBefore(node, this._dropIndicator.node);
604	}
605	else{
606	// case if the dropIndicator is in the area which has been unregistered during the drag.
607	targetArea.node.appendChild(node);
608	this._currentDropIndex = targetArea.items.length;
609	}
610	// add child into the new target area.
611	var indexChild = this._currentDropIndex;
612	if(indexChild == -1){
613	indexChild = targetArea.items.length;
614	}
615	var children = targetArea.items;
616	var firstListArea = children.slice(0, indexChild);
617	var lastListArea = children.slice(indexChild, children.length);
618	firstListArea[firstListArea.length] = this._dragItem;
619	targetArea.items = firstListArea.concat(lastListArea);
620
621	this._setMarginArea(targetArea, node);
622	dojo.forEach(this._areaList, function(obj){
623	obj.initItems = false;
624	});
625	// disconnect onDrop handler
626	dojo.disconnect(this._dragItem.handlers.pop());
627	dojo.disconnect(this._dragItem.handlers.pop());
628	this._resetAfterDrop();
629	// remove the cover
630	if(this._cover){
631	dojo.body().removeChild(this._cover);
632	dojo.body().removeChild(this._cover2);
633	}
634	dojo.publish("/dojox/mdnd/drop",[node, targetArea, indexChild]);
635	},
636
637	_resetAfterDrop: function(){
638	// summary:
639	// reset manager properties after dropping an item
640	// tags:
641	// protected
642
643	this._accept = false;
644	this._dragItem = null;
645	this._currentDropIndex = -1;
646	this._currentIndexArea = -1;
647	this._oldDropIndex = -1;
648	this._sourceIndexArea = -1;
649	this._sourceDropIndex = -1;
650	this._dropIndicator.remove();
651	if(this._dragStartHandler){
652	dojo.disconnect(this._dragStartHandler);
653	}
654	if(dojo.isIE > 7){
655	dojo.forEach(this._eventsIE7, dojo.disconnect);
656	}
657	},
658
659	destroy: function(){
660	// summary:
661	// Destroy the component.
662
663	//console.log("dojox.mdnd.AreaManager ::: destroy");
664	//see implementation of unregister()
665	while(this._areaList.length > 0){
666	if(!this.unregister(this._areaList[0].node)){
667	throw new Error("Error while destroying AreaManager");
668	}
669	}
670	dojo.disconnect(this.resizeHandler);
671	this._dropIndicator.destroy();
672	this._dropMode.destroy();
673	if(dojox.mdnd.autoScroll){
674	dojox.mdnd.autoScroll.destroy();
675	}
676	if(this.refreshListener){
677	dojo.unsubscribe(this.refreshListener);
678	}
679	// destroy the cover
680	if(this._cover){
681	dojo._destroyElement(this._cover);
682	dojo._destroyElement(this._cover2);
683	delete this._cover;
684	delete this._cover2;
685	}
686	}
687	});
688
689	if(dijit && dijit._Widget){
690	// Add a new property to widget
691	dojo.extend(dijit._Widget, {
692	// dndType: String
693	// Defines a type of widget.
694	dndType : "text"
695	});
696	}
697
698	dojox.mdnd._areaManager = null;
699	dojox.mdnd.areaManager = function(){
700	// summary:
701	// Returns the current areaManager, creates one if it is not created yet.
702	if(!dojox.mdnd._areaManager){
703	dojox.mdnd._areaManager = new dojox.mdnd.AreaManager();
704	}
705	return dojox.mdnd._areaManager; // Object
706	};
707	return am;
708	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: