/* Copyright 2008-2013 Clipperz Srl This file is part of Clipperz, the online password manager. For further information about its features and functionalities please refer to http://www.clipperz.com. * Clipperz is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. * Clipperz is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. * You should have received a copy of the GNU Affero General Public License along with Clipperz. If not, see http://www.gnu.org/licenses/. */ /*** MochiKit.DragAndDrop 1.5 See for documentation, downloads, license, etc. Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) Mochi-ized By Thomas Herve (_firstname_@nimail.org) ***/ MochiKit.Base.module(MochiKit, 'DragAndDrop', '1.5', ['Base', 'Iter', 'DOM', 'Signal', 'Visual', 'Position']); MochiKit.DragAndDrop.Droppables = { /*** Manage all droppables. Shouldn't be used, use the Droppable object instead. ***/ drops: [], remove: function (element) { this.drops = MochiKit.Base.filter(function (d) { return d.element != MochiKit.DOM.getElement(element); }, this.drops); }, register: function (drop) { this.drops.push(drop); }, unregister: function (drop) { this.drops = MochiKit.Base.filter(function (d) { return d != drop; }, this.drops); }, prepare: function (element) { MochiKit.Base.map(function (drop) { if (drop.isAccepted(element)) { if (drop.options.activeclass) { MochiKit.DOM.addElementClass(drop.element, drop.options.activeclass); } drop.options.onactive(drop.element, element); } }, this.drops); }, findDeepestChild: function (drops) { var deepest = drops[0]; for (var i = 1; i < drops.length; ++i) { if (MochiKit.DOM.isChildNode(drops[i].element, deepest.element)) { deepest = drops[i]; } } return deepest; }, show: function (point, element) { if (!this.drops.length) { return; } var affected = []; if (this.last_active) { this.last_active.deactivate(); } MochiKit.Iter.forEach(this.drops, function (drop) { if (drop.isAffected(point, element)) { affected.push(drop); } }); if (affected.length > 0) { var drop = this.findDeepestChild(affected); MochiKit.Position.within(drop.element, point.page.x, point.page.y); drop.options.onhover(element, drop.element, MochiKit.Position.overlap(drop.options.overlap, drop.element)); drop.activate(); } }, fire: function (event, element) { if (!this.last_active) { return; } MochiKit.Position.prepare(); if (this.last_active.isAffected(event.mouse(), element)) { this.last_active.options.ondrop(element, this.last_active.element, event); } }, reset: function (element) { MochiKit.Base.map(function (drop) { if (drop.options.activeclass) { MochiKit.DOM.removeElementClass(drop.element, drop.options.activeclass); } drop.options.ondesactive(drop.element, element); }, this.drops); if (this.last_active) { this.last_active.deactivate(); } } }; /** @id MochiKit.DragAndDrop.Droppable */ MochiKit.DragAndDrop.Droppable = function (element, options) { var cls = arguments.callee; if (!(this instanceof cls)) { return new cls(element, options); } this.__init__(element, options); }; MochiKit.DragAndDrop.Droppable.prototype = { /*** A droppable object. Simple use is to create giving an element: new MochiKit.DragAndDrop.Droppable('myelement'); Generally you'll want to define the 'ondrop' function and maybe the 'accept' option to filter draggables. ***/ __class__: MochiKit.DragAndDrop.Droppable, __init__: function (element, /* optional */options) { var d = MochiKit.DOM; var b = MochiKit.Base; this.element = d.getElement(element); this.options = b.update({ /** @id MochiKit.DragAndDrop.greedy */ greedy: true, /** @id MochiKit.DragAndDrop.hoverclass */ hoverclass: null, /** @id MochiKit.DragAndDrop.activeclass */ activeclass: null, /** @id MochiKit.DragAndDrop.hoverfunc */ hoverfunc: b.noop, /** @id MochiKit.DragAndDrop.accept */ accept: null, /** @id MochiKit.DragAndDrop.onactive */ onactive: b.noop, /** @id MochiKit.DragAndDrop.ondesactive */ ondesactive: b.noop, /** @id MochiKit.DragAndDrop.onhover */ onhover: b.noop, /** @id MochiKit.DragAndDrop.ondrop */ ondrop: b.noop, /** @id MochiKit.DragAndDrop.containment */ containment: [], tree: false }, options); // cache containers this.options._containers = []; b.map(MochiKit.Base.bind(function (c) { this.options._containers.push(d.getElement(c)); }, this), this.options.containment); MochiKit.Style.makePositioned(this.element); // fix IE MochiKit.DragAndDrop.Droppables.register(this); }, /** @id MochiKit.DragAndDrop.isContained */ isContained: function (element) { if (this.options._containers.length) { var containmentNode; if (this.options.tree) { containmentNode = element.treeNode; } else { containmentNode = element.parentNode; } return MochiKit.Iter.some(this.options._containers, function (c) { return containmentNode == c; }); } else { return true; } }, /** @id MochiKit.DragAndDrop.isAccepted */ isAccepted: function (element) { return ((!this.options.accept) || MochiKit.Iter.some( this.options.accept, function (c) { return MochiKit.DOM.hasElementClass(element, c); })); }, /** @id MochiKit.DragAndDrop.isAffected */ isAffected: function (point, element) { return ((this.element != element) && this.isContained(element) && this.isAccepted(element) && MochiKit.Position.within(this.element, point.page.x, point.page.y)); }, /** @id MochiKit.DragAndDrop.deactivate */ deactivate: function () { /*** A droppable is deactivate when a draggable has been over it and left. ***/ if (this.options.hoverclass) { MochiKit.DOM.removeElementClass(this.element, this.options.hoverclass); } this.options.hoverfunc(this.element, false); MochiKit.DragAndDrop.Droppables.last_active = null; }, /** @id MochiKit.DragAndDrop.activate */ activate: function () { /*** A droppable is active when a draggable is over it. ***/ if (this.options.hoverclass) { MochiKit.DOM.addElementClass(this.element, this.options.hoverclass); } this.options.hoverfunc(this.element, true); MochiKit.DragAndDrop.Droppables.last_active = this; }, /** @id MochiKit.DragAndDrop.destroy */ destroy: function () { /*** Delete this droppable. ***/ MochiKit.DragAndDrop.Droppables.unregister(this); }, /** @id MochiKit.DragAndDrop.repr */ repr: function () { return '[' + this.__class__.NAME + ", options:" + MochiKit.Base.repr(this.options) + "]"; } }; MochiKit.DragAndDrop.Draggables = { /*** Manage draggables elements. Not intended to direct use. ***/ drags: [], register: function (draggable) { if (this.drags.length === 0) { var conn = MochiKit.Signal.connect; this.eventMouseUp = conn(document, 'onmouseup', this, this.endDrag); this.eventMouseMove = conn(document, 'onmousemove', this, this.updateDrag); this.eventKeypress = conn(document, 'onkeypress', this, this.keyPress); } this.drags.push(draggable); }, unregister: function (draggable) { this.drags = MochiKit.Base.filter(function (d) { return d != draggable; }, this.drags); if (this.drags.length === 0) { var disc = MochiKit.Signal.disconnect; disc(this.eventMouseUp); disc(this.eventMouseMove); disc(this.eventKeypress); } }, activate: function (draggable) { // allows keypress events if window is not currently focused // fails for Safari window.focus(); this.activeDraggable = draggable; }, deactivate: function () { this.activeDraggable = null; }, updateDrag: function (event) { if (!this.activeDraggable) { return; } var pointer = event.mouse(); // Mozilla-based browsers fire successive mousemove events with // the same coordinates, prevent needless redrawing (moz bug?) if (this._lastPointer && this._lastPointer.page.x == pointer.page.x && this._lastPointer.page.y == pointer.page.y) { return; } this._lastPointer = pointer; this.activeDraggable.updateDrag(event, pointer); }, endDrag: function (event) { if (!this.activeDraggable) { return; } this._lastPointer = null; this.activeDraggable.endDrag(event); this.activeDraggable = null; }, keyPress: function (event) { if (this.activeDraggable) { this.activeDraggable.keyPress(event); } }, notify: function (eventName, draggable, event) { MochiKit.Signal.signal(this, eventName, draggable, event); } }; /** @id MochiKit.DragAndDrop.Draggable */ MochiKit.DragAndDrop.Draggable = function (element, options) { var cls = arguments.callee; if (!(this instanceof cls)) { return new cls(element, options); } this.__init__(element, options); }; MochiKit.DragAndDrop.Draggable.prototype = { /*** A draggable object. Simple instantiate : new MochiKit.DragAndDrop.Draggable('myelement'); ***/ __class__ : MochiKit.DragAndDrop.Draggable, __init__: function (element, /* optional */options) { var v = MochiKit.Visual; var b = MochiKit.Base; options = b.update({ /** @id MochiKit.DragAndDrop.handle */ handle: false, /** @id MochiKit.DragAndDrop.starteffect */ starteffect: function (innerelement) { this._savedOpacity = MochiKit.Style.getStyle(innerelement, 'opacity') || 1.0; new v.Opacity(innerelement, {duration:0.2, from:this._savedOpacity, to:0.7}); }, /** @id MochiKit.DragAndDrop.reverteffect */ reverteffect: function (innerelement, top_offset, left_offset) { var dur = Math.sqrt(Math.abs(top_offset^2) + Math.abs(left_offset^2))*0.02; return new v.Move(innerelement, {x: -left_offset, y: -top_offset, duration: dur}); }, /** @id MochiKit.DragAndDrop.endeffect */ endeffect: function (innerelement) { new v.Opacity(innerelement, {duration:0.2, from:0.7, to:this._savedOpacity}); }, /** @id MochiKit.DragAndDrop.onchange */ onchange: b.noop, /** @id MochiKit.DragAndDrop.zindex */ zindex: 1000, /** @id MochiKit.DragAndDrop.revert */ revert: false, /** @id MochiKit.DragAndDrop.scroll */ scroll: false, /** @id MochiKit.DragAndDrop.scrollSensitivity */ scrollSensitivity: 20, /** @id MochiKit.DragAndDrop.scrollSpeed */ scrollSpeed: 15, // false, or xy or [x, y] or function (x, y){return [x, y];} /** @id MochiKit.DragAndDrop.snap */ snap: false }, options); var d = MochiKit.DOM; this.element = d.getElement(element); if (options.handle && (typeof(options.handle) == 'string')) { this.handle = d.getFirstElementByTagAndClassName(null, options.handle, this.element); } if (!this.handle) { this.handle = d.getElement(options.handle); } if (!this.handle) { this.handle = this.element; } if (options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) { options.scroll = d.getElement(options.scroll); this._isScrollChild = MochiKit.DOM.isChildNode(this.element, options.scroll); } MochiKit.Style.makePositioned(this.element); // fix IE this.delta = this.currentDelta(); this.options = options; this.dragging = false; this.eventMouseDown = MochiKit.Signal.connect(this.handle, 'onmousedown', this, this.initDrag); MochiKit.DragAndDrop.Draggables.register(this); }, /** @id MochiKit.DragAndDrop.destroy */ destroy: function () { MochiKit.Signal.disconnect(this.eventMouseDown); MochiKit.DragAndDrop.Draggables.unregister(this); }, /** @id MochiKit.DragAndDrop.currentDelta */ currentDelta: function () { var s = MochiKit.Style.getStyle; return [ parseInt(s(this.element, 'left') || '0', 10), parseInt(s(this.element, 'top') || '0', 10)]; }, /** @id MochiKit.DragAndDrop.initDrag */ initDrag: function (event) { if (!event.mouse().button.left) { return; } // abort on form elements, fixes a Firefox issue var src = event.target(); var tagName = (src.tagName || '').toUpperCase(); if (tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'OPTION' || tagName === 'BUTTON' || tagName === 'TEXTAREA') { return; } if (this._revert) { this._revert.cancel(); this._revert = null; } var pointer = event.mouse(); var pos = MochiKit.Position.cumulativeOffset(this.element); this.offset = [pointer.page.x - pos.x, pointer.page.y - pos.y]; MochiKit.DragAndDrop.Draggables.activate(this); event.stop(); }, /** @id MochiKit.DragAndDrop.startDrag */ startDrag: function (event) { this.dragging = true; if (this.options.selectclass) { MochiKit.DOM.addElementClass(this.element, this.options.selectclass); } if (this.options.zindex) { this.originalZ = MochiKit.Style.getStyle(this.element, 'z-index'); this.element.style.zIndex = this.options.zindex; } if (this.options.ghosting) { this._clone = this.element.cloneNode(true); this.ghostPosition = MochiKit.Position.absolutize(this.element); this.element.parentNode.insertBefore(this._clone, this.element); } if (this.options.scroll) { if (this.options.scroll == window) { var where = this._getWindowScroll(this.options.scroll); this.originalScrollLeft = where.left; this.originalScrollTop = where.top; } else { this.originalScrollLeft = this.options.scroll.scrollLeft; this.originalScrollTop = this.options.scroll.scrollTop; } } MochiKit.DragAndDrop.Droppables.prepare(this.element); MochiKit.DragAndDrop.Draggables.notify('start', this, event); if (this.options.starteffect) { this.options.starteffect(this.element); } }, /** @id MochiKit.DragAndDrop.updateDrag */ updateDrag: function (event, pointer) { if (!this.dragging) { this.startDrag(event); } MochiKit.Position.prepare(); MochiKit.DragAndDrop.Droppables.show(pointer, this.element); MochiKit.DragAndDrop.Draggables.notify('drag', this, event); this.draw(pointer); this.options.onchange(this); if (this.options.scroll) { this.stopScrolling(); var p, q; if (this.options.scroll == window) { var s = this._getWindowScroll(this.options.scroll); p = new MochiKit.Style.Coordinates(s.left, s.top); q = new MochiKit.Style.Coordinates(s.left + s.width, s.top + s.height); } else { p = MochiKit.Position.page(this.options.scroll); p.x += this.options.scroll.scrollLeft; p.y += this.options.scroll.scrollTop; p.x += (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0); p.y += (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0); q = new MochiKit.Style.Coordinates(p.x + this.options.scroll.offsetWidth, p.y + this.options.scroll.offsetHeight); } var speed = [0, 0]; if (pointer.page.x > (q.x - this.options.scrollSensitivity)) { speed[0] = pointer.page.x - (q.x - this.options.scrollSensitivity); } else if (pointer.page.x < (p.x + this.options.scrollSensitivity)) { speed[0] = pointer.page.x - (p.x + this.options.scrollSensitivity); } if (pointer.page.y > (q.y - this.options.scrollSensitivity)) { speed[1] = pointer.page.y - (q.y - this.options.scrollSensitivity); } else if (pointer.page.y < (p.y + this.options.scrollSensitivity)) { speed[1] = pointer.page.y - (p.y + this.options.scrollSensitivity); } this.startScrolling(speed); } // fix AppleWebKit rendering if (/AppleWebKit/.test(navigator.appVersion)) { window.scrollBy(0, 0); } event.stop(); }, /** @id MochiKit.DragAndDrop.finishDrag */ finishDrag: function (event, success) { var dr = MochiKit.DragAndDrop; this.dragging = false; if (this.options.selectclass) { MochiKit.DOM.removeElementClass(this.element, this.options.selectclass); } if (this.options.ghosting) { // XXX: from a user point of view, it would be better to remove // the node only *after* the MochiKit.Visual.Move end when used // with revert. MochiKit.Position.relativize(this.element, this.ghostPosition); MochiKit.DOM.removeElement(this._clone); this._clone = null; } if (success) { dr.Droppables.fire(event, this.element); } dr.Draggables.notify('end', this, event); var revert = this.options.revert; if (revert && typeof(revert) == 'function') { revert = revert(this.element); } var d = this.currentDelta(); if (revert && this.options.reverteffect) { this._revert = this.options.reverteffect(this.element, d[1] - this.delta[1], d[0] - this.delta[0]); } else { this.delta = d; } if (this.options.zindex) { this.element.style.zIndex = this.originalZ; } if (this.options.endeffect) { this.options.endeffect(this.element); } dr.Draggables.deactivate(); dr.Droppables.reset(this.element); }, /** @id MochiKit.DragAndDrop.keyPress */ keyPress: function (event) { if (event.key().string != "KEY_ESCAPE") { return; } this.finishDrag(event, false); event.stop(); }, /** @id MochiKit.DragAndDrop.endDrag */ endDrag: function (event) { if (!this.dragging) { return; } this.stopScrolling(); this.finishDrag(event, true); event.stop(); }, /** @id MochiKit.DragAndDrop.draw */ draw: function (point) { var pos = MochiKit.Position.cumulativeOffset(this.element); var d = this.currentDelta(); pos.x -= d[0]; pos.y -= d[1]; if (this.options.scroll && (this.options.scroll != window && this._isScrollChild)) { pos.x -= this.options.scroll.scrollLeft - this.originalScrollLeft; pos.y -= this.options.scroll.scrollTop - this.originalScrollTop; } var p = [point.page.x - pos.x - this.offset[0], point.page.y - pos.y - this.offset[1]]; if (this.options.snap) { if (typeof(this.options.snap) == 'function') { p = this.options.snap(p[0], p[1]); } else { if (this.options.snap instanceof Array) { var i = -1; p = MochiKit.Base.map(MochiKit.Base.bind(function (v) { i += 1; return Math.round(v/this.options.snap[i]) * this.options.snap[i]; }, this), p); } else { p = MochiKit.Base.map(MochiKit.Base.bind(function (v) { return Math.round(v/this.options.snap) * this.options.snap; }, this), p); } } } var style = this.element.style; if ((!this.options.constraint) || (this.options.constraint == 'horizontal')) { style.left = p[0] + 'px'; } if ((!this.options.constraint) || (this.options.constraint == 'vertical')) { style.top = p[1] + 'px'; } if (style.visibility == 'hidden') { style.visibility = ''; // fix gecko rendering } }, /** @id MochiKit.DragAndDrop.stopScrolling */ stopScrolling: function () { if (this.scrollInterval) { clearInterval(this.scrollInterval); this.scrollInterval = null; MochiKit.DragAndDrop.Draggables._lastScrollPointer = null; } }, /** @id MochiKit.DragAndDrop.startScrolling */ startScrolling: function (speed) { if (!speed[0] && !speed[1]) { return; } this.scrollSpeed = [speed[0] * this.options.scrollSpeed, speed[1] * this.options.scrollSpeed]; this.lastScrolled = new Date(); this.scrollInterval = setInterval(MochiKit.Base.bind(this.scroll, this), 10); }, /** @id MochiKit.DragAndDrop.scroll */ scroll: function () { var current = new Date(); var delta = current - this.lastScrolled; this.lastScrolled = current; if (this.options.scroll == window) { var s = this._getWindowScroll(this.options.scroll); if (this.scrollSpeed[0] || this.scrollSpeed[1]) { var dm = delta / 1000; this.options.scroll.scrollTo(s.left + dm * this.scrollSpeed[0], s.top + dm * this.scrollSpeed[1]); } } else { this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000; this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000; } var d = MochiKit.DragAndDrop; MochiKit.Position.prepare(); d.Droppables.show(d.Draggables._lastPointer, this.element); d.Draggables.notify('drag', this); if (this._isScrollChild) { d.Draggables._lastScrollPointer = d.Draggables._lastScrollPointer || d.Draggables._lastPointer; d.Draggables._lastScrollPointer.x += this.scrollSpeed[0] * delta / 1000; d.Draggables._lastScrollPointer.y += this.scrollSpeed[1] * delta / 1000; if (d.Draggables._lastScrollPointer.x < 0) { d.Draggables._lastScrollPointer.x = 0; } if (d.Draggables._lastScrollPointer.y < 0) { d.Draggables._lastScrollPointer.y = 0; } this.draw(d.Draggables._lastScrollPointer); } this.options.onchange(this); }, _getWindowScroll: function (win) { var vp, w, h; MochiKit.DOM.withWindow(win, function () { vp = MochiKit.Style.getViewportPosition(win.document); }); if (win.innerWidth) { w = win.innerWidth; h = win.innerHeight; } else if (win.document.documentElement && win.document.documentElement.clientWidth) { w = win.document.documentElement.clientWidth; h = win.document.documentElement.clientHeight; } else { w = win.document.body.offsetWidth; h = win.document.body.offsetHeight; } return {top: vp.y, left: vp.x, width: w, height: h}; }, /** @id MochiKit.DragAndDrop.repr */ repr: function () { return '[' + this.__class__.NAME + ", options:" + MochiKit.Base.repr(this.options) + "]"; } }; MochiKit.DragAndDrop.__new__ = function () { MochiKit.Base.nameFunctions(this); }; MochiKit.DragAndDrop.__new__(); MochiKit.Base._exportSymbols(this, MochiKit.DragAndDrop);