]>
Commit | Line | Data |
---|---|---|
71d32241 AD |
1 | // script.aculo.us dragdrop.js v1.7.0, Fri Jan 19 19:16:36 CET 2007 |
2 | ||
3 | // Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) | |
4 | // (c) 2005, 2006 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz) | |
5 | // | |
6 | // script.aculo.us is freely distributable under the terms of an MIT-style license. | |
7 | // For details, see the script.aculo.us web site: http://script.aculo.us/ | |
8 | ||
9 | if(typeof Effect == 'undefined') | |
10 | throw("dragdrop.js requires including script.aculo.us' effects.js library"); | |
11 | ||
12 | var Droppables = { | |
13 | drops: [], | |
14 | ||
15 | remove: function(element) { | |
16 | this.drops = this.drops.reject(function(d) { return d.element==$(element) }); | |
17 | }, | |
18 | ||
19 | add: function(element) { | |
20 | element = $(element); | |
21 | var options = Object.extend({ | |
22 | greedy: true, | |
23 | hoverclass: null, | |
24 | tree: false | |
25 | }, arguments[1] || {}); | |
26 | ||
27 | // cache containers | |
28 | if(options.containment) { | |
29 | options._containers = []; | |
30 | var containment = options.containment; | |
31 | if((typeof containment == 'object') && | |
32 | (containment.constructor == Array)) { | |
33 | containment.each( function(c) { options._containers.push($(c)) }); | |
34 | } else { | |
35 | options._containers.push($(containment)); | |
36 | } | |
37 | } | |
38 | ||
39 | if(options.accept) options.accept = [options.accept].flatten(); | |
40 | ||
41 | Element.makePositioned(element); // fix IE | |
42 | options.element = element; | |
43 | ||
44 | this.drops.push(options); | |
45 | }, | |
46 | ||
47 | findDeepestChild: function(drops) { | |
48 | deepest = drops[0]; | |
49 | ||
50 | for (i = 1; i < drops.length; ++i) | |
51 | if (Element.isParent(drops[i].element, deepest.element)) | |
52 | deepest = drops[i]; | |
53 | ||
54 | return deepest; | |
55 | }, | |
56 | ||
57 | isContained: function(element, drop) { | |
58 | var containmentNode; | |
59 | if(drop.tree) { | |
60 | containmentNode = element.treeNode; | |
61 | } else { | |
62 | containmentNode = element.parentNode; | |
63 | } | |
64 | return drop._containers.detect(function(c) { return containmentNode == c }); | |
65 | }, | |
66 | ||
67 | isAffected: function(point, element, drop) { | |
68 | return ( | |
69 | (drop.element!=element) && | |
70 | ((!drop._containers) || | |
71 | this.isContained(element, drop)) && | |
72 | ((!drop.accept) || | |
73 | (Element.classNames(element).detect( | |
74 | function(v) { return drop.accept.include(v) } ) )) && | |
75 | Position.within(drop.element, point[0], point[1]) ); | |
76 | }, | |
77 | ||
78 | deactivate: function(drop) { | |
79 | if(drop.hoverclass) | |
80 | Element.removeClassName(drop.element, drop.hoverclass); | |
81 | this.last_active = null; | |
82 | }, | |
83 | ||
84 | activate: function(drop) { | |
85 | if(drop.hoverclass) | |
86 | Element.addClassName(drop.element, drop.hoverclass); | |
87 | this.last_active = drop; | |
88 | }, | |
89 | ||
90 | show: function(point, element) { | |
91 | if(!this.drops.length) return; | |
92 | var affected = []; | |
93 | ||
94 | if(this.last_active) this.deactivate(this.last_active); | |
95 | this.drops.each( function(drop) { | |
96 | if(Droppables.isAffected(point, element, drop)) | |
97 | affected.push(drop); | |
98 | }); | |
99 | ||
100 | if(affected.length>0) { | |
101 | drop = Droppables.findDeepestChild(affected); | |
102 | Position.within(drop.element, point[0], point[1]); | |
103 | if(drop.onHover) | |
104 | drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element)); | |
105 | ||
106 | Droppables.activate(drop); | |
107 | } | |
108 | }, | |
109 | ||
110 | fire: function(event, element) { | |
111 | if(!this.last_active) return; | |
112 | Position.prepare(); | |
113 | ||
114 | if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active)) | |
115 | if (this.last_active.onDrop) | |
116 | this.last_active.onDrop(element, this.last_active.element, event); | |
117 | }, | |
118 | ||
119 | reset: function() { | |
120 | if(this.last_active) | |
121 | this.deactivate(this.last_active); | |
122 | } | |
123 | } | |
124 | ||
125 | var Draggables = { | |
126 | drags: [], | |
127 | observers: [], | |
128 | ||
129 | register: function(draggable) { | |
130 | if(this.drags.length == 0) { | |
131 | this.eventMouseUp = this.endDrag.bindAsEventListener(this); | |
132 | this.eventMouseMove = this.updateDrag.bindAsEventListener(this); | |
133 | this.eventKeypress = this.keyPress.bindAsEventListener(this); | |
134 | ||
135 | Event.observe(document, "mouseup", this.eventMouseUp); | |
136 | Event.observe(document, "mousemove", this.eventMouseMove); | |
137 | Event.observe(document, "keypress", this.eventKeypress); | |
138 | } | |
139 | this.drags.push(draggable); | |
140 | }, | |
141 | ||
142 | unregister: function(draggable) { | |
143 | this.drags = this.drags.reject(function(d) { return d==draggable }); | |
144 | if(this.drags.length == 0) { | |
145 | Event.stopObserving(document, "mouseup", this.eventMouseUp); | |
146 | Event.stopObserving(document, "mousemove", this.eventMouseMove); | |
147 | Event.stopObserving(document, "keypress", this.eventKeypress); | |
148 | } | |
149 | }, | |
150 | ||
151 | activate: function(draggable) { | |
152 | if(draggable.options.delay) { | |
153 | this._timeout = setTimeout(function() { | |
154 | Draggables._timeout = null; | |
155 | window.focus(); | |
156 | Draggables.activeDraggable = draggable; | |
157 | }.bind(this), draggable.options.delay); | |
158 | } else { | |
159 | window.focus(); // allows keypress events if window isn't currently focused, fails for Safari | |
160 | this.activeDraggable = draggable; | |
161 | } | |
162 | }, | |
163 | ||
164 | deactivate: function() { | |
165 | this.activeDraggable = null; | |
166 | }, | |
167 | ||
168 | updateDrag: function(event) { | |
169 | if(!this.activeDraggable) return; | |
170 | var pointer = [Event.pointerX(event), Event.pointerY(event)]; | |
171 | // Mozilla-based browsers fire successive mousemove events with | |
172 | // the same coordinates, prevent needless redrawing (moz bug?) | |
173 | if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return; | |
174 | this._lastPointer = pointer; | |
175 | ||
176 | this.activeDraggable.updateDrag(event, pointer); | |
177 | }, | |
178 | ||
179 | endDrag: function(event) { | |
180 | if(this._timeout) { | |
181 | clearTimeout(this._timeout); | |
182 | this._timeout = null; | |
183 | } | |
184 | if(!this.activeDraggable) return; | |
185 | this._lastPointer = null; | |
186 | this.activeDraggable.endDrag(event); | |
187 | this.activeDraggable = null; | |
188 | }, | |
189 | ||
190 | keyPress: function(event) { | |
191 | if(this.activeDraggable) | |
192 | this.activeDraggable.keyPress(event); | |
193 | }, | |
194 | ||
195 | addObserver: function(observer) { | |
196 | this.observers.push(observer); | |
197 | this._cacheObserverCallbacks(); | |
198 | }, | |
199 | ||
200 | removeObserver: function(element) { // element instead of observer fixes mem leaks | |
201 | this.observers = this.observers.reject( function(o) { return o.element==element }); | |
202 | this._cacheObserverCallbacks(); | |
203 | }, | |
204 | ||
205 | notify: function(eventName, draggable, event) { // 'onStart', 'onEnd', 'onDrag' | |
206 | if(this[eventName+'Count'] > 0) | |
207 | this.observers.each( function(o) { | |
208 | if(o[eventName]) o[eventName](eventName, draggable, event); | |
209 | }); | |
210 | if(draggable.options[eventName]) draggable.options[eventName](draggable, event); | |
211 | }, | |
212 | ||
213 | _cacheObserverCallbacks: function() { | |
214 | ['onStart','onEnd','onDrag'].each( function(eventName) { | |
215 | Draggables[eventName+'Count'] = Draggables.observers.select( | |
216 | function(o) { return o[eventName]; } | |
217 | ).length; | |
218 | }); | |
219 | } | |
220 | } | |
221 | ||
222 | /*--------------------------------------------------------------------------*/ | |
223 | ||
224 | var Draggable = Class.create(); | |
225 | Draggable._dragging = {}; | |
226 | ||
227 | Draggable.prototype = { | |
228 | initialize: function(element) { | |
229 | var defaults = { | |
230 | handle: false, | |
231 | reverteffect: function(element, top_offset, left_offset) { | |
232 | var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02; | |
233 | new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur, | |
234 | queue: {scope:'_draggable', position:'end'} | |
235 | }); | |
236 | }, | |
237 | endeffect: function(element) { | |
238 | var toOpacity = typeof element._opacity == 'number' ? element._opacity : 1.0; | |
239 | new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity, | |
240 | queue: {scope:'_draggable', position:'end'}, | |
241 | afterFinish: function(){ | |
242 | Draggable._dragging[element] = false | |
243 | } | |
244 | }); | |
245 | }, | |
246 | zindex: 1000, | |
247 | revert: false, | |
248 | scroll: false, | |
249 | scrollSensitivity: 20, | |
250 | scrollSpeed: 15, | |
251 | snap: false, // false, or xy or [x,y] or function(x,y){ return [x,y] } | |
252 | delay: 0 | |
253 | }; | |
254 | ||
255 | if(!arguments[1] || typeof arguments[1].endeffect == 'undefined') | |
256 | Object.extend(defaults, { | |
257 | starteffect: function(element) { | |
258 | element._opacity = Element.getOpacity(element); | |
259 | Draggable._dragging[element] = true; | |
260 | new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7}); | |
261 | } | |
262 | }); | |
263 | ||
264 | var options = Object.extend(defaults, arguments[1] || {}); | |
265 | ||
266 | this.element = $(element); | |
267 | ||
268 | if(options.handle && (typeof options.handle == 'string')) | |
269 | this.handle = this.element.down('.'+options.handle, 0); | |
270 | ||
271 | if(!this.handle) this.handle = $(options.handle); | |
272 | if(!this.handle) this.handle = this.element; | |
273 | ||
274 | if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) { | |
275 | options.scroll = $(options.scroll); | |
276 | this._isScrollChild = Element.childOf(this.element, options.scroll); | |
277 | } | |
278 | ||
279 | Element.makePositioned(this.element); // fix IE | |
280 | ||
281 | this.delta = this.currentDelta(); | |
282 | this.options = options; | |
283 | this.dragging = false; | |
284 | ||
285 | this.eventMouseDown = this.initDrag.bindAsEventListener(this); | |
286 | Event.observe(this.handle, "mousedown", this.eventMouseDown); | |
287 | ||
288 | Draggables.register(this); | |
289 | }, | |
290 | ||
291 | destroy: function() { | |
292 | Event.stopObserving(this.handle, "mousedown", this.eventMouseDown); | |
293 | Draggables.unregister(this); | |
294 | }, | |
295 | ||
296 | currentDelta: function() { | |
297 | return([ | |
298 | parseInt(Element.getStyle(this.element,'left') || '0'), | |
299 | parseInt(Element.getStyle(this.element,'top') || '0')]); | |
300 | }, | |
301 | ||
302 | initDrag: function(event) { | |
303 | if(typeof Draggable._dragging[this.element] != 'undefined' && | |
304 | Draggable._dragging[this.element]) return; | |
305 | if(Event.isLeftClick(event)) { | |
306 | // abort on form elements, fixes a Firefox issue | |
307 | var src = Event.element(event); | |
308 | if((tag_name = src.tagName.toUpperCase()) && ( | |
309 | tag_name=='INPUT' || | |
310 | tag_name=='SELECT' || | |
311 | tag_name=='OPTION' || | |
312 | tag_name=='BUTTON' || | |
313 | tag_name=='TEXTAREA')) return; | |
314 | ||
315 | var pointer = [Event.pointerX(event), Event.pointerY(event)]; | |
316 | var pos = Position.cumulativeOffset(this.element); | |
317 | this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) }); | |
318 | ||
319 | Draggables.activate(this); | |
320 | Event.stop(event); | |
321 | } | |
322 | }, | |
323 | ||
324 | startDrag: function(event) { | |
325 | this.dragging = true; | |
326 | ||
327 | if(this.options.zindex) { | |
328 | this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0); | |
329 | this.element.style.zIndex = this.options.zindex; | |
330 | } | |
331 | ||
332 | if(this.options.ghosting) { | |
333 | this._clone = this.element.cloneNode(true); | |
334 | Position.absolutize(this.element); | |
335 | this.element.parentNode.insertBefore(this._clone, this.element); | |
336 | } | |
337 | ||
338 | if(this.options.scroll) { | |
339 | if (this.options.scroll == window) { | |
340 | var where = this._getWindowScroll(this.options.scroll); | |
341 | this.originalScrollLeft = where.left; | |
342 | this.originalScrollTop = where.top; | |
343 | } else { | |
344 | this.originalScrollLeft = this.options.scroll.scrollLeft; | |
345 | this.originalScrollTop = this.options.scroll.scrollTop; | |
346 | } | |
347 | } | |
348 | ||
349 | Draggables.notify('onStart', this, event); | |
350 | ||
351 | if(this.options.starteffect) this.options.starteffect(this.element); | |
352 | }, | |
353 | ||
354 | updateDrag: function(event, pointer) { | |
355 | if(!this.dragging) this.startDrag(event); | |
356 | Position.prepare(); | |
357 | Droppables.show(pointer, this.element); | |
358 | Draggables.notify('onDrag', this, event); | |
359 | ||
360 | this.draw(pointer); | |
361 | if(this.options.change) this.options.change(this); | |
362 | ||
363 | if(this.options.scroll) { | |
364 | this.stopScrolling(); | |
365 | ||
366 | var p; | |
367 | if (this.options.scroll == window) { | |
368 | with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; } | |
369 | } else { | |
370 | p = Position.page(this.options.scroll); | |
371 | p[0] += this.options.scroll.scrollLeft + Position.deltaX; | |
372 | p[1] += this.options.scroll.scrollTop + Position.deltaY; | |
373 | p.push(p[0]+this.options.scroll.offsetWidth); | |
374 | p.push(p[1]+this.options.scroll.offsetHeight); | |
375 | } | |
376 | var speed = [0,0]; | |
377 | if(pointer[0] < (p[0]+this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[0]+this.options.scrollSensitivity); | |
378 | if(pointer[1] < (p[1]+this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[1]+this.options.scrollSensitivity); | |
379 | if(pointer[0] > (p[2]-this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[2]-this.options.scrollSensitivity); | |
380 | if(pointer[1] > (p[3]-this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[3]-this.options.scrollSensitivity); | |
381 | this.startScrolling(speed); | |
382 | } | |
383 | ||
384 | // fix AppleWebKit rendering | |
385 | if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0); | |
386 | ||
387 | Event.stop(event); | |
388 | }, | |
389 | ||
390 | finishDrag: function(event, success) { | |
391 | this.dragging = false; | |
392 | ||
393 | if(this.options.ghosting) { | |
394 | Position.relativize(this.element); | |
395 | Element.remove(this._clone); | |
396 | this._clone = null; | |
397 | } | |
398 | ||
399 | if(success) Droppables.fire(event, this.element); | |
400 | Draggables.notify('onEnd', this, event); | |
401 | ||
402 | var revert = this.options.revert; | |
403 | if(revert && typeof revert == 'function') revert = revert(this.element); | |
404 | ||
405 | var d = this.currentDelta(); | |
406 | if(revert && this.options.reverteffect) { | |
407 | this.options.reverteffect(this.element, | |
408 | d[1]-this.delta[1], d[0]-this.delta[0]); | |
409 | } else { | |
410 | this.delta = d; | |
411 | } | |
412 | ||
413 | if(this.options.zindex) | |
414 | this.element.style.zIndex = this.originalZ; | |
415 | ||
416 | if(this.options.endeffect) | |
417 | this.options.endeffect(this.element); | |
418 | ||
419 | Draggables.deactivate(this); | |
420 | Droppables.reset(); | |
421 | }, | |
422 | ||
423 | keyPress: function(event) { | |
424 | if(event.keyCode!=Event.KEY_ESC) return; | |
425 | this.finishDrag(event, false); | |
426 | Event.stop(event); | |
427 | }, | |
428 | ||
429 | endDrag: function(event) { | |
430 | if(!this.dragging) return; | |
431 | this.stopScrolling(); | |
432 | this.finishDrag(event, true); | |
433 | Event.stop(event); | |
434 | }, | |
435 | ||
436 | draw: function(point) { | |
437 | var pos = Position.cumulativeOffset(this.element); | |
438 | if(this.options.ghosting) { | |
439 | var r = Position.realOffset(this.element); | |
440 | pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY; | |
441 | } | |
442 | ||
443 | var d = this.currentDelta(); | |
444 | pos[0] -= d[0]; pos[1] -= d[1]; | |
445 | ||
446 | if(this.options.scroll && (this.options.scroll != window && this._isScrollChild)) { | |
447 | pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft; | |
448 | pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop; | |
449 | } | |
450 | ||
451 | var p = [0,1].map(function(i){ | |
452 | return (point[i]-pos[i]-this.offset[i]) | |
453 | }.bind(this)); | |
454 | ||
455 | if(this.options.snap) { | |
456 | if(typeof this.options.snap == 'function') { | |
457 | p = this.options.snap(p[0],p[1],this); | |
458 | } else { | |
459 | if(this.options.snap instanceof Array) { | |
460 | p = p.map( function(v, i) { | |
461 | return Math.round(v/this.options.snap[i])*this.options.snap[i] }.bind(this)) | |
462 | } else { | |
463 | p = p.map( function(v) { | |
464 | return Math.round(v/this.options.snap)*this.options.snap }.bind(this)) | |
465 | } | |
466 | }} | |
467 | ||
468 | var style = this.element.style; | |
469 | if((!this.options.constraint) || (this.options.constraint=='horizontal')) | |
470 | style.left = p[0] + "px"; | |
471 | if((!this.options.constraint) || (this.options.constraint=='vertical')) | |
472 | style.top = p[1] + "px"; | |
473 | ||
474 | if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering | |
475 | }, | |
476 | ||
477 | stopScrolling: function() { | |
478 | if(this.scrollInterval) { | |
479 | clearInterval(this.scrollInterval); | |
480 | this.scrollInterval = null; | |
481 | Draggables._lastScrollPointer = null; | |
482 | } | |
483 | }, | |
484 | ||
485 | startScrolling: function(speed) { | |
486 | if(!(speed[0] || speed[1])) return; | |
487 | this.scrollSpeed = [speed[0]*this.options.scrollSpeed,speed[1]*this.options.scrollSpeed]; | |
488 | this.lastScrolled = new Date(); | |
489 | this.scrollInterval = setInterval(this.scroll.bind(this), 10); | |
490 | }, | |
491 | ||
492 | scroll: function() { | |
493 | var current = new Date(); | |
494 | var delta = current - this.lastScrolled; | |
495 | this.lastScrolled = current; | |
496 | if(this.options.scroll == window) { | |
497 | with (this._getWindowScroll(this.options.scroll)) { | |
498 | if (this.scrollSpeed[0] || this.scrollSpeed[1]) { | |
499 | var d = delta / 1000; | |
500 | this.options.scroll.scrollTo( left + d*this.scrollSpeed[0], top + d*this.scrollSpeed[1] ); | |
501 | } | |
502 | } | |
503 | } else { | |
504 | this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000; | |
505 | this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000; | |
506 | } | |
507 | ||
508 | Position.prepare(); | |
509 | Droppables.show(Draggables._lastPointer, this.element); | |
510 | Draggables.notify('onDrag', this); | |
511 | if (this._isScrollChild) { | |
512 | Draggables._lastScrollPointer = Draggables._lastScrollPointer || $A(Draggables._lastPointer); | |
513 | Draggables._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000; | |
514 | Draggables._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000; | |
515 | if (Draggables._lastScrollPointer[0] < 0) | |
516 | Draggables._lastScrollPointer[0] = 0; | |
517 | if (Draggables._lastScrollPointer[1] < 0) | |
518 | Draggables._lastScrollPointer[1] = 0; | |
519 | this.draw(Draggables._lastScrollPointer); | |
520 | } | |
521 | ||
522 | if(this.options.change) this.options.change(this); | |
523 | }, | |
524 | ||
525 | _getWindowScroll: function(w) { | |
526 | var T, L, W, H; | |
527 | with (w.document) { | |
528 | if (w.document.documentElement && documentElement.scrollTop) { | |
529 | T = documentElement.scrollTop; | |
530 | L = documentElement.scrollLeft; | |
531 | } else if (w.document.body) { | |
532 | T = body.scrollTop; | |
533 | L = body.scrollLeft; | |
534 | } | |
535 | if (w.innerWidth) { | |
536 | W = w.innerWidth; | |
537 | H = w.innerHeight; | |
538 | } else if (w.document.documentElement && documentElement.clientWidth) { | |
539 | W = documentElement.clientWidth; | |
540 | H = documentElement.clientHeight; | |
541 | } else { | |
542 | W = body.offsetWidth; | |
543 | H = body.offsetHeight | |
544 | } | |
545 | } | |
546 | return { top: T, left: L, width: W, height: H }; | |
547 | } | |
548 | } | |
549 | ||
550 | /*--------------------------------------------------------------------------*/ | |
551 | ||
552 | var SortableObserver = Class.create(); | |
553 | SortableObserver.prototype = { | |
554 | initialize: function(element, observer) { | |
555 | this.element = $(element); | |
556 | this.observer = observer; | |
557 | this.lastValue = Sortable.serialize(this.element); | |
558 | }, | |
559 | ||
560 | onStart: function() { | |
561 | this.lastValue = Sortable.serialize(this.element); | |
562 | }, | |
563 | ||
564 | onEnd: function() { | |
565 | Sortable.unmark(); | |
566 | if(this.lastValue != Sortable.serialize(this.element)) | |
567 | this.observer(this.element) | |
568 | } | |
569 | } | |
570 | ||
571 | var Sortable = { | |
572 | SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/, | |
573 | ||
574 | sortables: {}, | |
575 | ||
576 | _findRootElement: function(element) { | |
577 | while (element.tagName.toUpperCase() != "BODY") { | |
578 | if(element.id && Sortable.sortables[element.id]) return element; | |
579 | element = element.parentNode; | |
580 | } | |
581 | }, | |
582 | ||
583 | options: function(element) { | |
584 | element = Sortable._findRootElement($(element)); | |
585 | if(!element) return; | |
586 | return Sortable.sortables[element.id]; | |
587 | }, | |
588 | ||
589 | destroy: function(element){ | |
590 | var s = Sortable.options(element); | |
591 | ||
592 | if(s) { | |
593 | Draggables.removeObserver(s.element); | |
594 | s.droppables.each(function(d){ Droppables.remove(d) }); | |
595 | s.draggables.invoke('destroy'); | |
596 | ||
597 | delete Sortable.sortables[s.element.id]; | |
598 | } | |
599 | }, | |
600 | ||
601 | create: function(element) { | |
602 | element = $(element); | |
603 | var options = Object.extend({ | |
604 | element: element, | |
605 | tag: 'li', // assumes li children, override with tag: 'tagname' | |
606 | dropOnEmpty: false, | |
607 | tree: false, | |
608 | treeTag: 'ul', | |
609 | overlap: 'vertical', // one of 'vertical', 'horizontal' | |
610 | constraint: 'vertical', // one of 'vertical', 'horizontal', false | |
611 | containment: element, // also takes array of elements (or id's); or false | |
612 | handle: false, // or a CSS class | |
613 | only: false, | |
614 | delay: 0, | |
615 | hoverclass: null, | |
616 | ghosting: false, | |
617 | scroll: false, | |
618 | scrollSensitivity: 20, | |
619 | scrollSpeed: 15, | |
620 | format: this.SERIALIZE_RULE, | |
621 | onChange: Prototype.emptyFunction, | |
622 | onUpdate: Prototype.emptyFunction | |
623 | }, arguments[1] || {}); | |
624 | ||
625 | // clear any old sortable with same element | |
626 | this.destroy(element); | |
627 | ||
628 | // build options for the draggables | |
629 | var options_for_draggable = { | |
630 | revert: true, | |
631 | scroll: options.scroll, | |
632 | scrollSpeed: options.scrollSpeed, | |
633 | scrollSensitivity: options.scrollSensitivity, | |
634 | delay: options.delay, | |
635 | ghosting: options.ghosting, | |
636 | constraint: options.constraint, | |
637 | handle: options.handle }; | |
638 | ||
639 | if(options.starteffect) | |
640 | options_for_draggable.starteffect = options.starteffect; | |
641 | ||
642 | if(options.reverteffect) | |
643 | options_for_draggable.reverteffect = options.reverteffect; | |
644 | else | |
645 | if(options.ghosting) options_for_draggable.reverteffect = function(element) { | |
646 | element.style.top = 0; | |
647 | element.style.left = 0; | |
648 | }; | |
649 | ||
650 | if(options.endeffect) | |
651 | options_for_draggable.endeffect = options.endeffect; | |
652 | ||
653 | if(options.zindex) | |
654 | options_for_draggable.zindex = options.zindex; | |
655 | ||
656 | // build options for the droppables | |
657 | var options_for_droppable = { | |
658 | overlap: options.overlap, | |
659 | containment: options.containment, | |
660 | tree: options.tree, | |
661 | hoverclass: options.hoverclass, | |
662 | onHover: Sortable.onHover | |
663 | } | |
664 | ||
665 | var options_for_tree = { | |
666 | onHover: Sortable.onEmptyHover, | |
667 | overlap: options.overlap, | |
668 | containment: options.containment, | |
669 | hoverclass: options.hoverclass | |
670 | } | |
671 | ||
672 | // fix for gecko engine | |
673 | Element.cleanWhitespace(element); | |
674 | ||
675 | options.draggables = []; | |
676 | options.droppables = []; | |
677 | ||
678 | // drop on empty handling | |
679 | if(options.dropOnEmpty || options.tree) { | |
680 | Droppables.add(element, options_for_tree); | |
681 | options.droppables.push(element); | |
682 | } | |
683 | ||
684 | (this.findElements(element, options) || []).each( function(e) { | |
685 | // handles are per-draggable | |
686 | var handle = options.handle ? | |
687 | $(e).down('.'+options.handle,0) : e; | |
688 | options.draggables.push( | |
689 | new Draggable(e, Object.extend(options_for_draggable, { handle: handle }))); | |
690 | Droppables.add(e, options_for_droppable); | |
691 | if(options.tree) e.treeNode = element; | |
692 | options.droppables.push(e); | |
693 | }); | |
694 | ||
695 | if(options.tree) { | |
696 | (Sortable.findTreeElements(element, options) || []).each( function(e) { | |
697 | Droppables.add(e, options_for_tree); | |
698 | e.treeNode = element; | |
699 | options.droppables.push(e); | |
700 | }); | |
701 | } | |
702 | ||
703 | // keep reference | |
704 | this.sortables[element.id] = options; | |
705 | ||
706 | // for onupdate | |
707 | Draggables.addObserver(new SortableObserver(element, options.onUpdate)); | |
708 | ||
709 | }, | |
710 | ||
711 | // return all suitable-for-sortable elements in a guaranteed order | |
712 | findElements: function(element, options) { | |
713 | return Element.findChildren( | |
714 | element, options.only, options.tree ? true : false, options.tag); | |
715 | }, | |
716 | ||
717 | findTreeElements: function(element, options) { | |
718 | return Element.findChildren( | |
719 | element, options.only, options.tree ? true : false, options.treeTag); | |
720 | }, | |
721 | ||
722 | onHover: function(element, dropon, overlap) { | |
723 | if(Element.isParent(dropon, element)) return; | |
724 | ||
725 | if(overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) { | |
726 | return; | |
727 | } else if(overlap>0.5) { | |
728 | Sortable.mark(dropon, 'before'); | |
729 | if(dropon.previousSibling != element) { | |
730 | var oldParentNode = element.parentNode; | |
731 | element.style.visibility = "hidden"; // fix gecko rendering | |
732 | dropon.parentNode.insertBefore(element, dropon); | |
733 | if(dropon.parentNode!=oldParentNode) | |
734 | Sortable.options(oldParentNode).onChange(element); | |
735 | Sortable.options(dropon.parentNode).onChange(element); | |
736 | } | |
737 | } else { | |
738 | Sortable.mark(dropon, 'after'); | |
739 | var nextElement = dropon.nextSibling || null; | |
740 | if(nextElement != element) { | |
741 | var oldParentNode = element.parentNode; | |
742 | element.style.visibility = "hidden"; // fix gecko rendering | |
743 | dropon.parentNode.insertBefore(element, nextElement); | |
744 | if(dropon.parentNode!=oldParentNode) | |
745 | Sortable.options(oldParentNode).onChange(element); | |
746 | Sortable.options(dropon.parentNode).onChange(element); | |
747 | } | |
748 | } | |
749 | }, | |
750 | ||
751 | onEmptyHover: function(element, dropon, overlap) { | |
752 | var oldParentNode = element.parentNode; | |
753 | var droponOptions = Sortable.options(dropon); | |
754 | ||
755 | if(!Element.isParent(dropon, element)) { | |
756 | var index; | |
757 | ||
758 | var children = Sortable.findElements(dropon, {tag: droponOptions.tag, only: droponOptions.only}); | |
759 | var child = null; | |
760 | ||
761 | if(children) { | |
762 | var offset = Element.offsetSize(dropon, droponOptions.overlap) * (1.0 - overlap); | |
763 | ||
764 | for (index = 0; index < children.length; index += 1) { | |
765 | if (offset - Element.offsetSize (children[index], droponOptions.overlap) >= 0) { | |
766 | offset -= Element.offsetSize (children[index], droponOptions.overlap); | |
767 | } else if (offset - (Element.offsetSize (children[index], droponOptions.overlap) / 2) >= 0) { | |
768 | child = index + 1 < children.length ? children[index + 1] : null; | |
769 | break; | |
770 | } else { | |
771 | child = children[index]; | |
772 | break; | |
773 | } | |
774 | } | |
775 | } | |
776 | ||
777 | dropon.insertBefore(element, child); | |
778 | ||
779 | Sortable.options(oldParentNode).onChange(element); | |
780 | droponOptions.onChange(element); | |
781 | } | |
782 | }, | |
783 | ||
784 | unmark: function() { | |
785 | if(Sortable._marker) Sortable._marker.hide(); | |
786 | }, | |
787 | ||
788 | mark: function(dropon, position) { | |
789 | // mark on ghosting only | |
790 | var sortable = Sortable.options(dropon.parentNode); | |
791 | if(sortable && !sortable.ghosting) return; | |
792 | ||
793 | if(!Sortable._marker) { | |
794 | Sortable._marker = | |
795 | ($('dropmarker') || Element.extend(document.createElement('DIV'))). | |
796 | hide().addClassName('dropmarker').setStyle({position:'absolute'}); | |
797 | document.getElementsByTagName("body").item(0).appendChild(Sortable._marker); | |
798 | } | |
799 | var offsets = Position.cumulativeOffset(dropon); | |
800 | Sortable._marker.setStyle({left: offsets[0]+'px', top: offsets[1] + 'px'}); | |
801 | ||
802 | if(position=='after') | |
803 | if(sortable.overlap == 'horizontal') | |
804 | Sortable._marker.setStyle({left: (offsets[0]+dropon.clientWidth) + 'px'}); | |
805 | else | |
806 | Sortable._marker.setStyle({top: (offsets[1]+dropon.clientHeight) + 'px'}); | |
807 | ||
808 | Sortable._marker.show(); | |
809 | }, | |
810 | ||
811 | _tree: function(element, options, parent) { | |
812 | var children = Sortable.findElements(element, options) || []; | |
813 | ||
814 | for (var i = 0; i < children.length; ++i) { | |
815 | var match = children[i].id.match(options.format); | |
816 | ||
817 | if (!match) continue; | |
818 | ||
819 | var child = { | |
820 | id: encodeURIComponent(match ? match[1] : null), | |
821 | element: element, | |
822 | parent: parent, | |
823 | children: [], | |
824 | position: parent.children.length, | |
825 | container: $(children[i]).down(options.treeTag) | |
826 | } | |
827 | ||
828 | /* Get the element containing the children and recurse over it */ | |
829 | if (child.container) | |
830 | this._tree(child.container, options, child) | |
831 | ||
832 | parent.children.push (child); | |
833 | } | |
834 | ||
835 | return parent; | |
836 | }, | |
837 | ||
838 | tree: function(element) { | |
839 | element = $(element); | |
840 | var sortableOptions = this.options(element); | |
841 | var options = Object.extend({ | |
842 | tag: sortableOptions.tag, | |
843 | treeTag: sortableOptions.treeTag, | |
844 | only: sortableOptions.only, | |
845 | name: element.id, | |
846 | format: sortableOptions.format | |
847 | }, arguments[1] || {}); | |
848 | ||
849 | var root = { | |
850 | id: null, | |
851 | parent: null, | |
852 | children: [], | |
853 | container: element, | |
854 | position: 0 | |
855 | } | |
856 | ||
857 | return Sortable._tree(element, options, root); | |
858 | }, | |
859 | ||
860 | /* Construct a [i] index for a particular node */ | |
861 | _constructIndex: function(node) { | |
862 | var index = ''; | |
863 | do { | |
864 | if (node.id) index = '[' + node.position + ']' + index; | |
865 | } while ((node = node.parent) != null); | |
866 | return index; | |
867 | }, | |
868 | ||
869 | sequence: function(element) { | |
870 | element = $(element); | |
871 | var options = Object.extend(this.options(element), arguments[1] || {}); | |
872 | ||
873 | return $(this.findElements(element, options) || []).map( function(item) { | |
874 | return item.id.match(options.format) ? item.id.match(options.format)[1] : ''; | |
875 | }); | |
876 | }, | |
877 | ||
878 | setSequence: function(element, new_sequence) { | |
879 | element = $(element); | |
880 | var options = Object.extend(this.options(element), arguments[2] || {}); | |
881 | ||
882 | var nodeMap = {}; | |
883 | this.findElements(element, options).each( function(n) { | |
884 | if (n.id.match(options.format)) | |
885 | nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode]; | |
886 | n.parentNode.removeChild(n); | |
887 | }); | |
888 | ||
889 | new_sequence.each(function(ident) { | |
890 | var n = nodeMap[ident]; | |
891 | if (n) { | |
892 | n[1].appendChild(n[0]); | |
893 | delete nodeMap[ident]; | |
894 | } | |
895 | }); | |
896 | }, | |
897 | ||
898 | serialize: function(element) { | |
899 | element = $(element); | |
900 | var options = Object.extend(Sortable.options(element), arguments[1] || {}); | |
901 | var name = encodeURIComponent( | |
902 | (arguments[1] && arguments[1].name) ? arguments[1].name : element.id); | |
903 | ||
904 | if (options.tree) { | |
905 | return Sortable.tree(element, arguments[1]).children.map( function (item) { | |
906 | return [name + Sortable._constructIndex(item) + "[id]=" + | |
907 | encodeURIComponent(item.id)].concat(item.children.map(arguments.callee)); | |
908 | }).flatten().join('&'); | |
909 | } else { | |
910 | return Sortable.sequence(element, arguments[1]).map( function(item) { | |
911 | return name + "[]=" + encodeURIComponent(item); | |
912 | }).join('&'); | |
913 | } | |
914 | } | |
915 | } | |
916 | ||
917 | // Returns true if child is contained within element | |
918 | Element.isParent = function(child, element) { | |
919 | if (!child.parentNode || child == element) return false; | |
920 | if (child.parentNode == element) return true; | |
921 | return Element.isParent(child.parentNode, element); | |
922 | } | |
923 | ||
924 | Element.findChildren = function(element, only, recursive, tagName) { | |
925 | if(!element.hasChildNodes()) return null; | |
926 | tagName = tagName.toUpperCase(); | |
927 | if(only) only = [only].flatten(); | |
928 | var elements = []; | |
929 | $A(element.childNodes).each( function(e) { | |
930 | if(e.tagName && e.tagName.toUpperCase()==tagName && | |
931 | (!only || (Element.classNames(e).detect(function(v) { return only.include(v) })))) | |
932 | elements.push(e); | |
933 | if(recursive) { | |
934 | var grandchildren = Element.findChildren(e, only, recursive, tagName); | |
935 | if(grandchildren) elements.push(grandchildren); | |
936 | } | |
937 | }); | |
938 | ||
939 | return (elements.length>0 ? elements.flatten() : []); | |
940 | } | |
941 | ||
942 | Element.offsetSize = function (element, type) { | |
943 | return element['offset' + ((type=='vertical' || type=='height') ? 'Height' : 'Width')]; | |
944 | } |