Project

General

Profile

Download (8.31 KB) Statistics
| Branch: | Tag: | Revision:
1 e1910a5b Colin Smith
// ----------------------------------------------------------------------------
2
// (c) Copyright, DTLink, LLC 1997-2005
3
//     http://www.dtlink.com
4
//
5
// DragList - Drag and Drop Ordered Lists
6
//
7
// Javascript Support file for formVista <draglist> fvml tag.
8
//
9
// For more information please see:
10
//
11
//    http://www.formvista.com/otherprojects/draglist.html
12
//
13
// For questions or comments please contact us at:
14
//
15
//     http://www.formvista.com/contact.html
16
//
17
// LICENSE: This file is governed by the new BSD license. For more information
18 5dc666d8 Scott Ullrich
/*
19
    The DragList drag and drop ordered lists implementation is available under the terms of the new BSD license.
20
   
21
   Copyright (c) 2005, DTLink, LLC
22
   All rights reserved.
23
                                                                                  
24
   Redistribution  and  use  in  source  and binary forms, with or
25
   without modification, are permitted provided that the following
26
   conditions are met:
27
                                                                                  
28
   *   Redistributions  of  source  code  must  retain  the  above
29
   copyright  notice,  this  list  of conditions and the following
30
   disclaimer.
31
                                                                                  
32
   *  Redistributions  in  binary  form  must  reproduce the above
33
   copyright  notice,  this  list  of conditions and the following
34
   disclaimer in the documentation and/or other materials provided
35
   with the distribution.
36
    
37
   *  Neither  the  name  of  DTLink,  LLC  nor  the  names of its
38
   contributors may be used to endorse or promote products derived
39
   from this software without specific prior written permission.
40
    
41
   THIS   SOFTWARE  IS  PROVIDED  BY  THE  COPYRIGHT  HOLDERS  AND
42
   CONTRIBUTORS  "AS  IS"  AND  ANY EXPRESS OR IMPLIED WARRANTIES,
43
   INCLUDING,  BUT  NOT  LIMITED  TO,  THE  IMPLIED  WARRANTIES OF
44
   MERCHANTABILITY  AND  FITNESS  FOR  A  PARTICULAR  PURPOSE  ARE
45
   DISCLAIMED.   IN   NO   EVENT  SHALL  THE  COPYRIGHT  OWNER  OR
46
   CONTRIBUTORS  BE  LIABLE  FOR ANY DIRECT, INDIRECT, INCIDENTAL,
47
   SPECIAL,  EXEMPLARY,  OR  CONSEQUENTIAL DAMAGES (INCLUDING, BUT
48
   NOT  LIMITED  TO,  PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
49
   LOSS  OF  USE,  DATA,  OR  PROFITS;  OR  BUSINESS INTERRUPTION)
50
   HOWEVER  CAUSED  AND  ON  ANY  THEORY  OF LIABILITY, WHETHER IN
51
   CONTRACT,  STRICT  LIABILITY,  OR TORT (INCLUDING NEGLIGENCE OR
52
   OTHERWISE)  ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
53
   EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
54
*/
55 e1910a5b Colin Smith
//
56
// REVISION HISTORY:
57
//
58
// 2004-11-12 YmL:
59
//	.	initial revision.
60
//
61
// 2005-05-28 YmL:
62
//	.	pulled out of formVista, relicensed and packaged as a standalone implementation.
63
//
64
// 2005-06-02 mtmosier:
65
//	.	added horizontal dragging support.
66
//
67
// ------------------------
68
69
/**
70
* constructor for dragList class
71
*/
72
73
function fv_dragList( name )
74
	{
75
76
	// name of this dragList. Must match the id of the root DIV tag.
77
78
	this.dragListRootId = name;
79
80
	// array of item offsets
81
82
	this.offsetsX = new Array();
83
	this.offsetsY = new Array();
84
85
	}
86
87
// ----------------------------------------------
88
89
/**
90
* setup the draglist prior to use
91
*
92
* @param string orientation defaults to vert. if set to "horz" renders horizontally.
93
* @param string itemTagName. if null defaults to "div". Can be "span".
94
*/
95
96
fv_dragList.prototype.setup = function( orientation, itemTagName )
97
	{
98
99
	var horizontal;
100
101
	if ( orientation == "horz" )
102
		horizontal = true;
103
	else
104
		horizontal = false;
105
106
	this.listRoot = document.getElementById( this.dragListRootId );
107
	this.listItems = this.getListItems( itemTagName );
108
109
	for (var i = 0; i < this.listItems.length; i++) 
110
		{
111
112
		if ( this.listItems[i] == undefined )
113
			continue;
114
115
		if ( horizontal )
116
			{
117
			Drag.init(this.listItems[i], null, null, null, 0, 0);
118
			}
119
		else
120
			{
121
			Drag.init(this.listItems[i], null, 0, 0, null, null);
122
			}
123
124
		// ---------------------------------------------------
125
		// on drag method
126
127
		this.listItems[i].onDrag = function( x, y, thisElem ) 
128
			{
129
130
			x = thisElem.offsetLeft;
131
			y = thisElem.offsetTop;
132
133
			// this is a callback from the dom-drag code. From within this
134
			// function "this" does not refer to the fv_draglist function.
135
136
			draglist = getDragList( thisElem );
137
138
			draglist.recalcOffsets( itemTagName );
139
140
			var pos = draglist.getCurrentOffset( thisElem, itemTagName );
141
142
			//var listItems = this.getListItems( itemTagName );
143
144
			// if bottom edge is below top of lower item.
145
146
			var testMoveUp;
147
			var testMoveDown;
148
			if ( horizontal )
149
				{
150
				testMoveUp = (x + draglist.getDivWidth(thisElem) > draglist.offsetsX[pos + 1] + draglist.getDivWidth( draglist.listItems[pos + 1] ));
151
				testMoveDown = x < draglist.offsetsX[pos - 1];
152
				}
153
			else
154
				{
155
				testMoveUp = (y + draglist.getDivHeight(thisElem) > draglist.offsetsY[pos + 1] + draglist.getDivHeight( draglist.listItems[pos + 1] ));
156
				testMoveDown = y < draglist.offsetsY[pos - 1];
157
				}
158
159
			if (( pos != draglist.listItems.length - 1) && testMoveUp )
160
				{ 
161
				draglist.listRoot.removeChild(thisElem);
162
163
				if ( pos + 1 == draglist.listItems.length )
164
					{
165
					draglist.listRoot.appendChild( thisElem );
166
					}
167
				else
168
					{
169
					draglist.listRoot.insertBefore(thisElem, draglist.listItems[pos+1]);
170
					}
171
172
				thisElem.style["top"] = "0px";
173
				thisElem.style["left"] = "0px";
174
				}
175
			else if ( pos != 0 && testMoveDown ) 
176
				{ 
177
				draglist.listRoot.removeChild(thisElem);
178
				draglist.listRoot.insertBefore(thisElem, draglist.listItems[pos-1]);
179
				thisElem.style["top"] = "0px";
180
				thisElem.style["left"] = "0px";
181
				}
182
183
			};
184
185
		this.listItems[i].onDragEnd = function(x,y,thisElem) 
186
			{
187
			thisElem.style["top"] = "0px";
188
			thisElem.style["left"] = "0px";
189 4e41f518 Bill Marquette
			};
190 e1910a5b Colin Smith
191
		}	// end of for loop.
192
193
	this.recalcOffsets( itemTagName );
194
195 4e41f518 Bill Marquette
	};	// end of setup.
196 e1910a5b Colin Smith
197
// ----------------------------------------------
198
199
200
/**
201
* update the order value fields and submit the form.
202
*/
203
204
fv_dragList.prototype.do_submit = function( formName, dragListRootId )
205
	{
206
207
	var listOrderItems = this.listRoot.getElementsByTagName("input");
208
209
	for (var i = 0; i < listOrderItems.length; i++) 
210
		{
211
		listOrderItems[i].value = i;
212
		}
213
214
	expr = "document." + formName + ".submit()";
215
216
	eval( expr );
217 4e41f518 Bill Marquette
	};
218 e1910a5b Colin Smith
219
// ----------------------------------------------
220
// "Private" methods.
221
// ----------------------------------------------
222
223
fv_dragList.prototype.recalcOffsets = function( itemTagName ) 
224
	{
225
	var listItems = this.getListItems( itemTagName );
226
227
	for (var i = 0; i < listItems.length; i++) 
228
		{
229
		this.offsetsX[i] = listItems[i].offsetLeft;
230
		this.offsetsY[i] = listItems[i].offsetTop;
231
		}
232 4e41f518 Bill Marquette
	};
233 e1910a5b Colin Smith
234
fv_dragList.prototype.getCurrentOffset = function(elem, itemTagName) 
235
	{ 
236
	var listItems = this.getListItems( itemTagName );
237
238
	for (var i = 0; i < listItems.length; i++) 
239
		{
240
		if (listItems[i] == elem) 
241
			{ 
242
			return i;
243
			}
244
		}
245 4e41f518 Bill Marquette
	};
246 e1910a5b Colin Smith
247
fv_dragList.prototype.getDivWidth = function(elem) 								  
248
	{
249
250
	if (( elem == undefined) || ( elem.offsetWidth == undefined ))
251
		return( 0 );
252
253
	value = elem.offsetWidth;
254
	if (isNaN(value))
255
		{
256
		value = 0;
257
		}
258
259
	return( value );
260 4e41f518 Bill Marquette
	};
261 e1910a5b Colin Smith
262
fv_dragList.prototype.getDivHeight = function(elem) 
263
	{
264
265
	if (( elem == undefined) || ( elem.offsetHeight == undefined ))
266
		return( 0 );
267
268
	value = elem.offsetHeight;
269
	if (isNaN(value))
270
		{
271
		value = 25;
272
		}
273
274
	return( value );
275 4e41f518 Bill Marquette
	};
276 e1910a5b Colin Smith
277
/**
278
* return list of draggable items
279
*/
280
281
fv_dragList.prototype.getListItems = function( itemTagName )
282
	{
283
	if ( itemTagName == undefined )
284
		{
285
		itemTagName = "div";
286
		}
287
288
	var listItems = this.listRoot.getElementsByTagName( itemTagName );
289
290
	return( listItems );
291 4e41f518 Bill Marquette
	};
292 e1910a5b Colin Smith
293
// end of draglist class definition.
294
295
// -------------------------------------
296
297
/**
298
* add a new dragList to the list of draglists on this page
299
*
300
* This implementatoin supports multiple managed draglists on
301
* a single page. The index is contained in a global dragListIndex
302
* array that must be declared in the page.
303
*/
304
305
function addDragList( draglist )
306
	{
307
	dragListIndex[ draglist.dragListRootId ] = draglist;
308
	}
309
310
// -------------------------------------------------------
311
312
/**
313
* given a draggable div element, return the draglist it belongs to
314
*
315
* @see fv_draglist.prototype.setup
316
* @todo this should probably be a method inside the draglist class.
317
*/
318
319
function getDragList( elem )
320
	{
321
322
	// given a list item return the drag list it belongs to.
323
324
	var draglistContainer = elem.parentNode;
325
326
	var draglist = dragListIndex[ draglistContainer.id ];
327
328
	return( draglist );
329
	}
330
331
// END