Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | /*** |
2 | MochiKit.DragAndDrop 1.4 | |
3 | ||
4 | See <http://mochikit.com/> for documentation, downloads, license, etc. | |
5 | ||
6 | Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) | |
7 | Mochi-ized By Thomas Herve (_firstname_@nimail.org) | |
8 | ||
9 | ***/ | |
10 | ||
11 | if (typeof(dojo) != 'undefined') { | |
12 | dojo.provide('MochiKit.DragAndDrop'); | |
13 | dojo.require('MochiKit.Base'); | |
14 | dojo.require('MochiKit.DOM'); | |
15 | dojo.require('MochiKit.Iter'); | |
16 | dojo.require('MochiKit.Visual'); | |
17 | dojo.require('MochiKit.Signal'); | |
18 | } | |
19 | ||
20 | if (typeof(JSAN) != 'undefined') { | |
21 | JSAN.use("MochiKit.Base", []); | |
22 | JSAN.use("MochiKit.DOM", []); | |
23 | JSAN.use("MochiKit.Visual", []); | |
24 | JSAN.use("MochiKit.Iter", []); | |
25 | JSAN.use("MochiKit.Signal", []); | |
26 | } | |
27 | ||
28 | try { | |
29 | if (typeof(MochiKit.Base) == 'undefined' || | |
30 | typeof(MochiKit.DOM) == 'undefined' || | |
31 | typeof(MochiKit.Visual) == 'undefined' || | |
32 | typeof(MochiKit.Signal) == 'undefined' || | |
33 | typeof(MochiKit.Iter) == 'undefined') { | |
34 | throw ""; | |
35 | } | |
36 | } catch (e) { | |
37 | throw "MochiKit.DragAndDrop depends on MochiKit.Base, MochiKit.DOM, MochiKit.Visual, MochiKit.Signal and MochiKit.Iter!"; | |
38 | } | |
39 | ||
40 | if (typeof(MochiKit.DragAndDrop) == 'undefined') { | |
41 | MochiKit.DragAndDrop = {}; | |
42 | } | |
43 | ||
44 | MochiKit.DragAndDrop.NAME = 'MochiKit.DragAndDrop'; | |
45 | MochiKit.DragAndDrop.VERSION = '1.4'; | |
46 | ||
47 | MochiKit.DragAndDrop.__repr__ = function () { | |
48 | return '[' + this.NAME + ' ' + this.VERSION + ']'; | |
49 | }; | |
50 | ||
51 | MochiKit.DragAndDrop.toString = function () { | |
52 | return this.__repr__(); | |
53 | }; | |
54 | ||
55 | MochiKit.DragAndDrop.EXPORT = [ | |
56 | "Droppable", | |
57 | "Draggable" | |
58 | ]; | |
59 | ||
60 | MochiKit.DragAndDrop.EXPORT_OK = [ | |
61 | "Droppables", | |
62 | "Draggables" | |
63 | ]; | |
64 | ||
65 | MochiKit.DragAndDrop.Droppables = { | |
66 | /*** | |
67 | ||
68 | Manage all droppables. Shouldn't be used, use the Droppable object instead. | |
69 | ||
70 | ***/ | |
71 | drops: [], | |
72 | ||
73 | remove: function (element) { | |
74 | this.drops = MochiKit.Base.filter(function (d) { | |
75 | return d.element != MochiKit.DOM.getElement(element); | |
76 | }, this.drops); | |
77 | }, | |
78 | ||
79 | register: function (drop) { | |
80 | this.drops.push(drop); | |
81 | }, | |
82 | ||
83 | unregister: function (drop) { | |
84 | this.drops = MochiKit.Base.filter(function (d) { | |
85 | return d != drop; | |
86 | }, this.drops); | |
87 | }, | |
88 | ||
89 | prepare: function (element) { | |
90 | MochiKit.Base.map(function (drop) { | |
91 | if (drop.isAccepted(element)) { | |
92 | if (drop.options.activeclass) { | |
93 | MochiKit.DOM.addElementClass(drop.element, | |
94 | drop.options.activeclass); | |
95 | } | |
96 | drop.options.onactive(drop.element, element); | |
97 | } | |
98 | }, this.drops); | |
99 | }, | |
100 | ||
101 | findDeepestChild: function (drops) { | |
102 | deepest = drops[0]; | |
103 | ||
104 | for (i = 1; i < drops.length; ++i) { | |
105 | if (MochiKit.DOM.isParent(drops[i].element, deepest.element)) { | |
106 | deepest = drops[i]; | |
107 | } | |
108 | } | |
109 | return deepest; | |
110 | }, | |
111 | ||
112 | show: function (point, element) { | |
113 | if (!this.drops.length) { | |
114 | return; | |
115 | } | |
116 | var affected = []; | |
117 | ||
118 | if (this.last_active) { | |
119 | this.last_active.deactivate(); | |
120 | } | |
121 | MochiKit.Iter.forEach(this.drops, function (drop) { | |
122 | if (drop.isAffected(point, element)) { | |
123 | affected.push(drop); | |
124 | } | |
125 | }); | |
126 | if (affected.length > 0) { | |
127 | drop = this.findDeepestChild(affected); | |
128 | MochiKit.Position.within(drop.element, point.page.x, point.page.y); | |
129 | drop.options.onhover(element, drop.element, | |
130 | MochiKit.Position.overlap(drop.options.overlap, drop.element)); | |
131 | drop.activate(); | |
132 | } | |
133 | }, | |
134 | ||
135 | fire: function (event, element) { | |
136 | if (!this.last_active) { | |
137 | return; | |
138 | } | |
139 | MochiKit.Position.prepare(); | |
140 | ||
141 | if (this.last_active.isAffected(event.mouse(), element)) { | |
142 | this.last_active.options.ondrop(element, | |
143 | this.last_active.element, event); | |
144 | } | |
145 | }, | |
146 | ||
147 | reset: function (element) { | |
148 | MochiKit.Base.map(function (drop) { | |
149 | if (drop.options.activeclass) { | |
150 | MochiKit.DOM.removeElementClass(drop.element, | |
151 | drop.options.activeclass); | |
152 | } | |
153 | drop.options.ondesactive(drop.element, element); | |
154 | }, this.drops); | |
155 | if (this.last_active) { | |
156 | this.last_active.deactivate(); | |
157 | } | |
158 | } | |
159 | }; | |
160 | ||
161 | /** @id MochiKit.DragAndDrop.Droppable */ | |
162 | MochiKit.DragAndDrop.Droppable = function (element, options) { | |
163 | var cls = arguments.callee; | |
164 | if (!(this instanceof cls)) { | |
165 | return new cls(element, options); | |
166 | } | |
167 | this.__init__(element, options); | |
168 | }; | |
169 | ||
170 | MochiKit.DragAndDrop.Droppable.prototype = { | |
171 | /*** | |
172 | ||
173 | A droppable object. Simple use is to create giving an element: | |
174 | ||
175 | new MochiKit.DragAndDrop.Droppable('myelement'); | |
176 | ||
177 | Generally you'll want to define the 'ondrop' function and maybe the | |
178 | 'accept' option to filter draggables. | |
179 | ||
180 | ***/ | |
181 | __class__: MochiKit.DragAndDrop.Droppable, | |
182 | ||
183 | __init__: function (element, /* optional */options) { | |
184 | var d = MochiKit.DOM; | |
185 | var b = MochiKit.Base; | |
186 | this.element = d.getElement(element); | |
187 | this.options = b.update({ | |
188 | ||
189 | /** @id MochiKit.DragAndDrop.greedy */ | |
190 | greedy: true, | |
191 | ||
192 | /** @id MochiKit.DragAndDrop.hoverclass */ | |
193 | hoverclass: null, | |
194 | ||
195 | /** @id MochiKit.DragAndDrop.activeclass */ | |
196 | activeclass: null, | |
197 | ||
198 | /** @id MochiKit.DragAndDrop.hoverfunc */ | |
199 | hoverfunc: b.noop, | |
200 | ||
201 | /** @id MochiKit.DragAndDrop.accept */ | |
202 | accept: null, | |
203 | ||
204 | /** @id MochiKit.DragAndDrop.onactive */ | |
205 | onactive: b.noop, | |
206 | ||
207 | /** @id MochiKit.DragAndDrop.ondesactive */ | |
208 | ondesactive: b.noop, | |
209 | ||
210 | /** @id MochiKit.DragAndDrop.onhover */ | |
211 | onhover: b.noop, | |
212 | ||
213 | /** @id MochiKit.DragAndDrop.ondrop */ | |
214 | ondrop: b.noop, | |
215 | ||
216 | /** @id MochiKit.DragAndDrop.containment */ | |
217 | containment: [], | |
218 | tree: false | |
219 | }, options || {}); | |
220 | ||
221 | // cache containers | |
222 | this.options._containers = []; | |
223 | b.map(MochiKit.Base.bind(function (c) { | |
224 | this.options._containers.push(d.getElement(c)); | |
225 | }, this), this.options.containment); | |
226 | ||
227 | d.makePositioned(this.element); // fix IE | |
228 | ||
229 | MochiKit.DragAndDrop.Droppables.register(this); | |
230 | }, | |
231 | ||
232 | /** @id MochiKit.DragAndDrop.isContained */ | |
233 | isContained: function (element) { | |
234 | if (this.options._containers.length) { | |
235 | var containmentNode; | |
236 | if (this.options.tree) { | |
237 | containmentNode = element.treeNode; | |
238 | } else { | |
239 | containmentNode = element.parentNode; | |
240 | } | |
241 | return MochiKit.Iter.some(this.options._containers, function (c) { | |
242 | return containmentNode == c; | |
243 | }); | |
244 | } else { | |
245 | return true; | |
246 | } | |
247 | }, | |
248 | ||
249 | /** @id MochiKit.DragAndDrop.isAccepted */ | |
250 | isAccepted: function (element) { | |
251 | return ((!this.options.accept) || MochiKit.Iter.some( | |
252 | this.options.accept, function (c) { | |
253 | return MochiKit.DOM.hasElementClass(element, c); | |
254 | })); | |
255 | }, | |
256 | ||
257 | /** @id MochiKit.DragAndDrop.isAffected */ | |
258 | isAffected: function (point, element) { | |
259 | return ((this.element != element) && | |
260 | this.isContained(element) && | |
261 | this.isAccepted(element) && | |
262 | MochiKit.Position.within(this.element, point.page.x, | |
263 | point.page.y)); | |
264 | }, | |
265 | ||
266 | /** @id MochiKit.DragAndDrop.deactivate */ | |
267 | deactivate: function () { | |
268 | /*** | |
269 | ||
270 | A droppable is deactivate when a draggable has been over it and left. | |
271 | ||
272 | ***/ | |
273 | if (this.options.hoverclass) { | |
274 | MochiKit.DOM.removeElementClass(this.element, | |
275 | this.options.hoverclass); | |
276 | } | |
277 | this.options.hoverfunc(this.element, false); | |
278 | MochiKit.DragAndDrop.Droppables.last_active = null; | |
279 | }, | |
280 | ||
281 | /** @id MochiKit.DragAndDrop.activate */ | |
282 | activate: function () { | |
283 | /*** | |
284 | ||
285 | A droppable is active when a draggable is over it. | |
286 | ||
287 | ***/ | |
288 | if (this.options.hoverclass) { | |
289 | MochiKit.DOM.addElementClass(this.element, this.options.hoverclass); | |
290 | } | |
291 | this.options.hoverfunc(this.element, true); | |
292 | MochiKit.DragAndDrop.Droppables.last_active = this; | |
293 | }, | |
294 | ||
295 | /** @id MochiKit.DragAndDrop.destroy */ | |
296 | destroy: function () { | |
297 | /*** | |
298 | ||
299 | Delete this droppable. | |
300 | ||
301 | ***/ | |
302 | MochiKit.DragAndDrop.Droppables.unregister(this); | |
303 | }, | |
304 | ||
305 | /** @id MochiKit.DragAndDrop.repr */ | |
306 | repr: function () { | |
307 | return '[' + this.__class__.NAME + ", options:" + MochiKit.Base.repr(this.options) + "]"; | |
308 | } | |
309 | }; | |
310 | ||
311 | MochiKit.DragAndDrop.Draggables = { | |
312 | /*** | |
313 | ||
314 | Manage draggables elements. Not intended to direct use. | |
315 | ||
316 | ***/ | |
317 | drags: [], | |
318 | ||
319 | register: function (draggable) { | |
320 | if (this.drags.length === 0) { | |
321 | var conn = MochiKit.Signal.connect; | |
322 | this.eventMouseUp = conn(document, 'onmouseup', this, this.endDrag); | |
323 | this.eventMouseMove = conn(document, 'onmousemove', this, | |
324 | this.updateDrag); | |
325 | this.eventKeypress = conn(document, 'onkeypress', this, | |
326 | this.keyPress); | |
327 | } | |
328 | this.drags.push(draggable); | |
329 | }, | |
330 | ||
331 | unregister: function (draggable) { | |
332 | this.drags = MochiKit.Base.filter(function (d) { | |
333 | return d != draggable; | |
334 | }, this.drags); | |
335 | if (this.drags.length === 0) { | |
336 | var disc = MochiKit.Signal.disconnect; | |
337 | disc(this.eventMouseUp); | |
338 | disc(this.eventMouseMove); | |
339 | disc(this.eventKeypress); | |
340 | } | |
341 | }, | |
342 | ||
343 | activate: function (draggable) { | |
344 | // allows keypress events if window is not currently focused | |
345 | // fails for Safari | |
346 | window.focus(); | |
347 | this.activeDraggable = draggable; | |
348 | }, | |
349 | ||
350 | deactivate: function () { | |
351 | this.activeDraggable = null; | |
352 | }, | |
353 | ||
354 | updateDrag: function (event) { | |
355 | if (!this.activeDraggable) { | |
356 | return; | |
357 | } | |
358 | var pointer = event.mouse(); | |
359 | // Mozilla-based browsers fire successive mousemove events with | |
360 | // the same coordinates, prevent needless redrawing (moz bug?) | |
361 | if (this._lastPointer && (MochiKit.Base.repr(this._lastPointer.page) == | |
362 | MochiKit.Base.repr(pointer.page))) { | |
363 | return; | |
364 | } | |
365 | this._lastPointer = pointer; | |
366 | this.activeDraggable.updateDrag(event, pointer); | |
367 | }, | |
368 | ||
369 | endDrag: function (event) { | |
370 | if (!this.activeDraggable) { | |
371 | return; | |
372 | } | |
373 | this._lastPointer = null; | |
374 | this.activeDraggable.endDrag(event); | |
375 | this.activeDraggable = null; | |
376 | }, | |
377 | ||
378 | keyPress: function (event) { | |
379 | if (this.activeDraggable) { | |
380 | this.activeDraggable.keyPress(event); | |
381 | } | |
382 | }, | |
383 | ||
384 | notify: function (eventName, draggable, event) { | |
385 | MochiKit.Signal.signal(this, eventName, draggable, event); | |
386 | } | |
387 | }; | |
388 | ||
389 | /** @id MochiKit.DragAndDrop.Draggable */ | |
390 | MochiKit.DragAndDrop.Draggable = function (element, options) { | |
391 | var cls = arguments.callee; | |
392 | if (!(this instanceof cls)) { | |
393 | return new cls(element, options); | |
394 | } | |
395 | this.__init__(element, options); | |
396 | }; | |
397 | ||
398 | MochiKit.DragAndDrop.Draggable.prototype = { | |
399 | /*** | |
400 | ||
401 | A draggable object. Simple instantiate : | |
402 | ||
403 | new MochiKit.DragAndDrop.Draggable('myelement'); | |
404 | ||
405 | ***/ | |
406 | __class__ : MochiKit.DragAndDrop.Draggable, | |
407 | ||
408 | __init__: function (element, /* optional */options) { | |
409 | var v = MochiKit.Visual; | |
410 | var b = MochiKit.Base; | |
411 | options = b.update({ | |
412 | ||
413 | /** @id MochiKit.DragAndDrop.handle */ | |
414 | handle: false, | |
415 | ||
416 | /** @id MochiKit.DragAndDrop.starteffect */ | |
417 | starteffect: function (innerelement) { | |
418 | this._savedOpacity = MochiKit.Style.getStyle(innerelement, 'opacity') || 1.0; | |
419 | new v.Opacity(innerelement, {duration:0.2, from:this._savedOpacity, to:0.7}); | |
420 | }, | |
421 | /** @id MochiKit.DragAndDrop.reverteffect */ | |
422 | reverteffect: function (innerelement, top_offset, left_offset) { | |
423 | var dur = Math.sqrt(Math.abs(top_offset^2) + | |
424 | Math.abs(left_offset^2))*0.02; | |
425 | return new v.Move(innerelement, | |
426 | {x: -left_offset, y: -top_offset, duration: dur}); | |
427 | }, | |
428 | ||
429 | /** @id MochiKit.DragAndDrop.endeffect */ | |
430 | endeffect: function (innerelement) { | |
431 | new v.Opacity(innerelement, {duration:0.2, from:0.7, to:this._savedOpacity}); | |
432 | }, | |
433 | ||
434 | /** @id MochiKit.DragAndDrop.onchange */ | |
435 | onchange: b.noop, | |
436 | ||
437 | /** @id MochiKit.DragAndDrop.zindex */ | |
438 | zindex: 1000, | |
439 | ||
440 | /** @id MochiKit.DragAndDrop.revert */ | |
441 | revert: false, | |
442 | ||
443 | /** @id MochiKit.DragAndDrop.scroll */ | |
444 | scroll: false, | |
445 | ||
446 | /** @id MochiKit.DragAndDrop.scrollSensitivity */ | |
447 | scrollSensitivity: 20, | |
448 | ||
449 | /** @id MochiKit.DragAndDrop.scrollSpeed */ | |
450 | scrollSpeed: 15, | |
451 | // false, or xy or [x, y] or function (x, y){return [x, y];} | |
452 | ||
453 | /** @id MochiKit.DragAndDrop.snap */ | |
454 | snap: false | |
455 | }, options || {}); | |
456 | ||
457 | var d = MochiKit.DOM; | |
458 | this.element = d.getElement(element); | |
459 | ||
460 | if (options.handle && (typeof(options.handle) == 'string')) { | |
461 | this.handle = d.getFirstElementByTagAndClassName(null, | |
462 | options.handle, this.element); | |
463 | } | |
464 | if (!this.handle) { | |
465 | this.handle = d.getElement(options.handle); | |
466 | } | |
467 | if (!this.handle) { | |
468 | this.handle = this.element; | |
469 | } | |
470 | ||
471 | if (options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) { | |
472 | options.scroll = d.getElement(options.scroll); | |
473 | this._isScrollChild = MochiKit.DOM.isChildNode(this.element, options.scroll); | |
474 | } | |
475 | ||
476 | d.makePositioned(this.element); // fix IE | |
477 | ||
478 | this.delta = this.currentDelta(); | |
479 | this.options = options; | |
480 | this.dragging = false; | |
481 | ||
482 | this.eventMouseDown = MochiKit.Signal.connect(this.handle, | |
483 | 'onmousedown', this, this.initDrag); | |
484 | MochiKit.DragAndDrop.Draggables.register(this); | |
485 | }, | |
486 | ||
487 | /** @id MochiKit.DragAndDrop.destroy */ | |
488 | destroy: function () { | |
489 | MochiKit.Signal.disconnect(this.eventMouseDown); | |
490 | MochiKit.DragAndDrop.Draggables.unregister(this); | |
491 | }, | |
492 | ||
493 | /** @id MochiKit.DragAndDrop.currentDelta */ | |
494 | currentDelta: function () { | |
495 | var s = MochiKit.Style.getStyle; | |
496 | return [ | |
497 | parseInt(s(this.element, 'left') || '0'), | |
498 | parseInt(s(this.element, 'top') || '0')]; | |
499 | }, | |
500 | ||
501 | /** @id MochiKit.DragAndDrop.initDrag */ | |
502 | initDrag: function (event) { | |
503 | if (!event.mouse().button.left) { | |
504 | return; | |
505 | } | |
506 | // abort on form elements, fixes a Firefox issue | |
507 | var src = event.target(); | |
508 | var tagName = (src.tagName || '').toUpperCase(); | |
509 | if (tagName === 'INPUT' || tagName === 'SELECT' || | |
510 | tagName === 'OPTION' || tagName === 'BUTTON' || | |
511 | tagName === 'TEXTAREA') { | |
512 | return; | |
513 | } | |
514 | ||
515 | if (this._revert) { | |
516 | this._revert.cancel(); | |
517 | this._revert = null; | |
518 | } | |
519 | ||
520 | var pointer = event.mouse(); | |
521 | var pos = MochiKit.Position.cumulativeOffset(this.element); | |
522 | this.offset = [pointer.page.x - pos.x, pointer.page.y - pos.y]; | |
523 | ||
524 | MochiKit.DragAndDrop.Draggables.activate(this); | |
525 | event.stop(); | |
526 | }, | |
527 | ||
528 | /** @id MochiKit.DragAndDrop.startDrag */ | |
529 | startDrag: function (event) { | |
530 | this.dragging = true; | |
531 | if (this.options.selectclass) { | |
532 | MochiKit.DOM.addElementClass(this.element, | |
533 | this.options.selectclass); | |
534 | } | |
535 | if (this.options.zindex) { | |
536 | this.originalZ = parseInt(MochiKit.Style.getStyle(this.element, | |
537 | 'z-index') || '0'); | |
538 | this.element.style.zIndex = this.options.zindex; | |
539 | } | |
540 | ||
541 | if (this.options.ghosting) { | |
542 | this._clone = this.element.cloneNode(true); | |
543 | this.ghostPosition = MochiKit.Position.absolutize(this.element); | |
544 | this.element.parentNode.insertBefore(this._clone, this.element); | |
545 | } | |
546 | ||
547 | if (this.options.scroll) { | |
548 | if (this.options.scroll == window) { | |
549 | var where = this._getWindowScroll(this.options.scroll); | |
550 | this.originalScrollLeft = where.left; | |
551 | this.originalScrollTop = where.top; | |
552 | } else { | |
553 | this.originalScrollLeft = this.options.scroll.scrollLeft; | |
554 | this.originalScrollTop = this.options.scroll.scrollTop; | |
555 | } | |
556 | } | |
557 | ||
558 | MochiKit.DragAndDrop.Droppables.prepare(this.element); | |
559 | MochiKit.DragAndDrop.Draggables.notify('start', this, event); | |
560 | if (this.options.starteffect) { | |
561 | this.options.starteffect(this.element); | |
562 | } | |
563 | }, | |
564 | ||
565 | /** @id MochiKit.DragAndDrop.updateDrag */ | |
566 | updateDrag: function (event, pointer) { | |
567 | if (!this.dragging) { | |
568 | this.startDrag(event); | |
569 | } | |
570 | MochiKit.Position.prepare(); | |
571 | MochiKit.DragAndDrop.Droppables.show(pointer, this.element); | |
572 | MochiKit.DragAndDrop.Draggables.notify('drag', this, event); | |
573 | this.draw(pointer); | |
574 | this.options.onchange(this); | |
575 | ||
576 | if (this.options.scroll) { | |
577 | this.stopScrolling(); | |
578 | var p, q; | |
579 | if (this.options.scroll == window) { | |
580 | var s = this._getWindowScroll(this.options.scroll); | |
581 | p = new MochiKit.Style.Coordinates(s.left, s.top); | |
582 | q = new MochiKit.Style.Coordinates(s.left + s.width, | |
583 | s.top + s.height); | |
584 | } else { | |
585 | p = MochiKit.Position.page(this.options.scroll); | |
586 | p.x += this.options.scroll.scrollLeft; | |
587 | p.y += this.options.scroll.scrollTop; | |
588 | p.x += (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0); | |
589 | p.y += (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0); | |
590 | q = new MochiKit.Style.Coordinates(p.x + this.options.scroll.offsetWidth, | |
591 | p.y + this.options.scroll.offsetHeight); | |
592 | } | |
593 | var speed = [0, 0]; | |
594 | if (pointer.page.x > (q.x - this.options.scrollSensitivity)) { | |
595 | speed[0] = pointer.page.x - (q.x - this.options.scrollSensitivity); | |
596 | } else if (pointer.page.x < (p.x + this.options.scrollSensitivity)) { | |
597 | speed[0] = pointer.page.x - (p.x + this.options.scrollSensitivity); | |
598 | } | |
599 | if (pointer.page.y > (q.y - this.options.scrollSensitivity)) { | |
600 | speed[1] = pointer.page.y - (q.y - this.options.scrollSensitivity); | |
601 | } else if (pointer.page.y < (p.y + this.options.scrollSensitivity)) { | |
602 | speed[1] = pointer.page.y - (p.y + this.options.scrollSensitivity); | |
603 | } | |
604 | this.startScrolling(speed); | |
605 | } | |
606 | ||
607 | // fix AppleWebKit rendering | |
608 | if (/AppleWebKit'/.test(navigator.appVersion)) { | |
609 | window.scrollBy(0, 0); | |
610 | } | |
611 | event.stop(); | |
612 | }, | |
613 | ||
614 | /** @id MochiKit.DragAndDrop.finishDrag */ | |
615 | finishDrag: function (event, success) { | |
616 | var dr = MochiKit.DragAndDrop; | |
617 | this.dragging = false; | |
618 | if (this.options.selectclass) { | |
619 | MochiKit.DOM.removeElementClass(this.element, | |
620 | this.options.selectclass); | |
621 | } | |
622 | ||
623 | if (this.options.ghosting) { | |
624 | // XXX: from a user point of view, it would be better to remove | |
625 | // the node only *after* the MochiKit.Visual.Move end when used | |
626 | // with revert. | |
627 | MochiKit.Position.relativize(this.element, this.ghostPosition); | |
628 | MochiKit.DOM.removeElement(this._clone); | |
629 | this._clone = null; | |
630 | } | |
631 | ||
632 | if (success) { | |
633 | dr.Droppables.fire(event, this.element); | |
634 | } | |
635 | dr.Draggables.notify('end', this, event); | |
636 | ||
637 | var revert = this.options.revert; | |
638 | if (revert && typeof(revert) == 'function') { | |
639 | revert = revert(this.element); | |
640 | } | |
641 | ||
642 | var d = this.currentDelta(); | |
643 | if (revert && this.options.reverteffect) { | |
644 | this._revert = this.options.reverteffect(this.element, | |
645 | d[1] - this.delta[1], d[0] - this.delta[0]); | |
646 | } else { | |
647 | this.delta = d; | |
648 | } | |
649 | ||
650 | if (this.options.zindex) { | |
651 | this.element.style.zIndex = this.originalZ; | |
652 | } | |
653 | ||
654 | if (this.options.endeffect) { | |
655 | this.options.endeffect(this.element); | |
656 | } | |
657 | ||
658 | dr.Draggables.deactivate(); | |
659 | dr.Droppables.reset(this.element); | |
660 | }, | |
661 | ||
662 | /** @id MochiKit.DragAndDrop.keyPress */ | |
663 | keyPress: function (event) { | |
664 | if (event.key().string != "KEY_ESCAPE") { | |
665 | return; | |
666 | } | |
667 | this.finishDrag(event, false); | |
668 | event.stop(); | |
669 | }, | |
670 | ||
671 | /** @id MochiKit.DragAndDrop.endDrag */ | |
672 | endDrag: function (event) { | |
673 | if (!this.dragging) { | |
674 | return; | |
675 | } | |
676 | this.stopScrolling(); | |
677 | this.finishDrag(event, true); | |
678 | event.stop(); | |
679 | }, | |
680 | ||
681 | /** @id MochiKit.DragAndDrop.draw */ | |
682 | draw: function (point) { | |
683 | var pos = MochiKit.Position.cumulativeOffset(this.element); | |
684 | var d = this.currentDelta(); | |
685 | pos.x -= d[0]; | |
686 | pos.y -= d[1]; | |
687 | ||
688 | if (this.options.scroll && (this.options.scroll != window && this._isScrollChild)) { | |
689 | pos.x -= this.options.scroll.scrollLeft - this.originalScrollLeft; | |
690 | pos.y -= this.options.scroll.scrollTop - this.originalScrollTop; | |
691 | } | |
692 | ||
693 | var p = [point.page.x - pos.x - this.offset[0], | |
694 | point.page.y - pos.y - this.offset[1]]; | |
695 | ||
696 | if (this.options.snap) { | |
697 | if (typeof(this.options.snap) == 'function') { | |
698 | p = this.options.snap(p[0], p[1]); | |
699 | } else { | |
700 | if (this.options.snap instanceof Array) { | |
701 | var i = -1; | |
702 | p = MochiKit.Base.map(MochiKit.Base.bind(function (v) { | |
703 | i += 1; | |
704 | return Math.round(v/this.options.snap[i]) * | |
705 | this.options.snap[i]; | |
706 | }, this), p); | |
707 | } else { | |
708 | p = MochiKit.Base.map(MochiKit.Base.bind(function (v) { | |
709 | return Math.round(v/this.options.snap) * | |
710 | this.options.snap; | |
711 | }, this), p); | |
712 | } | |
713 | } | |
714 | } | |
715 | var style = this.element.style; | |
716 | if ((!this.options.constraint) || | |
717 | (this.options.constraint == 'horizontal')) { | |
718 | style.left = p[0] + 'px'; | |
719 | } | |
720 | if ((!this.options.constraint) || | |
721 | (this.options.constraint == 'vertical')) { | |
722 | style.top = p[1] + 'px'; | |
723 | } | |
724 | if (style.visibility == 'hidden') { | |
725 | style.visibility = ''; // fix gecko rendering | |
726 | } | |
727 | }, | |
728 | ||
729 | /** @id MochiKit.DragAndDrop.stopScrolling */ | |
730 | stopScrolling: function () { | |
731 | if (this.scrollInterval) { | |
732 | clearInterval(this.scrollInterval); | |
733 | this.scrollInterval = null; | |
734 | MochiKit.DragAndDrop.Draggables._lastScrollPointer = null; | |
735 | } | |
736 | }, | |
737 | ||
738 | /** @id MochiKit.DragAndDrop.startScrolling */ | |
739 | startScrolling: function (speed) { | |
740 | if (!speed[0] && !speed[1]) { | |
741 | return; | |
742 | } | |
743 | this.scrollSpeed = [speed[0] * this.options.scrollSpeed, | |
744 | speed[1] * this.options.scrollSpeed]; | |
745 | this.lastScrolled = new Date(); | |
746 | this.scrollInterval = setInterval(MochiKit.Base.bind(this.scroll, this), 10); | |
747 | }, | |
748 | ||
749 | /** @id MochiKit.DragAndDrop.scroll */ | |
750 | scroll: function () { | |
751 | var current = new Date(); | |
752 | var delta = current - this.lastScrolled; | |
753 | this.lastScrolled = current; | |
754 | ||
755 | if (this.options.scroll == window) { | |
756 | var s = this._getWindowScroll(this.options.scroll); | |
757 | if (this.scrollSpeed[0] || this.scrollSpeed[1]) { | |
758 | var dm = delta / 1000; | |
759 | this.options.scroll.scrollTo(s.left + dm * this.scrollSpeed[0], | |
760 | s.top + dm * this.scrollSpeed[1]); | |
761 | } | |
762 | } else { | |
763 | this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000; | |
764 | this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000; | |
765 | } | |
766 | ||
767 | var d = MochiKit.DragAndDrop; | |
768 | ||
769 | MochiKit.Position.prepare(); | |
770 | d.Droppables.show(d.Draggables._lastPointer, this.element); | |
771 | d.Draggables.notify('drag', this); | |
772 | if (this._isScrollChild) { | |
773 | d.Draggables._lastScrollPointer = d.Draggables._lastScrollPointer || d.Draggables._lastPointer; | |
774 | d.Draggables._lastScrollPointer.x += this.scrollSpeed[0] * delta / 1000; | |
775 | d.Draggables._lastScrollPointer.y += this.scrollSpeed[1] * delta / 1000; | |
776 | if (d.Draggables._lastScrollPointer.x < 0) { | |
777 | d.Draggables._lastScrollPointer.x = 0; | |
778 | } | |
779 | if (d.Draggables._lastScrollPointer.y < 0) { | |
780 | d.Draggables._lastScrollPointer.y = 0; | |
781 | } | |
782 | this.draw(d.Draggables._lastScrollPointer); | |
783 | } | |
784 | ||
785 | this.options.onchange(this); | |
786 | }, | |
787 | ||
788 | _getWindowScroll: function (win) { | |
789 | var vp, w, h; | |
790 | MochiKit.DOM.withWindow(win, function () { | |
791 | vp = MochiKit.Style.getViewportPosition(win.document); | |
792 | }); | |
793 | if (win.innerWidth) { | |
794 | w = win.innerWidth; | |
795 | h = win.innerHeight; | |
796 | } else if (win.document.documentElement && win.document.documentElement.clientWidth) { | |
797 | w = win.document.documentElement.clientWidth; | |
798 | h = win.document.documentElement.clientHeight; | |
799 | } else { | |
800 | w = win.document.body.offsetWidth; | |
801 | h = win.document.body.offsetHeight; | |
802 | } | |
803 | return {top: vp.x, left: vp.y, width: w, height: h}; | |
804 | }, | |
805 | ||
806 | /** @id MochiKit.DragAndDrop.repr */ | |
807 | repr: function () { | |
808 | return '[' + this.__class__.NAME + ", options:" + MochiKit.Base.repr(this.options) + "]"; | |
809 | } | |
810 | }; | |
811 | ||
812 | MochiKit.DragAndDrop.__new__ = function () { | |
813 | MochiKit.Base.nameFunctions(this); | |
814 | ||
815 | this.EXPORT_TAGS = { | |
816 | ":common": this.EXPORT, | |
817 | ":all": MochiKit.Base.concat(this.EXPORT, this.EXPORT_OK) | |
818 | }; | |
819 | }; | |
820 | ||
821 | MochiKit.DragAndDrop.__new__(); | |
822 | ||
823 | MochiKit.Base._exportSymbols(this, MochiKit.DragAndDrop); | |
824 |